[
  {
    "path": ".editorconfig",
    "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\ntab_width = 2\ncontinuation_indent_size = 4 # IntelliJ family IDEs\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n"
  },
  {
    "path": ".eslintignore",
    "content": "**/node_modules\npackages/*/dist\n**/out\n*.pb.js\nscripts/documentation/*.js\n"
  },
  {
    "path": ".eslintrc.yaml",
    "content": "extends: google\nglobals:\n  goog: false\nenv:\n  browser: true\nplugins:\n  - mocha\nparserOptions:\n  ecmaVersion: 2017 # Enable async/await support in Node scripts\n  sourceType: module\nrules:\n  indent: [error, 2]\n  max-len: [error, 120]\n  no-new: warn\n  quotes: [error, single, {\"avoidEscape\": true}]\n  no-var: error\n  curly: error\n  eol-last: [error, \"always\"]\n  no-floating-decimal: error\n  no-unused-vars:\n    - error\n    # Account for closure compiler conventions. See docs/closure-compiler.md\n    # Ignores: MDC[PascalCase]Adapter (records), [PascalCase]Type (typedefs)\n    - varsIgnorePattern: ^(?:(?:MDC(?:(?:[A-Z][a-z0-9]+)+)Adapter)|(?:(?:(?:[A-Z][a-z0-9]+)+)Type))$\n\n  # TODO: Enable once https://github.com/material-components/material-components-web/milestone/4\n  # is complete\n  require-jsdoc: off\n  valid-jsdoc: off\n\n  prefer-const: error\n\n  # Rules for our mocha unit tests. Note that even though we use mocha, we model our unit tests\n  # after frameworks such as tape and ava, which encourage modern paradigms, seek to minimize\n  # shared state across tests, and try and make tests look as simple as possible.\n  mocha/handle-done-callback: error\n  mocha/no-exclusive-tests: error\n  mocha/no-hooks: error\n  mocha/no-identical-title: error\n  mocha/no-nested-tests: error\n  mocha/no-pending-tests: error\n  mocha/no-skipped-tests: error\n  mocha/valid-suite-description: [error, ^MDC.+|^webpack]\n"
  },
  {
    "path": ".gitattributes",
    "content": "linguist-documentation\ndocs/* linguist-documentation\n/package-lock.json linguist-generated\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/--bug-report.md",
    "content": "---\nname: \"\\U0001F41BBug report\"\nabout: Create a bug report to help us improve\ntitle: \"[ComponentName] title\"\nlabels: bug\nassignees: ''\n\n---\n\n<!--\nThanks for reporting the issue!\n\n  - Use these starter kits to host your demo:\n\n    Glitch: https://glitch.com/edit/#!/remix/new-web\n    Codepen: https://codepen.io/abhiomkar/pen/gQWarJ\n\n  - For general questions:\n\n    Stack Overflow: https://stackoverflow.com/questions/tagged/material-components+web\n    Discord chat room: https://discord.gg/material-components\n-->\n\n## Bug report\n<!-- A clear and concise description of what the bug is. -->\n\n### Steps to reproduce\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n### Actual behavior\n<!-- Please describe actual behaviour of the issue that you're observing. -->\n\n### Expected behavior\n<!-- A clear and concise description of what you expected to happen. -->\n\n### Screenshots\n<!-- If applicable, add screenshots to help explain your issue. -->\n\n### Your Environment:\n\n<!-- please complete the following information -->\n\n| Software         | Version(s) |\n| ---------------- | ---------- |\n| MDC Web          |\n| Browser          |\n| Operating System |\n\n### Additional context\n<!-- Add any other context about the problem here. -->\n\n### Possible solution\n<!-- Add any other context about the problem here. -->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/--feature-request.md",
    "content": "---\nname: \"\\U0001F64BFeature request\"\nabout: Suggest an idea or feature request for MDC Web\ntitle: ''\nlabels: feature-request\nassignees: ''\n\n---\n\n<!--\nIf you're interested in requesting a new component or proposing UX changes to an existing component, please read our Component Request Policy: https://github.com/material-components/material-components/blob/develop/COMPONENTS_REQUEST_POLICY.md before opening an issue.\n\nIf you have an idea for a new feature, we'd love to hear about it! Please provide enough information regarding the feature such that we'll be able to evaluate the appropriateness and feasibility of your request. Try to be as specific as possible regarding your motivation, use-case, and potential API or affects on other APIs (where applicable). The more detailed your proposal is, the easier it will be for us to understand and evaluate it.\n\nIf you'd like to work on a component, please ensure that you submit an Engineering Outline before submitting a pull request. You can read more about this in our contributing docs: https://github.com/material-components/material-components-web/blob/master/CONTRIBUTING.md#building-components.\n-->\n\n## Feature Request\n<!-- Is your feature request related to a problem? Please describe. -->\n\n### Proposed solution\n<!-- A clear and concise description of what you want to happen. -->\n\n### Alternatives considered\n<!-- A clear and concise description of any alternative solutions or features you've considered. -->\n\n### Additional context\n<!-- Add any other context or screenshots about the feature request here. -->\n"
  },
  {
    "path": ".github/semantic.yml",
    "content": "# Config file for Semantic Pull Requests Probot\n# See https://github.com/probot/semantic-pull-requests\n\n# Always validate the PR title, and ignore the commits\ntitleOnly: true\n"
  },
  {
    "path": ".github/workflows/release-canary.yml",
    "content": "name: MDC Release (Canary)\n\n# This workflow creates a pre-release and publishes packages to NPM with canary\n# tag on every commit to master.\n\non:\n  push:\n    branches:\n      - master\n    paths:\n      - \"packages/**/*.ts\"\n      - \"packages/**/*.scss\"\n      - \"**/package*.json\"\n      - \"**/.npmignore\"\n\njobs:\n  release-canary:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Clone repository\n        uses: actions/checkout@v2\n        with:\n          ref: master\n          fetch-depth: 0\n      - name: Fetch all tags\n        run: |\n          git fetch --depth=1 origin +refs/tags/*:refs/tags/*\n      - name: Setup node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 14\n          registry-url: https://registry.npmjs.org/\n      - name: Cache dependencies\n        uses: actions/cache@v2\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      - name: Install dependencies\n        run: |\n          npm ci --ignore-scripts\n          npm run bootstrap\n      - name: Build packages\n        run: |\n          npm run dist\n          node scripts/cp-pkgs.js\n          node scripts/verify-pkg-main.js\n      - name: Create canary release\n        run: |\n          npx lerna version premajor --no-git-tag-version --no-push --preid canary.$(git rev-parse --short HEAD) --yes --exact\n          git config --local user.email \"action@github.com\"\n          git config --local user.name \"GitHub Action\"\n          git commit -am \"chore: Publish\"\n      - name: Publish to NPM registry with canary tag\n        run: npx lerna publish from-package --yes --dist-tag canary\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n"
  },
  {
    "path": ".github/workflows/release-nightly.yml",
    "content": "name: MDC Release (Nightly)\n\n# This workflow creates a pre-release and publishes packages to NPM with nightly\n# if requested using Github label 'Publish to nightly'.\n\non:\n  pull_request:\n    types: [labeled]\n\njobs:\n  release-nightly:\n    if: ${{ github.event.label.name == 'Publish to nightly' }}\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - run: git switch -c \"pull-request\"\n      - name: Fetch all tags\n        run: |\n          git fetch --depth=1 origin +refs/tags/*:refs/tags/*\n      - name: Setup node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 14\n          registry-url: https://registry.npmjs.org/\n      - name: Cache dependencies\n        uses: actions/cache@v2\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      - name: Install dependencies\n        run: |\n          npm ci --ignore-scripts\n          npm run bootstrap\n      - name: Build packages\n        run: |\n          npm run dist\n          node scripts/cp-pkgs.js\n          node scripts/verify-pkg-main.js\n      - name: Create nightly release\n        run: |\n          npx lerna version premajor --no-git-tag-version --no-push --preid nightly.$(git rev-parse --short HEAD) --yes --exact\n          git config --local user.email \"action@github.com\"\n          git config --local user.name \"GitHub Action\"\n          git commit -am \"chore: Publish\"\n      - name: Publish to NPM registry with nightly tag\n        run: npx lerna publish from-package --yes --dist-tag nightly\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n"
  },
  {
    "path": ".github/workflows/release-pull-request.yml",
    "content": "name: MDC Release (Pull Request)\n\n# This workflow creates or updates (if already exists) a pull request with new\n# version bump on every commit to master.\n\non:\n  push:\n    branches:\n      - master\n    paths:\n      - \"packages/**/*.ts\"\n      - \"packages/**/*.scss\"\n      - \"**/package*.json\"\n      - \"**/.npmignore\"\n      - \"**/*.md\"\n\njobs:\n  release-pull-request:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Clone repository\n        uses: actions/checkout@v2\n        with:\n          ref: master\n          fetch-depth: 0\n      - name: Fetch all tags\n        run: |\n          git fetch --depth=1 origin +refs/tags/*:refs/tags/*\n      - name: Setup node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 14\n          registry-url: https://registry.npmjs.org/\n      - name: Cache dependencies\n        uses: actions/cache@v2\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      - name: Install dependencies\n        run: |\n          npm ci --ignore-scripts\n          npm run bootstrap\n      - name: Bump version\n        run: |\n          npx lerna version --conventional-commits --no-git-tag-version --no-push --yes\n      - name: Create PR\n        uses: peter-evans/create-pull-request@v3\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          commit-message: \"chore: Release\"\n          author: Material Web Team <material-web-action@google.com>\n          title: \"chore: Release\"\n          body: |\n            This PR was opened by [release][1] GitHub action.\n            When you're ready to do a release, you can merge this and release\n            action will automatically publishes to npm registry.\n            If you're not ready to do a release yet, that's fine, whenever you\n            add more commits to master, this PR will be updated.\n\n            [1]: http://github.com/material-components/material-components-web/tree/master/.github/workflows/release-pull-request.yml\n          branch: chore/release\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: MDC Release\n\n# This workflow does the following if repo does not have git tag that was updated in lerna.json\n#  - creates release git tag\n#  - publishes packages to NPM with latest tag\n#\n# This workflow is expected to run after merge of release pull requested created by release-pull-request workflow.\n\non:\n  push:\n    branches:\n      - master\n    paths:\n      - \"lerna.json\"\n\njobs:\n  release:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Clone repository\n        uses: actions/checkout@v2\n        with:\n          ref: master\n          fetch-depth: 0\n      - name: Fetch all tags\n        run: |\n          git fetch --depth=1 origin +refs/tags/*:refs/tags/*\n      - name: Setup node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 14\n          registry-url: https://registry.npmjs.org/\n      - name: Cache dependencies\n        uses: actions/cache@v2\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      - name: Install dependencies\n        run: |\n          npm ci --ignore-scripts\n          npm run bootstrap\n      - name: Read version created by Lerna.js\n        id: lerna_version\n        run: |\n          echo \"::set-output name=version::v$(npm run version --silent)\"\n      - name: Check if release tag is already created\n        id: vars\n        run: |\n          lerna_version=${{ steps.lerna_version.outputs.version }}\n          if [[ -z $(git tag -l \"$lerna_version\") ]]; then\n            echo \"Proceeding to create new release\"\n          else\n            echo \"New release already created, exiting.\"\n            exit 1\n          fi\n      - name: Build packages\n        run: |\n          npm run dist\n          node scripts/cp-pkgs.js\n          node scripts/verify-pkg-main.js\n          git reset --hard\n      - name: Create release\n        id: create_release\n        uses: actions/create-release@v1\n        with:\n          tag_name: ${{ steps.lerna_version.outputs.version }}\n          release_name: ${{ steps.lerna_version.outputs.version }}\n          body: |\n            See CHANGELOG file to see what's changed in new release.\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n      - name: Publish to NPM registry\n        run: npx lerna publish from-package --yes\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "name: MDC Test\n\non:\n  push:\n    branches:\n      - master\n  pull_request:\n    types: [opened, synchronize, reopened, edited]\n\njobs:\n  install:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 14\n      - uses: actions/cache@v2\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}\n          restore-keys: |\n            ${{ runner.os }}-node-\n      - uses: actions/cache@v2\n        with:\n          path: |\n            node_modules\n            packages/*/node_modules\n            !packages/*/node_modules/@material\n          key: ${{ runner.os }}-lerna-${{ hashFiles('package-lock.json', 'packages/**/package.json') }}\n      - run: npm ci --ignore-scripts\n      - run: npm run bootstrap\n  conventional-commit-check:\n    if: github.event_name == 'pull_request'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: amannn/action-semantic-pull-request@v1.2.0\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n  build-test:\n    runs-on: ubuntu-latest\n    needs: install\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 14\n      - uses: actions/cache@v2\n        with:\n          path: |\n            node_modules\n            packages/*/node_modules\n            !packages/*/node_modules/@material\n          key: ${{ runner.os }}-lerna-${{ hashFiles('package-lock.json', 'packages/**/package.json') }}\n      - run: npm run link\n      - run: |\n          npm run dist\n          node scripts/cp-pkgs.js\n          node scripts/verify-pkg-main.js\n  unit-test:\n    runs-on: ubuntu-latest\n    needs: install\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 14\n      - uses: actions/cache@v2\n        with:\n          path: |\n            node_modules\n            packages/*/node_modules\n            !packages/*/node_modules/@material\n          key: ${{ runner.os }}-lerna-${{ hashFiles('package-lock.json', 'packages/**/package.json') }}\n      - run: npm run link\n      - name: Run unit tests\n        run: |\n          # Unit tests does not run on forked repositories because GitHub\n          # secrets (that includes Sauce access info) are not shared.\n\n          if [[ -z \"$SAUCE_USERNAME$SAUCE_ACCESS_KEY\" ]]; then\n            echo \"Unit tests do not run on forked repos because of Sauce labs access. Run 'npm run test:unit' manually to verify.\"\n            exit 1\n          else\n            export SAUCE_BUILD_ID=mdc-tests-${GITHUB_EVENT_NAME}-${GITHUB_ACTION}-${GITHUB_SHA}\n            export SAUCE_TUNNEL_ID=${SAUCE_BUILD_ID}-tunnel\n            npm run test:unit\n          fi\n        env:\n          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}\n          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}\n  dependency-test:\n    runs-on: ubuntu-latest\n    needs: install\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 14\n      - uses: actions/cache@v2\n        with:\n          path: |\n            node_modules\n            packages/*/node_modules\n            !packages/*/node_modules/@material\n          key: ${{ runner.os }}-lerna-${{ hashFiles('package-lock.json', 'packages/**/package.json') }}\n      - run: npm run link\n      - name: Run dependency tests\n        run: |\n          npm run test:dependency\n"
  },
  {
    "path": ".gitignore",
    "content": "# macOS filesystem\n.DS_Store\n\n# Editors and IDEs\n.idea/\n.vscode/\n\n# Generated files\n*.log\n*.sw*\nnode_modules/\n\n# Build output\n/build/\n/dist/\n/coverage/\npackages/*/dist\npackages/**/*.js\npackages/**/*.d.ts\npackages/**/*.map\npackages/**/test/**.css\npackages/**/package-lock.json\n\n# Used by internal sync & rewrite scripts\n.rewrite-tmp/\n\n# Individual CHANGELOG files\npackages/**/CHANGELOG.md\n\n#documentation\ndocs.json\nmethodDescriptionTable.md\nscripts/documentation/tsdoc.js\n"
  },
  {
    "path": ".mdc-docsite.yml",
    "content": "# Doc site configuration.\n# TODO(shyndman): Link to documentation.\nbasepath: /web\nsite_platform: web\nsite_title: Material Components for the Web\nsite_short_title: Web\nsite_description: >\n  Material Components for Web is a set of user interface components that help developers build web apps with material design.\nrepo_url: https://github.com/material-components/material-components-web/\nrepo_stable_branch: master\n"
  },
  {
    "path": ".nvmrc",
    "content": "10.16.3\n"
  },
  {
    "path": ".sassrc.js",
    "content": "/**\n * Sass configuration file used by Parcel.js for running local demos.\n */\nconst path = require('path')\nconst glob = require('glob');\n\nconst CWD = process.cwd()\nconst includePaths = glob.sync(path.join(CWD, 'packages/mdc-*/node_modules'));\n\nmodule.exports = {\n  \"includePaths\": includePaths,\n}\n"
  },
  {
    "path": ".stylelintignore",
    "content": "**/node_modules\n**/out\nbuild/\n"
  },
  {
    "path": ".stylelintrc.yaml",
    "content": "# Keep this file in sync with internal sass/stylelint/stylelintrc.yaml file.\nplugins:\n  - stylelint-scss\n  - stylelint-prettier\nrules:\n  prettier/prettier: true\n  # This list is to be verified with tests in `e2e_test.js`, in order to verify that each rule is\n  # functioning, and that this file does not contain typos.\n  block-closing-brace-newline-after:\n    - always\n    - ignoreAtRules:\n      - if\n      - else\n  block-no-empty: true\n  color-hex-case: lower\n  color-hex-length: short\n  color-no-invalid-hex: true\n  declaration-block-no-duplicate-properties: true\n  declaration-block-no-redundant-longhand-properties: true\n  declaration-block-no-shorthand-property-overrides: true\n  declaration-block-trailing-semicolon: always\n  function-calc-no-unspaced-operator: true\n  function-url-no-scheme-relative: true\n  function-url-quotes: never\n  # Need to check if units are required for some flex properties in some browsers.\n  # length-zero-no-unit\n  no-duplicate-at-import-rules: true\n  no-eol-whitespace: true\n  no-extra-semicolons: true\n  # In MDC, @keyframe's are defined in a separate file.\n  # no-unknown-animations: true\n  # Requires known-css-parser, not yet imported into third_party.\n  # property-no-unknown: true\n  rule-empty-line-before:\n    - always\n    - ignore:\n      - after-comment\n      - first-nested\n      - inside-block\n  selector-pseudo-class-no-unknown: true\n  selector-pseudo-element-no-unknown:\n    - true\n    - ignorePseudoElements:\n        ng-deep\n  scss/at-rule-no-unknown:\n    - true\n    - ignoreAtRules:\n      - provide\n      - require\n  # No config allows this:\n  #\n  # ```scss\n  # $long-varaible-name:\n  #     (long, list, of, strings, that, is, too, wide, for, good, formatting);\n  # ```\n  #\n  # Possibly solved with request at https://github.com/kristerkari/stylelint-scss/issues/172.\n  # scss/dollar-variable-colon-space-after: always\n  scss/dollar-variable-colon-space-before: never\n  scss/operator-no-unspaced: true\n  shorthand-property-no-redundant-values: true\n  # TODO: Enable this when not conflicting with other sass file changes.\n  # string-quotes: single\n  unit-case: lower\n  unit-no-unknown:\n    - true\n    - ignoreUnits:\n      - /^[-+][\\d$(]/\n  value-keyword-case: lower\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [14.0.0](https://github.com/material-components/material-components-web/compare/v13.0.0...v14.0.0) (2022-04-27)\n\n\n### Bug Fixes\n\n* **button:** update HCM shim to use the existing focus-ring ([a657abb](https://github.com/material-components/material-components-web/commit/a657abb61a2c7d23c2bd92c3cbd54ed404d0bafe))\n* **checkbox:** Add explicit system color for checkmark in HCM. ([8c4da22](https://github.com/material-components/material-components-web/commit/8c4da223a7d35c4ca0a4f27534ecdb13087d0f1b))\n* **checkbox:** move forced-colors theme out of static styles ([bbd1126](https://github.com/material-components/material-components-web/commit/bbd11268f0ea4fd45205a642f1d26a4c4ff34e05))\n* **checkbox:** Update checkbox theme styles mixin to accept css vars ([c14e977](https://github.com/material-components/material-components-web/commit/c14e977ee36c26074b04dea5ce37e2300e9d3735))\n* **chips:** Fix typography selector in GMDC-Wiz chips theming ([43c7d87](https://github.com/material-components/material-components-web/commit/43c7d87dc0c928d74652ceaebebca51c69b6eaaf))\n* **datatable:** Adjust data table last row border-radius to support setting row background-color. ([ba78e87](https://github.com/material-components/material-components-web/commit/ba78e87246af31e1fe7dd03241a7565f2892fd64))\n* **dialog:** Render dividers in Firefox 94 on Windows HCM ([fae6c65](https://github.com/material-components/material-components-web/commit/fae6c652d7debc3e2875ab9049d806513ddc2421))\n* **dialog:** Set default z-index for close button in FloatingSheet dialog. ([3366a71](https://github.com/material-components/material-components-web/commit/3366a71d72f48e946a3f3b314b315395fafb3a1f))\n* **fab:** Add focus ring in HCM. ([d57ec74](https://github.com/material-components/material-components-web/commit/d57ec74c7e9afe5db07162202e6f05b28dd581db))\n* **focus-ring:** add 2d padding customizability, RTL bugfix ([f81fb1d](https://github.com/material-components/material-components-web/commit/f81fb1d232901c17d5794499c26e746ccab1af19))\n* **focus-ring:** box-sizing bugfix to content-box. If box-sizing border-box is inherited the ring spacing will collapse. ([e58552c](https://github.com/material-components/material-components-web/commit/e58552c6efa0442a36f441efe27cd01f3df2a524))\n* **focus-ring:** ignore pointer events ([3ef470e](https://github.com/material-components/material-components-web/commit/3ef470efe6f1d213935dca37ad213030cdd30d88))\n* **focus-ring:** RTL bugfix ([e00181e](https://github.com/material-components/material-components-web/commit/e00181e59cb1f29f4a8280f48b377a667a3e783b))\n* **iconbutton:** Fixed max width and height for high contrast mode focus ring on icon buttons. Display only in forced colors mode. ([cf42927](https://github.com/material-components/material-components-web/commit/cf429277817af685fd0b23a21a2e10ddabc4b9ef))\n* **iconbutton:** Set icon button ripple z-index to -1. ([586e740](https://github.com/material-components/material-components-web/commit/586e740ddcaa674c409d68ab5faf9ee8c61e2d91))\n* **list:** Improve a11y for multi-select lists ([9736ddc](https://github.com/material-components/material-components-web/commit/9736ddce9c12f5485e746984225919568541e88d))\n* **list:** Remove conflicting validation for checkbox list in setEnabled ([353ca7e](https://github.com/material-components/material-components-web/commit/353ca7e9f21b3589a17d25d8892198cba811dd13))\n* **list:** Update lastSelectedIndex when toggling a checkbox range ([dcba26f](https://github.com/material-components/material-components-web/commit/dcba26fe1028cf151ebf34c5947082a49cc85f10))\n* **menusurface:** Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element. ([3486659](https://github.com/material-components/material-components-web/commit/348665978ce73694ad4518626dd70cdf5b984113))\n* **radio:** Fix disabled state in Firefox Windows high contrast mode ([23043ac](https://github.com/material-components/material-components-web/commit/23043acd0e5341729230cc6e1840460977056115))\n* **radio:** Modify theme styles Sass mixin validation to validate only keys ([390220e](https://github.com/material-components/material-components-web/commit/390220e422be57e8f38b74e04d8e8aba6082d333))\n* **select:** Add border to select menu in HCM. ([5d80969](https://github.com/material-components/material-components-web/commit/5d809696c6699bf9563e8faf8f79ff6ebd78febf))\n* **select:** revert down/up arrow on anchor changing selected index ([43d08ba](https://github.com/material-components/material-components-web/commit/43d08ba77e44dffbca99194ee18dbd202c8684f7))\n* **slider:** Fix bug where secondary click moves slider thumb. ([3ab9565](https://github.com/material-components/material-components-web/commit/3ab956515feb5c861498b156e68493e6f7f2a578))\n* **slider:** Fix IE11 bug - `unset` is unsupported in IE. ([f460e23](https://github.com/material-components/material-components-web/commit/f460e23dae619c6d09de114cc8c319972b7d1b10))\n* **slider:** In updateUI, fix behavior to match jsdoc claim that when thumb param is undefined it updates both thumbs. Input attributes were not being updated at all. ([cc4ed13](https://github.com/material-components/material-components-web/commit/cc4ed13ccda7b44edce0070edd6ee215e98cc792))\n* **slider:** Make the slider errors easier to debug by providing all relevant values in the error message. ([8687937](https://github.com/material-components/material-components-web/commit/868793776d9610ab068af706297a4f4599c7f6f1))\n* **snackbar:** address Trusted Types violation ([cbd9358](https://github.com/material-components/material-components-web/commit/cbd9358a61e7626ebc12af2cdd3dc465e11ce8bf))\n* **tooltip:** Adjusts logic in `validateTooltipWithCaretDistances` method. ([3e30054](https://github.com/material-components/material-components-web/commit/3e30054fb92c75b85d2f6186f4656d36ea05d6a1))\n* **typography:** Fixes typography `theme-styles` mixin... the value being retreived from the `$theme` map and css property name was swapped. The mixin would request `font-size`/`font-weight`/`letter-spacing` from the `$theme` map (which expects `size`/`weight`/`tracking`)... so these values would always be `null`. ([32b3913](https://github.com/material-components/material-components-web/commit/32b391398aa70f2fbb917cd4649b84d87876cd8e))\n* Remove /** [@override](https://github.com/override) */ tags from TypeScript code. ([c3cdff0](https://github.com/material-components/material-components-web/commit/c3cdff07b59adb0f44b40dbbca2cf05868138528))\n* Simplify MDCAttachable interface to be any object (Function) that has `attachTo`. ([05db65e](https://github.com/material-components/material-components-web/commit/05db65ec07db5a230e2ba1144000046b09d4c44b))\n* Snackbar action button ripple color is applied to the ripple element. ([4e66fb2](https://github.com/material-components/material-components-web/commit/4e66fb2e181b35ac47ae3a6863c101d3ff4f885e))\n* Work around bug in Sass ([037285f](https://github.com/material-components/material-components-web/commit/037285f9bda55dfb2e011f7d58338b29bfa37b6b)), closes [sass/sass#3259](https://github.com/sass/sass/issues/3259)\n* **switch:** Restore Firefox 94 HCM outlines ([39cf14b](https://github.com/material-components/material-components-web/commit/39cf14bc3b0ef053219328d36faaf2636e0f77f4))\n* **textfield:** Fix breaking tests due to no valid pointerId being associated with pointer events. ([15db4f1](https://github.com/material-components/material-components-web/commit/15db4f1641bd3657ed230afacb41da84fb1077bc))\n* **tooltip:** Only sends notification of a tooltip being hidden if `showTimeout` is not set (indicating that this tooltip is about to be re-shown). ([6ca8b8f](https://github.com/material-components/material-components-web/commit/6ca8b8f858f0d508a56cf09bcb4b11221f901acb))\n\n\n### Features\n\n* **banner:** Add disableAutoClose params for both banner actions to prevent the banner buttons from automatically closing the banner. Add adapter #notifyActionClicked method. ([b094eaa](https://github.com/material-components/material-components-web/commit/b094eaa4e7a69132eb09f7b9d6c1d429a3f702a0))\n* **chips:** add focus ring styles ([783f6fd](https://github.com/material-components/material-components-web/commit/783f6fd5a29a56f6c72917546b7426f196bf4cae))\n* **chips:** Added elevation tint layer color support in chips ([c78ff04](https://github.com/material-components/material-components-web/commit/c78ff042967de7cf823a9f9826f8f613be9e4846))\n* **data-table:** separate table structure into its own mixin ([9f9d928](https://github.com/material-components/material-components-web/commit/9f9d928b2c6701707c5e5d32414c0c4db6a4d564))\n* **dialog:** Add styling for floating sheets ([78305b6](https://github.com/material-components/material-components-web/commit/78305b6d547b07aa06db04ad47b765b8f92851fa))\n* **dialog:** Add styling for floating sheets with content padding ([3e20c1d](https://github.com/material-components/material-components-web/commit/3e20c1de85fd72ff5efb3107c442036fc6317b4a))\n* **Dialog:** Adds an API to hide the header for GMDC Fullscreen Dialog in non-fullscreen mode ([ab4aba1](https://github.com/material-components/material-components-web/commit/ab4aba1afaba8f75042ed774f9e618f811bec45e))\n* **Dialog:** Adds an API to set custom position for GMDC Dialog ([ea9b5b4](https://github.com/material-components/material-components-web/commit/ea9b5b463c694804f79deaf8125c73779d34f5ce))\n* **Dialog:** Adds an API to set custom z-index for GMDC Dialog ([96ea061](https://github.com/material-components/material-components-web/commit/96ea061c1787cc329e64e9054ba1402c442a15f0))\n* **focus-ring:** added a new mixin so we can override just the focus-ring color ([641ed08](https://github.com/material-components/material-components-web/commit/641ed08513037285879a13708b95661d69c2f8b0))\n* **focus-ring:** added a new mixin so we can override just the focus-ring radius ([7321d62](https://github.com/material-components/material-components-web/commit/7321d6254d63f701b2f381c9cf11eb0708b56a6e))\n* **iconbutton:** Add link icon button Sass. ([9803d2d](https://github.com/material-components/material-components-web/commit/9803d2dc1c88e44b43a56249916f474581f5382e))\n* **mdc-list:** introduce selection change event ([7d8ea46](https://github.com/material-components/material-components-web/commit/7d8ea4624e7dcdc5ce69edf1e747c77354457f42))\n* **menu:** allow preferentially opening surface below anchor ([261f2db](https://github.com/material-components/material-components-web/commit/261f2db59382d561d6c89a7c41dafb6daad5a717))\n* **MenuSurface:** Add opening event for menus. ([53b3cad](https://github.com/material-components/material-components-web/commit/53b3cad2f5ef4d0c9d5cf03c752f27035dd7c818))\n* **select:** Add theming mixin boilerplate code to select ([ae8a6a3](https://github.com/material-components/material-components-web/commit/ae8a6a3a3e650fd068461d1236c5173c8e0467c8))\n* **select:** Add validation getter methods. ([bdf1d37](https://github.com/material-components/material-components-web/commit/bdf1d3771cd5a3c5b23a5cea63d3eaf97ded257d))\n* **select:** Added theme mixins to MDC select ([dcfe49c](https://github.com/material-components/material-components-web/commit/dcfe49c98ac25f5f5d64db021219d8a6c1caf6de))\n* **slider:** Add `minRange` param to range sliders to request a minimum gap between the two thumbs. ([8fffcb5](https://github.com/material-components/material-components-web/commit/8fffcb5ddfb93f1459d62c67f4a051b035bf9940))\n* **slider:** Add an option to hide focus styles after pointer interaction. ([ec54d90](https://github.com/material-components/material-components-web/commit/ec54d904621360bcb27e6d3cd1f33112e2a54aac))\n* **slider:** Keep the slider value indicator within the bounds of the slider if possible. ([c047f7c](https://github.com/material-components/material-components-web/commit/c047f7c19a9452aaced85ce1608b0bc2a63db223))\n* **state:** make context aware ([b2fe352](https://github.com/material-components/material-components-web/commit/b2fe3528bc1603df715c833abb5d905080681102))\n* **switch:** Add high contrast mode focus ring to switch ([f31a833](https://github.com/material-components/material-components-web/commit/f31a833fae6f132318068f30a24a12c6c0cc192f))\n* **text-field:** Add theming mixin boilerplate code to text-field ([eb382f3](https://github.com/material-components/material-components-web/commit/eb382f31889be98f4eebea1670b78c7c10f7016b))\n* **text-field:** Added theme mixins to MDC text field ([344d528](https://github.com/material-components/material-components-web/commit/344d528233437e5f9ff960913957022f05bbdc04))\n* **textfield:** adding input-font-size mixin ([207230e](https://github.com/material-components/material-components-web/commit/207230eb81e8c10cd5f962725af8c0184b8f3b62))\n* **theme:** allow custom property strings in theme.validate-theme() ([4e372fb](https://github.com/material-components/material-components-web/commit/4e372fb4937f0fe71cce7c4c829b099f9f3dcf6b))\n* add new class and mixin for open state of a menu item ([9a02b6e](https://github.com/material-components/material-components-web/commit/9a02b6ef8e8f235c7bd07cd8c6ce9078a46dbb78))\n* Indicate which thumb `valueToAriaValueTextFn` and `valueToValueIndicatorTextFn` functions are called for. ([b6510c8](https://github.com/material-components/material-components-web/commit/b6510c8c1cc3a91937180f03418ea20a0cf2387b))\n* **textfield:** adding input-font-family mixin ([991fb99](https://github.com/material-components/material-components-web/commit/991fb99f715872b49c89c44a6c98e82b4507fd14))\n* Describe how to add child lists into a list item. ([758ce31](https://github.com/material-components/material-components-web/commit/758ce31d94d065b93d09db0016ec86b56d9197ec))\n\n\n### BREAKING CHANGES\n\n* **MenuSurface:** Adds #notifyOpening method to menu surface adapter.\n\nPiperOrigin-RevId: 444830518\n* **slider:** Adds #getValueIndicatorContainerWidth method to slider adapter.\n\nPiperOrigin-RevId: 419837612\n\n\n\n\n\n# [13.0.0](https://github.com/material-components/material-components-web/compare/v12.0.0...v13.0.0) (2021-09-24)\n\n\n### Bug Fixes\n\n* Fix missing $ripple-target param for ripple mixin ([1340ee9](https://github.com/material-components/material-components-web/commit/1340ee9f7507e6653537d081c53826b5c25b3e22))\n* **banner:** Adjusting theme api selectors to use `mdc-button`. ([15981e9](https://github.com/material-components/material-components-web/commit/15981e9d95097895247fbcbd6ad9ad14c46be20e))\n* **banner:** Correcting incorrect theme values passed through to button's `theme-mixin`. ([0de2f2e](https://github.com/material-components/material-components-web/commit/0de2f2edcb53e05a97ae79c7f5fc181033fbb0cc))\n* **banner:** exclude source from npm package ([#7381](https://github.com/material-components/material-components-web/issues/7381)) ([d48a017](https://github.com/material-components/material-components-web/commit/d48a01771a5c5b080179ac34e4ef34146de5e209)), closes [#7360](https://github.com/material-components/material-components-web/issues/7360)\n* **banner:** Removing `action-<state>-label-text-color` values from MDC `light-theme` map. ([d97f8f1](https://github.com/material-components/material-components-web/commit/d97f8f133c7d59bbddc49fe39dd9c714bcbb01d4))\n* **button:** cleanup outlined button theme keys ([28d0d75](https://github.com/material-components/material-components-web/commit/28d0d75bb554be14171de19f50d082f837125f37))\n* **button:** fix touch target reset in context of link buttons ([3b8d442](https://github.com/material-components/material-components-web/commit/3b8d4429e3373661fef202613389e4f2f00b33ad))\n* **button:** remove negative padding around icons ([d470693](https://github.com/material-components/material-components-web/commit/d4706933f473925ec3a1ce6f7152208b31664538))\n* **button:** remove rem/em transformers from typography theme-styles ([a395972](https://github.com/material-components/material-components-web/commit/a395972cfaf2260da9f50875a8fe772cc3c69d83))\n* **button:** stack ripple behind content ([e1e69fd](https://github.com/material-components/material-components-web/commit/e1e69fd8e5fb5624173bc3836f92e6824596ad04))\n* **density:** typo in variable exports ([6df682e](https://github.com/material-components/material-components-web/commit/6df682e746d1c417fe00376ba6ec33bd72159757))\n* **dom:** Support providing an owner document for announcer messages. ([6236f35](https://github.com/material-components/material-components-web/commit/6236f3576a7f39f452175206f96c08b08315444b))\n* **elevation:** reduce warnings when not providing elevation tokens ([adb9f1a](https://github.com/material-components/material-components-web/commit/adb9f1ad8c85e016bbe714d9b8f2d7d28e610f91))\n* **iconbutton:** Fix icon button theme keys/light theme values based on updated tokens. ([42d175e](https://github.com/material-components/material-components-web/commit/42d175efc20e9b36eb86a843b23a60626d36e065))\n* **menu:** apply elevation overlay to new lists ([0ad12ed](https://github.com/material-components/material-components-web/commit/0ad12ed3cffe78a27c7005e2ed9b83643ebb5114))\n* **sass:** Wrap templated calc expressions in strings ([818f4ee](https://github.com/material-components/material-components-web/commit/818f4ee93de968dfaa9d64929b3edf2d9f8dbe01)), closes [#7391](https://github.com/material-components/material-components-web/issues/7391)\n* **slider:** Reorder such that dragstart event is emitted before any other events when handling drag start. ([877e3fb](https://github.com/material-components/material-components-web/commit/877e3fb0dbdaf06cf3a9b4fb0fa731df2093901c))\n* **slider:** Replace `innerHTML` with `firstChild` ([37d4db8](https://github.com/material-components/material-components-web/commit/37d4db86667c967ba173e318a124b72109cc1bb5))\n* Fix compilation issues with TypeScript 4.4 ([7246447](https://github.com/material-components/material-components-web/commit/72464476cea3755fbcbb64df832e9933ea7b1170))\n* **switch:** add pointer cursor ([12f5622](https://github.com/material-components/material-components-web/commit/12f5622e14b68c12542cb2bf7236c5a1f5492add))\n* **switch:** distribute correct css ([#7292](https://github.com/material-components/material-components-web/issues/7292)) ([7b6bcb8](https://github.com/material-components/material-components-web/commit/7b6bcb85874e81f33956d1ec544aedcdc882ffed))\n* **switch:** elevation theme custom properties not working ([2865629](https://github.com/material-components/material-components-web/commit/28656298a9c01bd585fdb995be7aa96d3c3395e7))\n* **switch:** use correct colors for icons in all HCM themes ([d86fb6f](https://github.com/material-components/material-components-web/commit/d86fb6facd014e2c0c1a88108ddbb59595dea5ac))\n* **theme:** ensure state selectors negate properly ([7249a30](https://github.com/material-components/material-components-web/commit/7249a3060c6b15eef338b44b77065b47e0b26d52))\n* **tooltip:** Add a getActiveElement() method to MDCTooltipAdapter to delegate getting the active element from the correct document. ([e334676](https://github.com/material-components/material-components-web/commit/e3346766f22b23b6c1e04cb2821565d388d57054))\n* **tooltip:** Adjust tooltip `focusout` handler. Ensures that interactive tooltips remain open when ChromeVox uses linear navigation to read non-focusable content inside the tooltip. ([7c96e6b](https://github.com/material-components/material-components-web/commit/7c96e6b98a25839d249e1d56478e919564b5ff07))\n* **tooltip:** non-persistent tooltips disappear on scroll ([1f9259b](https://github.com/material-components/material-components-web/commit/1f9259b9d7821181d8655537cf80e95b9856dd7c))\n* update combined mdc package to use new switch CSS ([077dcfc](https://github.com/material-components/material-components-web/commit/077dcfcfe483b8631f51cc16a89557d056b4db58)), closes [#7304](https://github.com/material-components/material-components-web/issues/7304)\n* **tooltip:** allow the Mac zoom service to access plain tooltip contents ([510cf90](https://github.com/material-components/material-components-web/commit/510cf90f289177cf148b2d72cdb773047410731b))\n\n\n### Code Refactoring\n\n* **fab:** Deprecate legacy Fab theme mixins ([83bdd02](https://github.com/material-components/material-components-web/commit/83bdd022246c1699de71346d5c162e1ded5a0836))\n* **iconbutton:** Forward only theme mixins from MDC icon button index module. ([0a90693](https://github.com/material-components/material-components-web/commit/0a906930027e2b55054be08aa8ce0d48dec8c25b))\n* **theme:** Rename validate-keys() to validate-theme() ([2fb068f](https://github.com/material-components/material-components-web/commit/2fb068fb0f7a1b0e038ede3a2ab27a972e5b2ee4))\n\n\n### Features\n\n* **button:** add custom props to outlined button theme-styles ([bf405d2](https://github.com/material-components/material-components-web/commit/bf405d22ae54eef77bbe437228540900aad2f0e0))\n* **button:** add custom props to protected button theme-styles ([4ca11fe](https://github.com/material-components/material-components-web/commit/4ca11fe76395824dff6b3e35d954af817ace1591))\n* **button:** add custom props to text button theme-styles ([3dd6110](https://github.com/material-components/material-components-web/commit/3dd61109132cf17b5a92a941ecc0f03b0a1cc8d5))\n* **button:** add missing transitions to box-shadow/border ([3b92903](https://github.com/material-components/material-components-web/commit/3b9290351308626b4699e2cbdaeb4dc7f04ce1d9))\n* **button:** add static-styles-without-ripple for MWC consumption ([f4241a4](https://github.com/material-components/material-components-web/commit/f4241a42a49d130fcf5b5a9df2239276628a85f1))\n* **button:** add theme mixin that emits custom properties instead ([4c40586](https://github.com/material-components/material-components-web/commit/4c405863bde72948dd131b07847b798cd8669764))\n* **button:** emit custom properties fill button theme-styles ([a80c8b2](https://github.com/material-components/material-components-web/commit/a80c8b2c263b4f69a9df57e9837f7cb4ca438428))\n* **button:** m3 elevation + icon base theme modules ([2da3606](https://github.com/material-components/material-components-web/commit/2da3606b97553ef152c9ef485432df2e0287b5de))\n* **button:** resolve elevation keys in theme mixin ([843342f](https://github.com/material-components/material-components-web/commit/843342f99a2f76895fedb1ad1b2ff88a96b3fd7d))\n* **chips:** Add theming Sass mixin to MDC Filter Chip ([8390093](https://github.com/material-components/material-components-web/commit/83900936a87a32accaab8bc8a1bdc5a998fcf18f))\n* **chips:** Add theming Sass mixin to MDC input & suggestion Chip ([860ad06](https://github.com/material-components/material-components-web/commit/860ad06a1dd8bc76334ee5954109b4623f3682db))\n* **chips:** Added theme mixins to Assist Chip ([d4e16a6](https://github.com/material-components/material-components-web/commit/d4e16a6c4876a3f144fdd1bade201f5b607b2bf6))\n* **chips:** Export all non-deprecated members through chips index ([8647986](https://github.com/material-components/material-components-web/commit/864798678626ba41619324bcd10cf5e070bdd147))\n* **chips:** Rename action's exported members to avoid naming collisions ([b49359c](https://github.com/material-components/material-components-web/commit/b49359c3581208ed7f84835c490a094699936f95))\n* **chips:** Rename chip set's exported members to avoid naming collisions ([13db34b](https://github.com/material-components/material-components-web/commit/13db34b342741b4bc35b3c6a65a74e2291e41100))\n* **chips:** Rename chip's exported members to avoid naming collisions ([470bd34](https://github.com/material-components/material-components-web/commit/470bd34e89b6683cd3a8f71bd1d3acfdf0aac5bf))\n* **data-table:** Implement row click feature to MDC data table ([8de07c0](https://github.com/material-components/material-components-web/commit/8de07c02a50247f41cefcbd292b874b82f6d09b1))\n* **data-table:** use new select + list templates for pagination ([08398f8](https://github.com/material-components/material-components-web/commit/08398f88046bfc1c3fad494b82c6e905d2fad890))\n* **dialog:** Add theme styles mixin to dialog ([21ece53](https://github.com/material-components/material-components-web/commit/21ece536071235455a6905957f3c15dd3a7ddcf8))\n* **dialog:** Separate static styles from dialog core-styles mixin ([43d2eed](https://github.com/material-components/material-components-web/commit/43d2eed2a908bae0d747b1ce4459b38cbd68c94a))\n* **fab:** create theming file for small fabs ([d082790](https://github.com/material-components/material-components-web/commit/d082790f045f4542a5ebec082ba72ba0a106bcca))\n* **fab:** prepare fab-extended for theming in MWC ([ce25bc3](https://github.com/material-components/material-components-web/commit/ce25bc3ecc6836d6c46e3789ff6eeb6faf7c07cf))\n* **iconbutton:** Add `.mdc-icon-button--display-flex` class that centers icon via flexbox. When using the new theme API, the icon button should have this class. ([8355e14](https://github.com/material-components/material-components-web/commit/8355e14dc31c618a2102a846cd8cbefa08ad6007))\n* **iconbutton:** Add MDC theme mixin that declares custom properties. ([fa7520f](https://github.com/material-components/material-components-web/commit/fa7520f6274cbab3ae7d8298554c4b0ff9e21a54))\n* **iconbutton:** Add theme styles mixin. ([65aa63b](https://github.com/material-components/material-components-web/commit/65aa63b0ca587845437a4ee2a0b47556574d800b))\n* **menu:** Added getter method to check fixed position status of menu ([fb76c50](https://github.com/material-components/material-components-web/commit/fb76c5069ebe5f62a1b01f6b2f4613d7c6bdeaae))\n* **menu:** Adds option to prevent focus from being restored after an item action. ([65084ba](https://github.com/material-components/material-components-web/commit/65084baffaca256dd9eb77aae8fbafd379d8da00))\n* **select:** start compatibility work for evolution lists ([e8554db](https://github.com/material-components/material-components-web/commit/e8554dbbf4e9886dbf7a335c4953c1611c378b68))\n* **theme:** Added `validate-theme-keys()` mixin to validate theme keys only ([457d89a](https://github.com/material-components/material-components-web/commit/457d89aadf13d719af27435758feb8f6e254fe1e))\n\n\n### BREAKING CHANGES\n\n* **menu:** Adds new menu adapter method:\n\n  /**\n   * @return the attribute string if present on an element at the index\n   * provided, null otherwise.\n   */\n  getAttributeFromElementAtIndex(index: number, attr: string): string|null;\n\nPiperOrigin-RevId: 398575780\n* **iconbutton:** MDC iconbutton `_index` Sass module will only export theme mixins.\n\nPiperOrigin-RevId: 391773229\n* **theme:** Renamed Sass mixins `validate-keys()` to `validate-theme()` in `@material/theme`\n\nPiperOrigin-RevId: 390671152\n* **fab:** Renamed Fab's mixins to deprecate legacy theme mixins.\n\nPiperOrigin-RevId: 387378201\n\n\n\n\n\n# [12.0.0](https://github.com/material-components/material-components-web/compare/v11.0.0...v12.0.0) (2021-07-27)\n\n\n### Bug Fixes\n\n* **base:** observer now listens to superclass properties ([88a33cd](https://github.com/material-components/material-components-web/commit/88a33cd70c0e87fcfb9e2ff58967f911ad71ace7))\n* **button:** allow Mac zoom service to access button label ([29ac6ec](https://github.com/material-components/material-components-web/commit/29ac6ec1ef7316ecf03dc93ac0d63a3c09250052))\n* **button:** Fix non-text buttons with icons to have reduced horizontal padding on the side with the icon. ([197f64f](https://github.com/material-components/material-components-web/commit/197f64fa2a4b78907261e820c5e1e8724777c92c))\n* **chips:** Add documentation for action ([3db4d16](https://github.com/material-components/material-components-web/commit/3db4d1680bb4135c44042ac77521c8ff18032d14))\n* **chips:** Add documentation for chip; update action docs ([22b83ad](https://github.com/material-components/material-components-web/commit/22b83adadc55d1d2ccf150bc4a4dc28432f1f453))\n* **chips:** Add stubbed component methods along with tests ([06930c9](https://github.com/material-components/material-components-web/commit/06930c96b8a27ec886fc7873d7c0d0a4bec0761a))\n* **chips:** Document chip set; add root readme ([5b6a460](https://github.com/material-components/material-components-web/commit/5b6a460167986caea058dd3f42c11c1edd761596))\n* **chips:** Hide HCM focus indicator for presentational actions ([8c7d994](https://github.com/material-components/material-components-web/commit/8c7d994ae1699fd9e51ea80a073554d12959de3f))\n* **chips:** Update chip set links ([4a7939c](https://github.com/material-components/material-components-web/commit/4a7939c9c3f3ec54bc486ee22567f9ca4e8f18bb))\n* **circular-progress:** set explicit line-height to prevent inheritance ([e8e39ad](https://github.com/material-components/material-components-web/commit/e8e39ad19d9fae1ddbf065c9047905753ccd5754)), closes [#7118](https://github.com/material-components/material-components-web/issues/7118)\n* **dialog:** prevent programmatic click on disabled default button ([e0c3462](https://github.com/material-components/material-components-web/commit/e0c346286a9656819302f04b0cf3f7b948429f74))\n* **fab:** Fixed Fab ripple ([84f3db9](https://github.com/material-components/material-components-web/commit/84f3db9ed03fc414f347bfd88be384fe50646bd8)), closes [#7053](https://github.com/material-components/material-components-web/issues/7053)\n* **icon-button:** prevent icon shift on press in IE11 ([8fc2927](https://github.com/material-components/material-components-web/commit/8fc29273c49f5bf5006f4df715bee85fbace9cb8))\n* **linear-progress:** allow parent visibility prop to propagate to bar ([e543628](https://github.com/material-components/material-components-web/commit/e543628c3924a47ba63f5b7d58a2a931a260d1d3))\n* **list:** Add core-styles mixin. ([fc7c4e5](https://github.com/material-components/material-components-web/commit/fc7c4e5ce2451ecd76f7ea3860b18a16e5f31bac))\n* **list:** density configuration mixins do not account for leading avatars ([3674c62](https://github.com/material-components/material-components-web/commit/3674c6282db170dcf8331f93d779055c3852076b))\n* **list:** Ensure trailing-only variants have leading padding in RTL contexts. ([81e2d4f](https://github.com/material-components/material-components-web/commit/81e2d4ff36518c586972aad4512b43d2bb0cd2d2))\n* **list:** Fixed the selected + focused state of list item in HCM ([8ba3e29](https://github.com/material-components/material-components-web/commit/8ba3e298ca18cf8e7e11f07559e27287e74efeb8))\n* **list:** Reset selectedIndex to UNSET_INDEX if #setSingleSelection(true) is called and there are no selected list items. ([4eecdea](https://github.com/material-components/material-components-web/commit/4eecdeaf09ed0429aa685ee35ea2ce7970af89cc))\n* **list:** Selection lists without a selection focus first item. ([03f525f](https://github.com/material-components/material-components-web/commit/03f525f9ff880f27a43f2e50851a5dc6cd6b022c))\n* **list:** Use more descriptive foundation method comments ([08d791f](https://github.com/material-components/material-components-web/commit/08d791f37a159f24686e97df983637947e2a1e87))\n* **mdc-list:** invalid syntax in generated .d.ts bundle ([ce82846](https://github.com/material-components/material-components-web/commit/ce828464cdab59cac79add950fcac4f0310ce624))\n* **menu:** correct menu opening delay ([a618380](https://github.com/material-components/material-components-web/commit/a6183801a07f109eff3ee209f42631340fbbe4b3)), closes [#5682](https://github.com/material-components/material-components-web/issues/5682) [#4411](https://github.com/material-components/material-components-web/issues/4411)\n* **menu-surface:** slightly delay focus restoration to prevent lost focus on mobile devices ([9f68a93](https://github.com/material-components/material-components-web/commit/9f68a932e9d4168da10d8b9c3bb9191afcc3c68f))\n* **ripple:** ensure custom properties are always emitted ([caa73ae](https://github.com/material-components/material-components-web/commit/caa73aeeea780ff65d4434fe1f38cec9396209c4))\n* **rtl:** do not emit if a left/right value or replacement is null ([ec4ac52](https://github.com/material-components/material-components-web/commit/ec4ac5234c31df882a85a90af4d53b6797c8eb49))\n* **rtl:** mixins work with pseudo elements ([f5b6110](https://github.com/material-components/material-components-web/commit/f5b6110d6a3c5ef1253165f5575ed3980748e19c))\n* **switch:** export temporary deprecated version ([bd68539](https://github.com/material-components/material-components-web/commit/bd685395b652f448e889c123cda97efd77c85fcd))\n* **switch:** misaligned handle when inside some flex containers ([ea1e1b8](https://github.com/material-components/material-components-web/commit/ea1e1b850795bd2b6ab7369a9c1e61d4b0d85f2e))\n* **switch:** move ripple behind handle ([3e4c6dc](https://github.com/material-components/material-components-web/commit/3e4c6dca1921caa57e1097c03135a7ddf614f003))\n* **switch:** overlay colors not showing and support -5 density ([33579e0](https://github.com/material-components/material-components-web/commit/33579e00bea179170016031fc3f24b70f57d74d2))\n* **switch:** prevent collapsing in flex containers ([22f390c](https://github.com/material-components/material-components-web/commit/22f390c4364f0fc407106933154d68ae9e1ed950))\n* **switch:** track colors can have opacity and not bleed through ([d923db7](https://github.com/material-components/material-components-web/commit/d923db73aa8db14c0d573208877d8cb6f4a57002))\n* **tabscroller:** remove trailing underscore ([105b15b](https://github.com/material-components/material-components-web/commit/105b15b965e41bfaafedfb43e278cd5cb9d22195))\n* **text-field:** remove disabled white patch in high contrast mode for Firefox 89+ ([17553e9](https://github.com/material-components/material-components-web/commit/17553e9f806551fba7d7b4d5c3b6de5df96db1af))\n* prepare for [#7183](https://github.com/material-components/material-components-web/issues/7183) ([#7188](https://github.com/material-components/material-components-web/issues/7188)) ([77b94e8](https://github.com/material-components/material-components-web/commit/77b94e826c6c8c932bc5974855c645f7316f73af))\n* **text-field:** show filled textarea label in Firefox 89+ high contrast ([90e08fc](https://github.com/material-components/material-components-web/commit/90e08fc6b82c805ab74d35b75b2e0c8fc72d6405))\n* **textfield:** announce error message again if user blurs already invalid field ([75900a5](https://github.com/material-components/material-components-web/commit/75900a5a916249aa307626f7f6b441086146e1c0))\n* **tooltip:** Adding missing `return` statement into `MDCTooltipComponent#isShown` method. ([4d95812](https://github.com/material-components/material-components-web/commit/4d95812f95ea60665fdab32a1ef8ff4d4e36a8b0))\n* **tooltip:** Fixing component definition of MDCTooltipAdatper#deregisterAnchorEventHandler. ([d928692](https://github.com/material-components/material-components-web/commit/d928692b52157c91c46c9addf66f93ebdff09145))\n* **tooltip:** Fixing logic for determining whether or not the user intends a tooltip to be hidden from the screenreader or not. ([cf5b9eb](https://github.com/material-components/material-components-web/commit/cf5b9eb86b764859ed8228377d4dd6dc7d2193c6))\n* Remove lint check from test actions ([#7185](https://github.com/material-components/material-components-web/issues/7185)) ([1ee1fbf](https://github.com/material-components/material-components-web/commit/1ee1fbf01550f9ea19a72671e6fe360722d66385))\n* **touch-target:** incorrect position in rtl when width is set ([bd1b4e9](https://github.com/material-components/material-components-web/commit/bd1b4e9d857f0b8fb7b5b9de9b8d5d78823f386d))\n\n\n### Build System\n\n* set AMD module module names within UMD bundles ([#7233](https://github.com/material-components/material-components-web/issues/7233)) ([9808de0](https://github.com/material-components/material-components-web/commit/9808de09310368c6352a0d40db84a802069d743d))\n\n\n### Code Refactoring\n\n* **checkbox:** Deprecated old checkbox theme mixin ([22d29cb](https://github.com/material-components/material-components-web/commit/22d29cbb4e7847ae56bf923d70508d1b164c1af6))\n* **iconbutton:** Move ripple target to inner element ([33c9a73](https://github.com/material-components/material-components-web/commit/33c9a737af75f30f434565e98ada51b335495f0a))\n\n\n### Features\n\n* **base:** add MDCObserverFoundation class ([33e6f50](https://github.com/material-components/material-components-web/commit/33e6f50e915d5f2b70076fd0eb0e0d6654acba0c))\n* **button:** Add focus indicator to link buttons in HCM. ([cad4896](https://github.com/material-components/material-components-web/commit/cad4896899cc89b1354ba5df95c3870efbb99af5))\n* **button:** add typography & state layer keys to theming API ([068fd50](https://github.com/material-components/material-components-web/commit/068fd5028031778ada1f9f8469ac62ed60c9e7ef))\n* **button:** employ elevation token resolvers in theming API ([ebb5c73](https://github.com/material-components/material-components-web/commit/ebb5c73bb87f1098d7e300372a811968a2d6c9f0))\n* **button:** move icon-size to theming API ([85e9a6a](https://github.com/material-components/material-components-web/commit/85e9a6ac3ca1c9395d0d955326c3c1a7c3fe1a04))\n* **card:** Moving ripple into a `mdc-card__ripple` element rather than the `mdc-card__primary-action`. ([8ace3b8](https://github.com/material-components/material-components-web/commit/8ace3b8106499cc9c126abde77258bcae7d5929d))\n* **checkbox:** Added new theme mixin in checkbox to match token keys ([33a9548](https://github.com/material-components/material-components-web/commit/33a9548526d90fe41aae1e89c925720505fa5f85))\n* **checkbox:** Added new theme mixin in checkbox to match token keys ([8e60818](https://github.com/material-components/material-components-web/commit/8e608183652b1cd051981a4266cae66b5591a148))\n* **chips:** Support presentational actions ([8c68530](https://github.com/material-components/material-components-web/commit/8c685301d66ac6c8bc59b6b12930efd23804cce3))\n* **dialog:** removing call to `#close` within `#destroy`. ([5631828](https://github.com/material-components/material-components-web/commit/5631828e1541df22feb879a5310e57494ee722a3))\n* **dom:** add forced-colors-mode mixin ([8416fb9](https://github.com/material-components/material-components-web/commit/8416fb9195afcba61494bae1206dd1503dffb140))\n* **elevation:** Create elevation resolver mixin ([5dfec7a](https://github.com/material-components/material-components-web/commit/5dfec7a1445efb45a7fb4d96ce037cafab205f30))\n* **elevation:** Create resolver function ([c18b592](https://github.com/material-components/material-components-web/commit/c18b5925be3041e774b19f5f6f53f7d3a45d2240))\n* **elevation:** Simplify box-shadow custom property support ([de48eff](https://github.com/material-components/material-components-web/commit/de48eff0d803b4e6c93834904e486cfea47bb03a))\n* **elevation:** Support custom properties in resolver ([07a7375](https://github.com/material-components/material-components-web/commit/07a73750c0ebc1d05e19681c6f072cd5cceddfb6))\n* **fab:** Added mixin that auto-generates custom properties for Fab ([8530d35](https://github.com/material-components/material-components-web/commit/8530d351494fc9a88e8e0dfd5e5d58de81a983d9))\n* **fab:** Added mixin to auto-generate custom properties for Fab ([14767a8](https://github.com/material-components/material-components-web/commit/14767a8db432f8834d74a31e1577c3557a38c6d9))\n* **fab:** Use elevation resolvers ([6e9fc4a](https://github.com/material-components/material-components-web/commit/6e9fc4a423a4657cc5d718aaf13d360c3bd27709))\n* **fab:** Use elevation resolvers in custom property themes ([3f691ec](https://github.com/material-components/material-components-web/commit/3f691eccf61489d40e49bdf9f149b1591168c828))\n* **iconbutton:** Add support for increased touch target to icon button. ([f43af56](https://github.com/material-components/material-components-web/commit/f43af5633f08e8080daed2e976771448d3effadb))\n* **list:** Add public #getFocusedItemIndex to foundation. Also add a `forceUpdate` option to #setSelectedIndex that forces a UI update of the selected item. ([5d06051](https://github.com/material-components/material-components-web/commit/5d060518804437aa1ae3152562f1bb78b1af4aa6))\n* **list:** Basic support for three-line lists. ([4bb5eea](https://github.com/material-components/material-components-web/commit/4bb5eea2b81268d4dc2f838beccb44dd4ff2857d))\n* **menu:** Add public #getSelectedIndex to foundation. ([f705e80](https://github.com/material-components/material-components-web/commit/f705e8048ae60aceead575dfc35c8bb6233e9d23))\n* **radio:** Added theme mixin that declares custom properties in MDC radio ([b87ebf7](https://github.com/material-components/material-components-web/commit/b87ebf74d4ca7de26552a9e55d79280a83ca05a9))\n* **radio:** Added theme styles mixin to MDC radio ([464a002](https://github.com/material-components/material-components-web/commit/464a00286cbccfa256beb879631690277776486f))\n* **radio:** Added theme styles mixin to Radio ([5823407](https://github.com/material-components/material-components-web/commit/5823407a71dc51fdf9919f3a85f62fcf125ec27b))\n* **ripple:** Added theme styles and theme mixin to Ripple ([a2b0f4c](https://github.com/material-components/material-components-web/commit/a2b0f4cee3278c71d3ee2905f60dd37af6ee507c))\n* **select:** Add #getUseDefaultValidation method to foundation. ([adeac05](https://github.com/material-components/material-components-web/commit/adeac0549eb04c5d4cd050d2e52378f7edbfa37e))\n* **shape:** add shape map theme value support ([ec31ae1](https://github.com/material-components/material-components-web/commit/ec31ae1ed1e6483d972f0eddece0fbf30ac721c2))\n* **slider:** Expose changing certain props after initialization to support MWC ([3f36ac7](https://github.com/material-components/material-components-web/commit/3f36ac75c431ee228807e04e985d2064a3274bd7))\n* **switch:** add custom property theming support ([f147a22](https://github.com/material-components/material-components-web/commit/f147a2271bba2b4f1ae4df403baf86bac974b120))\n* **switch:** add density custom property support ([598fccc](https://github.com/material-components/material-components-web/commit/598fcccc8d8945c0527a0553a6a937ddfdd80a8f))\n* **switch:** add new component and foundation ([ef43e6d](https://github.com/material-components/material-components-web/commit/ef43e6d9607c7e8d6495b4a82e2178059dbe37fa))\n* **switch:** add updated density styles ([cb162da](https://github.com/material-components/material-components-web/commit/cb162da374f5e5d613e6a4554f0e1efcdc443c04))\n* **switch:** add updated RTL styles ([573dc7f](https://github.com/material-components/material-components-web/commit/573dc7ffd479527a885e95f4c8ece270363a31cc))\n* **switch:** update switch to new design spec ([0ce2fdb](https://github.com/material-components/material-components-web/commit/0ce2fdb02a62bb31f945144aac58957989ecfba6))\n* **switch:** update theme keys ([00b5899](https://github.com/material-components/material-components-web/commit/00b5899dcf803dcdf3795e70a970abafa247e1b3))\n* **switch:** Use elevation token resolvers ([e1703be](https://github.com/material-components/material-components-web/commit/e1703bed9ba624d450cddbc5f07b08eb822f46ef))\n* **tabs:** Add theming API to tabs ([bd25779](https://github.com/material-components/material-components-web/commit/bd25779b2bc6d10a00fbc19573f94a716f165cdf))\n* **tabs:** Added theme-styles() mixin to tabs ([e38d744](https://github.com/material-components/material-components-web/commit/e38d7440f43c3ffe31407f1a76a35c482c42f7c5))\n* **test:** Add overline support to two- and three-line lists. ([38d1846](https://github.com/material-components/material-components-web/commit/38d1846cca4f9abbcf2c073add3191bde0e03ffb))\n* **test:** Add shape radius mixins to list. ([d5f1f7c](https://github.com/material-components/material-components-web/commit/d5f1f7c722ada3b62265e12e47a6f714d5bd7351))\n* **theme:** add map-ext.split() helper function ([ec22e1d](https://github.com/material-components/material-components-web/commit/ec22e1da9746b38de654a18b0161c40c74e4e74f))\n* **theme:** add state selector mixins ([d20dc6d](https://github.com/material-components/material-components-web/commit/d20dc6dba8e8824645404d0eaafa763d8b026ef0))\n* **theme:** gss.annotate supports named arguments ([c50d20b](https://github.com/material-components/material-components-web/commit/c50d20bab49d5c00dd0a74e8616d02d8d87fba89))\n* **theme:** theme.property() supports custom prop declarations ([474836a](https://github.com/material-components/material-components-web/commit/474836ad0f4f92d03ce7dd0c9f923b6ff9abac7c))\n* **tooltip:** Adding foundation methods to allow users to configure the tooltip show and hide delay time. ([08db3d7](https://github.com/material-components/material-components-web/commit/08db3d737fa49893d1c3d1d3f7dd07367dd9eaeb))\n* **tooltip:** Adds logic for generating a new tooltip position when all \"standard\" positions for tooltip w/ caret are invalid. ([9bc0eff](https://github.com/material-components/material-components-web/commit/9bc0effaf60a530bed8247f2bb9190dcbbbdec54))\n* **tooltip:** Adds logic to determine valid position options for tooltip w/caret, and select which should be used. ([2ebfc53](https://github.com/material-components/material-components-web/commit/2ebfc537439508ea08bcd99991eed4fe838f3550))\n* **tooltip:** Adjusting `transform-origin` for tooltips with caret so that the entrance animation originates from the caret. ([1a8d064](https://github.com/material-components/material-components-web/commit/1a8d064838299e07e97e5f30470c76c03074ac42))\n* Create token package with resolvers ([9405502](https://github.com/material-components/material-components-web/commit/940550232c7925150e597c4f56433b7e5df59099))\n* **tooltip:** Adjusting logic and styles so the caret better matches spec. ([55ad2d7](https://github.com/material-components/material-components-web/commit/55ad2d7d8f9bcc979f5334352620815d6ea9add6))\n* **tooltip:** Fixes ordering of values provided to `tranform-origin`. ([25751d2](https://github.com/material-components/material-components-web/commit/25751d2ed4061129f206bdbc6682052b0c76709e))\n* **tooltip:** Plain tooltips remain visible if the user hovers over them. ([ccce99c](https://github.com/material-components/material-components-web/commit/ccce99cd630b5a49ed40ba95b0e3d3d6fea74801))\n\n\n### Reverts\n\n* **checkbox:** Added new theme mixin in checkbox to match token keys ([b4c3f51](https://github.com/material-components/material-components-web/commit/b4c3f513eb1b42fa3844a265ccabb1e8644ea123))\n\n\n### BREAKING CHANGES\n\n* **tooltip:** - Tooltips intended to be hidden from the screen reader should be annotated with `data-hide-tooltip-from-screenreader=\"true\"` (in addition to using `data-tooltip-id` rather than `aria-describedby`.\n\nPiperOrigin-RevId: 386490861\n* Breaking change for the UMD-case where the exports are bound to a global variable. Previously the entry-point would appear in camel-case, but now it's matching the actual package name in dash-case. This is unfortunately not avoidable with the current Webpack tooling. i.e. previous UMD users relying on the globals (which are rather rare anyway), would need to switch from `window.mdc.circularProgress` to `window.mdc['circular-progress]`.\n* **checkbox:** Renamed old checkbox theme mixin for deprecation\n\nPiperOrigin-RevId: 384568221\n* **iconbutton:** Icon button now requires an inner ripple element with\nclass `mdc-icon-button__ripple`. See README for details.\n\nPiperOrigin-RevId: 372153409\n\n\n\n\n\n# [11.0.0](https://github.com/material-components/material-components-web/compare/v10.0.0...v11.0.0) (2021-04-15)\n\n\n### Bug Fixes\n\n* **banner:** Use role alertdialog. ([a07b6d4](https://github.com/material-components/material-components-web/commit/a07b6d486a7852a2089c9c13d5cf80d4ab65a425))\n* **button:** add missing feature-targeting import ([71fe9a0](https://github.com/material-components/material-components-web/commit/71fe9a067878c810fe6a7d01b8e839764d7a802c))\n* **button:** Fixed button's icon size scaling on browser zoom ([bc104ba](https://github.com/material-components/material-components-web/commit/bc104bae7c4e1bbcbedb085e6079432f06865cbf))\n* **chips:** Expose deprecated resources in top-level TypeScript file ([67d780c](https://github.com/material-components/material-components-web/commit/67d780c795e2a61772f5d1639c202ced3fbc4dc4))\n* **chips:** Fix incorrect references between deprecated and non-deprecated resources ([f8579b7](https://github.com/material-components/material-components-web/commit/f8579b7eaa22bf9da04ea5e4ec27418e001a0813))\n* **chips:** Make chips wrap by default ([24255c4](https://github.com/material-components/material-components-web/commit/24255c408518dff48ed59c2529ee3d0496d6b40c))\n* **chips:** Remove obsolete chips resources now in chips/deprecated/* ([87ac2fd](https://github.com/material-components/material-components-web/commit/87ac2fd5ca4ec7814216d16a0b0ef6a4474d7e92))\n* **chips:** Remove obsolete resources ([40dd242](https://github.com/material-components/material-components-web/commit/40dd242d5ce4586002a8e5cb59ce2711572f1cf3))\n* **chips:** rename deprecated trailing action classes ([48f4b67](https://github.com/material-components/material-components-web/commit/48f4b67fbd0d43377670673e56cb5868b3a11e1d))\n* **chips:** Un-remove obsolete chips resources now in chips/deprecated/* ([7cf6782](https://github.com/material-components/material-components-web/commit/7cf67823ec45a93f5b458060b2ec632479d813c9))\n* **chips:** Use deprecated chips in autoinit ([d2a39d3](https://github.com/material-components/material-components-web/commit/d2a39d300e3b9dee6c0d58d34522075f62b261c3))\n* **circular-progress:** add annotation ([06dead2](https://github.com/material-components/material-components-web/commit/06dead2d69d09dfde582d0d9fb1473a61358a5f6))\n* **dialog:** Add transparent border to dialog surface for HCM support. ([b2fa996](https://github.com/material-components/material-components-web/commit/b2fa996a1faa513fae691920cb339091d65b6c9b))\n* **dialog:** Remove the unnecessary border on the dialog title when not needed, this adds an extra line in the UI on high contrast mode. With margins it is possible to keep the previous spacing and only add the border when needed. ([3344d12](https://github.com/material-components/material-components-web/commit/3344d12ad2eb74cfc4ef270290bcc0322ebe8566))\n* **dom:** do not cache focusable elements in focus-trap ([7899e0f](https://github.com/material-components/material-components-web/commit/7899e0fe0a87cb255a5216333054207ef2687933))\n* **fab:** add alternate decorator only when necessary ([0fd56a8](https://github.com/material-components/material-components-web/commit/0fd56a86b30846de63d7d1520dcecc4d5ece2347))\n* **fab:** Apply extended shape radius in Extended FAB's theme mixin ([81911b7](https://github.com/material-components/material-components-web/commit/81911b7077801590c0f47bf17743f3b2b320b863))\n* **list:** Correcting the selector mapping for CHILD_ELEMENTS_TO_TOGGLE_TABINDEX and FOCUSABLE_CHILD_ELEMENTS. ([8943b99](https://github.com/material-components/material-components-web/commit/8943b991fd04caab88ae543bad16ba9b47bc7634)), closes [#6829](https://github.com/material-components/material-components-web/issues/6829) [#6829](https://github.com/material-components/material-components-web/issues/6829)\n* **list:** do not activate typeahead on certain modifier keys ([f1b1fd5](https://github.com/material-components/material-components-web/commit/f1b1fd5d3fa72c0a5dab305e3d7e782ff1421d7e))\n* **progress-indicators:** hide from screenreaders on close ([d3a6862](https://github.com/material-components/material-components-web/commit/d3a6862af3ff4f0e157ebe95bd5f54a47fc14c48))\n* **ripple:** Update states-selector() to use `:active:active` to match active specificity styles. ([faa7d32](https://github.com/material-components/material-components-web/commit/faa7d3226edbb15bdfca69e5ae98b2d7afdd861a))\n* **select:** do not conduct anchor typeahead when modifier keys pressed ([6f678a9](https://github.com/material-components/material-components-web/commit/6f678a91a400ac3408e06523d18a134cf3513f6b))\n* **select:** set hidden input value before firing change event ([2d6ba2c](https://github.com/material-components/material-components-web/commit/2d6ba2c239dfc7d4c2516507b11a32537c163852)), closes [#6904](https://github.com/material-components/material-components-web/issues/6904)\n* **shape:** duplication bug with nested custom properties ([f77a4dd](https://github.com/material-components/material-components-web/commit/f77a4dd1a3eb4f6af2b5a7695081408de41211b7))\n* **slider:** Fire custom `input` event on input change (i.e. value change via keyboard), mirroring the native `input` event behavior for range inputs. ([ec8f846](https://github.com/material-components/material-components-web/commit/ec8f8465f40bd13f61e2ad26c52314fc27fd5420))\n* **slider:** Fix #quantize to use min value as the baseline. ([0f358dd](https://github.com/material-components/material-components-web/commit/0f358ddae37a8703b8b6f0b8e4de846a196d443a))\n* **slider:** Fix JS floating point rounding errors by rounding values to a set number of decimal places based on the step size. ([6072ed6](https://github.com/material-components/material-components-web/commit/6072ed6040e1f65e099b876a4065fbb07378c186))\n* **slider:** Fix track height. ([67eb0df](https://github.com/material-components/material-components-web/commit/67eb0df80920a53e04fc151b3ab065959e3e84dc))\n* **slider:** Improve HCM borders, add missing [@noflip](https://github.com/noflip) annotations. ([e7202cb](https://github.com/material-components/material-components-web/commit/e7202cb576ff762664a3636ec01cebfa5a61be49))\n* **slider:** Modify behavior such that for range sliders, presses in the middle of the range change the value (of the closest thumb). This provides a single-pointer alternative option to an otherwise gesture-based interaction. ([0b8cff7](https://github.com/material-components/material-components-web/commit/0b8cff73421489a5322dd39b8504c16ba0f26120))\n* **slider:** Throttle slider UI updates. ([7d6a4bb](https://github.com/material-components/material-components-web/commit/7d6a4bb72f210c94161568f964e33cd8b06a8315))\n* **slider:** Throw error for invalid initial values based on the step. ([3955d8d](https://github.com/material-components/material-components-web/commit/3955d8d3d2ba2766b59338f0ed7ae640388ce926))\n* **tab:** Update ripple adapter to reflect sass ripple-target. ([97c4d40](https://github.com/material-components/material-components-web/commit/97c4d40356fcc89d9eb854ecf322ec7474aa597c))\n* **theme:** do not emit when theme.property() replacements are null ([aa0aaf0](https://github.com/material-components/material-components-web/commit/aa0aaf026aae13532b3e3790992e9cc06397aa91))\n* **theme:** parsing error when [@import-ing](https://github.com/import-ing) mdc-theme ([b62b126](https://github.com/material-components/material-components-web/commit/b62b1266d66734fcd9d60c7893ea048f83883f8f))\n* **theme:** replace works for multiple replacements ([95322b1](https://github.com/material-components/material-components-web/commit/95322b11e3b0c938d9b4de56a1ba80d1ff42596b))\n* update README to correct links. ([71e615b](https://github.com/material-components/material-components-web/commit/71e615bc8fa757d22190641db0c2940e24bdf59b))\n* **tooltip:** flip precedence of data-tooltip-id and aria-describedby when finding TT id ([b2d22df](https://github.com/material-components/material-components-web/commit/b2d22df5b62003247fa5ca60a23b2ce8b6a17b33))\n* **typography:** do not emit styles when setting null from global variable ([f5f1b61](https://github.com/material-components/material-components-web/commit/f5f1b613ce5c0dda39f617adbcfd2bb3f1862a74))\n\n\n### Code Refactoring\n\n* **snackbar:** Update a11y structure ([c60449b](https://github.com/material-components/material-components-web/commit/c60449bc8a967e14436bec9471df99678a78515a))\n* **tooltip:** Moved the anchor element blur event listener from the component to within the foundation. ([0b4a4b2](https://github.com/material-components/material-components-web/commit/0b4a4b2ebe245f2382cb08bbbc34e7ffb4f43763))\n* **typography:** Rename typography Sass function from pxToRem() to px-to-rem() ([8f0a11e](https://github.com/material-components/material-components-web/commit/8f0a11e32895f998c326ab4a10601a2e4d5e18db))\n\n\n### Features\n\n* **base:** add non-statics foundation constructor type ([e3ec22f](https://github.com/material-components/material-components-web/commit/e3ec22f4579292c962ab81d7fee1d31b38b7d036))\n* **base:** add observer mixin ([4ceb422](https://github.com/material-components/material-components-web/commit/4ceb42220043f0ca90c57d77efec89ed29ae4508))\n* **chips:** Expose \"action\" component ([03d34bb](https://github.com/material-components/material-components-web/commit/03d34bbad14df501f5faf9d03e62c0727ef6f7da))\n* **chips:** Expose \"chip\" component ([cbc57c6](https://github.com/material-components/material-components-web/commit/cbc57c600f972ec88098d7ad9c4763f57dce0eb4))\n* **chips:** Expose \"chipset\" component ([d6c5bcf](https://github.com/material-components/material-components-web/commit/d6c5bcf3743048e44d5462a2266804a7a75678a7))\n* **chips:** Expose top-level resources ([fefc668](https://github.com/material-components/material-components-web/commit/fefc668d77004762598e0cd88f3248a03a6aab1b))\n* **chips:** Remove touch target wrapper selector from chip set spacing ([367d88b](https://github.com/material-components/material-components-web/commit/367d88bdb32a24c73f935154d616d1d7abfd9dd8))\n* **chips:** Start deprecation of chip ([e683bdf](https://github.com/material-components/material-components-web/commit/e683bdf4a0f6642b87f099b51425898dd4a1b644))\n* **chips:** Start deprecation of chip root directory ([73a2271](https://github.com/material-components/material-components-web/commit/73a227194d7c0caf305329f1a8b22eb801a6114b))\n* **chips:** Start deprecation of chip set ([148e8cf](https://github.com/material-components/material-components-web/commit/148e8cfccac563305b9fa6fd4a6e8602620d6426))\n* **chips:** Start deprecation of chip trailing action ([9eeb35c](https://github.com/material-components/material-components-web/commit/9eeb35c384c78a65215bf8885d5ebb5fb1592cd9))\n* **chips:** Truncate long chip labels by default ([f5c6db8](https://github.com/material-components/material-components-web/commit/f5c6db8fc71c654c47c68a4c717f8d8995f43e30))\n* **dialog:** Adding `resize` and `orientationchange` event handlers into `MDCDialogFoundation`. ([1e06534](https://github.com/material-components/material-components-web/commit/1e06534774df290b9a29210ee3bcf57515da6e43))\n* **dialog:** Adds support for \"surface-scrim\" over full-screen dialogs. This prevents a \"double scrim\" from appearing when showing a secondary dialog over a full-screen dialog on larger screens. ([cddb035](https://github.com/material-components/material-components-web/commit/cddb0355362acb031da308f98283f9d4ad9a2c84))\n* **dom:** add option to skip restoring focus on release focus ([5c0ab74](https://github.com/material-components/material-components-web/commit/5c0ab74019c6a1925ee8ef7946d8df6d9494bf88))\n* **dom:** add tab key keyboard.ts ([dc9c840](https://github.com/material-components/material-components-web/commit/dc9c8402374f46402c73f97e60206517e3186389))\n* **fab:** Add theming API to Extended FABs ([f19c86d](https://github.com/material-components/material-components-web/commit/f19c86d13447d984b13b0e1d7e9651e498d8de04))\n* **fab:** Added `$focus-outline-width` param to extended-padding() FAB mixin ([8ecd7c9](https://github.com/material-components/material-components-web/commit/8ecd7c9a93c5b885fad9a1e6fd8d17da77c05360))\n* **fab:** Added focus outline theme keys to FAB theme mixin ([d6d8d04](https://github.com/material-components/material-components-web/commit/d6d8d04768f9904488a6814ec47a251a03313627))\n* **fab:** Added theme mixin to primary FAB variant. ([f19bbc4](https://github.com/material-components/material-components-web/commit/f19bbc4af6493f642dc4b5b45a2dc0083fa293f0))\n* **fab:** border custom prop support & add CPs for padding ([a6b3101](https://github.com/material-components/material-components-web/commit/a6b3101fb7641daab20db735b70421311534083b))\n* **fix:** Ensure that secondary controls do not ripple. ([1f636b2](https://github.com/material-components/material-components-web/commit/1f636b205b9609d19a96bef707ab87a0f8ca4f1a))\n* **fix:** Fix divider layout in right-to-left locales. ([f524626](https://github.com/material-components/material-components-web/commit/f5246264d139124f6abf2cf5e9f8ca98762eb0f7))\n* **fix:** Remove old MDC list class names, preparing to release evolution. ([5f0fc44](https://github.com/material-components/material-components-web/commit/5f0fc444a706626a106c2b36116a56e9dc5b8c79))\n* **fix:** Remove the \"evolution\" prefix from list evolution's class names. ([0cde52f](https://github.com/material-components/material-components-web/commit/0cde52f5a007f4b7da16afd45f7445d615d5a2f6))\n* **fix:** Simplify divider styles to reflect new design guidance. ([f77c508](https://github.com/material-components/material-components-web/commit/f77c508600d4b0f4ce4a66c63d1064b545149570))\n* **linear-progress:** add getBuffer ([9c85d50](https://github.com/material-components/material-components-web/commit/9c85d505bddf9c63ef52508c385ec59f1f947b8e))\n* **list:** Add \"deprecated\" aliases for old list mixins / variables. ([f9cac96](https://github.com/material-components/material-components-web/commit/f9cac96cc2ad0422d73140a65dcffc5e4e8ec519))\n* **list:** Add missing \"deprecated\" aliases for old list mixin. ([302c7a9](https://github.com/material-components/material-components-web/commit/302c7a960f3b2787f253908d963eaaaa0b8adfd4))\n* **list:** Finalize list mixin/variable rename. ([c97d7d8](https://github.com/material-components/material-components-web/commit/c97d7d88102f96c4c61a1b7c3329f3efac3727f4))\n* **list:** Rename deprecated MDC list class names. ([a678806](https://github.com/material-components/material-components-web/commit/a678806f5618f21a6bd28e3b881f92130b723f6e))\n* **list:** Rename deprecated MDC list class names. ([941ca3b](https://github.com/material-components/material-components-web/commit/941ca3b3c4c53ea296149a983b0159c5567e1b2c))\n* **list:** Update deprecated list class names so evolution can become default. ([606e767](https://github.com/material-components/material-components-web/commit/606e767ef6d1d98461d8910ece874b65d0143981))\n* **list:** Update styles to reference \"deprecated\" mixins/variables. ([3201cae](https://github.com/material-components/material-components-web/commit/3201cae479a0dbf97c40dda1b9d32a5818d6ab62))\n* **list:** Update styles to remove \"evolution\" prefix from mixins/variables. ([f9c9e39](https://github.com/material-components/material-components-web/commit/f9c9e39d6c0cddf796de7e821ec59e199aeab851))\n* **menu:** add maxHeight setter ([bf670da](https://github.com/material-components/material-components-web/commit/bf670dad7247d7ac1db9bf00905921b5c09a5b4d))\n* **menu-surface:** add option to always horizontally center on viewport ([23ea2d8](https://github.com/material-components/material-components-web/commit/23ea2d85e760325371c2529af7c99316d876c044))\n* **ripple:** add active() mixin for styling active styles. ([9f2e85f](https://github.com/material-components/material-components-web/commit/9f2e85fb8453cab94f54eeb9e2d9e18600ed7fa0))\n* **select:** allow programmatic change without firing event ([79ce087](https://github.com/material-components/material-components-web/commit/79ce0878b3233592c3188548711b311e5706d3dd)), closes [#6166](https://github.com/material-components/material-components-web/issues/6166)\n* **slider:** Add mixin to customize thumb color in the activated (hover, focus, pressed) state. ([94f50b2](https://github.com/material-components/material-components-web/commit/94f50b260dd6cbf6cca5fbedd2a8681746e2cc1d))\n* Add support for \"mdc-deprecated-list-*\" class names. ([9e52f55](https://github.com/material-components/material-components-web/commit/9e52f554437fa438c9b4c266f8e87ff370ec5dea))\n* **switch:** add high-contrast mode focus shim mixin ([c91e8d1](https://github.com/material-components/material-components-web/commit/c91e8d141bc8b519ae1d8c7d1771c0d5110e84ad))\n* **theme:** add configuration support for custom-properties ([1f318ff](https://github.com/material-components/material-components-web/commit/1f318ff0f033f9f51c8bf7f76ef997161ff62fd4))\n* **theme:** add create-varname() for custom properties ([b522724](https://github.com/material-components/material-components-web/commit/b5227247d730171c02bd71e9b44106cd179aaf2a))\n* **theme:** add key store ([07ff0c4](https://github.com/material-components/material-components-web/commit/07ff0c452c896f9f8131532538742bed0ad207c9))\n* **tooltip:** Adding logic to position the caret relative to the tooltip. ([76da787](https://github.com/material-components/material-components-web/commit/76da7876cd1452cdabed5169bdbdfd06b4629cda))\n* **tooltip:** Adding touchstart/touchend event listeners to tooltip. This allows tooltips attached to non-focusable elements to be surfaced on mobile. ([7cd26af](https://github.com/material-components/material-components-web/commit/7cd26af4dd2033dacce75d2df2d179f81286fe71))\n* **tooltip:** Creating an `mdc-tooltip__surface-animation` class that holds all the style properties responsible for animating the tooltip in and out of the page. The existing `mdc-tooltip__surface` class will hold all the style properties that impact the visual appearance of the tooltip. ([56fc269](https://github.com/material-components/material-components-web/commit/56fc26962126e24a7c56124de7f36078409254a7))\n* **tooltip:** Expose method that allows users to register additional scroll handlers on elements in the DOM. This should be used in situations where the tooltip anchor is a child of a scrollable element, and will ensure that the tooltip remains attached to the anchor when this element is scrolled. ([24609b8](https://github.com/material-components/material-components-web/commit/24609b82225f763c1dc9da16b1ee9e0dd3c52197))\n\n\n### BREAKING CHANGES\n\n* **typography:** Renamed typography Sass function from pxToRem() to px-to-rem()\n\nPiperOrigin-RevId: 368489085\n* **fix:** the old list implementation has been deprecated and now requires that class names use an \"mdc-deprecated-list-*\" prefix. The new implementation (list evolution), no longer uses a prefix (\"mdc-evolution-list-*\" is now just \"mdc-list-*\").\n\nPiperOrigin-RevId: 364441086\n* **snackbar:** Dom structure change, see README.md\n\nPiperOrigin-RevId: 363926666\n* **tooltip:**   Added adapter method:\n  - registerAnchorEventHandler<K extends EventType>(\n      evtType: K, handler: SpecificEventListener<K>): void;\n  - deregisterAnchorEventHandler<K extends EventType>(\n      evtType: K, handler: SpecificEventListener<K>): void;\n\nPiperOrigin-RevId: 358401984\n\n\n\n\n\n# [10.0.0](https://github.com/material-components/material-components-web/compare/v9.0.0...v10.0.0) (2021-02-05)\n\n\n### Bug Fixes\n\n* **data-table:** fix style ordering wrt select & use new variable-width mixin ([afb6889](https://github.com/material-components/material-components-web/commit/afb68894e63c9ed4bb3b3d523cbb4072480117a6)), closes [#6599](https://github.com/material-components/material-components-web/issues/6599)\n* **dialog:** add property to customize suppressDefaultPressSelector ([772cc10](https://github.com/material-components/material-components-web/commit/772cc10686cc8994033a556ab70f4be106e902ee))\n* **linear-progress:** fix RTL rendering ([c7c5da2](https://github.com/material-components/material-components-web/commit/c7c5da28f2cd2c1b54dd201d3797e112288fa86c))\n* **list:** add support for density scaling. ([419e035](https://github.com/material-components/material-components-web/commit/419e035729c1ca1ee2b572ae4b1937e2d8cf04bc))\n* **list:** add support for non-interactive list roles. ([fc8b045](https://github.com/material-components/material-components-web/commit/fc8b045f1127709c5929a3cd1c9c7d622db8ed42))\n* **list:** ensure divider appears in IE high contrast mode. ([eff7b46](https://github.com/material-components/material-components-web/commit/eff7b46ac916d2eb130f7d826eee047c5f19e6f2))\n* **menu:** Remove anchorSize height from calculations when anchored to bottom ([1631198](https://github.com/material-components/material-components-web/commit/16311983787cf46ccd22eaa4d6a076254cb32eea))\n* **notched-outline:** fix notched outline no-label style ([99cfb6b](https://github.com/material-components/material-components-web/commit/99cfb6bd53f72240fe76852d0fdaa0b82e7dca39))\n* **select:** debounce click on anchor ([b39094d](https://github.com/material-components/material-components-web/commit/b39094d145f9b96c1c75e2b5fcce7b76c9b31bf1))\n* **select:** set aria-expanded false earlier when menu closes ([df00c2b](https://github.com/material-components/material-components-web/commit/df00c2b30342877eba7d1e21e8a57141739155a5))\n* **slider:** Add aria-hidden to value indicator container, to avoid duplicate value announcements for screenreader users. ([9687353](https://github.com/material-components/material-components-web/commit/96873535640a2e9141ff8e17e64fcb5e28d90f53))\n* **slider:** Adjust hidden input dimensions to take slider dimensions, such that screenreader focus indicators show a highlight around the entire slider. ([fd22355](https://github.com/material-components/material-components-web/commit/fd22355f72ab304aec043f53ced92fa9adfef457))\n* **slider:** Fire custom change event on input change. ([07deaec](https://github.com/material-components/material-components-web/commit/07deaec27a6f92b9a00c7698c49d3e1a93e504ea))\n* **slider:** Fix bug where value indicator container took space and could be hovered over / clicked when hidden. ([832668d](https://github.com/material-components/material-components-web/commit/832668d33389a0b6194d3d8ef53aa8c252aa8f5d))\n* **slider:** Mark ripple event handler as passive. Fixes [#6746](https://github.com/material-components/material-components-web/issues/6746) ([abdd100](https://github.com/material-components/material-components-web/commit/abdd10065367738148866c165b339a3e3b9b1fc3))\n* **slider:** Remove big step options. Now that we're using a native range input, big step is not customizable - we follow browser defaults for big step. ([ae27b44](https://github.com/material-components/material-components-web/commit/ae27b44b078ebdad3669b03abc9f28ed184db803))\n* **slider:** Update both thumbs' value indicator UI's if layout is invoked with undefined `thumb`. ([489d4c2](https://github.com/material-components/material-components-web/commit/489d4c219d1747a8e5de3f210f00898c18201b24))\n* **slider:** Use `pointer-events: none` instead of `visibility: hidden` to hide the value indicator container. Adding `visibility: hidden` removes the exit animation since the value indicator is immediately hidden. ([a94bd8d](https://github.com/material-components/material-components-web/commit/a94bd8deb879b0321e8227d26f338789ef3ffb90))\n* **slider:** Use mouse/touch events on iOS, to work around pointer events bug. ([671d72d](https://github.com/material-components/material-components-web/commit/671d72d9544d3d1630966ec4e78b5705700defe7)), closes [#6715](https://github.com/material-components/material-components-web/issues/6715)\n* **tabs:** Expose min width mixin and set to 90px per spec. ([c4ab987](https://github.com/material-components/material-components-web/commit/c4ab987221d5a3b9ab588321bb0347f5d665505a))\n* **theme:** ensure either() works with false values ([8e66dbf](https://github.com/material-components/material-components-web/commit/8e66dbfeebe3d5fec438c69093d7f9941c0fbf10))\n* **tooltip:** Adds \"will-change\" into CSS to prevent the tooltip from \"jittering\" when animating in. ([7a003ac](https://github.com/material-components/material-components-web/commit/7a003acf09345920d917cb4ab7c298a66e4fe184))\n* **tooltip:** Change foundation to check for \"dialog\" on the anchor element's aria-haspopup attribute instead of checking for \"true\". ([b8a1a58](https://github.com/material-components/material-components-web/commit/b8a1a58e4ebb49a73725d2e7ae8aef09c07db09d))\n* **tooltip:** Clear hideTimeout in handleAnchorMouseEnter so that the tooltip will not be hidden if the user rapidly moves the mouse in and out of the anchor element. ([365c693](https://github.com/material-components/material-components-web/commit/365c69360230540a67dd141f6bec999b2541a7e8))\n* **tooltip:** Fix rich tooltip tests to not use aria-describedby to associate rich tooltips with their anchor elements. This is because interactive rich tooltips should not be used with aria-describedby per a11y guidance. ([251ac04](https://github.com/material-components/material-components-web/commit/251ac04c0a976d48a6be33cc7fcd76f6e2700aac))\n* adjust meta baseline and update color mixins. ([07f3e01](https://github.com/material-components/material-components-web/commit/07f3e01b75306a7481c7077cd3ed12a87399958e))\n\n\n### Code Refactoring\n\n* Remove MDC theme's deep-get, used sass:map's get API instead. ([37fbae1](https://github.com/material-components/material-components-web/commit/37fbae10d6fb993c0ea866959fb5564c052002cc))\n\n\n### Features\n\n* **banner:** Add mobile-stacked variant support to banner. ([a0b2db2](https://github.com/material-components/material-components-web/commit/a0b2db26b550162d2e409489c5ded3381b7c7dc2))\n* **button:** Add in HCM support to the mdc button as an opt-in mixin. ([121e1f3](https://github.com/material-components/material-components-web/commit/121e1f303f10e55c9cc5e6508bcd559c6ea7dc7b))\n* **button:** consolidate states into button mixins ([637d15d](https://github.com/material-components/material-components-web/commit/637d15da60919641e5571f280562c4fb3491c8f0))\n* **button:** thread state keys through theme config ([05f2496](https://github.com/material-components/material-components-web/commit/05f249666dff2bae35a1a6c1e7a5ed89eb193213))\n* **checkbox:** Add CSS custom properties to MDC checkbox for density theming ([9244508](https://github.com/material-components/material-components-web/commit/9244508bd82ab65635169cfacd74f1a25ebaab7e))\n* **checkbox:** Add validation to MDC Checkbox theme mixin ([2d5f32d](https://github.com/material-components/material-components-web/commit/2d5f32d41cda48ca8e3c1d2244d6fb3bb4c6aa7d))\n* **circular-progress:** do not require HTML without whitespaces ([8648b82](https://github.com/material-components/material-components-web/commit/8648b8258f7f87edcc1d58a2bc7db3d78425508f))\n* **dialog:** add custom property for z-index ([776c186](https://github.com/material-components/material-components-web/commit/776c1868154e5b99a332f60927b78b32b82fe19f))\n* **dialog:** Adding styling for scroll bar dividers, and adding logic to show said dividers only when content is scrolled \"behind\" the header or footer of the dialog. ([e383944](https://github.com/material-components/material-components-web/commit/e383944e9792ea1971c7814e0e63e2e00f99a468))\n* **dialog:** Adds and defines styling for the \"header bar\" on a full-screen dialog. ([089de51](https://github.com/material-components/material-components-web/commit/089de519c1c2f0378b9852dafd3ca5a304268a44))\n* **iconbutton:** Add in HCM support to the mdc iconbutton as an opt-in mixin. ([fd61b04](https://github.com/material-components/material-components-web/commit/fd61b04760d96fcc1c96e43ca8e0663d16f5a995))\n* **linear-progress:** remove aria-valuemin/max attrs for indeterminate ([4321323](https://github.com/material-components/material-components-web/commit/4321323e4bea2da8192b81ebdf8c6a9ee1e76aa0))\n* **list:** support ctrl + a keyboard shortcut ([eefef49](https://github.com/material-components/material-components-web/commit/eefef49d86c69b1985aa4e5fa5b8809ba1f0a1f4)), closes [#6366](https://github.com/material-components/material-components-web/issues/6366)\n* **list:** Update the MDC component for List Evolution. ([766981c](https://github.com/material-components/material-components-web/commit/766981c15a200b374a14c2ab80bf746824bf7434))\n* **menu,select:** enable fixed menu position in mwc-select ([b9adb7a](https://github.com/material-components/material-components-web/commit/b9adb7a0f6d2871bcd87664ab857fb62392c27d4)), closes [#2062](https://github.com/material-components/material-components-web/issues/2062)\n* **select:** add mixin for variable width ([30c11bf](https://github.com/material-components/material-components-web/commit/30c11bfc24e426c0647645758e4f9d98f589e85c))\n* **slider:** Add hidden input to slider, to support forms submission. This is also prep for moving to use an \\<input type=\"range\"\\> behind the scenes, in order to support touch-based AT's. ([b98d15d](https://github.com/material-components/material-components-web/commit/b98d15d90b19e69066c0b417ee0d8b11ab733e20))\n* **slider:** Modify continuous slider to use step value by default, and give clients the option to customize step value for continuous sliders. ([7ad038e](https://github.com/material-components/material-components-web/commit/7ad038e1d37171dc1fc931112b17f085533f7048))\n* **slider:** Use input with type=\"range\" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android. ([9083b7d](https://github.com/material-components/material-components-web/commit/9083b7d61b1dda2c5acefda6e8939870a358e98f))\n* **snackbar:** Add 1px transparent border for high contrast support ([15a4d40](https://github.com/material-components/material-components-web/commit/15a4d40dd708775c6120165422c9ebadee4c8f6f))\n* **theme:** add either() utility function ([5268222](https://github.com/material-components/material-components-web/commit/5268222c432bb886add05cbb1779909117cf1620))\n* **theme:** add validation option to disallow custom properties ([fec7b42](https://github.com/material-components/material-components-web/commit/fec7b42ca54baf37487cadaf96ac8cf559d6ccd0))\n* **theme:** Added validation mixin to validate provided theme configuration keys ([1c156d6](https://github.com/material-components/material-components-web/commit/1c156d69d76efcfa39c706f7f6ae74e96c2bd541))\n* **theme:** allow lists in replace maps ([d2959b1](https://github.com/material-components/material-components-web/commit/d2959b16ca9a2e4574984b8e459993c9c9a2075a))\n* **theme:** emit CSS var() declarations when provided a standalone custom prop ([1a3a396](https://github.com/material-components/material-components-web/commit/1a3a396293df35d9621155e9168df35d39d83fee))\n* **tooltip:** Add positioning adjustment and position specification for rich tooltips. Rich tooltips default to the END position and does not support CENTER positioning. ([384a8ee](https://github.com/material-components/material-components-web/commit/384a8eeb163798df6655c8a49c36428ede852e15))\n* **tooltip:** Added persistent variant for rich tooltips that shows/hides based on mouse clicks on the anchor element. Clicks on elements other than the anchor will also hide the persistent variant. ([9775856](https://github.com/material-components/material-components-web/commit/9775856508a7256cb7dc93d0c3e47f6d87c08c93))\n* **tooltip:** Adds `transform-origin` on tooltip surface so tooltip entrance animation has a direction based on its alignment with the anchor element. ([623af86](https://github.com/material-components/material-components-web/commit/623af861e1852603fd4778fb0abbef58b427333c))\n* **tooltip:** Adjust  tooltip position on `scroll` and `resize` events. This ensures that the tooltip remains pinned to the anchor element despite page movement. ([a415276](https://github.com/material-components/material-components-web/commit/a41527604048d218879240aaaf04aff7389053d1))\n* **tooltip:** Adjusting tooltip positioning logic so that the tooltip remains within the viewport even if the anchor element is partially off-screen. ([482ff90](https://github.com/material-components/material-components-web/commit/482ff909132b2e8f81791d7128cb0a3d2ff371a8))\n* **tooltip:** Change rich tooltip to use position absolute instead of fixed and rely on a position relative parent element so that if the parent has a transform, perspective, or filter property set to something other than none, the positioning would still work. ([0c95c9f](https://github.com/material-components/material-components-web/commit/0c95c9f7bf1e0d465e99fd7dd3f1497d37d871ff))\n* **tooltip:** Define styling to set the full-screen dialog size depending on the viewport size. ([fe13dd1](https://github.com/material-components/material-components-web/commit/fe13dd1308dc695898b2c7d3dfbddccc7d38b420))\n* **tooltip:** Expose `hide` and `isShown` methods in the MDCTooltip component. This allows MDC clients to create their own class to enforce only one tooltip being shown at a time. ([c5e18b0](https://github.com/material-components/material-components-web/commit/c5e18b0203a3c474384bc5902a15855636ce849b))\n* **tooltip:** Hide rich tooltip if mouse leaves rich tooltip. Rich tooltip persists if mouse leaves rich tooltip and enters anchor. ([6d8574f](https://github.com/material-components/material-components-web/commit/6d8574fe1db3a60dfb5a45ce8c6c6718700c2dfd))\n* **tooltip:** Reducing minimum threshold distance between tooltip and viewport from 32px to 8px. ([23491cf](https://github.com/material-components/material-components-web/commit/23491cf85b8831896f95879e8aea258d5ca7f653))\n* **tooltip:** Restore focus to the anchor element when the ESC button is pressed while the focus is in the tooltip for rich tooltips. Default rich tooltips should have focus restored to anchor and not have rich tooltips show. ([eabf9d5](https://github.com/material-components/material-components-web/commit/eabf9d5c2d9b56e316db98f2d8e16bf12f1ef501))\n* **tooltip:** Set up base sass for rich tooltip. Rich tooltips are currently in development and is not yet ready for use. ([4ae94ff](https://github.com/material-components/material-components-web/commit/4ae94ff7816d87fde3285a0c2fd48b94ff0bbdab))\n* **tooltip:** Set up rich tooltip to persist if mouse leaves anchor and enters rich tooltip. ([c927a5d](https://github.com/material-components/material-components-web/commit/c927a5d05761d0a80f886b2b7627e600df38c467))\n* **tooltip:** The aria-expanded attribute of the anchor element will only be changed for anchor elements with interactive rich tooltips. Non-interactive rich tooltip anchor elements do not have the aria-haspopup and aria-expanded attributes. ([c5dda80](https://github.com/material-components/material-components-web/commit/c5dda809d5e4c110f3b4bb37c9646e572026d58d))\n* **tooltip:** When the anchor element blurs, the rich tooltip will only be hidden if the focus is changed to a non-rich tooltip element. ([6871336](https://github.com/material-components/material-components-web/commit/6871336f11f3cc7d94c6314dc049092e0427106c))\n* Added global variable to conditionally emit CSS selector fallback declarations ([7b0e2b3](https://github.com/material-components/material-components-web/commit/7b0e2b3775d006126161bd688851d490d19e9558))\n* **tooltip:** When the rich tooltip element focuses out, hide the rich tooltip if the new focused element is not the anchor element or an element within the rich tooltip. ([1085c3b](https://github.com/material-components/material-components-web/commit/1085c3b2df7d3c1b528e1b9ba5557975fa959401))\n\n\n### BREAKING CHANGES\n\n* **theme:** custom-properties.apply() has been renamed to declaration() to better align with css.declaration()\n* **tooltip:**   Added adapter methods:\n  - getComputedStyleProperty(propertyName: string): string;\n  - getParentBoundingRect(): ClientRect|null;\n* **tooltip:**   Added adapter method:\n  - tooltipContainsElement(element: HTMLElement): boolean;\n* Removed `deep-get()` API from mdc-theme, use `sass:map`'s get() API instead.\n* **tooltip:**   Added adapter method:\n  - anchorContainsElement(element: HTMLElement): boolean;\n* **slider:** Slider is now backed by an input of type=\"range\". Additionally, adapter methods (focusInput, isInputFocused, registerInputEventHandler, deregisterInputEventHandler) were added.\n* **tooltip:**   Added adapter methods:\n  - setAnchorAttribute(attr: string, value: string): void;\n  - registerEventHandler<K extends EventType>(\n        evtType: K, handler: SpecificEventListener<K>): void;\n  - deregisterEventHandler<K extends EventType>(\n        evtType: K, handler: SpecificEventListener<K>): void;\n* **slider:** Adds slider adapter methods (get/setInputValue, get/setInputAttribute, removeInputAttribute). Slider DOM structure now contains a hidden input.\n  \n\n# [9.0.0](https://github.com/material-components/material-components-web/compare/v8.0.0...v9.0.0) (2020-12-29)\n\n\n### Bug Fixes\n\n* **data-table:** fix style ordering wrt select & use new variable-width mixin ([afb6889](https://github.com/material-components/material-components-web/commit/afb68894e63c9ed4bb3b3d523cbb4072480117a6)), closes [#6599](https://github.com/material-components/material-components-web/issues/6599)\n* **list:** add support for density scaling. ([419e035](https://github.com/material-components/material-components-web/commit/419e035729c1ca1ee2b572ae4b1937e2d8cf04bc))\n* **list:** add support for non-interactive list roles. ([fc8b045](https://github.com/material-components/material-components-web/commit/fc8b045f1127709c5929a3cd1c9c7d622db8ed42))\n* **list:** ensure divider appears in IE high contrast mode. ([eff7b46](https://github.com/material-components/material-components-web/commit/eff7b46ac916d2eb130f7d826eee047c5f19e6f2))\n* Adding tests. ([240c5f7](https://github.com/material-components/material-components-web/commit/240c5f74f381967ede9eb1fa13754d2f0282da9e))\n* adjust meta baseline and update color mixins. ([07f3e01](https://github.com/material-components/material-components-web/commit/07f3e01b75306a7481c7077cd3ed12a87399958e))\n* Document stylelint exceptions ([f89d8b8](https://github.com/material-components/material-components-web/commit/f89d8b8f295c80c7b7e691ec712a30de8a0b26d5))\n* **notched-outline:** fix notched outline no-label style ([99cfb6b](https://github.com/material-components/material-components-web/commit/99cfb6bd53f72240fe76852d0fdaa0b82e7dca39))\n* **select:** debounce click on anchor ([b39094d](https://github.com/material-components/material-components-web/commit/b39094d145f9b96c1c75e2b5fcce7b76c9b31bf1))\n* **slider:** Adjust hidden input dimensions to take slider dimensions, such that screenreader focus indicators show a highlight around the entire slider. ([fd22355](https://github.com/material-components/material-components-web/commit/fd22355f72ab304aec043f53ced92fa9adfef457))\n* **slider:** Fix bug where value indicator container took space and could be hovered over / clicked when hidden. ([832668d](https://github.com/material-components/material-components-web/commit/832668d33389a0b6194d3d8ef53aa8c252aa8f5d))\n* **slider:** Remove big step options. Now that we're using a native range input, big step is not customizable - we follow browser defaults for big step. ([ae27b44](https://github.com/material-components/material-components-web/commit/ae27b44b078ebdad3669b03abc9f28ed184db803))\n* **slider:** Update both thumbs' value indicator UI's if layout is invoked with undefined `thumb`. ([489d4c2](https://github.com/material-components/material-components-web/commit/489d4c219d1747a8e5de3f210f00898c18201b24))\n* **tabs:** Expose min width mixin and set to 90px per spec. ([c4ab987](https://github.com/material-components/material-components-web/commit/c4ab987221d5a3b9ab588321bb0347f5d665505a))\n\n\n### Code Refactoring\n\n* Remove MDC theme's deep-get, used sass:map's get API instead. ([37fbae1](https://github.com/material-components/material-components-web/commit/37fbae10d6fb993c0ea866959fb5564c052002cc))\n\n\n### Features\n\n* **banner:** Add mobile-stacked variant support to banner. ([a0b2db2](https://github.com/material-components/material-components-web/commit/a0b2db26b550162d2e409489c5ded3381b7c7dc2))\n* **checkbox:** Add CSS custom properties to MDC checkbox for density theming ([9244508](https://github.com/material-components/material-components-web/commit/9244508bd82ab65635169cfacd74f1a25ebaab7e))\n* **checkbox:** Add validation to MDC Checkbox theme mixin ([2d5f32d](https://github.com/material-components/material-components-web/commit/2d5f32d41cda48ca8e3c1d2244d6fb3bb4c6aa7d))\n* **circular-progress:** do not require HTML without whitespaces ([8648b82](https://github.com/material-components/material-components-web/commit/8648b8258f7f87edcc1d58a2bc7db3d78425508f))\n* **linear-progress:** remove aria-valuemin/max attrs for indeterminate ([4321323](https://github.com/material-components/material-components-web/commit/4321323e4bea2da8192b81ebdf8c6a9ee1e76aa0))\n* **list:** support ctrl + a keyboard shortcut ([eefef49](https://github.com/material-components/material-components-web/commit/eefef49d86c69b1985aa4e5fa5b8809ba1f0a1f4)), closes [#6366](https://github.com/material-components/material-components-web/issues/6366)\n* **select:** add mixin for variable width ([30c11bf](https://github.com/material-components/material-components-web/commit/30c11bfc24e426c0647645758e4f9d98f589e85c))\n* **slider:** Add hidden input to slider, to support forms submission. This is also prep for moving to use an \\<input type=\"range\"\\> behind the scenes, in order to support touch-based AT's. ([b98d15d](https://github.com/material-components/material-components-web/commit/b98d15d90b19e69066c0b417ee0d8b11ab733e20))\n* **slider:** Modify continuous slider to use step value by default, and give clients the option to customize step value for continuous sliders. ([7ad038e](https://github.com/material-components/material-components-web/commit/7ad038e1d37171dc1fc931112b17f085533f7048))\n* **slider:** Use input with type=\"range\" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android. ([9083b7d](https://github.com/material-components/material-components-web/commit/9083b7d61b1dda2c5acefda6e8939870a358e98f))\n* **theme:** Added validation mixin to validate provided theme configuration keys ([1c156d6](https://github.com/material-components/material-components-web/commit/1c156d69d76efcfa39c706f7f6ae74e96c2bd541))\n* **tooltip:** Add positioning adjustment and position specification for rich tooltips. Rich tooltips default to the END position and does not support CENTER positioning. ([384a8ee](https://github.com/material-components/material-components-web/commit/384a8eeb163798df6655c8a49c36428ede852e15))\n* **tooltip:** Added persistent variant for rich tooltips that shows/hides based on mouse clicks on the anchor element. Clicks on elements other than the anchor will also hide the persistent variant. ([9775856](https://github.com/material-components/material-components-web/commit/9775856508a7256cb7dc93d0c3e47f6d87c08c93))\n* **tooltip:** Adjust  tooltip position on `scroll` and `resize` events. This ensures that the tooltip remains pinned to the anchor element despite page movement. ([a415276](https://github.com/material-components/material-components-web/commit/a41527604048d218879240aaaf04aff7389053d1))\n* **tooltip:** Adjusting tooltip positioning logic so that the tooltip remains within the viewport even if the anchor element is partially off-screen. ([482ff90](https://github.com/material-components/material-components-web/commit/482ff909132b2e8f81791d7128cb0a3d2ff371a8))\n* **tooltip:** Hide rich tooltip if mouse leaves rich tooltip. Rich tooltip persists if mouse leaves rich tooltip and enters anchor. ([6d8574f](https://github.com/material-components/material-components-web/commit/6d8574fe1db3a60dfb5a45ce8c6c6718700c2dfd))\n* **tooltip:** Make persistent rich tooltips persist when click target is within the rich tooltip. ([fb194dd](https://github.com/material-components/material-components-web/commit/fb194dd354d2c912f997c500347557edcba1440d))\n* **tooltip:** Reducing minimum threshold distance between tooltip and viewport from 32px to 8px. ([23491cf](https://github.com/material-components/material-components-web/commit/23491cf85b8831896f95879e8aea258d5ca7f653))\n* **tooltip:** Restore focus to the anchor element when the ESC button is pressed while the focus is in the tooltip for rich tooltips. Default rich tooltips should have focus restored to anchor and not have rich tooltips show. ([eabf9d5](https://github.com/material-components/material-components-web/commit/eabf9d5c2d9b56e316db98f2d8e16bf12f1ef501))\n* **tooltip:** Set up base sass for rich tooltip. Rich tooltips are currently in development and is not yet ready for use. ([4ae94ff](https://github.com/material-components/material-components-web/commit/4ae94ff7816d87fde3285a0c2fd48b94ff0bbdab))\n* **tooltip:** Set up rich tooltip to persist if mouse leaves anchor and enters rich tooltip. ([c927a5d](https://github.com/material-components/material-components-web/commit/c927a5d05761d0a80f886b2b7627e600df38c467))\n* **tooltip:** The aria-expanded attribute of the anchor element will only be changed for anchor elements with interactive rich tooltips. Non-interactive rich tooltip anchor elements do not have the aria-haspopup and aria-expanded attributes. ([c5dda80](https://github.com/material-components/material-components-web/commit/c5dda809d5e4c110f3b4bb37c9646e572026d58d))\n* **tooltip:** When the anchor element blurs, the rich tooltip will only be hidden if the focus is changed to a non-rich tooltip element. ([6871336](https://github.com/material-components/material-components-web/commit/6871336f11f3cc7d94c6314dc049092e0427106c))\n* **tooltip:** When the rich tooltip element focuses out, hide the rich tooltip if the new focused element is not the anchor element or an element within the rich tooltip. ([1085c3b](https://github.com/material-components/material-components-web/commit/1085c3b2df7d3c1b528e1b9ba5557975fa959401))\n* Added global variable to conditionally emit CSS selector fallback declarations ([7b0e2b3](https://github.com/material-components/material-components-web/commit/7b0e2b3775d006126161bd688851d490d19e9558))\n\n\n### BREAKING CHANGES\n\n* **tooltip:**   Added adapter method:\n  - tooltipContainsElement(element: HTMLElement): boolean;\nRich tooltips are currently in development and is not yet ready for use.\n\nPiperOrigin-RevId: 346325244\n* Removed `deep-get()` API from mdc-theme, use `sass:map`'s get() API instead.\n\nPiperOrigin-RevId: 345257138\n* **tooltip:**   Added adapter method:\n  - anchorContainsElement(element: HTMLElement): boolean;\nRich tooltips are currently in development and is not yet ready for use.\n\nPiperOrigin-RevId: 345221617\n* **slider:** Slider is now backed by an input of type=\"range\". Additionally, adapter methods (focusInput, isInputFocused, registerInputEventHandler, deregisterInputEventHandler) were added.\n\nPiperOrigin-RevId: 344116908\n* **tooltip:**   Added adapter methods:\n  - setAnchorAttribute(attr: string, value: string): void;\n  - registerEventHandler<K extends EventType>(\n        evtType: K, handler: SpecificEventListener<K>): void;\n  - deregisterEventHandler<K extends EventType>(\n        evtType: K, handler: SpecificEventListener<K>): void;\nRich tooltips are currently in development and is not yet ready for use.\n\nPiperOrigin-RevId: 343894231\n* **slider:** Adds slider adapter methods (get/setInputValue, get/setInputAttribute, removeInputAttribute). Slider DOM structure now contains a hidden input.\n\nPiperOrigin-RevId: 343157208\n\n\n\n\n\n# [8.0.0](https://github.com/material-components/material-components-web/compare/v7.0.0...v8.0.0) (2020-11-02)\n\n\n### Bug Fixes\n\n* **banner:** Update image to graphic and support material icons ([346069c](https://github.com/material-components/material-components-web/commit/346069ccb2a831b37df62bf71135acad92fd69c3))\n* **card:** ensure border-adjacent content renders correctly. ([790ca85](https://github.com/material-components/material-components-web/commit/790ca85fd643229e95f2d1c08811c8e0e5513805))\n* **checkbox:** Use secondary and on-secondary as default colors ([b95172e](https://github.com/material-components/material-components-web/commit/b95172e69613c0defe82191b86ed1c1999b74400)), closes [#5730](https://github.com/material-components/material-components-web/issues/5730)\n* **chip-set:** crash when only item is removed ([a653b68](https://github.com/material-components/material-components-web/commit/a653b68118e823ae30b1f47f87a4a8e5e69d9186))\n* **chips:** Handle IE/Edge specific key names in keyboard navigation logic ([3657f88](https://github.com/material-components/material-components-web/commit/3657f886327182c26f1d1555b2ac67c2128140b5))\n* **circular-progress:** Add .npmignore file to ignore typescript files when publishing ([#5801](https://github.com/material-components/material-components-web/issues/5801)) ([f172b0f](https://github.com/material-components/material-components-web/commit/f172b0f90a91d8d3d700763d1496bb7b9c1a8d51)), closes [#5800](https://github.com/material-components/material-components-web/issues/5800)\n* **circular-progress:** Default all variables ([430fd02](https://github.com/material-components/material-components-web/commit/430fd025b07b3e15dd699620fbbfca75f74632a3))\n* **circular-progress:** display properly inside button ([2bd09a7](https://github.com/material-components/material-components-web/commit/2bd09a706efb991fd71e171db8994f0282a1f02e))\n* **circular-progress:** display properly inside button ([000d648](https://github.com/material-components/material-components-web/commit/000d6481570c361cf4c66b55c287eea434b6d11e)), closes [#6388](https://github.com/material-components/material-components-web/issues/6388)\n* **circular-progress:** fix determinate transition typo & 4 color keyframes ([a301636](https://github.com/material-components/material-components-web/commit/a3016368df53b1c7967d7d146a9ea53a24442fa9))\n* **circular-progress:** Fix naming in package.json and add to jsBundleFactory ([86f7cad](https://github.com/material-components/material-components-web/commit/86f7cad8330dbd600e478610eefd8dd92eb3d8c7))\n* **circular-progress:** Force LTR layout ([6a40ef2](https://github.com/material-components/material-components-web/commit/6a40ef217f597138ee2920d2160364649dbf5620))\n* **circular-progress:** Switch mixins import to `[@use](https://github.com/use)` ([098ae32](https://github.com/material-components/material-components-web/commit/098ae3285223af2532659dec233537a55c1183f5))\n* **circular-progress:** use theme.property() for color mixins ([7bd5075](https://github.com/material-components/material-components-web/commit/7bd5075de978f8499f4cdc3b8359005184fa5192))\n* **data-table:** Add noflip annotation to header cell text align ([843f636](https://github.com/material-components/material-components-web/commit/843f636c047b5371cd31b9ae4af76a7ec494b446))\n* **data-table:** Check if data table has checkboxes on destroy ([164c073](https://github.com/material-components/material-components-web/commit/164c07365ef405a14e4375db71fbc55931aa9262))\n* **data-table:** Fix icon misalignment in sort icon button when sorted down ([610c26c](https://github.com/material-components/material-components-web/commit/610c26c4a1c7928fec0e8d63be3bd76cb7ff76a0))\n* **data-table:** Fix JS error in IE11 when setting multiple styles ([d548d7a](https://github.com/material-components/material-components-web/commit/d548d7a923393f4be11a7919542fa07f5a224d29))\n* **data-table:** Fix pagination box height ([eb28b6e](https://github.com/material-components/material-components-web/commit/eb28b6ecc65a9979ef0959eac5dbfde5b4d3b2dc))\n* **data-table:** Fix row checkbox cell's leading padding to match spec ([38ef450](https://github.com/material-components/material-components-web/commit/38ef4501f630351b32efd31ea2b870e0ed1b1b1d))\n* **data-table:** Fixed default feature targeting query params of sort mixins ([e33c49e](https://github.com/material-components/material-components-web/commit/e33c49eaf9c0dbc601f3610af6358cbf2833229c))\n* **data-table:** Hover styles for sortable header cell ([d580805](https://github.com/material-components/material-components-web/commit/d5808057fcdf00364731e0896ef7031ac605cf55))\n* **data-table:** partial rollback of [#6390](https://github.com/material-components/material-components-web/issues/6390) ([da72839](https://github.com/material-components/material-components-web/commit/da72839f40a432c529bb24e5bc4514842627d3bf))\n* **data-table:** Reverse the arrow direction icon for column sorting ([a7c827f](https://github.com/material-components/material-components-web/commit/a7c827f17ce9be631484676ccb6b5f18604803ae))\n* **data-table:** Set progress indicator height to table body offset height ([c678a9d](https://github.com/material-components/material-components-web/commit/c678a9d34a3f694511f292c7a62e68749721b63c))\n* **data-table:** unable to redefine colors in class-based themi… ([#5751](https://github.com/material-components/material-components-web/issues/5751)) ([4d48051](https://github.com/material-components/material-components-web/commit/4d48051c1099f48e867cf08f070138a7abc719fc))\n* **data-table:** unable to redefine colors in class-based theming ([4b45b66](https://github.com/material-components/material-components-web/commit/4b45b662057edd8819f1a515db88e1c12254cc30))\n* **datatable:** Fix updating the header checkbox when there are no rows in a datatable ([2ccf996](https://github.com/material-components/material-components-web/commit/2ccf996cc417b888d7ac4ceebdfa4160464a0bb1))\n* **dom:** Make dom selectors in dom/announce tests scoped ([fc65fd0](https://github.com/material-components/material-components-web/commit/fc65fd00b91d388d0ad15e50a13567a8e1d425c0))\n* **elevation:** Use relative path when importing theme Sass file. ([405a29a](https://github.com/material-components/material-components-web/commit/405a29a2016565f8cb269915c5f6c0d4df133c6d))\n* **linear-progress:** disable animations when closed ([a831d47](https://github.com/material-components/material-components-web/commit/a831d4799b281729a932f0690b62b6bce1874799))\n* **linear-progress:** performance for indeterminate animations in modern browsers ([fc0eb50](https://github.com/material-components/material-components-web/commit/fc0eb5013603a4d5cb4dbc0a999e94df64cc5005))\n* **linear-progress:** Temporary rollback of [#5656](https://github.com/material-components/material-components-web/issues/5656) while updating downstream dependencies ([9cf5e98](https://github.com/material-components/material-components-web/commit/9cf5e9842475e50046462aa1c6d18e326abaee17))\n* **list:** No longer emits action event when disabled item selected ([f352d03](https://github.com/material-components/material-components-web/commit/f352d03f4ed48c5019a0a3e10ef12689a5ab5619)), closes [#5571](https://github.com/material-components/material-components-web/issues/5571)\n* **mdc-dialog:** second dialog `data-mdc-dialog-initial-focus` doesn't work ([a0ec7e2](https://github.com/material-components/material-components-web/commit/a0ec7e25d0ba26c2e85d5576e6af5e5d65b301a3))\n* **menu-surface:** Use margin_to_edge as a viewport margin in calculations for autopositioning. ([4b04cdb](https://github.com/material-components/material-components-web/commit/4b04cdb0fc4da4831340b01292c118b120c1fcb1))\n* **menusurface:** Fixing bug where body click listener is not being properly deregistered. ([5511c52](https://github.com/material-components/material-components-web/commit/5511c5254476c817b51bb2ae884f56d328348bd0)), closes [#6557](https://github.com/material-components/material-components-web/issues/6557)\n* **menusurface:** synchronous quick menu does not close on button click ([45a6615](https://github.com/material-components/material-components-web/commit/45a6615e33eb8a7e6fc37e9ef43a3be3682b6b0e))\n* **radio:** disabled state in IE high contrast mode ([774dcfc](https://github.com/material-components/material-components-web/commit/774dcfc8eb31e766afd0194c54edfe71a7ff7c3e))\n* **segmented-button:** Fixed unit test in IE11 ([#6271](https://github.com/material-components/material-components-web/issues/6271)) ([b96fbfc](https://github.com/material-components/material-components-web/commit/b96fbfc7a9b75d7d58ecc53919c26b1cdd05d9ed))\n* **segmented-button:** Move include statements to avoid nested classes ([#6380](https://github.com/material-components/material-components-web/issues/6380)) ([bcc5829](https://github.com/material-components/material-components-web/commit/bcc58290a7ac7bbbe191d00be003785017f94d29))\n* **segmented-button:** Use empty clientRect in default adapter ([#6343](https://github.com/material-components/material-components-web/issues/6343)) ([9f9aac8](https://github.com/material-components/material-components-web/commit/9f9aac82595ec6eb117e101dc5e0ee0a22e81eee))\n* **select:** Deduplicate change events ([4ad1274](https://github.com/material-components/material-components-web/commit/4ad12741e41c5b8e175f2bc8d5053daec6cedf18)), closes [#5570](https://github.com/material-components/material-components-web/issues/5570)\n* **select:** do not emit change event when same value selected twice ([e07a708](https://github.com/material-components/material-components-web/commit/e07a7084134b6bbfb1d31a00e410b9d133f28863))\n* **select:** ensure enough space for label when outlined menu opening above ([66b8ed7](https://github.com/material-components/material-components-web/commit/66b8ed7e62881b1b22b3b5a32730eac43d563cb7))\n* **select:** float label on hidden-input initial value ([744bfe5](https://github.com/material-components/material-components-web/commit/744bfe5d8438b49d995ac5e2760d776a1df9838a))\n* **select:** move label before selected text for screenreader a11y ([e139d62](https://github.com/material-components/material-components-web/commit/e139d626eefc941415b876597787753520a45ab1))\n* **select:** prevent dropdown icon focus on IE ([b9dff0a](https://github.com/material-components/material-components-web/commit/b9dff0a19ee53e492ef9b06538dfe863214b5fc2)), closes [#6323](https://github.com/material-components/material-components-web/issues/6323)\n* **select:** prevent helper text from announcing when hidden ([e056052](https://github.com/material-components/material-components-web/commit/e0560522fc2e390ee25a1968fdde3fde0cab6041))\n* **select:** remove gap when outlined opened above with no label ([2fe7012](https://github.com/material-components/material-components-web/commit/2fe70126ae51043d1e733e6d4ec11452e7ed9bc4))\n* **select:** remove min-width & dynamic width resizing ([d4cd83a](https://github.com/material-components/material-components-web/commit/d4cd83a857fdf072f547dc597db1f8b30d33a102))\n* **select:** remove unnecessary bottom line focus selector ([32fb314](https://github.com/material-components/material-components-web/commit/32fb314cd0cc74f37f0d567a739c115daa96be95))\n* **select:** revert 2fed2c1 that delegates to list for single selection logic ([38197b4](https://github.com/material-components/material-components-web/commit/38197b4434959cc8b47124233003c14d9c4a0fbf))\n* **shape:** remove deprecated functions ([e2ea4a9](https://github.com/material-components/material-components-web/commit/e2ea4a99e1930ac4981f22a2b919bdbd31e75a95))\n* **slider:** Fix bugs with setting slider position before component initialization: ([9110147](https://github.com/material-components/material-components-web/commit/9110147118180dc1de5c7d727fb3ecbe2507882f))\n* **slider:** Move inactive track before active track, so active track consistently overlaps inactive track. ([0b7ac96](https://github.com/material-components/material-components-web/commit/0b7ac9609470218d4ed6229c7a624ed5f3984aa8))\n* **slider:** Remove `width: 100%` to account for margin around slider track. ([16c563e](https://github.com/material-components/material-components-web/commit/16c563ef71555da9f02707b9f00abb4c5fc3df79))\n* **snackbar:** remove use of [@at-root](https://github.com/at-root) ([98d0296](https://github.com/material-components/material-components-web/commit/98d02962b5f1edd9f541f19198dc3d1992720ea3))\n* **snackbar:** Update a11y structure to announce label and actions ([40d8e47](https://github.com/material-components/material-components-web/commit/40d8e472600544fcfe8b8b9d91c62cc014995296))\n* **snackbar:** Update a11y structure to announce snackbar correctly ([a3176c8](https://github.com/material-components/material-components-web/commit/a3176c8eaada1b6c61f0d678a193a26a25a773c5))\n* **switch:** Adjust track width to 36px, align thumb and track. ([d716225](https://github.com/material-components/material-components-web/commit/d71622574c25840013a517749df357f7f93bc4d6))\n* **switch:** always set track to transparent border ([9a169f4](https://github.com/material-components/material-components-web/commit/9a169f4b158a3148126ba38bcdfa9d163434d9bb))\n* **switch:** use CSS custom properties for theming ([d6315ef](https://github.com/material-components/material-components-web/commit/d6315efe26e7baf45fd88244efbb24c612a95cb4))\n* **textfield:** affix outlined alignment Safari bug ([ad4df58](https://github.com/material-components/material-components-web/commit/ad4df58c1e9ba7a893780dc5fe7886179a0361f9))\n* **textfield:** autofill filled label not floating correctly ([abcdbcf](https://github.com/material-components/material-components-web/commit/abcdbcfebdcb8a8abe386abb00cd33230e8ef7a1))\n* **textfield:** clean up input padding ([8639c26](https://github.com/material-components/material-components-web/commit/8639c269010b77b17f1a5052d57abcb5f7d2892a))\n* **textfield:** error when notching outline with no label ([b0ed593](https://github.com/material-components/material-components-web/commit/b0ed593ccbffe7dfec51c94527cbc17000385407)), closes [#6452](https://github.com/material-components/material-components-web/issues/6452)\n* **textfield:** helper text a11y interactions ([8a39352](https://github.com/material-components/material-components-web/commit/8a39352c8a787663eecb42b46939b069729fc82c))\n* **textfield:** IE11 label overlapping placeholder ([781434a](https://github.com/material-components/material-components-web/commit/781434a92f4dddc9b2d39853e1f5792e89e7b45b))\n* **textfield:** move notched outline/label before input ([9e2f6c4](https://github.com/material-components/material-components-web/commit/9e2f6c45016b1ccc665a271dc59134d32916123d))\n* **textfield:** remove absolute positioning from icons ([1e13d1d](https://github.com/material-components/material-components-web/commit/1e13d1d5a68632f1b0b5a9134f657d59104969f4))\n* **textfield:** remove Chrome icons for date types ([4951e76](https://github.com/material-components/material-components-web/commit/4951e7651ffbd99b382948e48306a23d2fd74fb1))\n* **textfield:** remove deprecated dense variant in favor of density ([776291e](https://github.com/material-components/material-components-web/commit/776291ef03205e4063b4040eb66f9648e16b4af6)), closes [#4142](https://github.com/material-components/material-components-web/issues/4142)\n* **textfield:** remove fullwidth variant ([69a35e8](https://github.com/material-components/material-components-web/commit/69a35e80ceadb5ef9ffae87345eefbd80b383f51))\n* **theme:** add validation to host-aware to ensure proper usage ([defa599](https://github.com/material-components/material-components-web/commit/defa599a8bc17557602bbf35a8a5c760fbb053f1))\n* **theme:** do not throw error when setting custom props and null ([85a5272](https://github.com/material-components/material-components-web/commit/85a5272dfeb7ad100598d480dec76b60679485f5))\n* **theme:** property() mixin not working with theme key strings ([c1fec42](https://github.com/material-components/material-components-web/commit/c1fec424677fcb77dfc966ff1805d601a103fa30)), closes [#6158](https://github.com/material-components/material-components-web/issues/6158)\n* server-side rendering errors in linear progress and slider ([7d0b983](https://github.com/material-components/material-components-web/commit/7d0b983a902deee6941d61906aa5a880628db4e9))\n* update circular-progress import paths ([10e8c19](https://github.com/material-components/material-components-web/commit/10e8c191a0c4c9eb1703f25b66668c640f5344a6))\n* **theme:** Remove duplicate [@forward](https://github.com/forward) in theme index module ([b2e80a5](https://github.com/material-components/material-components-web/commit/b2e80a5d91fc8552f22614e95f7670225f6b4248))\n* **theme:** variable overrides not working with @use/with ([2d72f36](https://github.com/material-components/material-components-web/commit/2d72f365991f17e21b34be523aef3fa32b2b2fdb))\n* **typography:** change $styles font-size to a Number ([6d1ea97](https://github.com/material-components/material-components-web/commit/6d1ea9761de927c1653c621444e00172f74d76c7))\n* update types and deprecate old ponyfill ([af332d5](https://github.com/material-components/material-components-web/commit/af332d5bef3f826fa7a6078492d54f0444a3fee4))\n\n\n### Code Refactoring\n\n* **circular-progress:** move all sizing params from CSS to markup ([58ce529](https://github.com/material-components/material-components-web/commit/58ce529ccc29d3b172c1e774c70424eb54aac5dc))\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([98b8434](https://github.com/material-components/material-components-web/commit/98b843417ef6c0a10460532a37df389b0c7e936f))\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([9372e49](https://github.com/material-components/material-components-web/commit/9372e493954585c939f341486d0361efb87da806))\n* **radio:** forward only theme mixins from MDC radio index module ([72258f8](https://github.com/material-components/material-components-web/commit/72258f89870242ba62c0ce25db680fdecb9640bc))\n* **select:** consolidate state theming to single mixins ([e8bf5b2](https://github.com/material-components/material-components-web/commit/e8bf5b2ac6c89778fa38791979e4be941e28db1c))\n* **theme:** move CSS declarations to utility mixin ([96a6405](https://github.com/material-components/material-components-web/commit/96a6405345ea1e1a7083bd08f8610384231d6607))\n\n\n### Documentation\n\n* **select:** update markup to include new selectedText container ([47b500a](https://github.com/material-components/material-components-web/commit/47b500a6cf888458b371734698b366fe2b4c3230))\n\n\n### Features\n\n* **animation:** Add a linear animation method ([c250ec5](https://github.com/material-components/material-components-web/commit/c250ec52ad1ce21943f4c7f521087bf2e647da00))\n* **animation:** Create animation frame helper class ([e34e411](https://github.com/material-components/material-components-web/commit/e34e411b1835efa3f275921ca8c9d33d6df92bec))\n* **banner:** Add banner component into MDC catalog ([aa3a3e5](https://github.com/material-components/material-components-web/commit/aa3a3e5a43b1e012e948c5f8f8b7c133d5ba6b0d))\n* **banner:** Add fixed banner variant ([fd8af3d](https://github.com/material-components/material-components-web/commit/fd8af3d435e12d28cfc393762c325cc2d1b03f13))\n* **banner:** Add fixed-width mixin. ([c61db90](https://github.com/material-components/material-components-web/commit/c61db90a5d3abb032cfa5940b0710770ba19c4a1))\n* **banner:** Defining a z-index mixin. ([ccc64ee](https://github.com/material-components/material-components-web/commit/ccc64eea393339f38e54054bbd8865f9f78618bf))\n* **banner:** Expose layout method. ([4794b25](https://github.com/material-components/material-components-web/commit/4794b25da9af4bfa7d48f5a6fc172efc45cfd999))\n* **banner:** Update banner to be mobile friendly. ([dbc449b](https://github.com/material-components/material-components-web/commit/dbc449b0972362ba3c7fc04e26900d0c3e3d8b66))\n* **banner:** Update close() to use CloseReason and provide programmatic way of closing ([ff88df6](https://github.com/material-components/material-components-web/commit/ff88df637a944de239b8860b5f0c38454cc6cc1b))\n* **banner:** Update content to be leading as default and add support for optional centered. ([8d5b84f](https://github.com/material-components/material-components-web/commit/8d5b84fb260506c69fa93246aee538db89db8fc3))\n* **button:** Expand outlined touch target to include side borders ([ce6cb70](https://github.com/material-components/material-components-web/commit/ce6cb7024d1da3b0e4fb5e2c67ba269dbb3098ec))\n* **card:** Add transparent outline to elevated card, so card boundary is shown on high-contrast mode. ([c71ebfa](https://github.com/material-components/material-components-web/commit/c71ebfa02b7f3203317255e377b5cb165a0cfeac))\n* **checkbox:** Add CSS custom properties to MDC checkbox theme mixins ([66669e3](https://github.com/material-components/material-components-web/commit/66669e3b668d0579ac71d6896240fd14d6a4322a))\n* **checkbox:** Add support for checkbox CSS-only `indeterminate` checkbox ([b273afa](https://github.com/material-components/material-components-web/commit/b273afa93441e6d0375f7df33d5b69d8a7e1cfa8))\n* **checkbox:** Added theme configuration support to checkbox ([58eaa9f](https://github.com/material-components/material-components-web/commit/58eaa9f027bb7ced126d3fe97cab5a0f627eb098))\n* **checkbox:** Added theme configuration support to checkbox ([fbf73c2](https://github.com/material-components/material-components-web/commit/fbf73c2a6633298d6d65cdfcb8f76151e0e9c600))\n* **checkbox:** Separate static styles from checkbox styles ([150f427](https://github.com/material-components/material-components-web/commit/150f427a01a7b20783d287cebe40bb4d93a24ce3))\n* **checkbox:** Separate static styles from checkbox styles ([ff87000](https://github.com/material-components/material-components-web/commit/ff870005acef3cb26a6b4f378c012ffdb1061194))\n* **checkbox:** Separate static styles from checkbox styles ([4f55400](https://github.com/material-components/material-components-web/commit/4f55400bbde3d85cacf379b7f7a80dd439952b3f))\n* **chips:** Add chips styling ([1db5c9f](https://github.com/material-components/material-components-web/commit/1db5c9fc842292715f8b4603ce0b979066f1c639))\n* **chips:** Add focus{in|out} handlers ([10af6cf](https://github.com/material-components/material-components-web/commit/10af6cf39cb2ae0a7deb9a951960f115f6ecdace))\n* **chips:** Add keyCode support ([82fa986](https://github.com/material-components/material-components-web/commit/82fa986b95be4c16271df50effda1046d015d35c))\n* **chips:** Add trailing action feature targeting test ([bec0659](https://github.com/material-components/material-components-web/commit/bec0659206aee793e6970d59c73f7969ab540b69))\n* **chips:** Create trailing action business logic ([9ebee4c](https://github.com/material-components/material-components-web/commit/9ebee4ceb998e5fa651d4f147e5e39d43600db6e))\n* **chips:** Expose trailing action chip files ([6b48781](https://github.com/material-components/material-components-web/commit/6b48781bf97d3b08b8f35b9eacde2b87748ae2e1))\n* **chips:** Restructure trailing action mixins ([05f5e15](https://github.com/material-components/material-components-web/commit/05f5e1583b81bc00dbcd2ae21ee0acc43b3e13b4))\n* **circular-progress:** Add foundation methods to get isDeterminate and progress value ([7d8f9c8](https://github.com/material-components/material-components-web/commit/7d8f9c8d73f16c01ed4a941ab9510377a0aae219))\n* **circular-progress:** Add Sass styles and tests ([bd33cb5](https://github.com/material-components/material-components-web/commit/bd33cb56bdab7139052aeedbeec363f17b4dfc40))\n* **circular-progress:** Add TS for foundation, adapter, component with tests ([548b1d4](https://github.com/material-components/material-components-web/commit/548b1d4057f21e066a4c494a57a0c068c23e18cd))\n* **circular-progress:** support track color ([e27c580](https://github.com/material-components/material-components-web/commit/e27c5802fed20af29976f1f84bc39f9b59999ab5))\n* **data-table:** Add base styles to support pagination. ([927fa90](https://github.com/material-components/material-components-web/commit/927fa902c3297a5a7cc9436e82cb81f3aabe1b4b))\n* **data-table:** Add foundation methods to support loading state. ([e75deb8](https://github.com/material-components/material-components-web/commit/e75deb8540fa70236087d335c9cd6280bd643285))\n* **data-table:** Add progress indicator / loading feature to data table ([4497ace](https://github.com/material-components/material-components-web/commit/4497acef8fd636b6ceef3cf055f664c92465e965))\n* **data-table:** Add support for applying row checkbox density ([291b355](https://github.com/material-components/material-components-web/commit/291b3553d20c5dda9c5a80e0dda0705b524f41a3))\n* **data-table:** Added styles for table in loading state ([35a32aa](https://github.com/material-components/material-components-web/commit/35a32aaeac17e290e2e9f9a1310c5a44a08f624a))\n* **data-table:** Added styles to support column sorting. ([17b9699](https://github.com/material-components/material-components-web/commit/17b9699c4454a107043e5a1f9874a091089dd112))\n* **data-table:** Added support for sticky header row in data table ([599b8c3](https://github.com/material-components/material-components-web/commit/599b8c3191a888e3debd94ad4934f741c5fb6e23))\n* **data-table:** Foundation changes to support column sorting ([6ee0355](https://github.com/material-components/material-components-web/commit/6ee03557260d0a23296e36cba5aaa76fe0cf96a6))\n* **data-table:** Set progress indicator styles based on table body height ([c026422](https://github.com/material-components/material-components-web/commit/c0264227393df8eb9259a2b24c23b31fe0ca84f3))\n* **dom:** Add keyboard support ([5f24faa](https://github.com/material-components/material-components-web/commit/5f24faacb1ef8996ae81f3a1c1e43910ba67b024))\n* **drawer:** expose --mdc-theme-surface custom prop ([319bf66](https://github.com/material-components/material-components-web/commit/319bf66dead88f67dba64f9d50a6f3f0d82aad72)), closes [#6466](https://github.com/material-components/material-components-web/issues/6466)\n* **elevation:** add custom props for overlay ([4c354a3](https://github.com/material-components/material-components-web/commit/4c354a36d012e5d241f27380db1d0d9e70769c27))\n* **fab:** Add focus outline mixins to MDC Fab ([0f60323](https://github.com/material-components/material-components-web/commit/0f60323a8365901c4ff6fd956161b99d8f413927))\n* **fab:** Add focus outline mixins to MDC Fab ([7a9afaf](https://github.com/material-components/material-components-web/commit/7a9afaf4b503bc0d1d135b8d88edd4a7ed02e52e))\n* **fab:** support css custom props for extended-padding ([01db890](https://github.com/material-components/material-components-web/commit/01db890532f796ea3e66a9c7d76893bef8689d6f))\n* **form-field:** Add support for space-between ([e84b9c8](https://github.com/material-components/material-components-web/commit/e84b9c816d32da6dec058d92fc21dc5ac8fec787)), closes [#5747](https://github.com/material-components/material-components-web/issues/5747)\n* **formfield:** add nowrap class/prop to MDC/MWC ([c4b4bba](https://github.com/material-components/material-components-web/commit/c4b4bba9659bf15207e79b1f63fcc9946404d9c7))\n* **iconbutton:** Add icon button variant which supports toggling aria label. ([f838c6e](https://github.com/material-components/material-components-web/commit/f838c6e55672268de4e6e3b31b154d4f9050242f))\n* **linear-progress:** Add foundation methods to fetch progress and determinate state. ([4dc45af](https://github.com/material-components/material-components-web/commit/4dc45af6c4bc81f5734a24c160046d283c1e9a6d))\n* **list:** Add transparent-border for aria-activedescendant usage ([8388a9b](https://github.com/material-components/material-components-web/commit/8388a9bf6f4db77656adcdd604125eb205694b10))\n* **menu:** Add mixin to flatten menu top when opened-below anchor ([1e17c49](https://github.com/material-components/material-components-web/commit/1e17c49b360fd0e01c9a74b92978031534003b5b))\n* **menu-surface:** Add transition to height for menu resizing animation. ([1e7cb61](https://github.com/material-components/material-components-web/commit/1e7cb61989c95f9b86de3b1f6edb1773c12dfc97))\n* **ripple:** Add will-change opt-out param ([e590b37](https://github.com/material-components/material-components-web/commit/e590b376bf20bde50e6f6b62339c0bac2703ccf0))\n* **ripple:** Reorganize ripple opacities ([008c4d3](https://github.com/material-components/material-components-web/commit/008c4d3191f9c2a76732688504d2299420734cdd))\n* **segmented-button:** add adapters and foundations ([#6165](https://github.com/material-components/material-components-web/issues/6165)) ([6ed717d](https://github.com/material-components/material-components-web/commit/6ed717dddf5f62dd5bfc621388ae07471775612f))\n* **segmented-button:** Add component outlines ([#6222](https://github.com/material-components/material-components-web/issues/6222)) ([a0f1202](https://github.com/material-components/material-components-web/commit/a0f1202dc5cd67207877167558742d0b18bf0e32))\n* **segmented-button:** Add initial Sass styles ([#6141](https://github.com/material-components/material-components-web/issues/6141)) ([7555383](https://github.com/material-components/material-components-web/commit/75553837cce5cb9d52d5561f5729d110e71af401))\n* **segmented-button:** Add MDC segmented button into material-components-web ([596e984](https://github.com/material-components/material-components-web/commit/596e984242fdef685dae49e2c84305e55c9ea724))\n* **segmented-button:** Add new package for segmented button ([#6073](https://github.com/material-components/material-components-web/issues/6073)) ([d561860](https://github.com/material-components/material-components-web/commit/d5618602a8ef45a1fdf753c3598afc5e1cadc95b))\n* **segmented-button:** Add ripple and touch-target support ([#6277](https://github.com/material-components/material-components-web/issues/6277)) ([e3b7462](https://github.com/material-components/material-components-web/commit/e3b746208db04f3922fabba77986f9f02f422d75))\n* **segmented-button:** Add select validations for singleSelect ([#6381](https://github.com/material-components/material-components-web/issues/6381)) ([2e8c3dd](https://github.com/material-components/material-components-web/commit/2e8c3dd2e0622957a373286f14720de36afb5ba4))\n* **segmented-button:** Added foundation business logic ([#6198](https://github.com/material-components/material-components-web/issues/6198)) ([e6e2301](https://github.com/material-components/material-components-web/commit/e6e23019d567802c13d0bd6559a35291c48abc91))\n* **segmented-button:** Implement components ([#6223](https://github.com/material-components/material-components-web/issues/6223)) ([ac405ea](https://github.com/material-components/material-components-web/commit/ac405eae1b80f719a80dc4fec663b763e73cdf5d))\n* **select:** move selectedText into its own text node ([0bc41a9](https://github.com/material-components/material-components-web/commit/0bc41a9c75392352e8a31eb9d46f1a1457ffe732))\n* **select:** support hidden input ([fda053e](https://github.com/material-components/material-components-web/commit/fda053eb848395ebfa9266e4535013e1a3be8486)), closes [#5428](https://github.com/material-components/material-components-web/issues/5428)\n* **select:** truncate with ellipses by default ([83d83f1](https://github.com/material-components/material-components-web/commit/83d83f131118073943a6a45923b37b3a961bd894))\n* **slider:** Add hooks into dragStart/dragEnd events to slider foundation. ([85a1fa9](https://github.com/material-components/material-components-web/commit/85a1fa9eab3010f2c41f5f65ca80a7f34bc46b2c))\n* **slider:** Add M2 version of slider. ([8158544](https://github.com/material-components/material-components-web/commit/8158544774c50ba21b114f6fe24786816ba4c4fd))\n* **slider:** Add support for customizing tick marks opacity, and document tick mark DOM structure for rendering tick marks before component initialization. ([238216f](https://github.com/material-components/material-components-web/commit/238216fc466a1b0dd5f4f05f10a083949e1b99d9))\n* **slider:** Add support for setting `aria-valuetext` on slider thumbs. ([fd608ff](https://github.com/material-components/material-components-web/commit/fd608ff66bbb2f765fa1c092427fba9e61a074f3))\n* **slider:** Add support for styling initial thumb/track before component JS initialization. ([08ca4d0](https://github.com/material-components/material-components-web/commit/08ca4d0ec5f359bc3a20bd2a302fa6b733b5e135))\n* **slider:** Add support for theming disabled colors. ([d52b165](https://github.com/material-components/material-components-web/commit/d52b165b5869309705068ab58803cef426f1e590))\n* **snackbar:** Update stacked layout to add an additional 8px on the label's right padding ([521afaf](https://github.com/material-components/material-components-web/commit/521afaf6e3086285b040c06fc3dbc92f20dc9b06))\n* **textfield:** add autovalidation customization ([2ab716c](https://github.com/material-components/material-components-web/commit/2ab716cbda14aca5a8b62cdae3c71c2d629b16f7))\n* **textfield:** add filled class variant ([b70bc60](https://github.com/material-components/material-components-web/commit/b70bc601ef570dab4598ae6f3ca51bbf884fac96))\n* **textfield:** add forced LTR input ([490fbdc](https://github.com/material-components/material-components-web/commit/490fbdc092c5c59d63f83407b83b37fb524ed0e5))\n* **textfield:** add prefix and suffix ([6601d24](https://github.com/material-components/material-components-web/commit/6601d24afdc3a3d0bd2a9b3fcca68c35c9415ec1)), closes [#1892](https://github.com/material-components/material-components-web/issues/1892)\n* **textfield:** add specific label-floating class ([a88c8e4](https://github.com/material-components/material-components-web/commit/a88c8e4dc873ae74a3afbae0dc8635dfaa03e67b))\n* **textfield:** Create float transition mixin ([ca61b65](https://github.com/material-components/material-components-web/commit/ca61b656fababdf25adaa307963d4f37e6d413ec))\n* **textfield:** Limit notched outline max-width ([0ab62a6](https://github.com/material-components/material-components-web/commit/0ab62a65b17192a94102231ca63f54adc39675ae))\n* **textfield:** Using touch-target-mixins to increase the touch target size on trailing icons on text fields. ([174c0be](https://github.com/material-components/material-components-web/commit/174c0becfc802e4366e4814758f28cb1ecf2c75a))\n* **theme:** add calc() string replacement to property mixin ([79414bf](https://github.com/material-components/material-components-web/commit/79414bf9f93aae12bc394fd518b6cb401e5ddb26))\n* **theme:** add deep-get utility ([fb5a4cd](https://github.com/material-components/material-components-web/commit/fb5a4cdeb79de0412a9e0573db1dacb28e8186f3))\n* **theme:** add shadow-dom host-aware helpers ([0a2e7fc](https://github.com/material-components/material-components-web/commit/0a2e7fc8976e6481c9225609d7ff5354362472fa)), closes [#6295](https://github.com/material-components/material-components-web/issues/6295)\n* **theme:** add state helper functions ([0809012](https://github.com/material-components/material-components-web/commit/08090126b4eff43f82188ee1dae5c8deda33d2ef))\n* **tooltip:** Add 500ms delay before showing tooltip. ([a1c6559](https://github.com/material-components/material-components-web/commit/a1c65593d3c1f594a35561569357bb657dd50408))\n* **tooltip:** add position options for y-axis ([91ab1c6](https://github.com/material-components/material-components-web/commit/91ab1c62a4e00ae844d444882582d2052aaf228a))\n* **tooltip:** Add tooltip component into MDC catalog. ([b9394dc](https://github.com/material-components/material-components-web/commit/b9394dc5da7db3b60497cf81aa5f26a5758d9b37))\n* **tooltip:** Adding option to render tooltips as hidden from a screenreader. This should only be utilized in situations where the tooltip label hold information duplicated from an accessible name on the anchor element (e.g. tooltip label is the same as the aria-label on an icon button) ([546277d](https://github.com/material-components/material-components-web/commit/546277d323c484ddf181afffed153f4f17c9f4a7))\n* **tooltip:** Adding transparent border around tooltip so it is distinguished from the background in high contrast mode. ([02e372c](https://github.com/material-components/material-components-web/commit/02e372c5f02afaf66e06e733a08c6c704c16843c))\n* **tooltip:** Adjusting tooltip z-index so tooltip appears above other content on the page. ([c285200](https://github.com/material-components/material-components-web/commit/c2852000d97ed49c5f8ab82b5911deb1c87a9025))\n* **tooltip:** Adjustments to tooltip structure. ([19bea2a](https://github.com/material-components/material-components-web/commit/19bea2ad3d6c6aa36e0d033af7adebd010dcd4fa))\n* **tooltip:** Center align tooltip label text. ([5dac1f6](https://github.com/material-components/material-components-web/commit/5dac1f624606fc92682a4266ffd68bea21e57069))\n* **tooltip:** Creating method to clear any in-progress animations before starting new ones. ([61f1a8d](https://github.com/material-components/material-components-web/commit/61f1a8d8599f6dfaa7fc6c64d661010df47839b7))\n* **tooltip:** Defining a z-index mixin. ([f4848eb](https://github.com/material-components/material-components-web/commit/f4848eb3b57d81fd4fed1396cdc22a83344ccd72))\n* **tooltip:** Foundation will now send a notification when the tooltip has been hidden. Methods added into the adapter to allow for this functionality. ([9274f85](https://github.com/material-components/material-components-web/commit/9274f8504a905e04f24fba8f6a0e246d7ae3a638))\n* **typography:** add container baseline mixins for flexbox ([69edc6e](https://github.com/material-components/material-components-web/commit/69edc6e2899636cfccb117376bb64dc0a267c588))\n* add custom property support for select, textfield, and notched outline ([ec23858](https://github.com/material-components/material-components-web/commit/ec2385881f93b75641db661038aae439b4c217d1))\n\n\n### Reverts\n\n* \"Include tooltip directory for future copybara syncs.\" ([#6185](https://github.com/material-components/material-components-web/issues/6185)) ([b0c456d](https://github.com/material-components/material-components-web/commit/b0c456d330f31bc890c54d114de1d56ac23fee9f))\n* feat(checkbox): Added theme configuration support to checkbox ([cf80012](https://github.com/material-components/material-components-web/commit/cf800124fdaeea04b3fd45f8718a2980dd01a0df))\n\n\n### BREAKING CHANGES\n\n* **banner:** Added wrapper div to text/graphic for mobile friendly view, see README.md for more info.\n* **typography:** `typography.baseline-top()` and `typography.baseline-bottom()` are now private. Use `typography.baseline()` for containers and `typography.text-baseline()` for text with $top and $bottom params.\n* **banner:** Dom structure change, see README.md\n* **select:** selected text node now needs to be wrapped in an outer `mdc-select__selected-text-container` span; see README for updated markup\n* **datatable:** Header checkboxes will now be unchecked if layout is called when there are no rows.\n* **banner:** Updated adapter to use CloseReason types\n* **checkbox:** Renamed mixin `ripple()` => `ripple-styles()` in MDC checkbox\n* **checkbox:** Renamed mixin `ripple()` => `ripple-styles()` in MDC checkbox\n* **checkbox:** Renamed mixin `ripple()` => `ripple-styles()` in MDC checkbox\n* **theme:** $ie-fallback variable has been moved and renamed to $enable-fallback-declarations in `@material/theme/css`\n* **select:** select theming mixins which were previously \"stateful\" (e.g. `hover-label-color()`) are combined into the non-stateful mixin (e.g. `label-color()`). The default state of the mixin can be set as normal, or a Map of states can be provided to optionally set one or more states of the mixin (e.g. `label-color((hover: blue))`). See the `@material/theme/state` package for more details.\n* **textfield:** adapter method `getAttr` added on helper text subcomponent; adapter method `setInputAttr` and `removeInputAttr` added on main component\n* **textfield:** the notched outline and label should now appear before the input in the text field's DOM structure for a11y navigation\n* **slider:** This upgrades the old slider to a new version of slider that adheres to the M2 design spec. Changes include:\n- M2 design (primary instead of secondary color used, larger active track and thumb, improved tick marks UI)\n- Range (two-thumb slider) slider\n- Pointer events support (for browsers that support pointer events)\n- High contrast mode support\n- Improved accessibility (follows WAI-ARIA spec for slider)\n* **circular-progress:** DOM Changed. See README for updated markup. `$default-size`, `$stroke-width`, and `$container-side-length` variables removed.\n* **snackbar:** The right padding of the label for the `mdc-snackbar--stacked` variant will now have an additional 8px\n* **data-table:** New adapter method replacing `getTableBodyHeight()` => `getTableHeaderHeight()` and changed return types of this method.\n* **textfield:** Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.\n* **textfield:** mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.\n* **textfield:** removed the following variables: `$input-padding`, `$input-padding-top`, `$input-padding-bottom`, `$outlined-input-padding-top`, `$outlined-input-padding-bottom`, `$input-border-bottom`\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **radio:** MDC radio _index Sass module will only export theme mixins\n\n\n# [7.0.0](https://github.com/material-components/material-components-web/compare/v6.0.0...v7.0.0) (2020-06-23)\n\n\n### Bug Fixes\n\n* **base:** Add EDITING and EDITABLE states to the chip. ([cf3b664](https://github.com/material-components/material-components-web/commit/cf3b664ab1f12b17ea827ad1e2870977b9836e5b))\n* **base:** Causes internal text in a chip to not overflow and instead be truncated by ellipsis. ([b83d720](https://github.com/material-components/material-components-web/commit/b83d720ee41acb13e3e6ca69431f718c7887c1de))\n* **base:** Make the root property public ([51d4535](https://github.com/material-components/material-components-web/commit/51d4535fe39a2448fbba1ec995bb9980357545fa))\n* **base:** Remove \"foundation_\" from MDCComponent ([8c6d7e0](https://github.com/material-components/material-components-web/commit/8c6d7e0766d8958a8d4ffea35acee9d6841dafd4))\n* **base:** Remove trailing underscore \"adapter_\" ([5b5f62f](https://github.com/material-components/material-components-web/commit/5b5f62f9397100a9dd97c257b930e686837c4ceb))\n* **base:** Remove trailing underscore from superclass properties ([62b5f37](https://github.com/material-components/material-components-web/commit/62b5f37db092df4441abdf5e4ee0b32dceee8c7c))\n* **button:** Correct misspelling of overflow ([29debfe](https://github.com/material-components/material-components-web/commit/29debfea704941e80f1d337880b4a18142c11561))\n* **button:** Correct misspelling of overflow ([99d2fc9](https://github.com/material-components/material-components-web/commit/99d2fc961be8cd7e8316b40dcf9754a536d29991))\n* **button:** Correct misspelling of overflow ([28d32f8](https://github.com/material-components/material-components-web/commit/28d32f8e0d923099221fe7d3853177243e0fd243))\n* **button:** Move theme-baseline() into base Sass. ([080965f](https://github.com/material-components/material-components-web/commit/080965f3952b32105419558c0167873554234dd0))\n* **button:** Remove misspelled label-overlow-ellipsis ([e59906a](https://github.com/material-components/material-components-web/commit/e59906a57e91604f918c8ccd350f93a9a802e412))\n* **checkbox:** Use secondary and on-secondary as default colors ([b95172e](https://github.com/material-components/material-components-web/commit/b95172e69613c0defe82191b86ed1c1999b74400)), closes [#5730](https://github.com/material-components/material-components-web/issues/5730)\n* **checkbox:** Use superclass properties without trailing underscores ([2e218db](https://github.com/material-components/material-components-web/commit/2e218dbf8810548de27b683ed6e25d5fb1cbbc23))\n* **chips:** Handle IE/Edge specific key names in keyboard navigation logic ([3657f88](https://github.com/material-components/material-components-web/commit/3657f886327182c26f1d1555b2ac67c2128140b5))\n* **chips:** Use superclass properties without trailing underscores ([cf7747e](https://github.com/material-components/material-components-web/commit/cf7747ef72efb4affe2dd920a6641f730f3bcfcd))\n* **circular-progress:** Add .npmignore file to ignore typescript files when publishing ([#5801](https://github.com/material-components/material-components-web/issues/5801)) ([f172b0f](https://github.com/material-components/material-components-web/commit/f172b0f90a91d8d3d700763d1496bb7b9c1a8d51)), closes [#5800](https://github.com/material-components/material-components-web/issues/5800)\n* **circular-progress:** fix determinate transition typo & 4 color keyframes ([a301636](https://github.com/material-components/material-components-web/commit/a3016368df53b1c7967d7d146a9ea53a24442fa9))\n* **circular-progress:** Fix naming in package.json and add to jsBundleFactory ([86f7cad](https://github.com/material-components/material-components-web/commit/86f7cad8330dbd600e478610eefd8dd92eb3d8c7))\n* **circular-progress:** Force LTR layout ([6a40ef2](https://github.com/material-components/material-components-web/commit/6a40ef217f597138ee2920d2160364649dbf5620))\n* **circular-progress:** Switch mixins import to `[@use](https://github.com/use)` ([098ae32](https://github.com/material-components/material-components-web/commit/098ae3285223af2532659dec233537a55c1183f5))\n* **circularprogress:** Use superclass properties without trailing underscores ([da05f66](https://github.com/material-components/material-components-web/commit/da05f66e10f8efe5c425cec7f140ed399b11bd3f))\n* **data-table:** Fix pagination box height ([eb28b6e](https://github.com/material-components/material-components-web/commit/eb28b6ecc65a9979ef0959eac5dbfde5b4d3b2dc))\n* **data-table:** Fixed alignment of numeric header cell with sort button. ([2139200](https://github.com/material-components/material-components-web/commit/2139200b3ed2b57d74a02701bfef23a983d19cdf))\n* **data-table:** Fixed default feature targeting query params of sort mixins ([e33c49e](https://github.com/material-components/material-components-web/commit/e33c49eaf9c0dbc601f3610af6358cbf2833229c))\n* **data-table:** Fixed horizontal scrolling issue with pagination controls ([b065a4d](https://github.com/material-components/material-components-web/commit/b065a4d2bd351b86277f5a2f4d512fb6c243c7ce))\n* **data-table:** Hover styles for sortable header cell ([d580805](https://github.com/material-components/material-components-web/commit/d5808057fcdf00364731e0896ef7031ac605cf55))\n* **data-table:** Make row checkbox table cell fixed even when table is wide ([a6ac8f6](https://github.com/material-components/material-components-web/commit/a6ac8f629b45e46d598b4b531fed8300fb5a8eef))\n* **data-table:** not inverting text alignment in rtl ([bd8d1aa](https://github.com/material-components/material-components-web/commit/bd8d1aafab5c6da614135702f5814447de5ea448))\n* **data-table:** Removed overflow-x from root element ([4ebce8d](https://github.com/material-components/material-components-web/commit/4ebce8d787db92afb4c1f9d2a10268a62d188d43))\n* **data-table:** Reverse the arrow direction icon for column sorting ([a7c827f](https://github.com/material-components/material-components-web/commit/a7c827f17ce9be631484676ccb6b5f18604803ae))\n* **data-table:** unable to redefine colors in class-based themi… ([#5751](https://github.com/material-components/material-components-web/issues/5751)) ([4d48051](https://github.com/material-components/material-components-web/commit/4d48051c1099f48e867cf08f070138a7abc719fc))\n* **data-table:** unable to redefine colors in class-based theming ([4b45b66](https://github.com/material-components/material-components-web/commit/4b45b662057edd8819f1a515db88e1c12254cc30))\n* **datatable:** Use superclass properties without trailing underscores ([862d0d7](https://github.com/material-components/material-components-web/commit/862d0d7bce4fc30a1947d1ff7cb7286c106dd9e5))\n* **dialog:** Change scale(1) to `transform:none` ([9ea5207](https://github.com/material-components/material-components-web/commit/9ea52070f4f9693266a20311cce15700e84696c3))\n* **dialog:** Only equalize paddings for scrollable dialogs with titles, since there is no added divider between title/content in this case. ([8135cc0](https://github.com/material-components/material-components-web/commit/8135cc085a5cd548cf8c8fba4bb43a21bcd3fd46))\n* **dialog:** Use superclass properties without trailing underscores ([b4e2fe9](https://github.com/material-components/material-components-web/commit/b4e2fe9f4bf690968d0ac47da0ca4a64ee8d7a88))\n* **dom:** Clear out announcer regions on document click ([c67667e](https://github.com/material-components/material-components-web/commit/c67667e8e213ed4686889cb3962685444bd885c6))\n* **drawer:** Use superclass properties without trailing underscores ([a66493c](https://github.com/material-components/material-components-web/commit/a66493cd8e9717ce32218fb877ca2258ea6ee880))\n* **floating-label:** Use superclass properties without trailing underscores ([5cea261](https://github.com/material-components/material-components-web/commit/5cea2610f2f46bbe193683668044116d78b7e2d6))\n* **form-field:** Use superclass properties without trailing underscores ([7fd792b](https://github.com/material-components/material-components-web/commit/7fd792bb9841501ecbc35b4024a00e07216fb95b))\n* **icon-button:** Use superclass properties without trailing underscores ([740860e](https://github.com/material-components/material-components-web/commit/740860e789992163537cc7138d6c21672adb79d0))\n* **line-ripple:** Use superclass properties without trailing underscores ([a4aae3d](https://github.com/material-components/material-components-web/commit/a4aae3d3710ba5eb86f27dee230064dfccf2e73f))\n* **linear-progress:** Temporary rollback of [#5656](https://github.com/material-components/material-components-web/issues/5656) while updating downstream dependencies ([9cf5e98](https://github.com/material-components/material-components-web/commit/9cf5e9842475e50046462aa1c6d18e326abaee17))\n* **linear-progress:** Use superclass properties without trailing underscores ([8e17857](https://github.com/material-components/material-components-web/commit/8e17857d0a8d301f54fac64cc83804928ec1ff83))\n* **list:** No longer emits action event when disabled item selected ([f352d03](https://github.com/material-components/material-components-web/commit/f352d03f4ed48c5019a0a3e10ef12689a5ab5619)), closes [#5571](https://github.com/material-components/material-components-web/issues/5571)\n* **list:** Preserve aspect ratio of the original image when using it as the icon or avatar for a list. ([be4a19f](https://github.com/material-components/material-components-web/commit/be4a19f9f0668e4fc303d2e60e81473ac11d68be))\n* **list:** Remove obsolete non-interactive class & :not selectors ([2553e86](https://github.com/material-components/material-components-web/commit/2553e86fee2753ec59f1fbc91764bf110ad9d3aa))\n* **list:** Use superclass properties without trailing underscores ([4847dd7](https://github.com/material-components/material-components-web/commit/4847dd7645adf463ea947fc2afb346df648a1ffc))\n* **menu:** Do not set selectedIndex for menu items that have a negative recomputedIndex. ([ef3a095](https://github.com/material-components/material-components-web/commit/ef3a095336a205fa9473a8c6e4940c3f9cccf5ea))\n* **menu:** Use superclass properties without trailing underscores ([0008c8a](https://github.com/material-components/material-components-web/commit/0008c8a91a4da2c0c95fe092395cc575cbf23769))\n* **menu-surface:** Use margin_to_edge as a viewport margin in calculations for autopositioning. ([4b04cdb](https://github.com/material-components/material-components-web/commit/4b04cdb0fc4da4831340b01292c118b120c1fcb1))\n* **menu-surface:** Use superclass properties without trailing underscores ([62abbc8](https://github.com/material-components/material-components-web/commit/62abbc8d762c6c903d4a13817a0b71555764e0df))\n* **menusurface:** open and closed events not fired when already opened or closed ([9cff431](https://github.com/material-components/material-components-web/commit/9cff4318f0fe8a79f8787afd148907328a5223d5))\n* **menusurface:** synchronous quick menu does not close on button click ([45a6615](https://github.com/material-components/material-components-web/commit/45a6615e33eb8a7e6fc37e9ef43a3be3682b6b0e))\n* **notched-outline:** Use superclass properties without trailing underscores ([49bf31d](https://github.com/material-components/material-components-web/commit/49bf31d5c9c3ee34e9a51ce3b254a9101c578045))\n* **radio:** Use superclass properties without trailing underscores ([541638f](https://github.com/material-components/material-components-web/commit/541638fa2ba3410ca1055c5ae563face06fd20be))\n* **ripple:** Use superclass properties without trailing underscores ([6167cd0](https://github.com/material-components/material-components-web/commit/6167cd0756a623502f7f84750dcda25226a59794))\n* **select:** Also set font size for icon ([c113fc9](https://github.com/material-components/material-components-web/commit/c113fc942a88e2c53b2c36229b2ddff84e6d0eb5))\n* **select:** clean up helper text interactions ([654934d](https://github.com/material-components/material-components-web/commit/654934dfaff71dae2b56bd2d4bb04303f5439c3e))\n* **select:** Close menu on anchor click when menu is open ([8fa22aa](https://github.com/material-components/material-components-web/commit/8fa22aaccafa3b1ae09164b228d8e1b203337221))\n* **select:** Deduplicate change events ([4ad1274](https://github.com/material-components/material-components-web/commit/4ad12741e41c5b8e175f2bc8d5053daec6cedf18)), closes [#5570](https://github.com/material-components/material-components-web/issues/5570)\n* **select:** Fix redundant calculations & allow resyncing foundation to options ([ff4bc63](https://github.com/material-components/material-components-web/commit/ff4bc632aeeefb8eca16d774db01f8f176479659)), closes [#5646](https://github.com/material-components/material-components-web/issues/5646) [#5646](https://github.com/material-components/material-components-web/issues/5646) [#5686](https://github.com/material-components/material-components-web/issues/5686) [#5783](https://github.com/material-components/material-components-web/issues/5783)\n* **select:** fix screenreader click interactions ([8904f3c](https://github.com/material-components/material-components-web/commit/8904f3cbe922c5b64f5b7297f23c49861ee13f07))\n* **select:** fully separate density mixins for filled variants ([d66d22b](https://github.com/material-components/material-components-web/commit/d66d22bf9b9f221ff8b2d713b1e2fc9288f490df))\n* **select:** Make compatible with rich list-items ([0a7895f](https://github.com/material-components/material-components-web/commit/0a7895f4d4c22296ad23b2d8a7e1a4dbe231b941))\n* **select:** Remove pointer events where unnecessary ([0e052b2](https://github.com/material-components/material-components-web/commit/0e052b24f415b81fbffb45182030dd8b9d68ee98))\n* **select:** Set aria-selected=\"false\" properly ([730920f](https://github.com/material-components/material-components-web/commit/730920fbba046b0a7c3821f52877504a78373f1f))\n* **select:** Update disabled state ([f83e008](https://github.com/material-components/material-components-web/commit/f83e00898fb57e49e38ef59b3458df4525332302))\n* **select:** Update dropdown arrow icon transitions ([15d6544](https://github.com/material-components/material-components-web/commit/15d65448e5dd8a29477b34754264644ad88f8421))\n* **select:** Update markup in tests and README ([e3eacef](https://github.com/material-components/material-components-web/commit/e3eacefcc0ca3ca89af34b3e4d3dc13c5a27570b))\n* **select:** Use key constants from DOM package ([388b042](https://github.com/material-components/material-components-web/commit/388b042c7193f78874a8854664742fc7285f1386))\n* **select:** Use superclass properties without trailing underscores ([c472bbb](https://github.com/material-components/material-components-web/commit/c472bbbd1aa5e362c227a1c5204601362444d22f))\n* **slider:** avoid server side rendering error ([95c7355](https://github.com/material-components/material-components-web/commit/95c73550e886c2832aa42cd065552551b6690a61))\n* **slider:** mobile sliding regression ([e844443](https://github.com/material-components/material-components-web/commit/e844443878b9711a306e72b951c7ea931b17d837)), closes [#5894](https://github.com/material-components/material-components-web/issues/5894)\n* **slider:** two change events fired on each up ([d10412c](https://github.com/material-components/material-components-web/commit/d10412cb24150639acc617caef1c7fac4fb6e4bd))\n* **snackbar:** Use superclass properties without trailing underscores ([39b0b8e](https://github.com/material-components/material-components-web/commit/39b0b8e06ef68d5b59515454907b5472ce75b842))\n* **snackbar:** Use superclass properties without trailing underscores ([5ea0f3f](https://github.com/material-components/material-components-web/commit/5ea0f3fc47e8bd18fcc8fd3af84fcecc17b3f800))\n* **switch:** always set track to transparent border ([9a169f4](https://github.com/material-components/material-components-web/commit/9a169f4b158a3148126ba38bcdfa9d163434d9bb))\n* **switch:** use CSS custom properties for theming ([d6315ef](https://github.com/material-components/material-components-web/commit/d6315efe26e7baf45fd88244efbb24c612a95cb4))\n* **tab:** Use superclass properties without trailing underscores ([a4b2e61](https://github.com/material-components/material-components-web/commit/a4b2e61d47b515a0ebbdee788e8462d800bea7f3))\n* **tab-bar:** Use superclass properties without trailing underscores ([f2de07c](https://github.com/material-components/material-components-web/commit/f2de07c606c8d57942d5f0022e90eecb41b3ad61))\n* **tab-indicator:** Use superclass properties without trailing underscores ([d30a214](https://github.com/material-components/material-components-web/commit/d30a214ace1c0ae41fd5d7f8ba4915035fd9235a))\n* **tab-scroller:** Use superclass properties without trailing underscores ([96dba1d](https://github.com/material-components/material-components-web/commit/96dba1d3127c9364cff5786a01be8c17f69ab0ee))\n* **text-field:** Use superclass properties without trailing underscores ([e6165eb](https://github.com/material-components/material-components-web/commit/e6165eb156d60f8f650c68931854136a1a44fc6e))\n* **textfield:** clean up input padding ([8639c26](https://github.com/material-components/material-components-web/commit/8639c269010b77b17f1a5052d57abcb5f7d2892a))\n* **textfield:** core-styles now applies sub-element core-styles ([bcdad99](https://github.com/material-components/material-components-web/commit/bcdad99bbf9ac4d2bbc09cf6378c0c040521e514)), closes [#5927](https://github.com/material-components/material-components-web/issues/5927)\n* **textfield:** IE11 label overlapping placeholder ([781434a](https://github.com/material-components/material-components-web/commit/781434a92f4dddc9b2d39853e1f5792e89e7b45b))\n* fix show/hide clauses in import-only files ([148e448](https://github.com/material-components/material-components-web/commit/148e448de1290e3628fac6eae19609c8e1bffda3))\n* **textfield:** remove absolute positioning from icons ([1e13d1d](https://github.com/material-components/material-components-web/commit/1e13d1d5a68632f1b0b5a9134f657d59104969f4))\n* mark all packages as side-effect-free ([be7cb05](https://github.com/material-components/material-components-web/commit/be7cb05996a7281d1e0c12c0f4677e4d091a2329))\n* server-side rendering errors in linear progress and slider ([7d0b983](https://github.com/material-components/material-components-web/commit/7d0b983a902deee6941d61906aa5a880628db4e9))\n* **textfield:** remove deprecated dense variant in favor of density ([776291e](https://github.com/material-components/material-components-web/commit/776291ef03205e4063b4040eb66f9648e16b4af6)), closes [#4142](https://github.com/material-components/material-components-web/issues/4142)\n* **textfield:** textarea density label position is now correct ([2f8a227](https://github.com/material-components/material-components-web/commit/2f8a227a289a56702fec6592a87cf8bab422326a))\n* **textfield:** textarea min-width not set correctly for Chrome ([0a371b4](https://github.com/material-components/material-components-web/commit/0a371b4fe4ca4452618a867aac1731c6d3136b91))\n* **textfield:** update outlined textarea specs ([524b7b8](https://github.com/material-components/material-components-web/commit/524b7b8127e74bc3d551bd3b81e951fc51682665))\n* **top-app-bar:** Use superclass properties without trailing underscores ([863ac1b](https://github.com/material-components/material-components-web/commit/863ac1b0f1723883565ca813d56bba0a1c8a832f))\n\n\n### Code Refactoring\n\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([98b8434](https://github.com/material-components/material-components-web/commit/98b843417ef6c0a10460532a37df389b0c7e936f))\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([9372e49](https://github.com/material-components/material-components-web/commit/9372e493954585c939f341486d0361efb87da806))\n* **select:** Fix alignment issues, upgrade anchor to interactive element ([28d10a9](https://github.com/material-components/material-components-web/commit/28d10a96e1d5e5762d5a056ac805070e9fb6a4e1)), closes [#5428](https://github.com/material-components/material-components-web/issues/5428)\n\n\n### Features\n\n* **button:** Add button ripple-states mixin, for simpler customization of button ripple color. ([ed7f324](https://github.com/material-components/material-components-web/commit/ed7f324636287e95e8d966866a7c72af94377cf6))\n* **button:** Expand outlined touch target to include side borders ([ce6cb70](https://github.com/material-components/material-components-web/commit/ce6cb7024d1da3b0e4fb5e2c67ba269dbb3098ec))\n* **checkbox:** Add support for checkbox CSS-only `indeterminate` checkbox ([b273afa](https://github.com/material-components/material-components-web/commit/b273afa93441e6d0375f7df33d5b69d8a7e1cfa8))\n* **chips:** Add chips styling ([1db5c9f](https://github.com/material-components/material-components-web/commit/1db5c9fc842292715f8b4603ce0b979066f1c639))\n* **chips:** Add configurable primary action focus ([deb212d](https://github.com/material-components/material-components-web/commit/deb212de41e1073f7ff00af92e5f37bad0d8c4b0))\n* **chips:** Add focus{in|out} handlers ([10af6cf](https://github.com/material-components/material-components-web/commit/10af6cf39cb2ae0a7deb9a951960f115f6ecdace))\n* **chips:** Add keyCode support ([82fa986](https://github.com/material-components/material-components-web/commit/82fa986b95be4c16271df50effda1046d015d35c))\n* **chips:** Add trailing action feature targeting test ([bec0659](https://github.com/material-components/material-components-web/commit/bec0659206aee793e6970d59c73f7969ab540b69))\n* **chips:** Create trailing action business logic ([9ebee4c](https://github.com/material-components/material-components-web/commit/9ebee4ceb998e5fa651d4f147e5e39d43600db6e))\n* **chips:** Expose trailing action chip files ([6b48781](https://github.com/material-components/material-components-web/commit/6b48781bf97d3b08b8f35b9eacde2b87748ae2e1))\n* **chips:** Reposition trailing action touch target width mixin ([3846ce3](https://github.com/material-components/material-components-web/commit/3846ce311f65156f24dbd229100e660f1285bf5f))\n* **chips:** Restructure trailing action mixins ([05f5e15](https://github.com/material-components/material-components-web/commit/05f5e1583b81bc00dbcd2ae21ee0acc43b3e13b4))\n* **chips:** Use trailing action component in chip ([058cfd2](https://github.com/material-components/material-components-web/commit/058cfd23caa5c00f29c90f3d2fc9b813581ba974))\n* **circular-progress:** Add foundation methods to get isDeterminate and progress value ([7d8f9c8](https://github.com/material-components/material-components-web/commit/7d8f9c8d73f16c01ed4a941ab9510377a0aae219))\n* **circular-progress:** Add Sass styles and tests ([bd33cb5](https://github.com/material-components/material-components-web/commit/bd33cb56bdab7139052aeedbeec363f17b4dfc40))\n* **circular-progress:** Add TS for foundation, adapter, component with tests ([548b1d4](https://github.com/material-components/material-components-web/commit/548b1d4057f21e066a4c494a57a0c068c23e18cd))\n* **data-table:** Add base styles to support pagination. ([927fa90](https://github.com/material-components/material-components-web/commit/927fa902c3297a5a7cc9436e82cb81f3aabe1b4b))\n* **data-table:** Add foundation methods to support loading state. ([e75deb8](https://github.com/material-components/material-components-web/commit/e75deb8540fa70236087d335c9cd6280bd643285))\n* **data-table:** Added sort status label to sortable column header ([9833dc2](https://github.com/material-components/material-components-web/commit/9833dc28775a02fa4c7c490ae5df1ed198bbb398))\n* **data-table:** Added styles for table in loading state ([35a32aa](https://github.com/material-components/material-components-web/commit/35a32aaeac17e290e2e9f9a1310c5a44a08f624a))\n* **data-table:** Added styles to support column sorting. ([17b9699](https://github.com/material-components/material-components-web/commit/17b9699c4454a107043e5a1f9874a091089dd112))\n* **data-table:** Added styles to support rows per page select menu in pagination ([3ee488f](https://github.com/material-components/material-components-web/commit/3ee488f1c0f65972459f2dbc74b6c3365786df4b))\n* **data-table:** Added support for column sorting feature in data table ([06ef147](https://github.com/material-components/material-components-web/commit/06ef147b593d134fcd03f48fc3581d8fd6068865))\n* **data-table:** Added support for row header cell and other a11y improvements. ([27533c1](https://github.com/material-components/material-components-web/commit/27533c19e9c72c5a27a33aaa764c1b6a05175cf5))\n* **data-table:** Foundation changes to support column sorting ([6ee0355](https://github.com/material-components/material-components-web/commit/6ee03557260d0a23296e36cba5aaa76fe0cf96a6))\n* **data-table:** Make rows per page wrap in new line when overflows ([09abc92](https://github.com/material-components/material-components-web/commit/09abc92198d1628c57eee5e75c58da52b223c322))\n* **data-table:** Set progress indicator styles based on table body height ([c026422](https://github.com/material-components/material-components-web/commit/c0264227393df8eb9259a2b24c23b31fe0ca84f3))\n* **dialog:** Add padding mixin ([ad0c0c1](https://github.com/material-components/material-components-web/commit/ad0c0c1034d0b9257a62d3dd9f5d27aada99f1f7))\n* **dom:** Add keyboard support ([5f24faa](https://github.com/material-components/material-components-web/commit/5f24faacb1ef8996ae81f3a1c1e43910ba67b024))\n* **drawer:** allow custom properties in width() ([39e6f71](https://github.com/material-components/material-components-web/commit/39e6f71e2e03b75512242d7520678c32c5af2b70))\n* **fab:** Add outline in high-contrast mode ([deda86d](https://github.com/material-components/material-components-web/commit/deda86d8cc4665b334c4d21c541a4a30244fee72))\n* **floating-label:** add required modifier class ([047e6b3](https://github.com/material-components/material-components-web/commit/047e6b337899a57290283cb0387f33738853cbc2))\n* **form-field:** Add support for space-between ([e84b9c8](https://github.com/material-components/material-components-web/commit/e84b9c816d32da6dec058d92fc21dc5ac8fec787)), closes [#5747](https://github.com/material-components/material-components-web/issues/5747)\n* **formfield:** add nowrap class/prop to MDC/MWC ([c4b4bba](https://github.com/material-components/material-components-web/commit/c4b4bba9659bf15207e79b1f63fcc9946404d9c7))\n* **formfield:** Remove trailing underscores from private properties ([2f052d8](https://github.com/material-components/material-components-web/commit/2f052d82433a852d65785b1054ce4665ad1f6265))\n* **iconbutton:** Add icon button variant which supports toggling aria label. ([f838c6e](https://github.com/material-components/material-components-web/commit/f838c6e55672268de4e6e3b31b154d4f9050242f))\n* **iconbutton:** Remove trailing underscores from private properties ([119e214](https://github.com/material-components/material-components-web/commit/119e21426d73305fe348798cb7ce88077995fdd0))\n* **linear-progress:** Add foundation methods to fetch progress and determinate state. ([4dc45af](https://github.com/material-components/material-components-web/commit/4dc45af6c4bc81f5734a24c160046d283c1e9a6d))\n* **linearprogress:** Remove trailing underscores from private properties ([893eb18](https://github.com/material-components/material-components-web/commit/893eb1876220e5313f9db37365049b8c2282109c))\n* **list:** add focus indicator in hi-contrast mode ([8602f1b](https://github.com/material-components/material-components-web/commit/8602f1b4da404816513733a21973ec9cbc9acfa3))\n* **list:** Add mixin for selected item's text color ([bd8ca96](https://github.com/material-components/material-components-web/commit/bd8ca96788c9cb793288b6aa5c406b220be0bd9c))\n* **menu:** Add mixin to flatten menu top when opened-below anchor ([1e17c49](https://github.com/material-components/material-components-web/commit/1e17c49b360fd0e01c9a74b92978031534003b5b))\n* **menu-surface:** Add support for flipping menu corner horizontally. ([7b44824](https://github.com/material-components/material-components-web/commit/7b448240263b45c6b474c2f758cd1c02f3c708ad))\n* **ripple:** Reorganize ripple opacities ([008c4d3](https://github.com/material-components/material-components-web/commit/008c4d3191f9c2a76732688504d2299420734cdd))\n* **rtl:** allow values to be theme keys and custom props ([afb1c11](https://github.com/material-components/material-components-web/commit/afb1c11a9e9048ba7c2ed30e32e892ae483dfccc))\n* **select:** Add menu invalid class ([4ba3c9a](https://github.com/material-components/material-components-web/commit/4ba3c9a319dad4101f4d24607a79c01390330acd))\n* **select:** Add mixin for min-width ([09f5919](https://github.com/material-components/material-components-web/commit/09f591967a42e4dc27c0f7022d9ae71e94c07c3d))\n* **select:** Add openMenu foundation method ([9b0b5f2](https://github.com/material-components/material-components-web/commit/9b0b5f2e034a7f8ab0e68e3afbd7c246447f53e7))\n* **select:** Add styles for high-contrast mode in IE ([05cc5c2](https://github.com/material-components/material-components-web/commit/05cc5c20651eed3e40960074db919f0d030c46fb))\n* **select:** Auto-align width of menu to select by default ([1b3dd84](https://github.com/material-components/material-components-web/commit/1b3dd846db4da7dcb1baaf2003e35e462cb799b7))\n* **select:** Change root to inline-block & add fullwidth flag ([2673adb](https://github.com/material-components/material-components-web/commit/2673adb74397d55c9dcd8e5fd86b3efc87a13a28))\n* **select:** changing density also also changes menu's list density ([68a2af1](https://github.com/material-components/material-components-web/commit/68a2af131b82e9b50e70754a2d653d6305dac4b9))\n* **select:** Create additional state mixins ([744d751](https://github.com/material-components/material-components-web/commit/744d751a0c0f154d5d0d05def88203b68c3a26a5))\n* **select:** extend typeahead to work when menu closed but select focused ([a0dc2b5](https://github.com/material-components/material-components-web/commit/a0dc2b5c4afbf3fd8274c752d43aeeeb11231e5f))\n* **select:** flatten menu top when opened below ([912d902](https://github.com/material-components/material-components-web/commit/912d9021dab7712e0ab711fcaffb3933a960c171))\n* **select:** gracefully display long labels ([21c4e4e](https://github.com/material-components/material-components-web/commit/21c4e4ed866944c090ae3d6dffe9f5e4725b7ffc))\n* **select:** Implement density ([610c68d](https://github.com/material-components/material-components-web/commit/610c68d97646f523eaff0bb26c08baa5903e9211))\n* **select:** introduce custom validity ([fd8f8f2](https://github.com/material-components/material-components-web/commit/fd8f8f2b77b0a17e25f78b5a510b7afe4bbd230b))\n* **select:** lower dropdown icon size and list leading padding when dense ([32aa236](https://github.com/material-components/material-components-web/commit/32aa23641258671e0eac803c0f41ae78ecce32fd))\n* **select:** make selected text more flexible ([2b420c5](https://github.com/material-components/material-components-web/commit/2b420c5b318b7ada726dec774d9e09624bca9822))\n* **select:** Replace hardcoded leading margins for options with dummy graphic ([7461aad](https://github.com/material-components/material-components-web/commit/7461aad68924d0f3bb790987b01f802078ebc7df))\n* **select:** Support typeahead ([b0fdca4](https://github.com/material-components/material-components-web/commit/b0fdca4921afd58de567bd53b29c9b6e44dac5c1)), closes [#5705](https://github.com/material-components/material-components-web/issues/5705)\n* **select:** Update behavior on upArrow/downArrow ([d92d8c9](https://github.com/material-components/material-components-web/commit/d92d8c93ee6d9c030e6d373ac2b8670ac56417ad))\n* **select:** Update helper-text interactions ([142b154](https://github.com/material-components/material-components-web/commit/142b1549ee0cf40b1f1531e79e53fe5e826f254d)), closes [#5463](https://github.com/material-components/material-components-web/issues/5463)\n* **select:** use floating label's required class ([d86ad3b](https://github.com/material-components/material-components-web/commit/d86ad3b6081234359ff19547649f9d391ea8aa9e))\n* **shape:** add shape custom properties ([0743288](https://github.com/material-components/material-components-web/commit/0743288fb04dc8578f0b850d31fad6c00c97ea1c))\n* **text-field:** Truncate floating label width w/ icons ([c141801](https://github.com/material-components/material-components-web/commit/c141801d50516a18fe53d4bc78591cefb4f57623))\n* **textfield:** add filled class variant ([b70bc60](https://github.com/material-components/material-components-web/commit/b70bc601ef570dab4598ae6f3ca51bbf884fac96))\n* **textfield:** add filled textarea variant ([4497b86](https://github.com/material-components/material-components-web/commit/4497b86ed8b3e0ee0781dd6f795aa1ff332d2a3b))\n* **textfield:** add forced LTR input ([490fbdc](https://github.com/material-components/material-components-web/commit/490fbdc092c5c59d63f83407b83b37fb524ed0e5))\n* **textfield:** add prefix and suffix ([6601d24](https://github.com/material-components/material-components-web/commit/6601d24afdc3a3d0bd2a9b3fcca68c35c9415ec1)), closes [#1892](https://github.com/material-components/material-components-web/issues/1892)\n* **textfield:** add specific label-floating class ([a88c8e4](https://github.com/material-components/material-components-web/commit/a88c8e4dc873ae74a3afbae0dc8635dfaa03e67b))\n* **textfield:** allow character counter to be moved outside of the textarea. ([84e7ed5](https://github.com/material-components/material-components-web/commit/84e7ed5825d3109c229d0f1f6c3edf97a3548226))\n* **textfield:** allow disabled textareas to scroll and resize ([b9776b1](https://github.com/material-components/material-components-web/commit/b9776b1d09b9ccfac38b3dc471dee2fd9fc8558a))\n* **textfield:** Create float transition mixin ([ca61b65](https://github.com/material-components/material-components-web/commit/ca61b656fababdf25adaa307963d4f37e6d413ec))\n* **textfield:** Limit notched outline max-width ([0ab62a6](https://github.com/material-components/material-components-web/commit/0ab62a65b17192a94102231ca63f54adc39675ae))\n* **textfield:** move resize handle for textareas to bottom corner ([ed52af7](https://github.com/material-components/material-components-web/commit/ed52af7677ad37138b6660ca11fbdb209be05b46))\n* **textfield:** required outlined modifier for textarea ([b10d0d7](https://github.com/material-components/material-components-web/commit/b10d0d7f1911b381a47d39b5d0bc4543089efb3e))\n* **textfield:** support svg icons for textfield ([d91794c](https://github.com/material-components/material-components-web/commit/d91794c7ecafbaef7150d2c88226b96d7e4c4ea6))\n* **theme:** add new property mixin and custom property support ([51512a4](https://github.com/material-components/material-components-web/commit/51512a4ac375a6175b4a533ff004ea90a4318c9e))\n* **theme:** custom property fallback values are now optional ([01de070](https://github.com/material-components/material-components-web/commit/01de07011d8b4b121a061da66fafe610f5484a51))\n* **typography:** add container baseline mixins for flexbox ([69edc6e](https://github.com/material-components/material-components-web/commit/69edc6e2899636cfccb117376bb64dc0a267c588))\n\n\n### BREAKING CHANGES\n\n* **button:** Correct misspelling of overflow for button's label-overflow-ellipsis mixin\n* **button:** Correct misspelling of overflow for button's label-overflow-ellipsis mixin\n* **button:** Removes button theme-baseline() mixin, moves mixin contents to base button Sass.\n* **chips:** The chip adapter and foundation interfaces have changed. Chips now use the trailing action subcomponent.\n* **data-table:** Added a wrapper element to data table's table element to fix horizontal scrolling issue when pagination controls are added.\n* **floating-label:** all labels that are part of a required field should now add the mdc-floating-label--required class for required fields to avoid a FOUC\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **select:** Added adapter method `addMenuClass`, `removeMenuClass`\n* **select:** Added adapter methods `isTypeaheadInProgress`, `typeaheadMatchItem`\n* **select:** DOM structure for dropdown icon changed; `$dropdown-color` renamed to `$dropdown-icon-color`, `$dropdown-opacity` removed, `$disabled-dropdown-opacity` removed.\n* **select:** HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`.\n* **select:** `density` mixin split into `filled-density`, `filled-with-leading-icon-density`; `height` mixin split into `filled-height`, `filled-with-leading-icon-height`\n* **select:** `mdc-menu--fullwidth` class replaces custom width class for the menu markup in select\n* **select:** adapter method removeAttributeAtIndex removed.\n* **select:** added adapter method `removeSelectAnchorAttr`\n* **select:** dropdown icon SVG markup now has `mdc-select__dropdown-icon-graphic` class.\n* **select:** empty space around `mdc-list-item__text` spans removed in select markup\n* **select:** helper text now persistent by default, `mdc-select-helper-text--persistent` removed\n* **select:** non-outlined selects now require a `mdc-select--filled` class on its root\n* **select:** root of mdc-select is now an inline-block element, use custom width class (i.e. `demo-width-class`) on the root instead of the anchor for width adjustments; alternately, use the new `mdc-select--fullwidth` on the root to expand width to that of its parent container\n* **select:** variable `$outline-disabled-border` renamed to `$disabled-outline-color`; icon variable `$icon-opacity` removed, use alpha channel of `$icon-color` instead.\n* **textfield:** Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.\n* **textfield:** mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.\n* **textfield:** mdc-text-field--textarea must now include mdc-text-field--outlined modifier class\n* **textfield:** mdc-text-field-SUB_ELEMENT imports have been removed\n* **textfield:** removed the following variables: `$input-padding`, `$input-padding-top`, `$input-padding-bottom`, `$outlined-input-padding-top`, `$outlined-input-padding-bottom`, `$input-border-bottom`\n* **textfield:** textareas must now add a `mdc-text-field__resizer` span around the textarea (and internal counter if present) if they are resizable\n* **textfield:** textareas with internal character counters must specify the `mdc-text-field--with-internal-counter` class. Character counters should move after the textarea element.\n* **theme:** `color-hash()` (and checkbox container-colors mixins) no longer works with `var()` values and now only works with custom property Maps created by `custom-properties.create()`\n* **typography:** `typography.baseline-top()` and `typography.baseline-bottom()` are now private. Use `typography.baseline()` for containers and `typography.text-baseline()` for text with $top and $bottom params.\n\n\n# [6.0.0](https://github.com/material-components/material-components-web/compare/v5.1.0...v6.0.0) (2020-04-22)\n\n### Bug Fixes\n\n* **auto-init:** Fixed issue with multiple default exports ([#5464](https://github.com/material-components/material-components-web/issues/5464)) ([8ddd5c6](https://github.com/material-components/material-components-web/commit/8ddd5c6dcbfa6d81a063b37aee4021ebf34d18f0))\n* **button:** Fix outline & ink color according to spec guidance ([#5268](https://github.com/material-components/material-components-web/issues/5268)) ([ee1a68c](https://github.com/material-components/material-components-web/commit/ee1a68c54fa9240a334b0462513b855d5dab4807))\n* **button:** Fixed  parameter default value in height mixin ([#5244](https://github.com/material-components/material-components-web/issues/5244)) ([b0cecf1](https://github.com/material-components/material-components-web/commit/b0cecf1451c13fd8c159c1b0ca90b2a1e9b907a0))\n* **checkbox:** change checkbox event type from change to click and add some logic for IE browser ([#5316](https://github.com/material-components/material-components-web/issues/5316)) ([2e491de](https://github.com/material-components/material-components-web/commit/2e491de555d54f8d41474ccda156e5f9d0666bc4)), closes [#4893](https://github.com/material-components/material-components-web/issues/4893)\n* **checkbox:** Disabled state colors in IE11 high contrast mode ([#5263](https://github.com/material-components/material-components-web/issues/5263)) ([d6a1d4b](https://github.com/material-components/material-components-web/commit/d6a1d4bf81b828f214e8bbf941090ef7d8e91c58))\n* **checkbox:** Replace unique-id with custom color hash functio… ([#5404](https://github.com/material-components/material-components-web/issues/5404)) ([7be9e4a](https://github.com/material-components/material-components-web/commit/7be9e4a04387b9ca5f8afae6e4edcb3b37e6a86b))\n* **checkbox:** update disabled color values ([#5209](https://github.com/material-components/material-components-web/issues/5209)) ([821871e](https://github.com/material-components/material-components-web/commit/821871e04737c5b0c0afded9e8e885680ca25a1f))\n* **checkbox:** Use secondary and on-secondary as default colors ([b95172e](https://github.com/material-components/material-components-web/commit/b95172e69613c0defe82191b86ed1c1999b74400)), closes [#5730](https://github.com/material-components/material-components-web/issues/5730)\n* **chips:** .d.ts file generated with syntax error ([d154836](https://github.com/material-components/material-components-web/commit/d1548369f2311e164b0920ed651ba211d05543fa))\n* **chips:** .d.ts file generated with syntax error ([#5577](https://github.com/material-components/material-components-web/issues/5577)) ([98f7faa](https://github.com/material-components/material-components-web/commit/98f7faa05fa7c88e0231a00942f4ff9dedf4e8c0))\n* **chips:** Do not throw error if chip set becomes empty ([#5290](https://github.com/material-components/material-components-web/issues/5290)) ([f978109](https://github.com/material-components/material-components-web/commit/f978109c33d9e67aebe5af3e460174686eea7b4a))\n* **chips:** Fix browser back nav in FF when removing chip with… ([#5537](https://github.com/material-components/material-components-web/issues/5537)) ([a1a0deb](https://github.com/material-components/material-components-web/commit/a1a0deb3ea47d5d89efdcab062e438218148b975))\n* **chips:** Handle IE/Edge specific key names in keyboard navigation logic ([3657f88](https://github.com/material-components/material-components-web/commit/3657f886327182c26f1d1555b2ac67c2128140b5))\n* **chips:** Move touch target inside primary action ([ad3bbf7](https://github.com/material-components/material-components-web/commit/ad3bbf7822d1fe26694b798299c48e8896971e25))\n* **circular-progress:** Add .npmignore file to ignore typescript files when publishing ([#5801](https://github.com/material-components/material-components-web/issues/5801)) ([f172b0f](https://github.com/material-components/material-components-web/commit/f172b0f90a91d8d3d700763d1496bb7b9c1a8d51)), closes [#5800](https://github.com/material-components/material-components-web/issues/5800)\n* **circular-progress:** fix determinate transition typo & 4 color keyframes ([a301636](https://github.com/material-components/material-components-web/commit/a3016368df53b1c7967d7d146a9ea53a24442fa9))\n* **circular-progress:** Fix naming in package.json and add to jsBundleFactory ([86f7cad](https://github.com/material-components/material-components-web/commit/86f7cad8330dbd600e478610eefd8dd92eb3d8c7))\n* **circular-progress:** Force LTR layout ([6a40ef2](https://github.com/material-components/material-components-web/commit/6a40ef217f597138ee2920d2160364649dbf5620))\n* **circular-progress:** Switch mixins import to `[@use](https://github.com/use)` ([098ae32](https://github.com/material-components/material-components-web/commit/098ae3285223af2532659dec233537a55c1183f5))\n* **core:** Fix canary release by excluding test files from default tsconfig ([#5317](https://github.com/material-components/material-components-web/issues/5317)) ([c916008](https://github.com/material-components/material-components-web/commit/c9160084f1f64800e74e0e69673c6b2beca22ee4))\n* **data-table:** change svg attribute name viewbox to viewBox ([#5483](https://github.com/material-components/material-components-web/issues/5483)) ([#5493](https://github.com/material-components/material-components-web/issues/5493)) ([f3adce8](https://github.com/material-components/material-components-web/commit/f3adce86f43c15d3e2311363bf317ff68a3bb99d))\n* **data-table:** Fix pagination box height ([eb28b6e](https://github.com/material-components/material-components-web/commit/eb28b6ecc65a9979ef0959eac5dbfde5b4d3b2dc))\n* **data-table:** Fixed default feature targeting query params of sort mixins ([e33c49e](https://github.com/material-components/material-components-web/commit/e33c49eaf9c0dbc601f3610af6358cbf2833229c))\n* **data-table:** Hover styles for sortable header cell ([d580805](https://github.com/material-components/material-components-web/commit/d5808057fcdf00364731e0896ef7031ac605cf55))\n* **data-table:** Reverse the arrow direction icon for column sorting ([a7c827f](https://github.com/material-components/material-components-web/commit/a7c827f17ce9be631484676ccb6b5f18604803ae))\n* **data-table:** unable to redefine colors in class-based themi… ([#5751](https://github.com/material-components/material-components-web/issues/5751)) ([4d48051](https://github.com/material-components/material-components-web/commit/4d48051c1099f48e867cf08f070138a7abc719fc))\n* **data-table:** unable to redefine colors in class-based theming ([4b45b66](https://github.com/material-components/material-components-web/commit/4b45b662057edd8819f1a515db88e1c12254cc30))\n* **dialog:** Move aria roles from dialog root to dialog surface… ([#5239](https://github.com/material-components/material-components-web/issues/5239)) ([c704b71](https://github.com/material-components/material-components-web/commit/c704b71d931dd0db191a30ff88a5d0c44f099300))\n* **elevation:** Update overlay color mixin ([#5331](https://github.com/material-components/material-components-web/issues/5331)) ([b723dfa](https://github.com/material-components/material-components-web/commit/b723dfa7848c4b96bc24bb148cc5f55f316625ee))\n* **fab:** Add missing dep to fab package.json. ([#5236](https://github.com/material-components/material-components-web/issues/5236)) ([e0f6fd9](https://github.com/material-components/material-components-web/commit/e0f6fd931f677874dcad4d91c3d74a2125674e96))\n* **fab:** Add overflow: visible to make touch target visible in… ([#5241](https://github.com/material-components/material-components-web/issues/5241)) ([5850080](https://github.com/material-components/material-components-web/commit/58500806e27a0931404631d76bc09646bc64caaf))\n* **fab:** Adjust fab line-height ([#5254](https://github.com/material-components/material-components-web/issues/5254)) ([525989b](https://github.com/material-components/material-components-web/commit/525989b5d8dfe86bcb6f65e0f0f0fd138e4b4b76))\n* **fab:** Adjust fab line-height to center text ([#5258](https://github.com/material-components/material-components-web/issues/5258)) ([591a6ad](https://github.com/material-components/material-components-web/commit/591a6ad449f98efa7bc00c8afdd2716a6fbe75d9))\n* **floatinglabel:** Estimate hidden scroll width ([#5448](https://github.com/material-components/material-components-web/issues/5448)) ([981ec9b](https://github.com/material-components/material-components-web/commit/981ec9b6fd538caadb44f7469745de8f8954c89b))\n* **linear-progress:** Temporary rollback of [#5656](https://github.com/material-components/material-components-web/issues/5656) while updating downstream dependencies ([9cf5e98](https://github.com/material-components/material-components-web/commit/9cf5e9842475e50046462aa1c6d18e326abaee17))\n* **linear-progress:** support aria attributes (#5248) ([7084b40](https://github.com/material-components/material-components-web/commit/7084b403a4ab6be0856c670eebb39078a4fcbcfe)), closes [#5248](https://github.com/material-components/material-components-web/issues/5248)\n* **list:** Ensure disabled colors apply to primary and secondary text ([#5322](https://github.com/material-components/material-components-web/issues/5322)) ([878a08b](https://github.com/material-components/material-components-web/commit/878a08b7cf673ba45f124b400032928b2c273749))\n* **list:** No longer emits action event when disabled item selected ([f352d03](https://github.com/material-components/material-components-web/commit/f352d03f4ed48c5019a0a3e10ef12689a5ab5619)), closes [#5571](https://github.com/material-components/material-components-web/issues/5571)\n* **menu-surface:** Use margin_to_edge as a viewport margin in calculations for autopositioning. ([4b04cdb](https://github.com/material-components/material-components-web/commit/4b04cdb0fc4da4831340b01292c118b120c1fcb1))\n* **menusurface:** open and closed events not fired when already opened or closed ([9cff431](https://github.com/material-components/material-components-web/commit/9cff4318f0fe8a79f8787afd148907328a5223d5))\n* **menusurface:** synchronous quick menu does not close on button click ([45a6615](https://github.com/material-components/material-components-web/commit/45a6615e33eb8a7e6fc37e9ef43a3be3682b6b0e))\n* **notched-outline:** Restore component test ([#5449](https://github.com/material-components/material-components-web/issues/5449)) ([4269133](https://github.com/material-components/material-components-web/commit/4269133421f7058385255b0676be94c9c1170b2d))\n* **radio:** update disabled color values ([#5210](https://github.com/material-components/material-components-web/issues/5210)) ([491fddc](https://github.com/material-components/material-components-web/commit/491fddc31c16f99206b1fa7dce37d43b742e86f5))\n* **select:** Deduplicate change events ([4ad1274](https://github.com/material-components/material-components-web/commit/4ad12741e41c5b8e175f2bc8d5053daec6cedf18)), closes [#5570](https://github.com/material-components/material-components-web/issues/5570)\n* **select:** Do not fire change event on programmatic change ([#5255](https://github.com/material-components/material-components-web/issues/5255)) ([ec72968](https://github.com/material-components/material-components-web/commit/ec729683b46fb986a880f26870973337ec6788e5))\n* **select:** Fix notch outline width when floating ([#5319](https://github.com/material-components/material-components-web/issues/5319)) ([1c494e5](https://github.com/material-components/material-components-web/commit/1c494e5672c142f3f3451aa2270431844d35c88e))\n* **slider:** slider track not visible ([#5512](https://github.com/material-components/material-components-web/issues/5512)) ([f2426d2](https://github.com/material-components/material-components-web/commit/f2426d26e683591cee87b4107f990492b47ec837))\n* **slider:** two change events fired on each up ([d10412c](https://github.com/material-components/material-components-web/commit/d10412cb24150639acc617caef1c7fac4fb6e4bd))\n* **slider:** use secondary custom property color for slider container ([#5132](https://github.com/material-components/material-components-web/issues/5132)) ([aa8e43e](https://github.com/material-components/material-components-web/commit/aa8e43e9afaa1e00080f149bbe497746b57a285a))\n* **slider:** Visual bug when slider value is displayed as \"-0\" ([3fc3ab5](https://github.com/material-components/material-components-web/commit/3fc3ab520ab5399c3b87b094e047a1751f7aa9af))\n* **snackbar:** add explicit width for label to wrap in ie11 ([#5497](https://github.com/material-components/material-components-web/issues/5497)) ([cd49033](https://github.com/material-components/material-components-web/commit/cd4903304412d79be8da96499091259b5e954c80))\n* **snackbar:** adjust mixins to meet spec ([#5477](https://github.com/material-components/material-components-web/issues/5477)) ([f16f15b](https://github.com/material-components/material-components-web/commit/f16f15b8fda0d8c283bed5551b78620bf2fd3b82))\n* **switch:** add transform transition to switch control to avoid overflow-x issues ([8c11ea2](https://github.com/material-components/material-components-web/commit/8c11ea2a3bd7962c6d895c5bd6b849f95b52d10c))\n* **switch:** always set track to transparent border ([9a169f4](https://github.com/material-components/material-components-web/commit/9a169f4b158a3148126ba38bcdfa9d163434d9bb))\n* **switch:** fix strict generic checks ([7f5e0c2](https://github.com/material-components/material-components-web/commit/7f5e0c23ffb2f547d9bfca6b68927b5861a3112b))\n* **switch:** handle aria-checked correctly. ([#5202](https://github.com/material-components/material-components-web/issues/5202)) ([#5357](https://github.com/material-components/material-components-web/issues/5357)) ([d245a1a](https://github.com/material-components/material-components-web/commit/d245a1a544c643b59f77cd2e01b7eb2c1182f6b9))\n* **switch:** set track border to be transparent ([#5323](https://github.com/material-components/material-components-web/issues/5323)) ([397905b](https://github.com/material-components/material-components-web/commit/397905b4e34ff9769d3ae18464bc397a0b13050f))\n* **switch:** use CSS custom properties for theming ([d6315ef](https://github.com/material-components/material-components-web/commit/d6315efe26e7baf45fd88244efbb24c612a95cb4))\n* **testing:** Revert change from [#5299](https://github.com/material-components/material-components-web/issues/5299). ([#5324](https://github.com/material-components/material-components-web/issues/5324)) ([5fb62be](https://github.com/material-components/material-components-web/commit/5fb62bead477f7db9a76d9c0adbfee4e9c110d37))\n* **textfield:** add placeholder mixins and fix disabled colors ([#5360](https://github.com/material-components/material-components-web/issues/5360)) ([0a40ced](https://github.com/material-components/material-components-web/commit/0a40ced406f96b5c84cf39457ffe880d00999714))\n* **textfield:** add separate classes for leading/trailing icons ([#5367](https://github.com/material-components/material-components-web/issues/5367)) ([70c708d](https://github.com/material-components/material-components-web/commit/70c708deece4c2c0afe38a31a4989abf2b1c1743))\n* **textfield:** change root element to <label> ([#5439](https://github.com/material-components/material-components-web/issues/5439)) ([d8d9502](https://github.com/material-components/material-components-web/commit/d8d95020ff94249f8755ca49aaa06a6e9f0813b0))\n* **textfield:** clean up input padding ([8639c26](https://github.com/material-components/material-components-web/commit/8639c269010b77b17f1a5052d57abcb5f7d2892a))\n* **textfield:** hide filled-variant floating label at <52px ([#5553](https://github.com/material-components/material-components-web/issues/5553)) ([5ff3380](https://github.com/material-components/material-components-web/commit/5ff33802c22acf7d94fd94c9ccdcfcf901397d56))\n* **textfield:** IE11 label overlapping placeholder ([781434a](https://github.com/material-components/material-components-web/commit/781434a92f4dddc9b2d39853e1f5792e89e7b45b))\n* **textfield:** incorrect mixin forward path ([#5554](https://github.com/material-components/material-components-web/issues/5554)) ([3e782d8](https://github.com/material-components/material-components-web/commit/3e782d8f84c0096f6a6de3e022017fbb05175fa2))\n* **textfield:** move ripple to separate element ([c541ebe](https://github.com/material-components/material-components-web/commit/c541ebe157a66e8d2e881fad16cc4dbe30b2c16b))\n* **textfield:** outlined trailing icon's position ([#5496](https://github.com/material-components/material-components-web/issues/5496)) ([93e2288](https://github.com/material-components/material-components-web/commit/93e2288b6ef73c13402a1f5122e2f9a4523ed4a4))\n* **textfield:** prevent placeholder styles from collapsing with minifiers ([d07c78d](https://github.com/material-components/material-components-web/commit/d07c78daa83389ef428618d334b037da67740b99))\n* add missing SASS dependencies ([#5337](https://github.com/material-components/material-components-web/issues/5337)) ([d2ae6e1](https://github.com/material-components/material-components-web/commit/d2ae6e17d19e7139bce45a0f44ce4ba172bbb3e6))\n* **textfield:** remove absolute positioning from icons ([1e13d1d](https://github.com/material-components/material-components-web/commit/1e13d1d5a68632f1b0b5a9134f657d59104969f4))\n* **textfield:** remove deprecated dense variant in favor of density ([776291e](https://github.com/material-components/material-components-web/commit/776291ef03205e4063b4040eb66f9648e16b4af6)), closes [#4142](https://github.com/material-components/material-components-web/issues/4142)\n* **textfield:** use correct disabled colors for IE11 high contrast ([5353985](https://github.com/material-components/material-components-web/commit/535398572daea2ec389c341f4e0c53cb33582b26))\n* Remove edge detection for CSS custom properties ([#5264](https://github.com/material-components/material-components-web/issues/5264)) ([fe444ac](https://github.com/material-components/material-components-web/commit/fe444ac29da5447419cf4c25edbdf934c6e388e4))\n* server-side rendering errors in linear progress and slider ([7d0b983](https://github.com/material-components/material-components-web/commit/7d0b983a902deee6941d61906aa5a880628db4e9))\n\n\n### Code Refactoring\n\n* migrate to the Sass module system ([#5453](https://github.com/material-components/material-components-web/issues/5453)) ([faa9af3](https://github.com/material-components/material-components-web/commit/faa9af310d1a18ec2c183830c84eb14d0492feab))\n* **grid-list:** Deprecate component ([#5499](https://github.com/material-components/material-components-web/issues/5499)) ([cf33f11](https://github.com/material-components/material-components-web/commit/cf33f113dd89bbfb2873c9ce3fa1525076bfd4ec))\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([98b8434](https://github.com/material-components/material-components-web/commit/98b843417ef6c0a10460532a37df389b0c7e936f))\n* **linear-progress:** Restructure buffer DOM to allow translucent buffer ([9372e49](https://github.com/material-components/material-components-web/commit/9372e493954585c939f341486d0361efb87da806))\n* **select:** Fix alignment issues, upgrade anchor to interactive element ([28d10a9](https://github.com/material-components/material-components-web/commit/28d10a96e1d5e5762d5a056ac805070e9fb6a4e1)), closes [#5428](https://github.com/material-components/material-components-web/issues/5428)\n* **touchtarget:** Rename mdc-touch-target-component => mdc… ([#5245](https://github.com/material-components/material-components-web/issues/5245)) ([afe0dd1](https://github.com/material-components/material-components-web/commit/afe0dd1bc240a7a88d76b0a3bf1a36044527babd))\n\n\n### Features\n\n* **button:** Add disabled state color mixins ([#5232](https://github.com/material-components/material-components-web/issues/5232)) ([b5eb51e](https://github.com/material-components/material-components-web/commit/b5eb51e942b8f233bc1a9a5cf4b4d0c94fb8ea57))\n* **button:** Add overflow ellipsis mixin ([#5352](https://github.com/material-components/material-components-web/issues/5352)) ([47949b0](https://github.com/material-components/material-components-web/commit/47949b08e0a2ec82178c638d8074c34c745409b4))\n* **button:** Expand outlined touch target to include side borders ([ce6cb70](https://github.com/material-components/material-components-web/commit/ce6cb7024d1da3b0e4fb5e2c67ba269dbb3098ec))\n* **button:** Setup elevation overlay ([#5256](https://github.com/material-components/material-components-web/issues/5256)) ([3cbee6d](https://github.com/material-components/material-components-web/commit/3cbee6dac7cafbe8986bad0a8593d870b00f5f32))\n* **card:** Add elevation overlay structure ([#5282](https://github.com/material-components/material-components-web/issues/5282)) ([aa0eba4](https://github.com/material-components/material-components-web/commit/aa0eba489a33cb523ae1b5ac5b0ab24995731456))\n* **checkbox:** Add support for checkbox CSS-only `indeterminate` checkbox ([b273afa](https://github.com/material-components/material-components-web/commit/b273afa93441e6d0375f7df33d5b69d8a7e1cfa8))\n* **chips:** Add chips styling ([1db5c9f](https://github.com/material-components/material-components-web/commit/1db5c9fc842292715f8b4603ce0b979066f1c639))\n* **chips:** Add elevation overlay structure ([#5279](https://github.com/material-components/material-components-web/issues/5279)) ([3e560b3](https://github.com/material-components/material-components-web/commit/3e560b33a8fbf820a404596d76ae5f743e57b6a2))\n* **chips:** Add focus{in|out} handlers ([10af6cf](https://github.com/material-components/material-components-web/commit/10af6cf39cb2ae0a7deb9a951960f115f6ecdace))\n* **chips:** Add keyCode support ([82fa986](https://github.com/material-components/material-components-web/commit/82fa986b95be4c16271df50effda1046d015d35c))\n* **chips:** Add trailing action feature targeting test ([bec0659](https://github.com/material-components/material-components-web/commit/bec0659206aee793e6970d59c73f7969ab540b69))\n* **chips:** Announce when chips are removed ([b3f70eb](https://github.com/material-components/material-components-web/commit/b3f70ebded85240e75c6d1553cc9d0382b22c31d))\n* **chips:** Consolidate interaction event handlers ([#5251](https://github.com/material-components/material-components-web/issues/5251)) ([5729943](https://github.com/material-components/material-components-web/commit/5729943baf1726e931e26907c78774f2caec404e))\n* **chips:** Create trailing action business logic ([9ebee4c](https://github.com/material-components/material-components-web/commit/9ebee4ceb998e5fa651d4f147e5e39d43600db6e))\n* **chips:** Expose trailing action chip files ([6b48781](https://github.com/material-components/material-components-web/commit/6b48781bf97d3b08b8f35b9eacde2b87748ae2e1))\n* **chips:** Restructure trailing action mixins ([05f5e15](https://github.com/material-components/material-components-web/commit/05f5e1583b81bc00dbcd2ae21ee0acc43b3e13b4))\n* **circular-progress:** Add foundation methods to get isDeterminate and progress value ([7d8f9c8](https://github.com/material-components/material-components-web/commit/7d8f9c8d73f16c01ed4a941ab9510377a0aae219))\n* **circular-progress:** Add Sass styles and tests ([bd33cb5](https://github.com/material-components/material-components-web/commit/bd33cb56bdab7139052aeedbeec363f17b4dfc40))\n* **circular-progress:** Add TS for foundation, adapter, component with tests ([548b1d4](https://github.com/material-components/material-components-web/commit/548b1d4057f21e066a4c494a57a0c068c23e18cd))\n* **data-table:** Add base styles to support pagination. ([927fa90](https://github.com/material-components/material-components-web/commit/927fa902c3297a5a7cc9436e82cb81f3aabe1b4b))\n* **data-table:** Add foundation methods to support loading state. ([e75deb8](https://github.com/material-components/material-components-web/commit/e75deb8540fa70236087d335c9cd6280bd643285))\n* **data-table:** Added styles for table in loading state ([35a32aa](https://github.com/material-components/material-components-web/commit/35a32aaeac17e290e2e9f9a1310c5a44a08f624a))\n* **data-table:** Added styles to support column sorting. ([17b9699](https://github.com/material-components/material-components-web/commit/17b9699c4454a107043e5a1f9874a091089dd112))\n* **data-table:** Foundation changes to support column sorting ([6ee0355](https://github.com/material-components/material-components-web/commit/6ee03557260d0a23296e36cba5aaa76fe0cf96a6))\n* **data-table:** Set progress indicator styles based on table body height ([c026422](https://github.com/material-components/material-components-web/commit/c0264227393df8eb9259a2b24c23b31fe0ca84f3))\n* **dialog:** Add elevation overlay structure ([#5283](https://github.com/material-components/material-components-web/issues/5283)) ([b8bc4a2](https://github.com/material-components/material-components-web/commit/b8bc4a26ea70356cc96de8fd3266890048f0a3ab))\n* **dom:** Add focus trap utility. ([#5505](https://github.com/material-components/material-components-web/issues/5505)) ([63f357d](https://github.com/material-components/material-components-web/commit/63f357dbf5c7e84c3961aafc09e0fb4f4a9c3cda))\n* **dom:** Add keyboard support ([5f24faa](https://github.com/material-components/material-components-web/commit/5f24faacb1ef8996ae81f3a1c1e43910ba67b024))\n* **dom:** Create announcer utility ([32c1df1](https://github.com/material-components/material-components-web/commit/32c1df133f07679b44ce34ed9d11e22035f8d3d9))\n* **elevation:** Add elevation overlay mixins ([#5249](https://github.com/material-components/material-components-web/issues/5249)) ([b4cfdc4](https://github.com/material-components/material-components-web/commit/b4cfdc40b7c4a3d3fc48df2b68b7091552c27610))\n* **elevation:** Update elevation mixins ([#5304](https://github.com/material-components/material-components-web/issues/5304)) ([ba879b6](https://github.com/material-components/material-components-web/commit/ba879b68bde09d713faa5cd77aea9d2bd2759e33))\n* **fab:** Add elevation overlay structure ([#5278](https://github.com/material-components/material-components-web/issues/5278)) ([e89750d](https://github.com/material-components/material-components-web/commit/e89750dc78ea521561a03e020f4414479de5a5b9))\n* **fab:** Add outline in high-contrast mode ([deda86d](https://github.com/material-components/material-components-web/commit/deda86d8cc4665b334c4d21c541a4a30244fee72))\n* **fab:** Add support for increased touch target to mini FAB. ([#5231](https://github.com/material-components/material-components-web/issues/5231)) ([0c4d8f3](https://github.com/material-components/material-components-web/commit/0c4d8f3923f9a089132ed8dca4062b72d3576aca))\n* **floating-label:** add feature targeting for styles ([#5287](https://github.com/material-components/material-components-web/issues/5287)) ([b240bcc](https://github.com/material-components/material-components-web/commit/b240bcc1bbb3cfd1f753918ec1553dbe1bb6d007))\n* **form-field:** Add support for space-between ([e84b9c8](https://github.com/material-components/material-components-web/commit/e84b9c816d32da6dec058d92fc21dc5ac8fec787)), closes [#5747](https://github.com/material-components/material-components-web/issues/5747)\n* **formfield:** add nowrap class/prop to MDC/MWC ([c4b4bba](https://github.com/material-components/material-components-web/commit/c4b4bba9659bf15207e79b1f63fcc9946404d9c7))\n* **icon-button:** Add disabled state color mixins ([#5246](https://github.com/material-components/material-components-web/issues/5246)) ([7161170](https://github.com/material-components/material-components-web/commit/7161170f2e39b73b69b97dec11ebf94e1d3a10c4))\n* **iconbutton:** Add icon button variant which supports toggling aria label. ([f838c6e](https://github.com/material-components/material-components-web/commit/f838c6e55672268de4e6e3b31b154d4f9050242f))\n* **line-ripple:** add active/inactive states to line-ripple ([b6c7f62](https://github.com/material-components/material-components-web/commit/b6c7f624bc7d88e2e371efcb125c7a6bac55eab7))\n* **line-ripple:** add feature targeting for styles ([#5292](https://github.com/material-components/material-components-web/issues/5292)) ([391674a](https://github.com/material-components/material-components-web/commit/391674a2649800f07e3ac1993a5fce157391fbd9))\n* **linear-progress:** Add foundation methods to fetch progress and determinate state. ([4dc45af](https://github.com/material-components/material-components-web/commit/4dc45af6c4bc81f5734a24c160046d283c1e9a6d))\n* **menu:** Add elevation overlay structure ([#5280](https://github.com/material-components/material-components-web/issues/5280)) ([7fd17ce](https://github.com/material-components/material-components-web/commit/7fd17ce5ed73c86b987c8a8e4cd08ea444fff8b7))\n* **menu:** Add mixin to flatten menu top when opened-below anchor ([1e17c49](https://github.com/material-components/material-components-web/commit/1e17c49b360fd0e01c9a74b92978031534003b5b))\n* **menu-surface:** Add support for flipping menu corner horizontally. ([7b44824](https://github.com/material-components/material-components-web/commit/7b448240263b45c6b474c2f758cd1c02f3c708ad))\n* **notched-outline:** add feature targeting for styles ([#5289](https://github.com/material-components/material-components-web/issues/5289)) ([c483774](https://github.com/material-components/material-components-web/commit/c4837746ccebf375daa4c5dd891fea533bb134f7))\n* **progress-indicator:** Add common interface for progress indicators ([#5564](https://github.com/material-components/material-components-web/issues/5564)) ([ea863cb](https://github.com/material-components/material-components-web/commit/ea863cb918b9c096e36a7bc653d6661757e71b64))\n* **ripple:** Reorganize ripple opacities ([008c4d3](https://github.com/material-components/material-components-web/commit/008c4d3191f9c2a76732688504d2299420734cdd))\n* **switch:** Add elevation overlay structure ([#5281](https://github.com/material-components/material-components-web/issues/5281)) ([50f110a](https://github.com/material-components/material-components-web/commit/50f110a6cf8100e594bdbd6c02ee278c39924008))\n* **switch:** Restructure DOM ([#5312](https://github.com/material-components/material-components-web/issues/5312)) ([0ec1fab](https://github.com/material-components/material-components-web/commit/0ec1fabc39222cac4446c8e2b85d74d2a5d21e1a))\n* **text-field:** Add disabled state color mixins ([#5208](https://github.com/material-components/material-components-web/issues/5208)) ([66299b6](https://github.com/material-components/material-components-web/commit/66299b64613e8399af263d7021f93f9cdaf74ae3))\n* **text-field:** add feature targeting for styles ([#5378](https://github.com/material-components/material-components-web/issues/5378)) ([e8a9936](https://github.com/material-components/material-components-web/commit/e8a993677858893965608a55931d7e54c84e8c5d))\n* **text-field:** Truncate floating label width w/ icons ([c141801](https://github.com/material-components/material-components-web/commit/c141801d50516a18fe53d4bc78591cefb4f57623))\n* **textfield:** add end-alignment ([#5356](https://github.com/material-components/material-components-web/issues/5356)) ([847dd1a](https://github.com/material-components/material-components-web/commit/847dd1ada08bb0fd905adac7b7836540a0dd7e9c))\n* **textfield:** add filled class variant ([b70bc60](https://github.com/material-components/material-components-web/commit/b70bc601ef570dab4598ae6f3ca51bbf884fac96))\n* **textfield:** add forced LTR input ([490fbdc](https://github.com/material-components/material-components-web/commit/490fbdc092c5c59d63f83407b83b37fb524ed0e5))\n* **textfield:** add prefix and suffix ([6601d24](https://github.com/material-components/material-components-web/commit/6601d24afdc3a3d0bd2a9b3fcca68c35c9415ec1)), closes [#1892](https://github.com/material-components/material-components-web/issues/1892)\n* Add index stylesheets to each MDC Web package ([#5539](https://github.com/material-components/material-components-web/issues/5539)) ([1814866](https://github.com/material-components/material-components-web/commit/181486643532e2166dced95daff9da786af3bdd1))\n* Add index stylesheets to mdc-image-list and mdc-layout-gr… ([#5546](https://github.com/material-components/material-components-web/issues/5546)) ([3a85313](https://github.com/material-components/material-components-web/commit/3a85313ac121703e8aeac583502adf9863d96a8e))\n* Use [@use](https://github.com/use) syntax in material-components-web Sass file and… ([#5573](https://github.com/material-components/material-components-web/issues/5573)) ([b4727e4](https://github.com/material-components/material-components-web/commit/b4727e43aa17afe03b240402ded590c0516267d5))\n* **textfield:** add specific label-floating class ([a88c8e4](https://github.com/material-components/material-components-web/commit/a88c8e4dc873ae74a3afbae0dc8635dfaa03e67b))\n* **textfield:** allow character counter to be moved outside of the textarea. ([84e7ed5](https://github.com/material-components/material-components-web/commit/84e7ed5825d3109c229d0f1f6c3edf97a3548226))\n* **textfield:** Create float transition mixin ([ca61b65](https://github.com/material-components/material-components-web/commit/ca61b656fababdf25adaa307963d4f37e6d413ec))\n* **textfield:** Limit notched outline max-width ([0ab62a6](https://github.com/material-components/material-components-web/commit/0ab62a65b17192a94102231ca63f54adc39675ae))\n* **typography:** add container baseline mixins for flexbox ([69edc6e](https://github.com/material-components/material-components-web/commit/69edc6e2899636cfccb117376bb64dc0a267c588))\n\n\n### Reverts\n\n* Revert \"feat(switch): Add elevation overlay structure (#5281)\" (#5329) ([1fbf5bd](https://github.com/material-components/material-components-web/commit/1fbf5bd1d84b7b02eb7f0a7aff2b9c3eed0b4d3d)), closes [#5281](https://github.com/material-components/material-components-web/issues/5281) [#5329](https://github.com/material-components/material-components-web/issues/5329)\n* \"fix(checkbox): change checkbox event type from change to click and add some logic for IE browser\" ([ba30399](https://github.com/material-components/material-components-web/commit/ba30399adc901ca090c90bb1cad9410c81ae5fd1))\n* feat(chips): Consolidate interaction event handlers ([#5251](https://github.com/material-components/material-components-web/issues/5251)) ([#5301](https://github.com/material-components/material-components-web/issues/5301)) ([5e45d77](https://github.com/material-components/material-components-web/commit/5e45d77f3e387eff356f5ce93336d4b872c725c4))\n* fix(chips): Do not throw error if chip set becomes empty ([#5300](https://github.com/material-components/material-components-web/issues/5300)) ([d10e8cd](https://github.com/material-components/material-components-web/commit/d10e8cdf3cda4a735b1ae43bb17592f9383c8886))\n* fix(select): Do not fire change event on programmatic change ([#5255](https://github.com/material-components/material-components-web/issues/5255)) ([#5302](https://github.com/material-components/material-components-web/issues/5302)) ([ad9dfe7](https://github.com/material-components/material-components-web/commit/ad9dfe706de46d5dc131ad6615aa18f0e3b01133))\n\n\n### BREAKING CHANGES\n\n* **select:** HTML Markup significantly changed, see README; REMOVED adapter methods `isSelectedTextFocused`, `getSelectedTextAttr`, `setSelectedTextAttr`; ADDED adapter methods `isSelectAnchorFocused`, `getSelectAnchorAttr`, `setSelectAnchorAttr`; removed variables `outlined-dense-label-position-y`, `icon-padding`; added variables `minimum-height-for-filled-label`, `filled-baseline-top`, `selected-text-height`, `anchor-padding-left`, `anchor-padding-left-with-leading-icon`, `anchor-padding-right`.\n* **text-field:** Redundant mixins `mdc-text-field-textarea-fill-color`, `mdc-text-field-textarea-stroke-color`, `mdc-text-field-fullwidth-bottom-line-color` removed. Instead, use `mdc-text-field-fill-color`, `mdc-text-field-outline-color`, and `mdc-text-field-bottom-line-color` respectively to achieve the same effect.\n* **textfield:** mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.\n* **textfield:** removed the following variables: `$input-padding`, `$input-padding-top`, `$input-padding-bottom`, `$outlined-input-padding-top`, `$outlined-input-padding-bottom`, `$input-border-bottom`\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **linear-progress:** DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.\n* **typography:** `typography.baseline-top()` and `typography.baseline-bottom()` are now private. Use `typography.baseline()` for containers and `typography.text-baseline()` for text with $top and $bottom params.\n* **chips:** The touch target and text now appear inside the primary action element. Please see the readme for markup changes.\n* **textfield:** filled text fields must include a `<div class=\"mdc-text-field__ripple\"></div>`\n* **textfield:** Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting `$mdc-text-field-minimum-height-for-filled-label: 40px`\n* **chips:** Both `MDCChipAdapter` and `MDCChipSetAdapter` have new methods. `MDCChipSetFoundation` event handlers now accept the corresponding chip event detail interface as the sole argument. The `root` property has been removed from the `MDCChipRemovalEventDetail` interface.\n* **line-ripple:** `mdc-line-ripple-color()` mixin has been renamed to `mdc-line-ripple-active-color()`\n* **textfield:** Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.\n\n* Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).\n* **textfield:** icons must use `.mdc-text-field__icon--leading` or `.mdc-text-field__icon--trailing` classes. `mdc-text-field-icon-color()` mixin has been split into `mdc-text-field-leading-icon-color()` and `mdc-text-field-trailing-icon-color()`.\n* **switch:** Added setNativeControlAttr method in mdc-switch adapter.\n* **checkbox:** remove event listener for 'change' and add event listener for 'click'.\n- Add handleClick() method in foundation to handle click event.\n- Add setCheck() method into component to change check status.\n* **switch:** Switch DOM structure has changed. See switch README for details\n* **button:** Variable `$mdc-button-disabled-container-fill-color`\nrenamed to `$mdc-button-disabled-container-color`.\n* Removed `$edgeOptOut` option from `mdc-theme-prop()` Sass mixin.\n* **chips:** the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation\n* Adds new adapter methods to MDCLinearProgressAdapter.\n* **elevation:** Functions moved into the _functions.scss file\n* **touchtarget:** Renames mixin from mdc-touch-target-component => mdc-touch-target-margin\n* **grid-list:** Per the deprecation notice for grid-list, this component has been\nremoved from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.\n\n\n# 4.0.0 (2019-11-02)\n\n# [4.0.0](https://github.com/material-components/material-components-web/compare/v3.2.0...v4.0.0) (2019-11-02)\n\n### Bug Fixes\n\n* **button:** Add `overflow: visible` to button. ([#4973](https://github.com/material-components/material-components-web/issues/4973)) ([905e84e](https://github.com/material-components/material-components-web/commit/905e84e))\n* **button:** Adjust touch target size when density is applied ([#5112](https://github.com/material-components/material-components-web/issues/5112)) ([e2506f4](https://github.com/material-components/material-components-web/commit/e2506f4))\n* **checkbox:** Change minimum ripple size of checkbox & switch 24px => 28px ([#5140](https://github.com/material-components/material-components-web/issues/5140)) ([3eae309](https://github.com/material-components/material-components-web/commit/3eae309))\n* **checkbox:** Fix checkbox terminology in sass mixins ([#5014](https://github.com/material-components/material-components-web/issues/5014)) ([2161c02](https://github.com/material-components/material-components-web/commit/2161c02))\n* **checkbox:** Remove RTL styles from checkbox ripple ([#5134](https://github.com/material-components/material-components-web/issues/5134)) ([a646516](https://github.com/material-components/material-components-web/commit/a646516))\n* **chips:** Ignore selection events in chip set ([#4878](https://github.com/material-components/material-components-web/issues/4878)) ([94c6a00](https://github.com/material-components/material-components-web/commit/94c6a00))\n* **chips:** Remove keyCode check ([#4966](https://github.com/material-components/material-components-web/issues/4966)) ([e6304c4](https://github.com/material-components/material-components-web/commit/e6304c4))\n* **chips:** Reset touch target when chip density mixin is applied. ([#5116](https://github.com/material-components/material-components-web/issues/5116)) ([d3b515e](https://github.com/material-components/material-components-web/commit/d3b515e))\n* **chips:** Stack trailing/leading icons above touch target el ([#5040](https://github.com/material-components/material-components-web/issues/5040)) ([048d4b7](https://github.com/material-components/material-components-web/commit/048d4b7))\n* **chips:** Stop emitting events in handlers ([#4969](https://github.com/material-components/material-components-web/issues/4969)) ([cfd81dc](https://github.com/material-components/material-components-web/commit/cfd81dc))\n* **data-table:** Minor fixes for data table layout ([#5037](https://github.com/material-components/material-components-web/issues/5037)) ([37b1f93](https://github.com/material-components/material-components-web/commit/37b1f93))\n* **fab:** Add overflow: hidden; to ripple target to fix bounded ripple. ([#5214](https://github.com/material-components/material-components-web/issues/5214)) ([97cbbdc](https://github.com/material-components/material-components-web/commit/97cbbdc))\n* **fab:** Use FAB ripple target selector ([#5146](https://github.com/material-components/material-components-web/issues/5146)) ([9d91acc](https://github.com/material-components/material-components-web/commit/9d91acc))\n* **form-field:** Fix radio RTL alignment bug. ([#5064](https://github.com/material-components/material-components-web/issues/5064)) ([ef99808](https://github.com/material-components/material-components-web/commit/ef99808))\n* **linear-progress:** Fix indeterminate animation bug ([#5180](https://github.com/material-components/material-components-web/issues/5180)) ([062ade5](https://github.com/material-components/material-components-web/commit/062ade5))\n* **linear-progress:** Prefix animation keyframes to prevent clashing ([#5155](https://github.com/material-components/material-components-web/issues/5155)) ([fc0e474](https://github.com/material-components/material-components-web/commit/fc0e474))\n* **linear-progress:** Restore buffer after determinate is toggl… ([#5156](https://github.com/material-components/material-components-web/issues/5156)) ([09b1598](https://github.com/material-components/material-components-web/commit/09b1598))\n* **linear-progress:** Support high contrast mode ([#5190](https://github.com/material-components/material-components-web/issues/5190)) ([d4141c9](https://github.com/material-components/material-components-web/commit/d4141c9))\n* **list:** Add #adapter.listItemAtIndexHasClass to prevent user state change to disabled items ([#4922](https://github.com/material-components/material-components-web/issues/4922)) ([b6d213c](https://github.com/material-components/material-components-web/commit/b6d213c))\n* **menu:** Vertically center the group icon ([#4862](https://github.com/material-components/material-components-web/issues/4862)) ([c5738ed](https://github.com/material-components/material-components-web/commit/c5738ed))\n* **menu-surface:** remove duplicate export from menu-surface ([#5200](https://github.com/material-components/material-components-web/issues/5200)) ([0b120ae](https://github.com/material-components/material-components-web/commit/0b120ae))\n* **radio:** Fix touch target margins: 0px => 4px. ([#5096](https://github.com/material-components/material-components-web/issues/5096)) ([a48d06e](https://github.com/material-components/material-components-web/commit/a48d06e))\n* **ripple:** Add overflow: hidden; to the bounded ripple mixin ([#5173](https://github.com/material-components/material-components-web/issues/5173)) ([996b091](https://github.com/material-components/material-components-web/commit/996b091))\n* **ripple:** Always set even num when initial ripple size is ca… ([#5141](https://github.com/material-components/material-components-web/issues/5141)) ([b26ad23](https://github.com/material-components/material-components-web/commit/b26ad23))\n* **ripple:** Remove unnecessary overflow: hidden. ([#5191](https://github.com/material-components/material-components-web/issues/5191)) ([5916d18](https://github.com/material-components/material-components-web/commit/5916d18))\n* **tabs:** Fix tab img icon styling. ([#5041](https://github.com/material-components/material-components-web/issues/5041)) ([d0e6cd1](https://github.com/material-components/material-components-web/commit/d0e6cd1))\n* **text-field:** Do not trigger shake animation when text field is empty ([#5097](https://github.com/material-components/material-components-web/issues/5097)) ([4913db9](https://github.com/material-components/material-components-web/commit/4913db9))\n* **text-field:** Fixes input text alignment on IE11 for densed text field ([#5136](https://github.com/material-components/material-components-web/issues/5136)) ([892dd4e](https://github.com/material-components/material-components-web/commit/892dd4e))\n* **text-field:** Fixes input text alignment on IE11 for densed… ([#5147](https://github.com/material-components/material-components-web/issues/5147)) ([c8f7693](https://github.com/material-components/material-components-web/commit/c8f7693))\n* **text-field:** Updated shape mixins to set density scale ([#5207](https://github.com/material-components/material-components-web/issues/5207)) ([719b57e](https://github.com/material-components/material-components-web/commit/719b57e))\n* **touch-target:** Add class to touch target wrapper. ([#5174](https://github.com/material-components/material-components-web/issues/5174)) ([e7799b8](https://github.com/material-components/material-components-web/commit/e7799b8))\n* **touch-target:** Add missing dependency - touch target to com… ([#5098](https://github.com/material-components/material-components-web/issues/5098)) ([9306bd0](https://github.com/material-components/material-components-web/commit/9306bd0))\n\n\n### Code Refactoring\n\n* **button:** Add ripple target as an inner element. ([#4890](https://github.com/material-components/material-components-web/issues/4890)) ([dffefe6](https://github.com/material-components/material-components-web/commit/dffefe6))\n* **mdc-fab:** Move Ripple to inner Element. ([#4997](https://github.com/material-components/material-components-web/issues/4997)) ([85b33b5](https://github.com/material-components/material-components-web/commit/85b33b5))\n* **select:** Refactor select ([#5113](https://github.com/material-components/material-components-web/issues/5113)) ([db7560e](https://github.com/material-components/material-components-web/commit/db7560e))\n* **slider:** Functional slider tick visuals with css background ([#4756](https://github.com/material-components/material-components-web/issues/4756)) ([8f851d9](https://github.com/material-components/material-components-web/commit/8f851d9))\n\n\n### Features\n\n* **button:** Add support for increased touch target to button. ([#4948](https://github.com/material-components/material-components-web/issues/4948)) ([1d7a2e6](https://github.com/material-components/material-components-web/commit/1d7a2e6))\n* **checkbox:** Add disabled state color mixins ([#5167](https://github.com/material-components/material-components-web/issues/5167)) ([01628ef](https://github.com/material-components/material-components-web/commit/01628ef))\n* **checkbox:** Add support for 48px touch target ([#5025](https://github.com/material-components/material-components-web/issues/5025)) ([b5685a8](https://github.com/material-components/material-components-web/commit/b5685a8))\n* **checkbox:** Move ripple to child node ([#4981](https://github.com/material-components/material-components-web/issues/4981)) ([9712b24](https://github.com/material-components/material-components-web/commit/9712b24))\n* **chip:** Add density mixin to chip. ([#5109](https://github.com/material-components/material-components-web/issues/5109)) ([bdf3430](https://github.com/material-components/material-components-web/commit/bdf3430))\n* **chips:** Add keyboard navigation ([#4844](https://github.com/material-components/material-components-web/issues/4844)) ([42065fe](https://github.com/material-components/material-components-web/commit/42065fe)), closes [#2259](https://github.com/material-components/material-components-web/issues/2259)\n* **chips:** Add setSelectedFromChipset method ([#4872](https://github.com/material-components/material-components-web/issues/4872)) ([283bd55](https://github.com/material-components/material-components-web/commit/283bd55))\n* **chips:** Add support for increased touch target to chips. ([#4970](https://github.com/material-components/material-components-web/issues/4970)) ([6aa109d](https://github.com/material-components/material-components-web/commit/6aa109d))\n* **chips:** Use index for all chip operations ([#4869](https://github.com/material-components/material-components-web/issues/4869)) ([07078bb](https://github.com/material-components/material-components-web/commit/07078bb))\n* **density:** Add density subsystem to components ([#5059](https://github.com/material-components/material-components-web/issues/5059)) ([73a5e4c](https://github.com/material-components/material-components-web/commit/73a5e4c))\n* **dialog:** Add dialog mixin for dialogs with increased touch target buttons. ([#5024](https://github.com/material-components/material-components-web/issues/5024)) ([2ef1ddd](https://github.com/material-components/material-components-web/commit/2ef1ddd))\n* **icon-button:** Add density mixin to icon button ([#5122](https://github.com/material-components/material-components-web/issues/5122)) ([37d6458](https://github.com/material-components/material-components-web/commit/37d6458))\n* **list:** Add density mixin to list ([#5069](https://github.com/material-components/material-components-web/issues/5069)) ([5132f89](https://github.com/material-components/material-components-web/commit/5132f89))\n* **list:** Add mixin for disabled text opacity ([#4861](https://github.com/material-components/material-components-web/issues/4861)) ([d68f8a7](https://github.com/material-components/material-components-web/commit/d68f8a7))\n* **radio:** Add density mixin to radio ([#5118](https://github.com/material-components/material-components-web/issues/5118)) ([199534d](https://github.com/material-components/material-components-web/commit/199534d))\n* **radio:** Add disabled state color mixins ([#5168](https://github.com/material-components/material-components-web/issues/5168)) ([b5c6d66](https://github.com/material-components/material-components-web/commit/b5c6d66))\n* **radio:** Add support for 48px touch target ([#5032](https://github.com/material-components/material-components-web/issues/5032)) ([87b0a4c](https://github.com/material-components/material-components-web/commit/87b0a4c))\n* **radio:** Move ripple to child element ([#4983](https://github.com/material-components/material-components-web/issues/4983)) ([100ab37](https://github.com/material-components/material-components-web/commit/100ab37))\n* **ripple:** Add support for ripple target to mixins. ([#4880](https://github.com/material-components/material-components-web/issues/4880)) ([08dbe69](https://github.com/material-components/material-components-web/commit/08dbe69))\n* **snackbar:** Add option for indefinite timeout ([#4998](https://github.com/material-components/material-components-web/issues/4998)) ([4f11851](https://github.com/material-components/material-components-web/commit/4f11851))\n* **switch:** Add density support for switch component. ([#5124](https://github.com/material-components/material-components-web/issues/5124)) ([2c793b4](https://github.com/material-components/material-components-web/commit/2c793b4)), closes [#5104](https://github.com/material-components/material-components-web/issues/5104)\n* **switch:** add ripple opacity customization mixins ([#5126](https://github.com/material-components/material-components-web/issues/5126)) ([8c0273f](https://github.com/material-components/material-components-web/commit/8c0273f))\n* **tab:** Add text transform mixin ([#5144](https://github.com/material-components/material-components-web/issues/5144)) ([22d7ad2](https://github.com/material-components/material-components-web/commit/22d7ad2))\n* **tab-bar:** Add a mixin to set scroller animation ([#5172](https://github.com/material-components/material-components-web/issues/5172)) ([d7c938a](https://github.com/material-components/material-components-web/commit/d7c938a))\n* **tab-bar:** Add density mixin to tab-bar ([#5070](https://github.com/material-components/material-components-web/issues/5070)) ([45dc002](https://github.com/material-components/material-components-web/commit/45dc002))\n* **tab-scroller:** Add incrementScrollImmediate to bypass animation ([#5184](https://github.com/material-components/material-components-web/issues/5184)) ([2b878b3](https://github.com/material-components/material-components-web/commit/2b878b3)), closes [#5123](https://github.com/material-components/material-components-web/issues/5123)\n* **tab-scroller:** Mixin for scroll transition ([#5154](https://github.com/material-components/material-components-web/issues/5154)) ([efda83d](https://github.com/material-components/material-components-web/commit/efda83d))\n* **text-field:** Add density mixin to text field variants ([#5066](https://github.com/material-components/material-components-web/issues/5066)) ([a12101d](https://github.com/material-components/material-components-web/commit/a12101d))\n* **text-field:** Center align inner elements for dynamic height ([#4990](https://github.com/material-components/material-components-web/issues/4990)) ([4d94b22](https://github.com/material-components/material-components-web/commit/4d94b22))\n* **touch-target:** Add touch target mixins. ([#4940](https://github.com/material-components/material-components-web/issues/4940)) ([b2e0fea](https://github.com/material-components/material-components-web/commit/b2e0fea))\n\n\n### BREAKING CHANGES\n\n* **checkbox:** `mdc-checkbox-ink-color` mixin now only applies to enabled checkboxes\n* **chips:** Chips markup, adapters, foundations, and events have changed.\n* **select:** In MDCMenu and MDCMenuSurface, `hoistMenuToBody` adapter method removed.  In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: `getValue`, `setValue`, `isMenuOpen`, `setSelectedIndex`, `checkValidity`, `setValid`, `toggleClassAtIndex`. MDCSelectAdapter methods added: `hasLabel`, `getSelectedMenuItem`, `setSelectedText`, `isSelectedTextFocused`, `get/setSelectedTextAttr`, `getAnchorElement`, `setMenuAnchorElement`, `setMenuAnchorCorner`, `setMenuWrapFocus`, `set/removeAttributeAtIndex`, `focusMenuItemAtIndex`, `getMenuItemValues`, `getMenuItemCount`, `getMenuItemCount`, `getMenuItemAttr`, `getMenuItemTextAtIndex`, `add/removeClassAtIndex`. MDCSelectFoundation `setValue` method removed; `getDisabled`, `handleMenuItemAction`, `getSelectedIndex`, `get/setRequired`, `init` added.\n* **radio:** In Checkbox, Renamed sass variables `$mdc-radio-touch-area` => `$mdc-radio-ripple-size` & `$mdc-radio-ui-size` => `$mdc-radio-icon-size` to be consistent with checkbox. Also, removed `$mdc-radio-ui-pct` sass variable.\n* **switch:** Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.\n* **list:** New adapter method listItemAtIndexHasClass\n* **list:** Renamed mixin `mdc-list-item-shape-radius()` => `mdc-list-single-line-shape-radius()`\n* **linear-progress:** MDCLinearProgressAdapter adapter has new `forceLayout` method\n* **text-field:** Removed sass variable in notched outline - `$mdc-notched-outline-transition-duration`.\n* **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.\n\n  OLD\n\n  ```html\n  <button class=\"mdc-fab\" aria-label=\"Favorite\">\n    <span class=\"mdc-fab__icon material-icons\">favorite</span>\n  </button>\n  ```\n\n  NEW\n\n  ```html\n  <button class=\"mdc-fab\" aria-label=\"Favorite\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <span class=\"mdc-fab__icon material-icons\">favorite</span>\n  </button>\n  ```\n\n* **radio:** Ripple has been moved to a child element. See readme for updates.\n* **slider:** remove adapter methods `appendTrackMarkers`, `removeTrackMarkers `, `setLastTrackMarkersStyleProperty `, and add adapter method `setTrackMarkers`.\n* **button:** This changes the structure of the button element by moving the ripple from the outer <button> element to an inner `mdc-button__ripple` element.\n\n  OLD\n\n  ```html\n  <button class=\"mdc-button\">\n    <span class=\"mdc-button__label\">Hello World</span>\n  </button>\n  ```\n\n  NEW\n\n  ```html\n  <button class=\"mdc-button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Hello World</span>\n  </button>\n  ```\n* **chips:** MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex\n* **density:** Renamed sass mixins & variables in MDC Data Table - `mdc-data-table-header-row-height` => `mdc-data-table-header-cell-height` & `mdc-data-table-row-height` => `mdc-data-table-cell-height`. Also removed `mdc-button--dense` variant, use button's density mixin instead.\n\n**Note: For older changes, see the [changelog archive](CHANGELOG_ARCHIVE.md).**\n"
  },
  {
    "path": "CHANGELOG_ARCHIVE.md",
    "content": "# Change Log: Archive\n\n# [3.2.0](https://github.com/material-components/material-components-web/compare/v3.1.1...v3.2.0) (2019-09-12)\n\n### Bug Fixes\n\n* Use head instead of body to detect edge pseudo var bug ([#4982](https://github.com/material-components/material-components-web/issues/4982)) ([9e87478](https://github.com/material-components/material-components-web/commit/9e87478))\n* **data-table:** Add .npmignore to ignore typescript files when… ([#4992](https://github.com/material-components/material-components-web/issues/4992)) ([dd422d1](https://github.com/material-components/material-components-web/commit/dd422d1))\n* **linear-progress:** stop animation when closed ([#5006](https://github.com/material-components/material-components-web/issues/5006)) ([4c4342d](https://github.com/material-components/material-components-web/commit/4c4342d))\n* **menu:** recompute index before marking selection ([#5047](https://github.com/material-components/material-components-web/issues/5047)) ([90f6247](https://github.com/material-components/material-components-web/commit/90f6247))\n* **rtl:** Removed mdc-rtl-include check from mdc-rtl-reflexive mixin ([#5001](https://github.com/material-components/material-components-web/issues/5001)) ([6e7b191](https://github.com/material-components/material-components-web/commit/6e7b191))\n* **top-app-bar:** \"always collapsed\" variant semantics in Short TopAppBar Foundation ([#5009](https://github.com/material-components/material-components-web/issues/5009)) ([805d098](https://github.com/material-components/material-components-web/commit/805d098))\n\n\n### Features\n\n* **linear-progress:** add feature targeting for styles ([#4898](https://github.com/material-components/material-components-web/issues/4898)) ([7ec18c6](https://github.com/material-components/material-components-web/commit/7ec18c6))\n* **list:** Add setEnabled to foundation ([#5049](https://github.com/material-components/material-components-web/issues/5049)) ([c2b4407](https://github.com/material-components/material-components-web/commit/c2b4407))\n* **menu:** add setEnabled to allow dynamic enabling or disabling menu item ([#5054](https://github.com/material-components/material-components-web/issues/5054)) ([4751d64](https://github.com/material-components/material-components-web/commit/4751d64))\n* **rtl:** Added a flag to turn-off mdc-rtl CSS ([#4996](https://github.com/material-components/material-components-web/issues/4996)) ([eb87f06](https://github.com/material-components/material-components-web/commit/eb87f06))\n\n\n\n\n\n## [3.1.1](https://github.com/material-components/material-components-web/compare/v3.1.0...v3.1.1) (2019-08-14)\n\n\n### Bug Fixes\n\n* **data-table:** Fixed alignment of header cell title for numer… ([#4963](https://github.com/material-components/material-components-web/issues/4963)) ([b6274a7](https://github.com/material-components/material-components-web/commit/b6274a7))\n\n\n\n\n\n# [3.1.0](https://github.com/material-components/material-components-web/compare/v3.0.0...v3.1.0) (2019-07-22)\n\n\n### Bug Fixes\n\n* update TypeScript version to 3.5.x and fix typing errors ([#4853](https://github.com/material-components/material-components-web/issues/4853)) ([0657504](https://github.com/material-components/material-components-web/commit/0657504))\n* **checkbox:** Fixed checkbox container fill color when animati… ([#4879](https://github.com/material-components/material-components-web/issues/4879)) ([d393fb5](https://github.com/material-components/material-components-web/commit/d393fb5))\n* **checkbox:** Fixed hover focus colors for unchecked checkbox ([#4868](https://github.com/material-components/material-components-web/issues/4868)) ([1d8fbf5](https://github.com/material-components/material-components-web/commit/1d8fbf5))\n* **fab:** clear text decoration ([#4865](https://github.com/material-components/material-components-web/issues/4865)) ([b524a12](https://github.com/material-components/material-components-web/commit/b524a12))\n* **infrastructure:** support ssr by removing the reference from window ([#4864](https://github.com/material-components/material-components-web/issues/4864)) ([e5c5ea5](https://github.com/material-components/material-components-web/commit/e5c5ea5))\n* **menu:** Vertically center the group icon ([#4862](https://github.com/material-components/material-components-web/issues/4862)) ([d551dfd](https://github.com/material-components/material-components-web/commit/d551dfd))\n\n\n### Features\n\n* **data-table:** Added data table component ([#4889](https://github.com/material-components/material-components-web/issues/4889)) ([7d3380a](https://github.com/material-components/material-components-web/commit/7d3380a))\n* **drawer:** add feature targeting for styles ([#4877](https://github.com/material-components/material-components-web/issues/4877)) ([4d65d29](https://github.com/material-components/material-components-web/commit/4d65d29))\n* **slider:** add feature targeting for styles ([#4871](https://github.com/material-components/material-components-web/issues/4871)) ([3ee2675](https://github.com/material-components/material-components-web/commit/3ee2675))\n* **snackbar:** add feature targeting for styles ([#4876](https://github.com/material-components/material-components-web/issues/4876)) ([1b7aea1](https://github.com/material-components/material-components-web/commit/1b7aea1))\n\n\n\n\n\n# [3.0.0](https://github.com/material-components/material-components-web/compare/v2.3.1...v3.0.0) (2019-06-25)\n\n\n### Bug Fixes\n\n* **checkbox:** screenshot test golden update ([#4735](https://github.com/material-components/material-components-web/issues/4735)) ([0b44494](https://github.com/material-components/material-components-web/commit/0b44494))\n* **chips:** Add box-sizing back to chip root ([#4807](https://github.com/material-components/material-components-web/issues/4807)) ([19a19b3](https://github.com/material-components/material-components-web/commit/19a19b3))\n* **chips:** Fix chips trailing icon margin ([#4720](https://github.com/material-components/material-components-web/issues/4720)) ([5de76bc](https://github.com/material-components/material-components-web/commit/5de76bc))\n* **dialog:** Add noflip annotations for GSS compiler. ([#4769](https://github.com/material-components/material-components-web/issues/4769)) ([d644e78](https://github.com/material-components/material-components-web/commit/d644e78))\n* **dialog:** Fix scrolling content overflowing on Chrome/Android. ([#4746](https://github.com/material-components/material-components-web/issues/4746)) ([3e9abda](https://github.com/material-components/material-components-web/commit/3e9abda))\n* **dialog:** Use 100vw for dialog max-width calculation. ([#4766](https://github.com/material-components/material-components-web/issues/4766)) ([d0b8c89](https://github.com/material-components/material-components-web/commit/d0b8c89)), closes [#4746](https://github.com/material-components/material-components-web/issues/4746)\n* **infrastructure:** Fix failing screenshot tests ([#4800](https://github.com/material-components/material-components-web/issues/4800)) ([a9a41cb](https://github.com/material-components/material-components-web/commit/a9a41cb))\n* **infrastructure:** update check-pkg-for-release.js ([#4857](https://github.com/material-components/material-components-web/issues/4857)) ([0cd775c](https://github.com/material-components/material-components-web/commit/0cd775c))\n* **menu:** Fix bug where TAB does not respect the default browser tab order. ([#4789](https://github.com/material-components/material-components-web/issues/4789)) ([22237cd](https://github.com/material-components/material-components-web/commit/22237cd))\n* **menu:** In Windows high contrast mode, decrease opacity of disabled menu items. ([#4777](https://github.com/material-components/material-components-web/issues/4777)) ([898e53e](https://github.com/material-components/material-components-web/commit/898e53e))\n* **menu:** Remove code to focus on first/last element on TAB/SHIFT+TAB. ([#4786](https://github.com/material-components/material-components-web/issues/4786)) ([99af567](https://github.com/material-components/material-components-web/commit/99af567))\n* **menu:** Switch from aria-selected to aria-checked for selected menu item. ([#4779](https://github.com/material-components/material-components-web/issues/4779)) ([f4b0bf5](https://github.com/material-components/material-components-web/commit/f4b0bf5))\n* **select:** Update screenshots for FF/Windows update. ([#4790](https://github.com/material-components/material-components-web/issues/4790)) ([6ea503c](https://github.com/material-components/material-components-web/commit/6ea503c))\n* move applyPassive to dom package for use in text-field ([#4747](https://github.com/material-components/material-components-web/issues/4747)) ([ce0b1c5](https://github.com/material-components/material-components-web/commit/ce0b1c5))\n* **tab-indicator:** Center content ([#4837](https://github.com/material-components/material-components-web/issues/4837)) ([102d778](https://github.com/material-components/material-components-web/commit/102d778))\n* **tabs:** Remove deprecated package mdc-tabs ([#4784](https://github.com/material-components/material-components-web/issues/4784)) ([4f366a5](https://github.com/material-components/material-components-web/commit/4f366a5))\n* **text-field:** Fix asterisk color of text field when input is invalid and disabled ([#4806](https://github.com/material-components/material-components-web/issues/4806)) ([24054ed](https://github.com/material-components/material-components-web/commit/24054ed))\n* remove icontoggle ([#4783](https://github.com/material-components/material-components-web/issues/4783)) ([a13089d](https://github.com/material-components/material-components-web/commit/a13089d))\n* remove icontoggle ([#4783](https://github.com/material-components/material-components-web/issues/4783)) ([5079213](https://github.com/material-components/material-components-web/commit/5079213))\n\n\n### Code Refactoring\n\n* **dialog:** Split dialog Foundation#handleInteraction into #handleClick/#handleKeydown. ([#4655](https://github.com/material-components/material-components-web/issues/4655)) ([d650390](https://github.com/material-components/material-components-web/commit/d650390))\n* **top-app-bar:** Remove [de]registerEventHandler methods from adapters ([#4701](https://github.com/material-components/material-components-web/issues/4701)) ([34bba89](https://github.com/material-components/material-components-web/commit/34bba89))\n* **top-app-bar:** Remove [de]registerEventHandler methods from adapters ([#4701](https://github.com/material-components/material-components-web/issues/4701)) ([d8fe135](https://github.com/material-components/material-components-web/commit/d8fe135))\n\n\n### Features\n\n* **checkbox:** Added mixin to customize checkbox touch dimension. ([#4697](https://github.com/material-components/material-components-web/issues/4697)) ([ff2873e](https://github.com/material-components/material-components-web/commit/ff2873e))\n* **chips:** Add setAttr adapter method ([#4736](https://github.com/material-components/material-components-web/issues/4736)) ([1e21acf](https://github.com/material-components/material-components-web/commit/1e21acf))\n* **chips:** Use semantic button elements ([#4627](https://github.com/material-components/material-components-web/issues/4627)) ([741124d](https://github.com/material-components/material-components-web/commit/741124d))\n* add feature targeting for styles to tab-related packages ([#4838](https://github.com/material-components/material-components-web/issues/4838)) ([c7efc10](https://github.com/material-components/material-components-web/commit/c7efc10))\n* **dialog:** Add Adapter#getInitialFocusEl. ([#4719](https://github.com/material-components/material-components-web/issues/4719)) ([1108307](https://github.com/material-components/material-components-web/commit/1108307))\n* **menu:** add setSelectedIndex to set selected item in menu selection group ([#4620](https://github.com/material-components/material-components-web/issues/4620)) ([3a280c6](https://github.com/material-components/material-components-web/commit/3a280c6))\n* **top-app-bar:** use mdc-icon-button styles instead of top app bar ([#4745](https://github.com/material-components/material-components-web/issues/4745)) ([f8c561c](https://github.com/material-components/material-components-web/commit/f8c561c))\n\n\n### BREAKING CHANGES\n\n* **tabs:** removed deprecated mdc-tabs package.\n* **chips:** Update mdc-chip-leading-icon-margin and mdc-chip-trailing-icon-margin mixins signatures to take only left and right margin values.\n* **chips:** Add the setAttr method to the chip adapter.\n* **top-app-bar:** Replaced adapter methods getParentElement, getSelectedElementIndex with getSelectedSiblingOfItemAtIndex, isSelectableItemAtIndex.\n* **dialog:** Dialog Adapter#getInitialFocusEl has been added and Adapter#trapFocus first argument is now the initialFocusEl.\n* **checkbox:** Removed `$mdc-checkbox-ui-pct` sass variable from `MDCCheckbox`\n* **menu:** Replaced adapter methods getParentElement, getSelectedElementIndex with getSelectedSiblingOfItemAtIndex, isSelectableItemAtIndex.\n* **dialog:** Dialog `Foundation#handleInteraction` has been split into two methods: `#handleClick` and `#handleKeydown`.\n* **menu:** The following adapter methods were removed: isFirstElementFocused, isLastElementFocused, focusFirstElement, focusLastElement. The following functionality to handle TAB on menusurface has been removed: \"If TAB and last element is focused => Focus on first element\", \"If SHIFT + TAB and first element is focused => Focus on last element\"\n* **chips:** Add the setAttr method to the chip adapter.\n* **top-app-bar:** Replaced adapter methods getParentElement, getSelectedElementIndex with getSelectedSiblingOfItemAtIndex, isSelectableItemAtIndex.\n* **dialog:** Dialog Adapter#getInitialFocusEl has been added and Adapter#trapFocus first argument is now the initialFocusEl.\n* **checkbox:** Removed `$mdc-checkbox-ui-pct` sass variable from `MDCCheckbox`\n* **menu:** Replaced adapter methods getParentElement, getSelectedElementIndex with getSelectedSiblingOfItemAtIndex, isSelectableItemAtIndex.\n* **dialog:** Dialog `Foundation#handleInteraction` has been split into two methods: `#handleClick` and `#handleKeydown`.\n* **chips:** Update mdc-chip-leading-icon-margin and mdc-chip-trailing-icon-margin mixins signatures to take only left and right margin values.\n\n\n\n\n\n<a name=\"2.3.1\"></a>\n## [2.3.1](https://github.com/material-components/material-components-web/compare/v2.3.0...v2.3.1) (2019-06-11)\n\n\n### Bug Fixes\n\n* **text-field:** Update outline idle border color to match design guidance ([#4768](https://github.com/material-components/material-components-web/issues/4768)) ([7fedeaf](https://github.com/material-components/material-components-web/commit/7fedeaf))\n\n\n\n<a name=\"2.3.0\"></a>\n# [2.3.0](https://github.com/material-components/material-components-web/compare/v2.1.1...v2.3.0) (2019-05-28)\n\n\n### Bug Fixes\n\n* **ripple:** Fixes issue where Chrome v74 shows black artifact on ripple surface on hover ([#4695](https://github.com/material-components/material-components-web/issues/4695)) ([7a5e7ed](https://github.com/material-components/material-components-web/commit/7a5e7ed))\n* **select:** Fixes arrow direction on select focused state ([#4726](https://github.com/material-components/material-components-web/issues/4726)) ([358546a](https://github.com/material-components/material-components-web/commit/358546a))\n* **tab:** Fix tab color variables to use color literals ([#4688](https://github.com/material-components/material-components-web/issues/4688)) ([88734fe](https://github.com/material-components/material-components-web/commit/88734fe))\n* **typography:** Use unquote for setting font-family. ([#4665](https://github.com/material-components/material-components-web/issues/4665)) ([8d8f3fc](https://github.com/material-components/material-components-web/commit/8d8f3fc))\n\n\n### Features\n\n* **auto-init:** initialize components once with multiple mdc.autoInit() calls ([#4691](https://github.com/material-components/material-components-web/issues/4691)) ([218d2e5](https://github.com/material-components/material-components-web/commit/218d2e5))\n* **chips:** Add feature targeting for styles ([#4693](https://github.com/material-components/material-components-web/issues/4693)) ([0fdb889](https://github.com/material-components/material-components-web/commit/0fdb889))\n\n\n\n<a name=\"2.2.0\"></a>\n# [2.2.0](https://github.com/material-components/material-components-web/compare/v2.1.1...v2.2.0) (2019-05-13)\n\n\n### Bug Fixes\n\n* **tab:** Fix tab color variables to use color literals ([#4688](https://github.com/material-components/material-components-web/issues/4688)) ([88734fe](https://github.com/material-components/material-components-web/commit/88734fe))\n\n\n### Features\n\n* **chips:** Add feature targeting for styles ([#4693](https://github.com/material-components/material-components-web/issues/4693)) ([0fdb889](https://github.com/material-components/material-components-web/commit/0fdb889))\n\n\n\n<a name=\"2.1.1\"></a>\n## [2.1.1](https://github.com/material-components/material-components-web/compare/v2.1.0...v2.1.1) (2019-05-10)\n\n\n### Bug Fixes\n\n* **ripple:** Fixes issue where Chrome v74 shows black artifact on ripple surface on hover ([a0c7b81](https://github.com/material-components/material-components-web/commit/a0c7b81))\n\n\n\n<a name=\"2.1.0\"></a>\n# [2.1.0](https://github.com/material-components/material-components-web/compare/v2.0.0...v2.1.0) (2019-05-06)\n\n\n### Bug Fixes\n\n* **tab:** Update horizontal padding mixin ([#4678](https://github.com/material-components/material-components-web/issues/4678)) ([d3ce9c9](https://github.com/material-components/material-components-web/commit/d3ce9c9))\n* **tab-indicator:** Remove child selector ([#4676](https://github.com/material-components/material-components-web/issues/4676)) ([edbe0ba](https://github.com/material-components/material-components-web/commit/edbe0ba))\n* **tab-indicator:** Show border for high contrast ([#4666](https://github.com/material-components/material-components-web/issues/4666)) ([5a52847](https://github.com/material-components/material-components-web/commit/5a52847))\n* **text-field:** Fixes overlapping input with leading icon in absence of label ([#4637](https://github.com/material-components/material-components-web/issues/4637)) ([64e459e](https://github.com/material-components/material-components-web/commit/64e459e))\n* **text-field:** Update character counter to update when value is set. ([#4663](https://github.com/material-components/material-components-web/issues/4663)) ([acfbe2d](https://github.com/material-components/material-components-web/commit/acfbe2d))\n* **top-app-bar:** Move comment line to appropriate section ([#4610](https://github.com/material-components/material-components-web/issues/4610)) ([3e36555](https://github.com/material-components/material-components-web/commit/3e36555))\n\n\n### Features\n\n* **checkbox:** Updated cssClasses constant of checkbox ([#4674](https://github.com/material-components/material-components-web/issues/4674)) ([bb25680](https://github.com/material-components/material-components-web/commit/bb25680))\n* **tab:** Improved mixins ([#4675](https://github.com/material-components/material-components-web/issues/4675)) ([252009f](https://github.com/material-components/material-components-web/commit/252009f))\n\n\n\n<a name=\"2.0.0\"></a>\n# [2.0.0](https://github.com/material-components/material-components-web/compare/v1.0.0...v2.0.0) (2019-04-29)\n\n\n### Bug Fixes\n\n* **button:** Update border-width to 1px ([#4606](https://github.com/material-components/material-components-web/issues/4606)) ([be8747f](https://github.com/material-components/material-components-web/commit/be8747f))\n* **card:** Use on-surface color for action icons ([#4519](https://github.com/material-components/material-components-web/issues/4519)) ([9f37016](https://github.com/material-components/material-components-web/commit/9f37016))\n* **checkbox:** Fixed disabled checkbox styles for Edge browser ([#4602](https://github.com/material-components/material-components-web/issues/4602)) ([7855a6b](https://github.com/material-components/material-components-web/commit/7855a6b))\n* **chips:** Fix incorrect ripple effect on filter chip ([#4565](https://github.com/material-components/material-components-web/issues/4565)) ([975bae2](https://github.com/material-components/material-components-web/commit/975bae2))\n* **feature-targeting:** Move ripple styles into separate mixins ([#4454](https://github.com/material-components/material-components-web/issues/4454)) ([720bef0](https://github.com/material-components/material-components-web/commit/720bef0))\n* **list:** Add cursor: pointer for interactive list items ([#4563](https://github.com/material-components/material-components-web/issues/4563)) ([d2f0ccb](https://github.com/material-components/material-components-web/commit/d2f0ccb)), closes [#4557](https://github.com/material-components/material-components-web/issues/4557)\n* **list:** Include disabled list items in keyboard navigation and allow focus ([#4568](https://github.com/material-components/material-components-web/issues/4568)) ([6e24280](https://github.com/material-components/material-components-web/commit/6e24280))\n* **list:** Update meta class to use caption typogrpahy style ([#4623](https://github.com/material-components/material-components-web/issues/4623)) ([0826a78](https://github.com/material-components/material-components-web/commit/0826a78))\n* **menu:** Fix selection group list item spacing ([#4517](https://github.com/material-components/material-components-web/issues/4517)) ([5183e01](https://github.com/material-components/material-components-web/commit/5183e01))\n* **menu:** Use on-surface color for graphic/meta content ([#4520](https://github.com/material-components/material-components-web/issues/4520)) ([74b8d67](https://github.com/material-components/material-components-web/commit/74b8d67))\n* **ripple:** Use standard element removal method ([#4638](https://github.com/material-components/material-components-web/issues/4638)) ([ef07477](https://github.com/material-components/material-components-web/commit/ef07477))\n* **select:** Fix enhanced select issue where it does not stay open on long press [#4173](https://github.com/material-components/material-components-web/issues/4173) ([#4590](https://github.com/material-components/material-components-web/issues/4590)) ([8286aa7](https://github.com/material-components/material-components-web/commit/8286aa7))\n* **select:** Use correct shape category consistently with text-field ([#4553](https://github.com/material-components/material-components-web/issues/4553)) ([bec2ef2](https://github.com/material-components/material-components-web/commit/bec2ef2))\n* **shape:** Allow percentage based global overrides ([#4548](https://github.com/material-components/material-components-web/issues/4548)) ([4bf7a86](https://github.com/material-components/material-components-web/commit/4bf7a86))\n* **shape:** Fix errors related to multi-value shape categories ([#4547](https://github.com/material-components/material-components-web/issues/4547)) ([9f79d17](https://github.com/material-components/material-components-web/commit/9f79d17))\n* **tab:** Explicitly set margin to 0 on tabs for Safari ([#4654](https://github.com/material-components/material-components-web/issues/4654)) ([28aa623](https://github.com/material-components/material-components-web/commit/28aa623))\n* Don't import * from focus-trap to avoid default export confusion ([#4485](https://github.com/material-components/material-components-web/issues/4485)) ([6082dc3](https://github.com/material-components/material-components-web/commit/6082dc3))\n* **tab:** Fix tab icon color mixin to support SVG icons. ([#4540](https://github.com/material-components/material-components-web/issues/4540)) ([5ad6570](https://github.com/material-components/material-components-web/commit/5ad6570))\n* **tab:** Update moz-focusring to moz-focus-inner to match button ([#4567](https://github.com/material-components/material-components-web/issues/4567)) ([968a054](https://github.com/material-components/material-components-web/commit/968a054))\n* **tabs:** Disable firefox focus ring ([#4560](https://github.com/material-components/material-components-web/issues/4560)) ([a99b7d4](https://github.com/material-components/material-components-web/commit/a99b7d4))\n* **text-field:** add classes constant ([#4608](https://github.com/material-components/material-components-web/issues/4608)) ([22fa259](https://github.com/material-components/material-components-web/commit/22fa259))\n* **text-field:** Fix for input alignment in textfield with trailing icon ([#4478](https://github.com/material-components/material-components-web/issues/4478)) ([b9c5fc6](https://github.com/material-components/material-components-web/commit/b9c5fc6))\n* **text-field:** Fixed asterisk color where it stays in error color even after input is resolved ([#4576](https://github.com/material-components/material-components-web/issues/4576)) ([ca502d4](https://github.com/material-components/material-components-web/commit/ca502d4))\n* **text-field:** Set character counter in setValue ([#4572](https://github.com/material-components/material-components-web/issues/4572)) ([bce2e63](https://github.com/material-components/material-components-web/commit/bce2e63))\n\n\n### Code Refactoring\n\n* Swap MDCTopAppBar Sass Variable Word Order ([#4498](https://github.com/material-components/material-components-web/issues/4498)) ([e851bae](https://github.com/material-components/material-components-web/commit/e851bae))\n\n\n### Features\n\n* **checkbox:** Toggle selected class with state ([#4612](https://github.com/material-components/material-components-web/issues/4612)) ([5f06dce](https://github.com/material-components/material-components-web/commit/5f06dce))\n* **dialog:** Add feature targeting for styles ([#4524](https://github.com/material-components/material-components-web/issues/4524)) ([3556a93](https://github.com/material-components/material-components-web/commit/3556a93))\n* **drawer:** Make list instance publicly accessible ([#4516](https://github.com/material-components/material-components-web/issues/4516)) ([f46941c](https://github.com/material-components/material-components-web/commit/f46941c))\n* **fab:** Add feature targeting for styles ([#4526](https://github.com/material-components/material-components-web/issues/4526)) ([1ba7bdd](https://github.com/material-components/material-components-web/commit/1ba7bdd))\n* **form-field:** add feature targeting for styles ([#4521](https://github.com/material-components/material-components-web/issues/4521)) ([cd04f82](https://github.com/material-components/material-components-web/commit/cd04f82))\n* **grid-list:** Add feature targeting for styles ([#4534](https://github.com/material-components/material-components-web/issues/4534)) ([a8a6660](https://github.com/material-components/material-components-web/commit/a8a6660))\n* **icon-button:** Add feature targeting for styles ([#4536](https://github.com/material-components/material-components-web/issues/4536)) ([a58f2d2](https://github.com/material-components/material-components-web/commit/a58f2d2))\n* **image-list:** Add feature targeting for styles ([#4535](https://github.com/material-components/material-components-web/issues/4535)) ([0bfeabb](https://github.com/material-components/material-components-web/commit/0bfeabb))\n* **list:** Add disabled class name to constants ([#4558](https://github.com/material-components/material-components-web/issues/4558)) ([f2db177](https://github.com/material-components/material-components-web/commit/f2db177))\n* **list:** Automatically use appropriate aria attribute for single selection list. ([#4479](https://github.com/material-components/material-components-web/issues/4479)) ([077c809](https://github.com/material-components/material-components-web/commit/077c809))\n* **menu:** Added new API to manually set focus when menu is opened ([#4468](https://github.com/material-components/material-components-web/issues/4468)) ([42ae5c3](https://github.com/material-components/material-components-web/commit/42ae5c3))\n* **menu:** Focus management features & accessibility improvements ([#4587](https://github.com/material-components/material-components-web/issues/4587)) ([8d91b93](https://github.com/material-components/material-components-web/commit/8d91b93))\n* **tab:** Add Tab Sass mixins targeting active state colors ([#4522](https://github.com/material-components/material-components-web/issues/4522)) ([31376f7](https://github.com/material-components/material-components-web/commit/31376f7))\n* **tab-bar:** Allow activation of tab without previous active tab ([#4615](https://github.com/material-components/material-components-web/issues/4615)) ([7d4124d](https://github.com/material-components/material-components-web/commit/7d4124d))\n* **tabs:** Add active tab states mixin ([#4603](https://github.com/material-components/material-components-web/issues/4603)) ([0e9f3f5](https://github.com/material-components/material-components-web/commit/0e9f3f5))\n* **text-field:** define icon's cssClasses ([#4614](https://github.com/material-components/material-components-web/issues/4614)) ([816139c](https://github.com/material-components/material-components-web/commit/816139c))\n* **theme:** Add support for arbitrary CSS vars with fallback ([#4470](https://github.com/material-components/material-components-web/issues/4470)) ([0bfb393](https://github.com/material-components/material-components-web/commit/0bfb393))\n\n\n### BREAKING CHANGES\n\n* **menu:** New adapter methods to MDC List: `isRootFocused`. MDC Menu: Replaced adapter methods `isRootFocused`, `focusRoot` with `focusListRoot`. When using MDC List inside MDC Menu `tabindex` should be set on list root element where `role=\"menu\"` is assigned.\n* **list:** MDCList's `listElements` component API now includes disabled list items which previously returned only enabled list items.\n* **menu:** Focus is no more set to first menu item when menu is opened. Introduced new API (`setDefaultFocusState()`) to set default focus state (`DefaultFocusState`) that will be used to focus every time when menu is opened. Also introduced new foundation & adapter methods to incorporate this change. Please use `setDefaultFocusItemIndex(DefaultFocusState.FIRST_ITEM)` method before menu open to retain previous behaviour.\n* `$mdc-top-app-bar-prominent-dense-title-bottom-padding` is renamed to `$mdc-top-app-bar-dense-prominent-title-bottom-padding`\n\n\n\n<a name=\"1.1.1\"></a>\n## [1.1.1](https://github.com/material-components/material-components-web/compare/v1.1.0...v1.1.1) (2019-04-08)\n\n\n### Bug Fixes\n\n* **chips:** Fix incorrect ripple effect on filter chip ([#4565](https://github.com/material-components/material-components-web/issues/4565)) ([60a268f](https://github.com/material-components/material-components-web/commit/60a268f))\n* **list:** Add cursor: pointer for interactive list items ([#4563](https://github.com/material-components/material-components-web/issues/4563)) ([0bba1fa](https://github.com/material-components/material-components-web/commit/0bba1fa)), closes [#4557](https://github.com/material-components/material-components-web/issues/4557)\n* **menu:** Fix selection group list item spacing ([#4517](https://github.com/material-components/material-components-web/issues/4517)) ([e9b7cca](https://github.com/material-components/material-components-web/commit/e9b7cca))\n* **select:** Use correct shape category consistently with text-field ([#4553](https://github.com/material-components/material-components-web/issues/4553)) ([5d3e22f](https://github.com/material-components/material-components-web/commit/5d3e22f))\n* **shape:** Allow percentage based global overrides ([#4548](https://github.com/material-components/material-components-web/issues/4548)) ([f648b2d](https://github.com/material-components/material-components-web/commit/f648b2d))\n* **shape:** Fix errors related to multi-value shape categories ([#4547](https://github.com/material-components/material-components-web/issues/4547)) ([39214e4](https://github.com/material-components/material-components-web/commit/39214e4))\n* **tab:** Fix tab icon color mixin to support SVG icons. ([#4540](https://github.com/material-components/material-components-web/issues/4540)) ([13326b6](https://github.com/material-components/material-components-web/commit/13326b6))\n* **tab:** Update moz-focusring to moz-focus-inner to match button ([#4567](https://github.com/material-components/material-components-web/issues/4567)) ([b99d2c5](https://github.com/material-components/material-components-web/commit/b99d2c5))\n* **tabs:** Disable firefox focus ring ([#4560](https://github.com/material-components/material-components-web/issues/4560)) ([1a7ddb1](https://github.com/material-components/material-components-web/commit/1a7ddb1))\n* **text-field:** Set character counter in setValue ([#4572](https://github.com/material-components/material-components-web/issues/4572)) ([7261fd0](https://github.com/material-components/material-components-web/commit/7261fd0))\n\n\n\n<a name=\"1.1.0\"></a>\n# [1.1.0](https://github.com/material-components/material-components-web/compare/v1.0.0...v1.1.0) (2019-03-26)\n\n\n### Bug Fixes\n\n* **card:** Use on-surface color for action icons ([#4519](https://github.com/material-components/material-components-web/issues/4519)) ([34fb821](https://github.com/material-components/material-components-web/commit/34fb821))\n* **menu:** Fix selection group list item spacing ([#4517](https://github.com/material-components/material-components-web/issues/4517)) ([8a1de5b](https://github.com/material-components/material-components-web/commit/8a1de5b))\n* **menu:** Use on-surface color for graphic/meta content ([#4520](https://github.com/material-components/material-components-web/issues/4520)) ([499d286](https://github.com/material-components/material-components-web/commit/499d286))\n* **text-field:** Fix for input alignment in textfield with trailing icon ([#4478](https://github.com/material-components/material-components-web/issues/4478)) ([7c9793b](https://github.com/material-components/material-components-web/commit/7c9793b))\n\n\n### Features\n\n* **dialog:** Add feature targeting for styles ([#4524](https://github.com/material-components/material-components-web/issues/4524)) ([690036f](https://github.com/material-components/material-components-web/commit/690036f))\n* **drawer:** Make list instance publicly accessible ([#4516](https://github.com/material-components/material-components-web/issues/4516)) ([798108b](https://github.com/material-components/material-components-web/commit/798108b))\n* **fab:** Add feature targeting for styles ([#4526](https://github.com/material-components/material-components-web/issues/4526)) ([5676d70](https://github.com/material-components/material-components-web/commit/5676d70))\n* **form-field:** add feature targeting for styles ([#4521](https://github.com/material-components/material-components-web/issues/4521)) ([11eb357](https://github.com/material-components/material-components-web/commit/11eb357))\n* **grid-list:** Add feature targeting for styles ([#4534](https://github.com/material-components/material-components-web/issues/4534)) ([3a3c74c](https://github.com/material-components/material-components-web/commit/3a3c74c))\n* **icon-button:** Add feature targeting for styles ([#4536](https://github.com/material-components/material-components-web/issues/4536)) ([ab8beeb](https://github.com/material-components/material-components-web/commit/ab8beeb))\n* **image-list:** Add feature targeting for styles ([#4535](https://github.com/material-components/material-components-web/issues/4535)) ([1046258](https://github.com/material-components/material-components-web/commit/1046258))\n* **list:** Automatically use appropriate aria attribute for single selection list. ([#4479](https://github.com/material-components/material-components-web/issues/4479)) ([3804743](https://github.com/material-components/material-components-web/commit/3804743))\n* **tab:** Add Tab Sass mixins targeting active state colors ([#4522](https://github.com/material-components/material-components-web/issues/4522)) ([3666c80](https://github.com/material-components/material-components-web/commit/3666c80))\n* **theme:** Add support for arbitrary CSS vars with fallback ([#4470](https://github.com/material-components/material-components-web/issues/4470)) ([b4b954b](https://github.com/material-components/material-components-web/commit/b4b954b))\n\n\n\n<a name=\"1.0.1\"></a>\n## [1.0.1](https://github.com/material-components/material-components-web/compare/v1.0.0...v1.0.1) (2019-03-11)\n\n\n### Bug Fixes\n\n* **feature-targeting:** Move ripple styles into separate mixins ([#4454](https://github.com/material-components/material-components-web/issues/4454)) ([f53aacc](https://github.com/material-components/material-components-web/commit/f53aacc))\n* Don't import * from focus-trap to avoid default export confusion ([#4485](https://github.com/material-components/material-components-web/issues/4485)) ([bd3d946](https://github.com/material-components/material-components-web/commit/bd3d946))\n\n\n\n<a name=\"1.0.0\"></a>\n# [1.0.0](https://github.com/material-components/material-components-web/compare/v0.44.1...v1.0.0) (2019-03-06)\n\n\n### Bug Fixes\n\n* **list:** Update default notifyAction impl to emit object ([#4356](https://github.com/material-components/material-components-web/issues/4356)) ([ed1aeb2](https://github.com/material-components/material-components-web/commit/ed1aeb2)), closes [#4355](https://github.com/material-components/material-components-web/issues/4355)\n* **menu:** Read index property from list item event detail ([#4368](https://github.com/material-components/material-components-web/issues/4368)) ([5eb5a01](https://github.com/material-components/material-components-web/commit/5eb5a01)), closes [#4356](https://github.com/material-components/material-components-web/issues/4356)\n* **ripple:** Use mdc-dom.matches everywhere ([#4372](https://github.com/material-components/material-components-web/issues/4372)) ([a2aa3c8](https://github.com/material-components/material-components-web/commit/a2aa3c8)), closes [#4340](https://github.com/material-components/material-components-web/issues/4340)\n* **text-field:** Set char counter text not to wrap ([#4423](https://github.com/material-components/material-components-web/issues/4423)) ([9b7dce7](https://github.com/material-components/material-components-web/commit/9b7dce7))\n* **menu-surface:** Fix anchorElement initialization ([#4462](https://github.com/material-components/material-components-web/issues/4462)) ([2025c8b](https://github.com/material-components/material-components-web/commit/2025c8b))\n* **package:** Fix module declaration names in dist d.ts files ([#4476](https://github.com/material-components/material-components-web/issues/4476)) ([872b39f](https://github.com/material-components/material-components-web/commit/872b39f))\n* **list:** Remove unused adapter.removeAttributeForElementIndex ([#4473](https://github.com/material-components/material-components-web/issues/4473)) ([6b3a419](https://github.com/material-components/material-components-web/commit/6b3a419))\n\n\n### Code Refactoring\n\n* **animation:** Remove `transformStyleProperties` export ([#4453](https://github.com/material-components/material-components-web/issues/4453)) ([aa44991](https://github.com/material-components/material-components-web/commit/aa44991)), closes [/github.com/material-components/material-components-web/pull/4407#discussion_r258668567](https://github.com//github.com/material-components/material-components-web/pull/4407/issues/discussion_r258668567)\n\n\n### Features\n\n* Convert packages to TypeScript ([#4451](https://github.com/material-components/material-components-web/issues/4451)) ([ad5743a](https://github.com/material-components/material-components-web/commit/ad5743a))\n* **feature-targeting:** Elevation, ripple, theme, typography ([#4383](https://github.com/material-components/material-components-web/issues/4383)) ([4c2a63c](https://github.com/material-components/material-components-web/commit/4c2a63c))\n* **feature-targeting:** Rename main mixins to end with `-core-styles` ([#4404](https://github.com/material-components/material-components-web/issues/4404)) ([3102351](https://github.com/material-components/material-components-web/commit/3102351))\n* **menu-surface:** Update setPosition adapter API to use numeric values ([#4351](https://github.com/material-components/material-components-web/issues/4351)) ([701ed5c](https://github.com/material-components/material-components-web/commit/701ed5c)), closes [#4273](https://github.com/material-components/material-components-web/issues/4273)\n* **ripple:** Reduce press opacity by 25% ([#4350](https://github.com/material-components/material-components-web/issues/4350)) ([f5d2170](https://github.com/material-components/material-components-web/commit/f5d2170))\n* **shape:** add feature targeting to public mixins ([#4384](https://github.com/material-components/material-components-web/issues/4384)) ([e0860dd](https://github.com/material-components/material-components-web/commit/e0860dd))\n* **tab:** Implement a base states color mixin for Tab ([#4421](https://github.com/material-components/material-components-web/issues/4421)) ([35c3721](https://github.com/material-components/material-components-web/commit/35c3721))\n\n\n### BREAKING CHANGES\n\n* The previously deprecated mdc-icon-toggle package has been removed; use mdc-icon-button instead.\n* **animation:** The `transformStyleProperties` array export has been removed from `mdc-animation`. Please use `getCorrectPropertyName(window, 'transform')` instead.\n* **ripple:** `getMatchesProperty()` has been removed from `@material/ripple/util` and `@material/tab-scroller/util`. Use `matches()` from `@material/dom/ponyfill` instead.\n* **feature-targeting:** The main mixins recently introduced to some packages in in v0.44.0 have been renamed from `mdc-foo` to `mdc-foo-core-styles`. (Importing baseline styles via `mdc-foo.scss` remains unaffected.)\n* **list:** The default `MDCListAdapter#notifyAction` implementation now emits an object of type `{index: number}` rather than a primitive `number` directly.\n* **menu-surface:** `MDCMenuSurfaceAdapter#setPosition` now expects an object with properties of type `number` rather than `string`. E.g., `setPosition({top: '5px', left: '10px'})` is now `setPosition({top: 5, left: 10})`.\n* **list:** Removed `MDCListAdapter#removeAttributeForElementIndex`\n\n\n\n<a name=\"0.44.1\"></a>\n## [0.44.1](https://github.com/material-components/material-components-web/compare/v0.44.0...v0.44.1) (2019-02-19)\n\n\n### Bug Fixes\n\n* **chips:** Flip leading icon margin when used in RTL contexts ([#4380](https://github.com/material-components/material-components-web/issues/4380)) ([10a384f](https://github.com/material-components/material-components-web/commit/10a384f))\n* **chips:** Use required pixel value ([#4361](https://github.com/material-components/material-components-web/issues/4361)) ([7dc2125](https://github.com/material-components/material-components-web/commit/7dc2125))\n* **feature-targeting:** fix incorrect list construction ([#4419](https://github.com/material-components/material-components-web/issues/4419)) ([37f2044](https://github.com/material-components/material-components-web/commit/37f2044))\n* **floating-label:** Add missing import to mixins ([#4434](https://github.com/material-components/material-components-web/issues/4434)) ([cd1d9fb](https://github.com/material-components/material-components-web/commit/cd1d9fb))\n* **menu-surface:** Correct open animation issue ([#4371](https://github.com/material-components/material-components-web/issues/4371)) ([189957b](https://github.com/material-components/material-components-web/commit/189957b))\n* **text-field:** Fix placeholder styles for text field fullwidth variant. ([#4385](https://github.com/material-components/material-components-web/issues/4385)) ([1edc29f](https://github.com/material-components/material-components-web/commit/1edc29f))\n\n\n\n<a name=\"0.44.0\"></a>\n# [0.44.0](https://github.com/material-components/material-components-web/compare/v0.43.0...v0.44.0) (2019-02-04)\n\n\n### Bug Fixes\n\n* **drawer:** Fix restore & release focus order when closing the drawer ([#4304](https://github.com/material-components/material-components-web/issues/4304)) ([dffbcc1](https://github.com/material-components/material-components-web/commit/dffbcc1))\n* **drawer:** Use parentNode DOM API when selecting scrim to make it work with Shadow DOM ([#4265](https://github.com/material-components/material-components-web/issues/4265)) ([385a223](https://github.com/material-components/material-components-web/commit/385a223))\n* **feature-targeting:** prevent accidental nesting of mdc-feature-targets mixin ([#4281](https://github.com/material-components/material-components-web/issues/4281)) ([3405bc4](https://github.com/material-components/material-components-web/commit/3405bc4))\n* **menu:** Updated menu to use list's custom event ([#4151](https://github.com/material-components/material-components-web/issues/4151)) ([a4e08f1](https://github.com/material-components/material-components-web/commit/a4e08f1))\n* **text-field:** Fix textfield placeholder & outline stroke animation ([#4310](https://github.com/material-components/material-components-web/issues/4310)) ([58c3b4d](https://github.com/material-components/material-components-web/commit/58c3b4d))\n* **text-field:** Reset z-index property of chrome autofill box ([#4232](https://github.com/material-components/material-components-web/issues/4232)) ([e718cb2](https://github.com/material-components/material-components-web/commit/e718cb2))\n* **text-field:** Update closure type for rippleFactory ([#4324](https://github.com/material-components/material-components-web/issues/4324)) ([7a4a707](https://github.com/material-components/material-components-web/commit/7a4a707))\n\n\n### Features\n\n* **card:** add feature targeting for styles ([#4301](https://github.com/material-components/material-components-web/issues/4301)) ([92db33b](https://github.com/material-components/material-components-web/commit/92db33b))\n* **checkbox:** add feature targeting to remaining public mixins ([#4315](https://github.com/material-components/material-components-web/issues/4315)) ([4bc18d1](https://github.com/material-components/material-components-web/commit/4bc18d1))\n* **chips:** Move logic for calculating chip bounding rect into a foundation method ([#4243](https://github.com/material-components/material-components-web/issues/4243)) ([b30f5e2](https://github.com/material-components/material-components-web/commit/b30f5e2))\n* **list:** add feature targeting for styles ([#4303](https://github.com/material-components/material-components-web/issues/4303)) ([c994156](https://github.com/material-components/material-components-web/commit/c994156))\n* **list:** Add notifyAction adapter for action on list item. ([#4144](https://github.com/material-components/material-components-web/issues/4144)) ([6ed35b1](https://github.com/material-components/material-components-web/commit/6ed35b1))\n* **menu:** add feature targeting for styles ([#4278](https://github.com/material-components/material-components-web/issues/4278)) ([97a8585](https://github.com/material-components/material-components-web/commit/97a8585))\n* **menu:** add feature targeting to remaining public mixins ([#4317](https://github.com/material-components/material-components-web/issues/4317)) ([5928c00](https://github.com/material-components/material-components-web/commit/5928c00))\n* **menu-surface:** add feature targeting for styles ([#4279](https://github.com/material-components/material-components-web/issues/4279)) ([56b8467](https://github.com/material-components/material-components-web/commit/56b8467))\n* **radio:** add feature targeting for styles ([#4270](https://github.com/material-components/material-components-web/issues/4270)) ([eb8b8f6](https://github.com/material-components/material-components-web/commit/eb8b8f6))\n* **radio:** add feature targeting to remaining public mixins ([#4318](https://github.com/material-components/material-components-web/issues/4318)) ([9f8ee9e](https://github.com/material-components/material-components-web/commit/9f8ee9e))\n* **switch:** add feature targeting for styles ([#4275](https://github.com/material-components/material-components-web/issues/4275)) ([4836293](https://github.com/material-components/material-components-web/commit/4836293))\n* Add feature targeting support and apply to mdc-button ([#4228](https://github.com/material-components/material-components-web/issues/4228)) ([531dffb](https://github.com/material-components/material-components-web/commit/531dffb))\n* **text-field:** Added support for character counter. ([#4244](https://github.com/material-components/material-components-web/issues/4244)) ([0bcc0e7](https://github.com/material-components/material-components-web/commit/0bcc0e7))\n* **text-field:** Added support for text field without label ([#4285](https://github.com/material-components/material-components-web/issues/4285)) ([bf956fa](https://github.com/material-components/material-components-web/commit/bf956fa))\n* **typography:** add feature targeting for styles ([#4305](https://github.com/material-components/material-components-web/issues/4305)) ([8691cf8](https://github.com/material-components/material-components-web/commit/8691cf8))\n\n\n### BREAKING CHANGES\n\n* **text-field:** Helper text must now be nested within `mdc-text-field-helper-line` element. Wrappers must account for the new `character-counter` sub-component. See the Text Field documentation for examples and more information.\n* **menu:** Replaced menu's foundation methods `handleClick` and `handleSelection` with `handleItemAction` to handle list item action (i.e., list's custom event `MDCList:action`)\n* **list:** Removed adapter method `followHref` and used native anchor element behaviour to follow href on <kbd>Enter</kbd> & click. Components that use MDC List should use its new custom event.\n* **chips:** Adds 3 new chips adapter methods: `hasLeadingIcon`, `getRootBoundingClientRect`, and `getCheckmarkBoundingClientRect`. Also adds a new foundation method: `getDimensions`.\n\n\n\n<a name=\"0.43.1\"></a>\n## [0.43.1](https://github.com/material-components/material-components-web/compare/v0.43.0...v0.43.1) (2019-01-22)\n\n\n### Bug Fixes\n\n* **text-field:** Reset z-index property of chrome autofill box ([#4232](https://github.com/material-components/material-components-web/issues/4232)) ([9e06b77](https://github.com/material-components/material-components-web/commit/9e06b77))\n\n\n<a name=\"0.43.0\"></a>\n# [0.43.0](https://github.com/material-components/material-components-web/compare/v0.42.0...v0.43.0) (2019-01-07)\n\n\n### Bug Fixes\n\n* **drawer:** Upgrade focus-trap version in drawer & dialog ([#4217](https://github.com/material-components/material-components-web/issues/4217)) ([ea37b07](https://github.com/material-components/material-components-web/commit/ea37b07))\n* **list:** Accept array of index for selectedIndex API ([#4124](https://github.com/material-components/material-components-web/issues/4124)) ([be070a4](https://github.com/material-components/material-components-web/commit/be070a4))\n* **notched-outline:** Fix label overflow ([#4171](https://github.com/material-components/material-components-web/issues/4171)) ([145db1f](https://github.com/material-components/material-components-web/commit/145db1f))\n* **notched-outline:** fix missing shape functions import ([#4224](https://github.com/material-components/material-components-web/issues/4224)) ([96f663e](https://github.com/material-components/material-components-web/commit/96f663e))\n* **package:** Add source-map files to npm releases ([#4206](https://github.com/material-components/material-components-web/issues/4206)) ([9d6375b](https://github.com/material-components/material-components-web/commit/9d6375b))\n* **snackbar:** Rename action/dismiss classes and revise docs/tests ([#4203](https://github.com/material-components/material-components-web/issues/4203)) ([673dba2](https://github.com/material-components/material-components-web/commit/673dba2))\n\n\n### Features\n\n* **button:** Add trailing icon support via label element ([#4159](https://github.com/material-components/material-components-web/issues/4159)) ([fa41579](https://github.com/material-components/material-components-web/commit/fa41579))\n* **checkbox:** Declare all Sass variables as `!default` ([de6c833](https://github.com/material-components/material-components-web/commit/de6c833)), closes [#3708](https://github.com/material-components/material-components-web/issues/3708)\n* **snackbar:** Update to match latest design guidelines ([#4166](https://github.com/material-components/material-components-web/issues/4166)) ([33d30e6](https://github.com/material-components/material-components-web/commit/33d30e6)), closes [#4005](https://github.com/material-components/material-components-web/issues/4005) [#3981](https://github.com/material-components/material-components-web/issues/3981) [#2916](https://github.com/material-components/material-components-web/issues/2916) [#2628](https://github.com/material-components/material-components-web/issues/2628) [#1466](https://github.com/material-components/material-components-web/issues/1466) [#1398](https://github.com/material-components/material-components-web/issues/1398) [#1258](https://github.com/material-components/material-components-web/issues/1258) [#11](https://github.com/material-components/material-components-web/issues/11) [#2813](https://github.com/material-components/material-components-web/issues/2813)\n* **tab:** Get tabs by their ID ([#4149](https://github.com/material-components/material-components-web/issues/4149)) ([2d35220](https://github.com/material-components/material-components-web/commit/2d35220))\n\n\n### BREAKING CHANGES\n\n* **list:** Introduced new adapter `isFocusInsideList` for MDC List for improved accessibility.\n* **snackbar:** Snackbar's DOM and APIs have changed to match the latest design guidelines. See the Snackbar documentation for more information.\n* **button:** We recommend placing each button's text label within a `mdc-button__label` element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.\n* **tab:** `MDCTabBar#getIndexOfTab(tab: MDCTab): number` is now `MDCTabBar#getIndexOfTabById(id: string): number`\n\n\n\n<a name=\"0.42.1\"></a>\n## [0.42.1](https://github.com/material-components/material-components-web/compare/v0.42.0...v0.42.1) (2018-12-17)\n\n\n### Bug Fixes\n\n* **menu:** Increase specificity of selection group class ([#4172](https://github.com/material-components/material-components-web/issues/4172)) ([870b234](https://github.com/material-components/material-components-web/commit/870b234))\n* **menu-surface:** Raise z-index over MDC Dialog ([#4185](https://github.com/material-components/material-components-web/issues/4185)) ([49233a8](https://github.com/material-components/material-components-web/commit/49233a8))\n* **slider:** Don't throw error when markup min is greater than default max ([#3315](https://github.com/material-components/material-components-web/issues/3315)) ([8d461be](https://github.com/material-components/material-components-web/commit/8d461be)), closes [#2269](https://github.com/material-components/material-components-web/issues/2269)\n* **text-field:** Don't move caret when value has not changed ([#4160](https://github.com/material-components/material-components-web/issues/4160)) ([31f5d9c](https://github.com/material-components/material-components-web/commit/31f5d9c))\n* **text-field:** Restrict resize to vertical for full width text area ([#4167](https://github.com/material-components/material-components-web/issues/4167)) ([8e6b968](https://github.com/material-components/material-components-web/commit/8e6b968))\n\n\n\n<a name=\"0.42.0\"></a>\n# [0.42.0](https://github.com/material-components/material-components-web/compare/v0.41.0...v0.42.0) (2018-12-04)\n\n\n### Bug Fixes\n\n* **card:** Corrected baseline shape value of card small => medium ([#4060](https://github.com/material-components/material-components-web/issues/4060)) ([acb9443](https://github.com/material-components/material-components-web/commit/acb9443))\n* **card:** Update elevation to match spec ([#4040](https://github.com/material-components/material-components-web/issues/4040)) ([a6b028d](https://github.com/material-components/material-components-web/commit/a6b028d))\n* **checkbox:** remove adapter.getNativeCb and move property hooks to component ([#4073](https://github.com/material-components/material-components-web/issues/4073)) ([5ab68fe](https://github.com/material-components/material-components-web/commit/5ab68fe))\n* **dialog:** Cancel open's rAF when close is called ([#4087](https://github.com/material-components/material-components-web/issues/4087)) ([2516c25](https://github.com/material-components/material-components-web/commit/2516c25))\n* **dialog:** Release focus after style changes on close ([#4069](https://github.com/material-components/material-components-web/issues/4069)) ([e12997a](https://github.com/material-components/material-components-web/commit/e12997a))\n* **drawer:** allow drawer below top app bar ([#4028](https://github.com/material-components/material-components-web/issues/4028)) ([ebdb084](https://github.com/material-components/material-components-web/commit/ebdb084))\n* **drawer:** check for existence of ANIMATE class name in isOpening condition ([#4078](https://github.com/material-components/material-components-web/issues/4078)) ([a4fd0a6](https://github.com/material-components/material-components-web/commit/a4fd0a6))\n* **drawer:** Fix issue where drawer fires opened event twice. ([#4027](https://github.com/material-components/material-components-web/issues/4027)) ([72ef4e8](https://github.com/material-components/material-components-web/commit/72ef4e8))\n* **fab:** Separate mixins for regular FAB and Extended FAB ([#4082](https://github.com/material-components/material-components-web/issues/4082)) ([003e95f](https://github.com/material-components/material-components-web/commit/003e95f))\n* **list:** Fix font size and placement for avatar graphic ([#4021](https://github.com/material-components/material-components-web/issues/4021)) ([5abe685](https://github.com/material-components/material-components-web/commit/5abe685))\n* **list:** Update ARIA attributes for radio/checkbox based list ([#4055](https://github.com/material-components/material-components-web/issues/4055)) ([76b404e](https://github.com/material-components/material-components-web/commit/76b404e))\n* **ripple:** Suppress before/after when color is transparent ([#4112](https://github.com/material-components/material-components-web/issues/4112)) ([2e2b227](https://github.com/material-components/material-components-web/commit/2e2b227))\n* **select:** Add missing exports ([#4129](https://github.com/material-components/material-components-web/issues/4129)) ([dbc429a](https://github.com/material-components/material-components-web/commit/dbc429a))\n* **select:** Enhanced select doesn't wrap focus ([#4083](https://github.com/material-components/material-components-web/issues/4083)) ([c640d50](https://github.com/material-components/material-components-web/commit/c640d50))\n* **select:** Remove style customization for native select > option ([#4089](https://github.com/material-components/material-components-web/issues/4089)) ([379c522](https://github.com/material-components/material-components-web/commit/379c522))\n* **shape:** Add noflip comments, fix RTL for categories ([#4116](https://github.com/material-components/material-components-web/issues/4116)) ([62054f8](https://github.com/material-components/material-components-web/commit/62054f8))\n* **text-field:** Send client position to line ripple for touch events ([#4084](https://github.com/material-components/material-components-web/issues/4084)) ([95c0a98](https://github.com/material-components/material-components-web/commit/95c0a98))\n* **top-app-bar:** Move scroll target initialization; improve test ([#4106](https://github.com/material-components/material-components-web/issues/4106)) ([f799659](https://github.com/material-components/material-components-web/commit/f799659))\n\n\n### Code Refactoring\n\n* **notched-outline:** Refactor notched outline to use 3 divs ([#4035](https://github.com/material-components/material-components-web/issues/4035)) ([9741233](https://github.com/material-components/material-components-web/commit/9741233))\n\n\n### Features\n\n* **text-field:** Add focus API to component ([#4020](https://github.com/material-components/material-components-web/issues/4020)) ([edcb939](https://github.com/material-components/material-components-web/commit/edcb939))\n\n\n### BREAKING CHANGES\n\n* **notched-outline:** The notched outline has been changed from using an SVG for the outline to using 3 div elements. This approach resolves initial rendering issues as well as inconsistencies between the different types of outlines. Please refer to the [Readme](./packages/mdc-notched-outline/README.md) or the [screenshot test pages](./test/screenshot/spec/mdc-textfield/classes) for details and examples.\n* **checkbox:** The component is now responsible for calling `MDCCheckboxFoundation#handleChange` when the checked and indeterminate properties change.\n* **list:** Replaced toggleCheckbox adapter method with `setCheckedCheckboxOrRadioAtIndex` and added 3 more new adapter methods for improved accessibility.\n* **fab:** Fab now has 2 separate mixins - `mdc-fab-shape-radius` for regular / mini Fab variants & `mdc-fab-extended-shape-radius` for Extended FAB variant.\n\n\n\n<a name=\"0.41.1\"></a>\n## [0.41.1](https://github.com/material-components/material-components-web/compare/v0.41.0...v0.41.1) (2018-11-14)\n\n\n### Bug Fixes\n\n* **card:** Corrected baseline shape value of card small => medium ([#4060](https://github.com/material-components/material-components-web/issues/4060)) ([875b159](https://github.com/material-components/material-components-web/commit/875b159))\n* **drawer:** allow drawer below top app bar ([#4028](https://github.com/material-components/material-components-web/issues/4028)) ([1eff602](https://github.com/material-components/material-components-web/commit/1eff602))\n* **drawer:** Fix issue where drawer fires opened event twice. ([#4027](https://github.com/material-components/material-components-web/issues/4027)) ([4a5a8e2](https://github.com/material-components/material-components-web/commit/4a5a8e2))\n\n\n\n<a name=\"0.41.0\"></a>\n# [0.41.0](https://github.com/material-components/material-components-web/compare/v0.40.0...v0.41.0) (2018-10-29)\n\n\n### Bug Fixes\n\n* **dialog:** Apply max-width to same element as min-width ([#3749](https://github.com/material-components/material-components-web/issues/3749)) ([2dac7e1](https://github.com/material-components/material-components-web/commit/2dac7e1))\n* **drawer:** link to the es6 component js file in screenshot spec ([#3696](https://github.com/material-components/material-components-web/issues/3696)) ([8d96a72](https://github.com/material-components/material-components-web/commit/8d96a72))\n* **drawer:** Remove redundant style ([#3731](https://github.com/material-components/material-components-web/issues/3731)) ([716da5a](https://github.com/material-components/material-components-web/commit/716da5a))\n* **drawer:** Remove unnecessary Closure annotation ([#3935](https://github.com/material-components/material-components-web/issues/3935)) ([61128be](https://github.com/material-components/material-components-web/commit/61128be))\n* **floating-label:** Add alternate tag ([#3993](https://github.com/material-components/material-components-web/issues/3993)) ([6307071](https://github.com/material-components/material-components-web/commit/6307071))\n* **list:** Peace out whitespace ([#3997](https://github.com/material-components/material-components-web/issues/3997)) ([19b5152](https://github.com/material-components/material-components-web/commit/19b5152))\n* **menu:** Allow anchor links as menu list items ([#3680](https://github.com/material-components/material-components-web/issues/3680)) ([d312271](https://github.com/material-components/material-components-web/commit/d312271))\n* **notched-outline:** Add noflip annotation ([#3994](https://github.com/material-components/material-components-web/issues/3994)) ([c60d42b](https://github.com/material-components/material-components-web/commit/c60d42b))\n* **notched-outline:** Auto position the notch and floating label based on corner size ([#3929](https://github.com/material-components/material-components-web/issues/3929)) ([06daf52](https://github.com/material-components/material-components-web/commit/06daf52))\n* **radio:** remove getNativeControl from adapter ([#3785](https://github.com/material-components/material-components-web/issues/3785)) ([476130e](https://github.com/material-components/material-components-web/commit/476130e))\n* **ripple:** Deactivate on contextmenu event ([#3759](https://github.com/material-components/material-components-web/issues/3759)) ([4d76e3f](https://github.com/material-components/material-components-web/commit/4d76e3f))\n* **shape:** Rename surface term with component. ([#3761](https://github.com/material-components/material-components-web/issues/3761)) ([81bb919](https://github.com/material-components/material-components-web/commit/81bb919))\n* Future-proof Sass usage ([#3921](https://github.com/material-components/material-components-web/issues/3921)) ([6fa2269](https://github.com/material-components/material-components-web/commit/6fa2269))\n* **text-field:** Fix textarea-shape-radius mixin behavior for input ([#3982](https://github.com/material-components/material-components-web/issues/3982)) ([1167289](https://github.com/material-components/material-components-web/commit/1167289))\n* **textfield:** Use theme mixin for asterisk color ([#3952](https://github.com/material-components/material-components-web/issues/3952)) ([981b37e](https://github.com/material-components/material-components-web/commit/981b37e))\n* **theme:** Make $mdc-theme-on-error dark if $mdc-theme-error is light ([#3678](https://github.com/material-components/material-components-web/issues/3678)) ([5b1348c](https://github.com/material-components/material-components-web/commit/5b1348c))\n* **typography:** Add alternate tag for line-height ([#3992](https://github.com/material-components/material-components-web/issues/3992)) ([f6acae8](https://github.com/material-components/material-components-web/commit/f6acae8))\n\n\n### Features\n\n* Update default npm export to ES5 js files ([#3245](https://github.com/material-components/material-components-web/issues/3245)) ([514f9f8](https://github.com/material-components/material-components-web/commit/514f9f8))\n* **chips:** Make deselect and toggleSelect private. Update handleChipInteraction/Removal API ([#3617](https://github.com/material-components/material-components-web/issues/3617)) ([73ab5a0](https://github.com/material-components/material-components-web/commit/73ab5a0))\n* **menu:** Expose handleSelection API to public ([#3950](https://github.com/material-components/material-components-web/issues/3950)) ([7f02a64](https://github.com/material-components/material-components-web/commit/7f02a64))\n* **select:** Add enhanced select variant ([#3949](https://github.com/material-components/material-components-web/issues/3949)) ([35697a5](https://github.com/material-components/material-components-web/commit/35697a5))\n* **tab-bar:** Add focusOnActivate flag ([#3748](https://github.com/material-components/material-components-web/issues/3748)) ([313618a](https://github.com/material-components/material-components-web/commit/313618a))\n\n\n### BREAKING CHANGES\n\n* Anyone intending to build MDC Web's ES2015+ sources must directly import `@material/foo/index`. `@material/foo` will now resolve to UMD modules.\n* **select:** Several adapter APIs were added to support the enhanced variant. The drop-down arrow is now its own element. The change event is now MDCSelect:change for all variants. See the README for full details.\n* **radio:** Removed getNativeControl from adapter, and subsequent foundation methods that called getNativeControl. Foundation methods removed: isChecked, setChecked, isDisabled, getValue, setValue.\n* **shape:** Renamed shape global variables from `$mdc-shape-*-surface-radius` to `$mdc-shape-*-component-radius`\n* **chips:** deselect and toggleSelect are private methods. handleChipInteraction and handleChipRemoval now accept chipId instead of an event.\n\n\n\n<a name=\"0.40.1\"></a>\n## [0.40.1](https://github.com/material-components/material-components-web/compare/v0.40.0...v0.40.1) (2018-10-08)\n\n\n### Bug Fixes\n\n* **checkbox:** Added missing clearTimeout call to destroy method ([#3674](https://github.com/material-components/material-components-web/issues/3674)) ([6706919](https://github.com/material-components/material-components-web/commit/6706919))\n* **chips:** Notify ChipSet when selected is set directly on the Chip ([#3601](https://github.com/material-components/material-components-web/issues/3601)) ([773e0f0](https://github.com/material-components/material-components-web/commit/773e0f0))\n* **dialog:** Wait for rAF/timeout to apply open class ([#3682](https://github.com/material-components/material-components-web/issues/3682)) ([3206521](https://github.com/material-components/material-components-web/commit/3206521))\n* **drawer:** Use rAF/setTimeout for opening class ([#3683](https://github.com/material-components/material-components-web/issues/3683)) ([8c8dee8](https://github.com/material-components/material-components-web/commit/8c8dee8))\n* **floating-label:** Enforce text alignment ([#3684](https://github.com/material-components/material-components-web/issues/3684)) ([19d0ca1](https://github.com/material-components/material-components-web/commit/19d0ca1))\n* **ripple:** Transition background-color to avoid flashes ([#3693](https://github.com/material-components/material-components-web/issues/3693)) ([17a5828](https://github.com/material-components/material-components-web/commit/17a5828))\n\n\n\n<a name=\"0.40.0\"></a>\n# [0.40.0](https://github.com/material-components/material-components-web/compare/v0.39.0...v0.40.0) (2018-09-24)\n\n\n### Bug Fixes\n\n* **checkbox:** remove native control from getters/setters of foundation ([#3408](https://github.com/material-components/material-components-web/issues/3408)) ([b0fe9cf](https://github.com/material-components/material-components-web/commit/b0fe9cf))\n* **dialog:** Add redlines to dialog screenshots; update to match spec ([#3602](https://github.com/material-components/material-components-web/issues/3602)) ([4da83dd](https://github.com/material-components/material-components-web/commit/4da83dd))\n* **dialog:** Conform more closely with spec ([#3575](https://github.com/material-components/material-components-web/issues/3575)) ([359710d](https://github.com/material-components/material-components-web/commit/359710d))\n* **dialog:** Increase z-index above Drawer ([#3597](https://github.com/material-components/material-components-web/issues/3597)) ([c1bd45a](https://github.com/material-components/material-components-web/commit/c1bd45a))\n* **drawer:** Destroy list in destroy method ([#3474](https://github.com/material-components/material-components-web/issues/3474)) ([325317c](https://github.com/material-components/material-components-web/commit/325317c))\n* **drawer:** Fix drawer content to have momentum scroll on iOS ([#3578](https://github.com/material-components/material-components-web/issues/3578)) ([c65be9b](https://github.com/material-components/material-components-web/commit/c65be9b))\n* **drawer:** Modal --open state class needs display: flex ([#3431](https://github.com/material-components/material-components-web/issues/3431)) ([533a46f](https://github.com/material-components/material-components-web/commit/533a46f))\n* **drawer:** Remove list item children to be included in click target. ([#3480](https://github.com/material-components/material-components-web/issues/3480)) ([cc3ae2f](https://github.com/material-components/material-components-web/commit/cc3ae2f))\n* **icon-button:** remove unused ARIA_LABEL string from constants ([#3591](https://github.com/material-components/material-components-web/issues/3591)) ([bce1724](https://github.com/material-components/material-components-web/commit/bce1724))\n* **infrastructure:** Update ff screenshot tests ([#3540](https://github.com/material-components/material-components-web/issues/3540)) ([16007f1](https://github.com/material-components/material-components-web/commit/16007f1))\n* **list:** Always call followHref regardless of single-selection mode ([#3595](https://github.com/material-components/material-components-web/issues/3595)) ([b556724](https://github.com/material-components/material-components-web/commit/b556724))\n* **list:** Change private getter method to public ([#3473](https://github.com/material-components/material-components-web/issues/3473)) ([f57c731](https://github.com/material-components/material-components-web/commit/f57c731))\n* **list:** Update single line list to ellipsis ([#3460](https://github.com/material-components/material-components-web/issues/3460)) ([60cf6c5](https://github.com/material-components/material-components-web/commit/60cf6c5))\n* **menu:** Prevent endless loop from unexpected markup ([#3489](https://github.com/material-components/material-components-web/issues/3489)) ([5dea634](https://github.com/material-components/material-components-web/commit/5dea634))\n* **menu:** Remove max-width ([#3583](https://github.com/material-components/material-components-web/issues/3583)) ([c44ca61](https://github.com/material-components/material-components-web/commit/c44ca61))\n* **menu:** Update styles to match guidance ([#3455](https://github.com/material-components/material-components-web/issues/3455)) ([5c01746](https://github.com/material-components/material-components-web/commit/5c01746))\n* **menu-surface:** Fix absolute positioning for scrollX ([#3609](https://github.com/material-components/material-components-web/issues/3609)) ([4074535](https://github.com/material-components/material-components-web/commit/4074535))\n* **menu-surface:** Fix interpolation in calc ([#3445](https://github.com/material-components/material-components-web/issues/3445)) ([7f14c72](https://github.com/material-components/material-components-web/commit/7f14c72))\n* **ripple:** Change default color from black to on-surface ([#3554](https://github.com/material-components/material-components-web/issues/3554)) ([e203aa4](https://github.com/material-components/material-components-web/commit/e203aa4))\n* **ripple:** Prevent ripple from getting cut out. ([#3521](https://github.com/material-components/material-components-web/issues/3521)) ([a8008f4](https://github.com/material-components/material-components-web/commit/a8008f4))\n* **select:** Add missing mixin ([#3435](https://github.com/material-components/material-components-web/issues/3435)) ([e654526](https://github.com/material-components/material-components-web/commit/e654526))\n* **select:** Fix dropdown color/opacity and options background ([#3553](https://github.com/material-components/material-components-web/issues/3553)) ([3e26342](https://github.com/material-components/material-components-web/commit/3e26342))\n* **select:** Fix outlined select not changing color without label ([#3433](https://github.com/material-components/material-components-web/issues/3433)) ([a1c0930](https://github.com/material-components/material-components-web/commit/a1c0930))\n* **select:** Only add line ripple listeners when line ripple is present ([#3470](https://github.com/material-components/material-components-web/issues/3470)) ([453b5c5](https://github.com/material-components/material-components-web/commit/453b5c5))\n* **select:** Set transform origin for line ripple ([#3432](https://github.com/material-components/material-components-web/issues/3432)) ([0ff23e1](https://github.com/material-components/material-components-web/commit/0ff23e1))\n* **tab-bar:** Remove trailing comma from function. ([#3574](https://github.com/material-components/material-components-web/issues/3574)) ([e201d24](https://github.com/material-components/material-components-web/commit/e201d24))\n* **text-field:** Fix outlined disabled text color to match filled variant ([#3544](https://github.com/material-components/material-components-web/issues/3544)) ([0da74d9](https://github.com/material-components/material-components-web/commit/0da74d9))\n* **theme:** Declare error variables as !default ([#3531](https://github.com/material-components/material-components-web/issues/3531)) ([eebdcdc](https://github.com/material-components/material-components-web/commit/eebdcdc))\n\n\n### Features\n\n* **checkbox:** Support customizing the color of the stroke in the marked state ([#3412](https://github.com/material-components/material-components-web/issues/3412)) ([7f47386](https://github.com/material-components/material-components-web/commit/7f47386))\n* **chips:** Add a mixin to handle chip elevation transitions ([#3579](https://github.com/material-components/material-components-web/issues/3579)) ([eadde7a](https://github.com/material-components/material-components-web/commit/eadde7a))\n* **chips:** Add mixins to customize horizontal padding and icon margins ([#3530](https://github.com/material-components/material-components-web/issues/3530)) ([43aeea4](https://github.com/material-components/material-components-web/commit/43aeea4))\n* **dialog:** Initial prototype ([#3413](https://github.com/material-components/material-components-web/issues/3413)) ([9d133b2](https://github.com/material-components/material-components-web/commit/9d133b2))\n* **dialog:** Integrate with MDC List; add keyboard action handling ([#3594](https://github.com/material-components/material-components-web/issues/3594)) ([7b6d86b](https://github.com/material-components/material-components-web/commit/7b6d86b))\n* **dialog:** Reverse buttons when stacked; allow toggling auto-stack ([#3573](https://github.com/material-components/material-components-web/issues/3573)) ([2e7805b](https://github.com/material-components/material-components-web/commit/2e7805b))\n* **dialog:** Support default action button ([#3600](https://github.com/material-components/material-components-web/issues/3600)) ([3aa18e2](https://github.com/material-components/material-components-web/commit/3aa18e2))\n* **dialog:** Support reporting action in ancestor element ([#3572](https://github.com/material-components/material-components-web/issues/3572)) ([fcbef20](https://github.com/material-components/material-components-web/commit/fcbef20))\n* **dom:** Add closest ponyfill ([#3559](https://github.com/material-components/material-components-web/issues/3559)) ([eddf66c](https://github.com/material-components/material-components-web/commit/eddf66c))\n* **dom:** Create `mdc-dom` package with `Element.matches()` ponyfill ([#3515](https://github.com/material-components/material-components-web/issues/3515)) ([91d8fe8](https://github.com/material-components/material-components-web/commit/91d8fe8)), closes [#3413](https://github.com/material-components/material-components-web/issues/3413) [#1104](https://github.com/material-components/material-components-web/issues/1104)\n* **drawer:** Allow customizing drawer width ([#3459](https://github.com/material-components/material-components-web/issues/3459)) ([247f75f](https://github.com/material-components/material-components-web/commit/247f75f))\n* **drawer:** New sass mixin to set z-index ([#3453](https://github.com/material-components/material-components-web/issues/3453)) ([cf3084f](https://github.com/material-components/material-components-web/commit/cf3084f))\n* **list:** Toggle radio checkbox ([#3546](https://github.com/material-components/material-components-web/issues/3546)) ([f59b6e6](https://github.com/material-components/material-components-web/commit/f59b6e6))\n* **list:** Update list to toggle tabindex of radio/checkbox ([#3542](https://github.com/material-components/material-components-web/issues/3542)) ([13abb24](https://github.com/material-components/material-components-web/commit/13abb24))\n* **shape:** Added Shape subsystem and integrated with all components ([#3626](https://github.com/material-components/material-components-web/issues/3626)) ([d5f0897](https://github.com/material-components/material-components-web/commit/d5f0897))\n* **text-field:** Add support for leading/trailing icons at the same time ([#3451](https://github.com/material-components/material-components-web/issues/3451)) ([6b3cfe5](https://github.com/material-components/material-components-web/commit/6b3cfe5))\n* **theme:** Add error and on-error support ([#3469](https://github.com/material-components/material-components-web/issues/3469)) ([b10095f](https://github.com/material-components/material-components-web/commit/b10095f))\n\n\n### BREAKING CHANGES\n\n* **shape:** The previous contents of the mdc-shape package have been removed and replaced with mixins implementing the Shape system. This system implements only rounded corners to provide a straightforward CSS-only solution. Replaced all *-corner-radius component mixins with *-shape-radius mixins to integrate with Shape system.\n* **dialog:** MDCDialog has been reimplemented to support more use cases, so APIs and the DOM structure have changed. See the mdc-dialog README for more information.\n* **text-field:** Component API's for interacting with icons has changed. Please refer to the documentation.\n* **checkbox:** Remove foundation methods for set/get indeterminate, value, disabled. Add adapter methods: isIndeterminate, isChecked, hasNativeControl, setNativeControlDisabled.\n\n\n\n<a name=\"0.39.3\"></a>\n## [0.39.3](https://github.com/material-components/material-components-web/compare/v0.39.1...v0.39.3) (2018-09-11)\n\n\n### Bug Fixes\n\n* **ripple:** Clean deactivation timer and CSS when interrupted ([#3529](https://github.com/material-components/material-components-web/issues/3529)) ([425df03](https://github.com/material-components/material-components-web/commit/425df03))\n* **select:** Disabled color and opacity ([#3513](https://github.com/material-components/material-components-web/issues/3513)) ([8b10c02](https://github.com/material-components/material-components-web/commit/8b10c02))\n* **select:** Remove blue background in IE on focus ([#3497](https://github.com/material-components/material-components-web/issues/3497)) ([a02a4f1](https://github.com/material-components/material-components-web/commit/a02a4f1)), closes [#3496](https://github.com/material-components/material-components-web/issues/3496)\n\n\n\n<a name=\"0.39.1\"></a>\n## [0.39.1](https://github.com/material-components/material-components-web/compare/v0.39.0...v0.39.1) (2018-08-31)\n\n\n### Bug Fixes\n\n* **drawer:** Destroy list in destroy method ([#3474](https://github.com/material-components/material-components-web/issues/3474)) ([4719e0c](https://github.com/material-components/material-components-web/commit/4719e0c))\n* **drawer:** Modal --open state class needs display: flex ([#3431](https://github.com/material-components/material-components-web/issues/3431)) ([7fe8a97](https://github.com/material-components/material-components-web/commit/7fe8a97))\n* **drawer:** Remove list item children to be included in click target. ([#3480](https://github.com/material-components/material-components-web/issues/3480)) ([e05ca84](https://github.com/material-components/material-components-web/commit/e05ca84))\n* **list:** Change private getter method to public ([#3473](https://github.com/material-components/material-components-web/issues/3473)) ([45f6be9](https://github.com/material-components/material-components-web/commit/45f6be9))\n* **list:** Update single line list to ellipsis ([#3460](https://github.com/material-components/material-components-web/issues/3460)) ([148c1cd](https://github.com/material-components/material-components-web/commit/148c1cd))\n* **menu:** Prevent endless loop from unexpected markup ([#3489](https://github.com/material-components/material-components-web/issues/3489)) ([730b176](https://github.com/material-components/material-components-web/commit/730b176))\n* **menu:** Update styles to match guidance ([#3455](https://github.com/material-components/material-components-web/issues/3455)) ([3ef0ada](https://github.com/material-components/material-components-web/commit/3ef0ada))\n* **menu-surface:** Fix interpolation in calc ([#3445](https://github.com/material-components/material-components-web/issues/3445)) ([7aa7804](https://github.com/material-components/material-components-web/commit/7aa7804))\n* **select:** Add missing mixin ([#3435](https://github.com/material-components/material-components-web/issues/3435)) ([39f95a3](https://github.com/material-components/material-components-web/commit/39f95a3))\n* **select:** Fix outlined select not changing color without label ([#3433](https://github.com/material-components/material-components-web/issues/3433)) ([dcd9466](https://github.com/material-components/material-components-web/commit/dcd9466))\n* **select:** Only add line ripple listeners when line ripple is present ([#3470](https://github.com/material-components/material-components-web/issues/3470)) ([f9ef8f5](https://github.com/material-components/material-components-web/commit/f9ef8f5))\n* **select:** Set transform origin for line ripple ([#3432](https://github.com/material-components/material-components-web/issues/3432)) ([251c95f](https://github.com/material-components/material-components-web/commit/251c95f))\n\n\n\n<a name=\"0.39.0\"></a>\n# [0.39.0](https://github.com/material-components/material-components-web/compare/v0.39.0-0...v0.39.0) (2018-08-27)\n\n\n### Bug Fixes\n\n* **checkbox:** remove register/deregister event listeners from foundation ([#3402](https://github.com/material-components/material-components-web/issues/3402)) ([430b338](https://github.com/material-components/material-components-web/commit/430b338))\n* **drawer:** Fix exports and closure tests ([#3424](https://github.com/material-components/material-components-web/issues/3424)) ([8d53068](https://github.com/material-components/material-components-web/commit/8d53068))\n* **list:** Add support for activated ([#3388](https://github.com/material-components/material-components-web/issues/3388)) ([5590412](https://github.com/material-components/material-components-web/commit/5590412))\n* **list:** Follow hrefs on keypresses on links ([#3407](https://github.com/material-components/material-components-web/issues/3407)) ([e6d6deb](https://github.com/material-components/material-components-web/commit/e6d6deb))\n* **snackbar:** Allow variables to be customized ([#3335](https://github.com/material-components/material-components-web/issues/3335)) ([215d0c6](https://github.com/material-components/material-components-web/commit/215d0c6))\n* **tab-bar:** Early exit ([#3386](https://github.com/material-components/material-components-web/issues/3386)) ([f0ebfea](https://github.com/material-components/material-components-web/commit/f0ebfea))\n* **tab-bar:** Move activateTab to adapter ([#3394](https://github.com/material-components/material-components-web/issues/3394)) ([5007604](https://github.com/material-components/material-components-web/commit/5007604))\n* **text-field:** Update to match spec ([#3397](https://github.com/material-components/material-components-web/issues/3397)) ([e34b251](https://github.com/material-components/material-components-web/commit/e34b251))\n* **menu-surface:** Remove overflow hidden during menu-surface animation. ([#3358](https://github.com/material-components/material-components-web/issues/3358)) ([951a3ae](https://github.com/material-components/material-components-web/commit/951a3ae))\n* **notched-outline:** Add alignment ([#3349](https://github.com/material-components/material-components-web/issues/3349)) ([ee93c61](https://github.com/material-components/material-components-web/commit/ee93c61))\n* **snackbar:** Doesn't close while other element is focused ([#2183](https://github.com/material-components/material-components-web/issues/2183)) ([e161cc0](https://github.com/material-components/material-components-web/commit/e161cc0))\n* **text-field:** Adjust the baseline of text field's helper text to match spec ([#3069](https://github.com/material-components/material-components-web/issues/3069)) ([36acc28](https://github.com/material-components/material-components-web/commit/36acc28))\n* **text-field:** Fix label shake bug. Update invalid screenshots to show required star. ([#3338](https://github.com/material-components/material-components-web/issues/3338)) ([1245573](https://github.com/material-components/material-components-web/commit/1245573))\n* **text-field:** Input position and textarea size ([#3321](https://github.com/material-components/material-components-web/issues/3321)) ([5160241](https://github.com/material-components/material-components-web/commit/5160241)), closes [#2826](https://github.com/material-components/material-components-web/issues/2826)\n\n\n### Chores\n\n* **list:** Remove all references to Element from MDCListAdapter ([#3398](https://github.com/material-components/material-components-web/issues/3398)) ([53f42b9](https://github.com/material-components/material-components-web/commit/53f42b9))\n* **tab:** Move computeIndicatorClientRect logic out of the foundation ([#3367](https://github.com/material-components/material-components-web/issues/3367)) ([9cac7c0](https://github.com/material-components/material-components-web/commit/9cac7c0)), closes [#3341](https://github.com/material-components/material-components-web/issues/3341)\n\n\n### Code Refactoring\n\n* **text-field:** Change text-field--box to be the new default ([#2859](https://github.com/material-components/material-components-web/issues/2859)) ([01b6be7](https://github.com/material-components/material-components-web/commit/01b6be7))\n\n\n### Features\n\n* Update to MIT license ([#3376](https://github.com/material-components/material-components-web/issues/3376)) ([2cf8487](https://github.com/material-components/material-components-web/commit/2cf8487))\n* **drawer:** Improved navigation drawer  ([#3417](https://github.com/material-components/material-components-web/issues/3417)) ([3aa211d](https://github.com/material-components/material-components-web/commit/3aa211d))\n* **theme:** Added new function for text emphasis opacities ([f841afe](https://github.com/material-components/material-components-web/commit/f841afe))\n* **chips:** Pass chip ids instead of foundations in events  ([#3265](https://github.com/material-components/material-components-web/issues/3265)) ([7ce0fba](https://github.com/material-components/material-components-web/commit/7ce0fba))\n* **icon-button:** Add SVG support ([#3310](https://github.com/material-components/material-components-web/issues/3310)) ([25fa51e](https://github.com/material-components/material-components-web/commit/25fa51e))\n* **menu:** Adds new menu, menu-surface. ([#3311](https://github.com/material-components/material-components-web/issues/3311)) ([6439c5b](https://github.com/material-components/material-components-web/commit/6439c5b))\n* **switch:** Move component specific logic out of foundation ([#3342](https://github.com/material-components/material-components-web/issues/3342)) ([e1e4465](https://github.com/material-components/material-components-web/commit/e1e4465))\n* **tab:** Move event registration to component ([#3331](https://github.com/material-components/material-components-web/issues/3331)) ([f2ac793](https://github.com/material-components/material-components-web/commit/f2ac793))\n* **tab-bar:** Support manual and automatic activation behavior ([#3303](https://github.com/material-components/material-components-web/issues/3303)) ([7182fa1](https://github.com/material-components/material-components-web/commit/7182fa1))\n* **tab-indicator:** Remove transitionend event handling ([#3337](https://github.com/material-components/material-components-web/issues/3337)) ([c8af69b](https://github.com/material-components/material-components-web/commit/c8af69b))\n* **text-field:** New API to enable/disable native input validation for custom validity ([#3084](https://github.com/material-components/material-components-web/issues/3084)) ([bd49920](https://github.com/material-components/material-components-web/commit/bd49920))\n* **text-field:** Support for types- color, date, datetime-local, etc ([#2854](https://github.com/material-components/material-components-web/issues/2854)) ([0d02f1f](https://github.com/material-components/material-components-web/commit/0d02f1f))\n* **typography:** Reverted baseline mixin to use display inline-block because of IE issues ([#3297](https://github.com/material-components/material-components-web/issues/3297)) ([ded07d0](https://github.com/material-components/material-components-web/commit/ded07d0))\n\n\n### BREAKING CHANGES\n\n* **drawer:** Drawer variants have new DOM structure, mixins, and JS. MDCPersistentDrawer and MDCTemporaryDrawer components are replaced with a single MDCDrawer component which supports both.\n* **list:** Please update calls to MDCListFoundation.handleKeydown to pass in isRootListItem and listItemIndex, and update both MDCListFoundation.handleFocusIn, MDCListFoundation.handleFocusOut to pass in listItemIndex\n* **text-field:** This PR removes the margin-top from the mdc-text-field container. This can cause a UI to shift/change.\n* **checkbox:** Event registration adapter APIs have been removed and are now the responsibility of the component.\n* **list:** Adds a followHref adapter API.\n* **text-field:** Removes the default version of the text field and changes the new default variant to be the `--box` variant. Changes the box-sizing to border-box.\n* **tab-bar:** `getActiveTabIndex` adapter method renamed and `setActiveTab` adapter method added.\n* **tab:** We've removed the `computeIndicatorClientRect` method from `MDCTabFoundation`\n* **switch:** We've removed the `isChecked` and `isDisabled` methods from `MDCSwitchFoundation`. Please update any call to `MDCSwitchFoundation.handleChange` so it passes in the change event. And note that `isNativeControlChecked` and `isNativeControlDisabled` are no longer required methods in `MDCSwitchAdapter`\n* **text-field:** Setting the validity state using `setValid` no longer ignores native input validation. New API `useNativeValidation` is introduced to enable / disable native validation for custom validity.\n* **menu:** Menu positioning logic has been split into its own package (mdc-menu-surface). mdc-menu is rebuilt to use mdc-menu-surface and mdc-list styles and JavaScript.\n* **text-field:** The `mdc-text-field--upgraded` class has been removed. `mdc-text-field__input` position has changed by 2px to match spec. `mdc-text-field--textarea` width in IE and Edge now matches other browsers.\n* **tab:** Removes handleTransitionEnd foundation API. Removes [de]registerEventHandler adapter APIs. Event registration is now the component's responsibility.\n* **icon-button:** Removes the previous data attributes and no longer dynamically changes the label. Allows developers to add both elements to the button, with one indicated as the on state by using a data-toggle-on attribute. State is now changed by adding/removing the mdc-icon-button--on class to the mdc-icon-button element. All icon elements should have the mdc-icon-button__icon class.\n* **tab-indicator:** Removes handleTransitionEnd foundation API. Removes [de]registerEventHandler adapter APIs.\n* **typography:** Helper text and MDC List two-line text that uses new typography baseline mixin should strip the white-space.\n* **chips:** `MDCChip` takes an `id`, no longer exposes its `foundation`, and has `selected` as a property. Custom event details require a `chipId` instead of `chipFoundation`. New methods added to `MDCChipSetAdapter` and `MDCChipSetFoundation`.\n* **text-field:** Removed bottom margin from both text field and helper text.\n* **snackbar:** Adds a new adapter method that is required `isFocused`.\n* **tab-bar:** Adds focusTabAtIndex and getFocusedTabIndex MDCTabBarAdapter APIs; adds focus MDCTab component API used by MDCTabBar.\n\n\n\n<a name=\"0.38.2\"></a>\n## [0.38.2](https://github.com/material-components/material-components-web/compare/v0.38.1...v0.38.2) (2018-08-15)\n\n\n### Bug Fixes\n\n* **dialog:** Expose numbers on foundation ([#3346](https://github.com/material-components/material-components-web/issues/3346)) ([8aa7ae0](https://github.com/material-components/material-components-web/commit/8aa7ae0))\n\n\n\n<a name=\"0.38.1\"></a>\n## [0.38.1](https://github.com/material-components/material-components-web/compare/v0.38.0...v0.38.1) (2018-08-13)\n\n\n### Bug Fixes\n\n* **dialog:** Fixes transitionend event not always being called ([#3267](https://github.com/material-components/material-components-web/issues/3267)) ([f4af684](https://github.com/material-components/material-components-web/commit/f4af684))\n* **list:** Update clickable elements selector ([#3312](https://github.com/material-components/material-components-web/issues/3312)) ([c4fc932](https://github.com/material-components/material-components-web/commit/c4fc932))\n* **radio:** Add missing `[@import](https://github.com/import)` for theme mixins; add screenshot tests ([#3285](https://github.com/material-components/material-components-web/issues/3285)) ([553438a](https://github.com/material-components/material-components-web/commit/553438a))\n* **ripple:** Register focus/blur handlers in IE ([#3294](https://github.com/material-components/material-components-web/issues/3294)) ([1e10ac2](https://github.com/material-components/material-components-web/commit/1e10ac2))\n* **select:** add adapter ([#3233](https://github.com/material-components/material-components-web/issues/3233)) ([3b20de8](https://github.com/material-components/material-components-web/commit/3b20de8))\n* **text-field:** Set the margin for text-area helper text ([#3290](https://github.com/material-components/material-components-web/issues/3290)) ([e395bb3](https://github.com/material-components/material-components-web/commit/e395bb3))\n* **text-field:** Stop emitting unused CSS in Text Field & Select ([#3293](https://github.com/material-components/material-components-web/issues/3293)) ([4041d9e](https://github.com/material-components/material-components-web/commit/4041d9e))\n\n\n\n<a name=\"0.38.0\"></a>\n# [0.38.0](https://github.com/material-components/material-components-web/compare/v0.37.1...v0.38.0) (2018-07-30)\n\n\n### Bug Fixes\n\n* **chips:** Remove color change from selected filter chips ([#3093](https://github.com/material-components/material-components-web/issues/3093)) ([19e3d7f](https://github.com/material-components/material-components-web/commit/19e3d7f))\n* **infrastructure:** Rework goog.module positioning ([#3098](https://github.com/material-components/material-components-web/issues/3098)) ([fbbf58a](https://github.com/material-components/material-components-web/commit/fbbf58a))\n* **infrastructure:** update saucelabs windows 8 to windows 10 IE11 browser ([#3234](https://github.com/material-components/material-components-web/issues/3234)) ([547a980](https://github.com/material-components/material-components-web/commit/547a980))\n* **list:** add list to webpack js bundler ([#3244](https://github.com/material-components/material-components-web/issues/3244)) ([b95d4e7](https://github.com/material-components/material-components-web/commit/b95d4e7))\n* **theme:** Allow CSS variables to be passed to mdc-theme-prop ([#3086](https://github.com/material-components/material-components-web/issues/3086)) ([b47fe7d](https://github.com/material-components/material-components-web/commit/b47fe7d))\n\n\n### Features\n\n* **auto-init:** return initialized components ([#1333](https://github.com/material-components/material-components-web/issues/1333)) ([19955bf](https://github.com/material-components/material-components-web/commit/19955bf))\n* **floating-label:** Add max-width mixin ([#2956](https://github.com/material-components/material-components-web/issues/2956)) ([66f8bf7](https://github.com/material-components/material-components-web/commit/66f8bf7))\n* **chips:** Register handlers in component instead of foundation ([#3146](https://github.com/material-components/material-components-web/issues/3146)) ([36e2755](https://github.com/material-components/material-components-web/commit/36e2755))\n* **icon-button:** update event handling to new standard ([#3165](https://github.com/material-components/material-components-web/issues/3165)) ([531867e](https://github.com/material-components/material-components-web/commit/531867e))\n* **list:** Add single selection ([#2970](https://github.com/material-components/material-components-web/issues/2970)) ([cd1f972](https://github.com/material-components/material-components-web/commit/cd1f972))\n* **list:** Updated two-line list to use typography baseline to match spec. ([#3085](https://github.com/material-components/material-components-web/issues/3085)) ([4d11b37](https://github.com/material-components/material-components-web/commit/4d11b37))\n* **select:** reduce adapter apis not used in MDCReact and update events to new pattern ([#3204](https://github.com/material-components/material-components-web/issues/3204)) ([e29742a](https://github.com/material-components/material-components-web/commit/e29742a))\n* **switch:** Merge updated switch into master ([#3214](https://github.com/material-components/material-components-web/issues/3214)) ([19724f1](https://github.com/material-components/material-components-web/commit/19724f1)), closes [#2825](https://github.com/material-components/material-components-web/issues/2825)\n* **tab-bar:** Launch tab, tab indicator, tab scroller, tab bar ([#3252](https://github.com/material-components/material-components-web/issues/3252)) ([78bf4bc](https://github.com/material-components/material-components-web/commit/78bf4bc))\n* **typography:** New mixin to set exact baseline height of text elements. ([#3083](https://github.com/material-components/material-components-web/issues/3083)) ([dd3817a](https://github.com/material-components/material-components-web/commit/dd3817a))\n\n\n### BREAKING CHANGES\n\n* **tab-bar:** mdc-tabs is deprecated and no longer bundled in the material-components-web package. You are encouraged to use the new mdc-tab-bar and related packages instead.\n* **switch:** MDC Switch DOM structure and Sass APIs have changed, and JavaScript APIs have been added. See the documentation for more information.\n* **icon-button:** Removed some adapter APIs (registerInteractionHandler, deregisterInteractionHandler) and shifted responsibility of event handling out of the foundation and into the component.\n* **select:** Removed some adapter APIs (setDisabled, setSelectedIndex, getSelectedIndex, setValue, registerInteractionHandler, deregisterInteractionHandler) and shifted responsibility of event handling and programmatic select element updates out of the foundation and into the component.\n* **chips:** `MDCChip`/`MDCChipSet` registerEventHandler adapter methods were removed, and corresponding handlers were made public in `MDCChipFoundation`/`MDCChipSetFoundation`.\n* **list:** The layout of two-line list items is changed to wrap primary text line in a separate block element.\n\n\n<a name=\"0.37.1\"></a>\n## [0.37.1](https://github.com/material-components/material-components-web/compare/v0.37.0...v0.37.1) (2018-07-16)\n\n\n### Bug Fixes\n\n* hot-patching closure annotations. ([#3024](https://github.com/material-components/material-components-web/issues/3024)) ([d5b95ab](https://github.com/material-components/material-components-web/commit/d5b95ab))\n* **button:** Remove dense/stroked line-height tweaks to improve alignment ([#3028](https://github.com/material-components/material-components-web/issues/3028)) ([8b5f595](https://github.com/material-components/material-components-web/commit/8b5f595))\n* **notched-outline:** Remove unused dependency from scss ([#3044](https://github.com/material-components/material-components-web/issues/3044)) ([85ecf11](https://github.com/material-components/material-components-web/commit/85ecf11))\n* **typography:**  Update variable reference to work for newer versions of ruby-sass ([#3047](https://github.com/material-components/material-components-web/issues/3047)) ([0dfad9a](https://github.com/material-components/material-components-web/commit/0dfad9a))\n\n\n\n<a name=\"0.37.0\"></a>\n# [0.37.0](https://github.com/material-components/material-components-web/compare/v0.36.0...v0.37.0) (2018-07-02)\n\n\n### Bug Fixes\n\n* **chips:** Add an event typedef for chip interaction events ([#2965](https://github.com/material-components/material-components-web/issues/2965)) ([153e737](https://github.com/material-components/material-components-web/commit/153e737))\n* **icon-button:** Remove unused styles, update docs, code cleanup ([#2957](https://github.com/material-components/material-components-web/issues/2957)) ([32b5b9d](https://github.com/material-components/material-components-web/commit/32b5b9d))\n* **text-field:** Update caret color to match spec ([#2894](https://github.com/material-components/material-components-web/issues/2894)) ([88fd0bf](https://github.com/material-components/material-components-web/commit/88fd0bf))\n\n\n### Features\n\n* **chips:** Expose method to begin chip exit animation ([#2845](https://github.com/material-components/material-components-web/issues/2845)) ([eb00fd3](https://github.com/material-components/material-components-web/commit/eb00fd3))\n* **chips:** Make chip exit on trailing icon click optional ([#2893](https://github.com/material-components/material-components-web/issues/2893)) ([9178d46](https://github.com/material-components/material-components-web/commit/9178d46))\n* **chips:** Make event handlers on Chip public ([#2997](https://github.com/material-components/material-components-web/issues/2997)) ([963e0c1](https://github.com/material-components/material-components-web/commit/963e0c1))\n* **fab:** Add Extended FAB ([14cb0bf](https://github.com/material-components/material-components-web/commit/14cb0bf))\n* **fab:** Enable padding customization ([#2959](https://github.com/material-components/material-components-web/issues/2959)) ([1f5fd1f](https://github.com/material-components/material-components-web/commit/1f5fd1f))\n* **list:** Add arrow key a11y support.  ([#2871](https://github.com/material-components/material-components-web/issues/2871)) ([7c06e9f](https://github.com/material-components/material-components-web/commit/7c06e9f))\n* **ripple:** Expose focus/blur handlers  ([#2905](https://github.com/material-components/material-components-web/issues/2905)) ([31d81ad](https://github.com/material-components/material-components-web/commit/31d81ad))\n* **select:** Add outlined variant ([#2674](https://github.com/material-components/material-components-web/issues/2674)) ([4863125](https://github.com/material-components/material-components-web/commit/4863125))\n\n\n\n<a name=\"0.36.1\"></a>\n## [0.36.1](https://github.com/material-components/material-components-web/compare/v0.36.0...v0.36.1) (2018-06-18)\n\n\n### Bug Fixes\n\n* **checkbox:** support high contrast mode in Firefox on Windows ([#2927](https://github.com/material-components/material-components-web/issues/2927)) ([8b7d77e](https://github.com/material-components/material-components-web/commit/8b7d77e))\n* **menu:** Update adapter to check for focus before calling ([#2880](https://github.com/material-components/material-components-web/issues/2880)) ([84fcc08](https://github.com/material-components/material-components-web/commit/84fcc08))\n* **text-field:** Hide extraneous border in FF in HC mode. ([#2931](https://github.com/material-components/material-components-web/issues/2931)) ([bd4c563](https://github.com/material-components/material-components-web/commit/bd4c563))\n\n\n\n<a name=\"0.36.0\"></a>\n# [0.36.0](https://github.com/material-components/material-components-web/compare/v0.36.0-0...v0.36.0) (2018-06-04)\n\n\n### Bug Fixes\n\n* **card:** Import variables in mixins ([#2799](https://github.com/material-components/material-components-web/issues/2799)) ([e6b787c](https://github.com/material-components/material-components-web/commit/e6b787c))\n* **dialog:** Apply mdc-dialog__action color to buttons ([#2776](https://github.com/material-components/material-components-web/issues/2776)) ([6066795](https://github.com/material-components/material-components-web/commit/6066795))\n* **dialog:** Fix Typography version ([#2821](https://github.com/material-components/material-components-web/issues/2821)) ([e793a56](https://github.com/material-components/material-components-web/commit/e793a56))\n* **fab:** Restore horizontal alignment in IE11 ([#2715](https://github.com/material-components/material-components-web/issues/2715)) ([fded349](https://github.com/material-components/material-components-web/commit/fded349))\n* **ripple:** Fix missing dependency ([#2795](https://github.com/material-components/material-components-web/issues/2795)) ([16a6890](https://github.com/material-components/material-components-web/commit/16a6890))\n* **text-field:** Made handleValidationAttributeMutation to accept attribute list ([#2794](https://github.com/material-components/material-components-web/issues/2794)) ([14ee518](https://github.com/material-components/material-components-web/commit/14ee518))\n* **text-field:** Moved VALIDATION_ATTR_WHITELIST to constants. ([#2808](https://github.com/material-components/material-components-web/issues/2808)) ([2180f95](https://github.com/material-components/material-components-web/commit/2180f95))\n* **text-field:** Update floating-label to work properly for number fields ([#2781](https://github.com/material-components/material-components-web/issues/2781)) ([d0bff1f](https://github.com/material-components/material-components-web/commit/d0bff1f))\n* **top-app-bar:** Add z-index. Cleanup redundant properties. ([#2828](https://github.com/material-components/material-components-web/issues/2828)) ([3f6bbc1](https://github.com/material-components/material-components-web/commit/3f6bbc1))\n* **top-app-bar:** Fix testdouble warning about using both stub & verify. ([#2793](https://github.com/material-components/material-components-web/issues/2793)) ([d79af08](https://github.com/material-components/material-components-web/commit/d79af08))\n* **checkbox:** Fix visibility in Windows high-contrast mode ([#2672](https://github.com/material-components/material-components-web/issues/2672)) ([eadec3c](https://github.com/material-components/material-components-web/commit/eadec3c))\n* **checkbox:** make checkmark in high contrast mode on IE visible. ([#2848](https://github.com/material-components/material-components-web/issues/2848)) ([9b2c6a1](https://github.com/material-components/material-components-web/commit/9b2c6a1))\n* **chips:** Add delay to filter chip checkmark ([#2804](https://github.com/material-components/material-components-web/issues/2804)) ([9e35b1e](https://github.com/material-components/material-components-web/commit/9e35b1e))\n* **chips:** Fix choice-chips leading icon being hidden ([#2796](https://github.com/material-components/material-components-web/issues/2796)) ([7d406fa](https://github.com/material-components/material-components-web/commit/7d406fa)), closes [#2728](https://github.com/material-components/material-components-web/issues/2728)\n* **switch:** Refactor switch styles to show up in HC windows mode. ([#2853](https://github.com/material-components/material-components-web/issues/2853)) ([ef159c8](https://github.com/material-components/material-components-web/commit/ef159c8))\n* **text-field:** Changes to text area label positioning to cover text content ([#2816](https://github.com/material-components/material-components-web/issues/2816)) ([d6f4dc1](https://github.com/material-components/material-components-web/commit/d6f4dc1))\n\n\n### Code Refactoring\n\n* **chips:** Stop handling DOM manipulation in input chips ([#2791](https://github.com/material-components/material-components-web/issues/2791)) ([5a8ada5](https://github.com/material-components/material-components-web/commit/5a8ada5))\n\n\n### Documentation\n\n* **icon-toggle:** Add deprecation notice to README ([#2766](https://github.com/material-components/material-components-web/issues/2766)) ([119645e](https://github.com/material-components/material-components-web/commit/119645e))\n\n\n### Features\n\n* **icon-button:** Add new package ([#2748](https://github.com/material-components/material-components-web/issues/2748)) ([39a4815](https://github.com/material-components/material-components-web/commit/39a4815))\n* **text-field:** Add methods to set text field icon aria-label and content ([#2771](https://github.com/material-components/material-components-web/issues/2771)) ([02d7dca](https://github.com/material-components/material-components-web/commit/02d7dca))\n* **rtl:** Make mdc-rtl-reflexive sass mixin public ([#2823](https://github.com/material-components/material-components-web/issues/2823)) ([ca018a7](https://github.com/material-components/material-components-web/commit/ca018a7))\n\n\n### BREAKING CHANGES\n\n* **text-field:** Adds setContent adapter API to text field icon\n* **icon-toggle:** The icon-toggle package has been deprecated. The functionality was moved to the icon-button package. Please refer to the icon-button readme for changes and how to update.\n* **text-field:** registerValidationAttributeChangeHandler adapter API now expects the handler to accept an array of strings, not mutation objects\n* **chips:** MDCChipSet/MDCChip no longer manipulates DOM directly. Removed MDCChipSetAdapter.appendChip, MDCChipSetFoundation.addChip, and MDCChip.remove. Modified signature of MDCChipSet.addChip\n\n\n\n<a name=\"0.35.2\"></a>\n## [0.35.2](https://github.com/material-components/material-components-web/compare/v0.35.1...v0.35.2) (2018-05-21)\n\n\n### Bug Fixes\n\n* **dialog:** Dialog scroll-lock fix when calling destroy immediately after close ([#2120](https://github.com/material-components/material-components-web/issues/2120)) ([c961a5d](https://github.com/material-components/material-components-web/commit/c961a5d))\n* **floating-label:** Add [@noflip](https://github.com/noflip) annotation to floating label ([#2696](https://github.com/material-components/material-components-web/issues/2696)) ([d9d695a](https://github.com/material-components/material-components-web/commit/d9d695a))\n* **floating-label:** Import RTL in mixin since it is being used ([#2743](https://github.com/material-components/material-components-web/issues/2743)) ([f75df26](https://github.com/material-components/material-components-web/commit/f75df26))\n* **infrastructure:** Ensure grid pattern renders correctly in IE ([#2729](https://github.com/material-components/material-components-web/issues/2729)) ([34f73e8](https://github.com/material-components/material-components-web/commit/34f73e8))\n* **switch:** Fix switch RTL ([#2645](https://github.com/material-components/material-components-web/issues/2645)) ([e5ad26a](https://github.com/material-components/material-components-web/commit/e5ad26a))\n* **text-field:** Add missing import to _mixins file ([#2740](https://github.com/material-components/material-components-web/issues/2740)) ([581e8f4](https://github.com/material-components/material-components-web/commit/581e8f4))\n* **text-field:** Made handleValidationAttributeMutation method public. ([#2779](https://github.com/material-components/material-components-web/issues/2779)) ([1949989](https://github.com/material-components/material-components-web/commit/1949989))\n* **top-app-bar:** Fix JS error when navigation icon is not present. ([#2751](https://github.com/material-components/material-components-web/issues/2751)) ([7643f3b](https://github.com/material-components/material-components-web/commit/7643f3b))\n* **top-app-bar:** Replace margin-top in media query with padding-top ([#2704](https://github.com/material-components/material-components-web/issues/2704)) ([88c78b3](https://github.com/material-components/material-components-web/commit/88c78b3))\n\n\n\n<a name=\"0.35.1\"></a>\n## [0.35.1](https://github.com/material-components/material-components-web/compare/v0.35.0...v0.35.1) (2018-05-03)\n\n\n### Bug Fixes\n\n* **chips:** Add nowrap to chip text ([#2671](https://github.com/material-components/material-components-web/issues/2671)) ([7abb3a2](https://github.com/material-components/material-components-web/commit/7abb3a2))\n* **select:** Fix dropdown arrow mixin setting an invalid color ([#2637](https://github.com/material-components/material-components-web/issues/2637)) ([6450613](https://github.com/material-components/material-components-web/commit/6450613))\n* **select:** Fix SassC compilation error ([#2678](https://github.com/material-components/material-components-web/issues/2678)) ([b0b3337](https://github.com/material-components/material-components-web/commit/b0b3337))\n* **text-field:** Fix textarea height ([#2638](https://github.com/material-components/material-components-web/issues/2638)) ([75fe98d](https://github.com/material-components/material-components-web/commit/75fe98d))\n* **text-field:** Update error color ([#2690](https://github.com/material-components/material-components-web/issues/2690)) ([d16a42e](https://github.com/material-components/material-components-web/commit/d16a42e))\n* **top-app-bar:** Change margin-top to padding-top to prevent margin collapsing ([#2643](https://github.com/material-components/material-components-web/issues/2643)) ([8bba12d](https://github.com/material-components/material-components-web/commit/8bba12d))\n\n\n\n<a name=\"0.35.0\"></a>\n# [0.35.0](https://github.com/material-components/material-components-web/compare/v0.34.1...v0.35.0) (2018-04-23)\n\n\n### Bug Fixes\n\n* **button:** Fix vertical alignment of contents ([#2534](https://github.com/material-components/material-components-web/issues/2534)) ([6bc73ca](https://github.com/material-components/material-components-web/commit/6bc73ca))\n* **button:** Rename stroke to outline ([#2632](https://github.com/material-components/material-components-web/issues/2632)) ([0033990](https://github.com/material-components/material-components-web/commit/0033990))\n* **button:** Update colors to match guidance ([#2598](https://github.com/material-components/material-components-web/issues/2598)) ([1be9d96](https://github.com/material-components/material-components-web/commit/1be9d96))\n* **card:** Rename stroke to outline ([#2633](https://github.com/material-components/material-components-web/issues/2633)) ([6657e6f](https://github.com/material-components/material-components-web/commit/6657e6f))\n* **checkbox:** Implement component/adapter APIs to sync aria-checked ([#2580](https://github.com/material-components/material-components-web/issues/2580)) ([30710a4](https://github.com/material-components/material-components-web/commit/30710a4))\n* **checkbox:** Update to match new colors ([#2622](https://github.com/material-components/material-components-web/issues/2622)) ([68f4ad0](https://github.com/material-components/material-components-web/commit/68f4ad0))\n* **chips:** Extend ripple to fill the chip when animating width ([#2423](https://github.com/material-components/material-components-web/issues/2423)) ([ec705e1](https://github.com/material-components/material-components-web/commit/ec705e1))\n* **chips:** Manage chip selection for classes added manually ([#2391](https://github.com/material-components/material-components-web/issues/2391)) ([66f2464](https://github.com/material-components/material-components-web/commit/66f2464))\n* **chips:** Rename all entry chips to input chips ([#2619](https://github.com/material-components/material-components-web/issues/2619)) ([a694a34](https://github.com/material-components/material-components-web/commit/a694a34))\n* **chips:** Rename stroke to outline ([#2635](https://github.com/material-components/material-components-web/issues/2635)) ([604ddad](https://github.com/material-components/material-components-web/commit/604ddad))\n* **chips:** Trailing icon and remove icon are the same thing ([#2616](https://github.com/material-components/material-components-web/issues/2616)) ([9e64c32](https://github.com/material-components/material-components-web/commit/9e64c32))\n* **chips:** Update to guidance ([#2601](https://github.com/material-components/material-components-web/issues/2601)) ([c529cea](https://github.com/material-components/material-components-web/commit/c529cea))\n* **floating-label:** achieved 100% test coverage ([#2523](https://github.com/material-components/material-components-web/issues/2523)) ([2e7f904](https://github.com/material-components/material-components-web/commit/2e7f904))\n* **floating-label:** Update transition durations ([#2590](https://github.com/material-components/material-components-web/issues/2590)) ([099738c](https://github.com/material-components/material-components-web/commit/099738c))\n* **infrastructure:** Remove deprecated JWT addon in .travis.yml ([#2521](https://github.com/material-components/material-components-web/issues/2521)) ([4876cf2](https://github.com/material-components/material-components-web/commit/4876cf2)), closes [#2151](https://github.com/material-components/material-components-web/issues/2151)\n* **radio:** Update colors to latest guidance ([#2623](https://github.com/material-components/material-components-web/issues/2623)) ([e164a24](https://github.com/material-components/material-components-web/commit/e164a24))\n* **ripple:** Re-flow logic to avoid crashing Edge ([#2542](https://github.com/material-components/material-components-web/issues/2542)) ([4ca8925](https://github.com/material-components/material-components-web/commit/4ca8925))\n* **select:** Float label on focus/blur ([#2560](https://github.com/material-components/material-components-web/issues/2560)) ([68c08f7](https://github.com/material-components/material-components-web/commit/68c08f7))\n* **select:** Override floating label properties in select box ([#2574](https://github.com/material-components/material-components-web/issues/2574)) ([f71d905](https://github.com/material-components/material-components-web/commit/f71d905))\n* **select:** Remove animation causing the bottom line to flash ([#2612](https://github.com/material-components/material-components-web/issues/2612)) ([639387e](https://github.com/material-components/material-components-web/commit/639387e))\n* **select:** Update colors to match latest guidance. ([#2617](https://github.com/material-components/material-components-web/issues/2617)) ([5aa7ec7](https://github.com/material-components/material-components-web/commit/5aa7ec7))\n* **select:** Update typography to match latest guidance ([#2615](https://github.com/material-components/material-components-web/issues/2615)) ([0f18f39](https://github.com/material-components/material-components-web/commit/0f18f39))\n* **shape:** Rename stroke to outline ([#2634](https://github.com/material-components/material-components-web/issues/2634)) ([ec9d7a5](https://github.com/material-components/material-components-web/commit/ec9d7a5))\n* **text-field:** Add error state to trailing icon ([#2620](https://github.com/material-components/material-components-web/issues/2620)) ([fc6cdd3](https://github.com/material-components/material-components-web/commit/fc6cdd3))\n* **text-field:** Add role=\"button\" to icon ([#2584](https://github.com/material-components/material-components-web/issues/2584)) ([4c52589](https://github.com/material-components/material-components-web/commit/4c52589))\n* **text-field:** Restore icon tabindex according to its initial value ([#2600](https://github.com/material-components/material-components-web/issues/2600)) ([02a3def](https://github.com/material-components/material-components-web/commit/02a3def))\n* **text-field:** Update colors to match guidance ([#2597](https://github.com/material-components/material-components-web/issues/2597)) ([444f14f](https://github.com/material-components/material-components-web/commit/444f14f))\n* **text-field:** Update helper text to use correct typography ([#2618](https://github.com/material-components/material-components-web/issues/2618)) ([2703580](https://github.com/material-components/material-components-web/commit/2703580))\n* **text-field:** Update label position and shake animation ([#2594](https://github.com/material-components/material-components-web/issues/2594)) ([bd84694](https://github.com/material-components/material-components-web/commit/bd84694))\n* **text-field:** Update typography to subtitle1. Updated height and padding. ([#2606](https://github.com/material-components/material-components-web/issues/2606)) ([127375e](https://github.com/material-components/material-components-web/commit/127375e))\n\n\n### Code Refactoring\n\n* **chips:** Manage chip foundations instead of chips in the chip set foundation ([#2397](https://github.com/material-components/material-components-web/issues/2397)) ([10a75f6](https://github.com/material-components/material-components-web/commit/10a75f6))\n* **select**: removed label and replaced with floating-label ([#2522](https://github.com/material-components/material-components-web/issues/2130)) ([9a9a8905](https://github.com/material-components/material-components-web/commit/9a9a8905dd07e8ef6559c3e67637993ab4ce2d5c))\n* **select**: use line ripple package to replace bottom line ([#2544](https://github.com/material-components/material-components-web/issues/2129)) ([9938d31a](https://github.com/material-components/material-components-web/commit/9938d31abc8edd97f88f3b4f11b2de12521e9579))\n\n### Features\n\n* **base:** Add mdc-emit-once utility mixin; deduplicate styles ([#2578](https://github.com/material-components/material-components-web/issues/2578)) ([64a00b2](https://github.com/material-components/material-components-web/commit/64a00b2))\n* **chips:** Add animation for entry chips ([#2543](https://github.com/material-components/material-components-web/issues/2543)) ([68006fb](https://github.com/material-components/material-components-web/commit/68006fb))\n* **chips:** Add entry chips ([#2414](https://github.com/material-components/material-components-web/issues/2414)) ([afe5367](https://github.com/material-components/material-components-web/commit/afe5367))\n* **chips:** Allow close icon and exit animation ([#2571](https://github.com/material-components/material-components-web/issues/2571)) ([3d8a27b](https://github.com/material-components/material-components-web/commit/3d8a27b))\n* **chips:** Customize icon size and color ([#2613](https://github.com/material-components/material-components-web/issues/2613)) ([0f5af21](https://github.com/material-components/material-components-web/commit/0f5af21))\n* **color:** Add on-surface and surface to theme.  ([#2556](https://github.com/material-components/material-components-web/issues/2556)) ([9639689](https://github.com/material-components/material-components-web/commit/9639689))\n* **fab:** Add support for svg icons ([#2504](https://github.com/material-components/material-components-web/issues/2504)) ([3895376](https://github.com/material-components/material-components-web/commit/3895376))\n* **infrastructure:** Add newline at end of js files as part of the transform. ([#2557](https://github.com/material-components/material-components-web/issues/2557)) ([4fe967d](https://github.com/material-components/material-components-web/commit/4fe967d))\n* **infrastructure:** different namespacing for default exports ([#2553](https://github.com/material-components/material-components-web/issues/2553)) ([4ff505e](https://github.com/material-components/material-components-web/commit/4ff505e))\n* **infrastructure:** Upload compiled screenshot test assets to GCS ([#2500](https://github.com/material-components/material-components-web/issues/2500)) ([5ada5b4](https://github.com/material-components/material-components-web/commit/5ada5b4))\n* **ripple:** Call layout on each activation ([#2567](https://github.com/material-components/material-components-web/issues/2567)) ([c6076e1](https://github.com/material-components/material-components-web/commit/c6076e1))\n* **shape:** Add MDC Shape with support for unelevated angled corners ([#2506](https://github.com/material-components/material-components-web/issues/2506)) ([dc87f18](https://github.com/material-components/material-components-web/commit/dc87f18))\n* **theme:** Add new mdc-theme-on-primary global variable ([#2483](https://github.com/material-components/material-components-web/issues/2483)) ([777a0fd](https://github.com/material-components/material-components-web/commit/777a0fd))\n* **theme:** Add typography styles to shrine demo ([#2605](https://github.com/material-components/material-components-web/issues/2605)) ([976affd](https://github.com/material-components/material-components-web/commit/976affd))\n* **top-app-bar:** Add --fixed variant to top app bar ([#2474](https://github.com/material-components/material-components-web/issues/2474)) ([1d40fa9](https://github.com/material-components/material-components-web/commit/1d40fa9))\n* **top-app-bar:** add default scroll behavior ([#2417](https://github.com/material-components/material-components-web/issues/2417)) ([18be342](https://github.com/material-components/material-components-web/commit/18be342))\n* **typography:** Update styles to match guidance ([#2527](https://github.com/material-components/material-components-web/issues/2527)) ([f750ec7](https://github.com/material-components/material-components-web/commit/f750ec7))\n\n\n### BREAKING CHANGES\n\n* **chips:** Renames variant, classes and mixins containing the word stroke to use the word outline.\n* **chips:** Expose a foundation getter in MDCChips\n* **card:** Renames variant, classes and mixins containing the word stroke to use the word outline.\n* **button:** Renames variant, classes and mixins containing stroke to use outline.\n* **chips:** Entry chips renamed to input chips.\n* **chips:** Add Sass mixins to customize color and size of leading/trailing icons.\n* **chips:** Get rid of mdc-chip__icon--remove API.\n* **text-field:** Adds getAttr adapter API to text field icon\n* **chips:** Add API for remove icon including mdc-chip__icon--remove, remove() method and adapter methods to MDCChip. Modify appendChip() and add removeChip() adapter method to MDCChipSet.\n* **shape:** Renames variant, classes and mixins containing the word stroke to use the word outline.\n* **text-field:** Adds removeAttr(attr) adapter API\n* **theme:** Removes the --mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR> CSS custom properties, and the mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR> CSS classes\n* **chips:** layout() method added to MDCChipAdapter.\n* **typography:** Previous typography styles are removed. The new styles are listed in the readme.\n* **top-app-bar:** New adapter methods for setting the top app bar position and adding resize event handlers that must be implemented.\n* **chips:** Added a new chip variant (entry chips). Added new methods to MDCChipSet, MDCChipSetFoundation, and MDCChipSetAdapter.\n* **chips:** isSelected method added to MDCChip, and related methods added to MDCChipFoundation and MDCChipSetFoundation.\n* **floating-label:** Removes the (undocumented) mdc-floating-label-transition function\n* **select:** Removes the mdc-select__label class and uses mdc-floating-label for the floating label.\n* **select:** Removes the mdc-select__bottom-line class and uses the mdc-line-ripple instead.\n\n\n<a name=\"0.34.1\"></a>\n## [0.34.1](https://github.com/material-components/material-components-web/compare/v0.34.0...v0.34.1) (2018-04-03)\n\n\n### Bug Fixes\n\n* **infrastructure:** Unexpose private tab  ([#2499](https://github.com/material-components/material-components-web/issues/2499)) ([306fd7f](https://github.com/material-components/material-components-web/commit/306fd7f)), closes [#2498](https://github.com/material-components/material-components-web/issues/2498)\n* **ripple:** Clean activation timer and css when interrupted ([#2490](https://github.com/material-components/material-components-web/issues/2490)) ([18cba98](https://github.com/material-components/material-components-web/commit/18cba98))\n\n\n\n<a name=\"0.34.0\"></a>\n# [0.34.0](https://github.com/material-components/material-components-web/compare/v0.33.0...v0.34.0) (2018-04-02)\n\n\n### Bug Fixes\n\n* Compile demo CSS/JS during `npm run build` ([#2437](https://github.com/material-components/material-components-web/issues/2437)) ([21150c7](https://github.com/material-components/material-components-web/commit/21150c7)), closes [#2325](https://github.com/material-components/material-components-web/issues/2325)\n* **button:** Suppress whitespace between icon and text label ([#2449](https://github.com/material-components/material-components-web/issues/2449)) ([f504aa6](https://github.com/material-components/material-components-web/commit/f504aa6))\n* **drawer:** Update motion to match spec ([#2398](https://github.com/material-components/material-components-web/issues/2398)) ([6417b51](https://github.com/material-components/material-components-web/commit/6417b51))\n* **line-ripple:** Fix CSP inline style rule ([#2491](https://github.com/material-components/material-components-web/issues/2491)) ([4f1cdc1](https://github.com/material-components/material-components-web/commit/4f1cdc1))\n* **select:** Update theme select demo ([#2496](https://github.com/material-components/material-components-web/issues/2496)) ([db424bf](https://github.com/material-components/material-components-web/commit/db424bf))\n* **text-field:** Remove press ripple effect ([#2419](https://github.com/material-components/material-components-web/issues/2419)) ([e207f0f](https://github.com/material-components/material-components-web/commit/e207f0f))\n* **toolbar:** Fix toolbar/top-app-bar button icons ([#2454](https://github.com/material-components/material-components-web/issues/2454)) ([3a149b3](https://github.com/material-components/material-components-web/commit/3a149b3))\n* **top-app-bar:** Remove applyPassive function from toolbar/top app bar ([#2487](https://github.com/material-components/material-components-web/issues/2487)) ([c252aba](https://github.com/material-components/material-components-web/commit/c252aba))\n\n\n### Chores\n\n* **theme:** Remove tonal variants, since they dont match MD guidelines ([#2473](https://github.com/material-components/material-components-web/issues/2473)) ([a99ce40](https://github.com/material-components/material-components-web/commit/a99ce40))\n* **typography:** Remove the adjust margin feature ([#2464](https://github.com/material-components/material-components-web/issues/2464)) ([3f23821](https://github.com/material-components/material-components-web/commit/3f23821))\n\n\n### Code Refactoring\n\n* **notched-outline:** remove text-field notched outline styles and coupling ([#2401](https://github.com/material-components/material-components-web/issues/2401)) ([4f83757](https://github.com/material-components/material-components-web/commit/4f83757))\n\n\n### feature\n\n* **select:** replace menu with native html select ([#2462](https://github.com/material-components/material-components-web/issues/2462)) ([fcc7341](https://github.com/material-components/material-components-web/commit/fcc7341))\n\n\n### Features\n\n* **button:** Add padding mixin, adjust icon margin ([#2420](https://github.com/material-components/material-components-web/issues/2420)) ([819d139](https://github.com/material-components/material-components-web/commit/819d139))\n* **tab:** Add MDCTab component ([#2421](https://github.com/material-components/material-components-web/issues/2421)) ([a8b3193](https://github.com/material-components/material-components-web/commit/a8b3193))\n* **top-app-bar:** Add dense style ([#2475](https://github.com/material-components/material-components-web/issues/2475)) ([3feec58](https://github.com/material-components/material-components-web/commit/3feec58))\n\n\n### BREAKING CHANGES\n\n* **select:** The template and adapter APIs have changed to take advantage of the native select element; see the MDC Select README for more information.\n* **typography:** Removes the `mdc-typography--adjust-margin` CSS class and the `mdc-typography-adjust-margin` Sass mixin\n* **theme:** Removes styles for `mdc-theme--primary/secondary-light/dark` CSS classes and the `mdc-theme-light/dark-variant` Sass functions\n* **notched-outline:** Renamed `mdc-text-field-outlined-corner-radius` to `mdc-text-field-outline-corner-radius`. Made `updateSvgPath_()` private in notched-outline foundation and replaced it\nwith `notch()`. Renamed `updateOutline()` in text-field foundation to `notchOutline()`.\n* **line-ripple:** The `setAttr` adapter method has been removed and replaced by `setStyle`.\n\n\n\n<a name=\"0.33.0\"></a>\n# [0.33.0](https://github.com/material-components/material-components-web/compare/v0.32.0...v0.33.0) (2018-03-19)\n\n\n### Bug Fixes\n\n* **button:** icon in rtl should have margin right flipped. ([#2346](https://github.com/material-components/material-components-web/issues/2346)) ([3c04419](https://github.com/material-components/material-components-web/commit/3c04419))\n* **card:** Center background image ([#2388](https://github.com/material-components/material-components-web/issues/2388)) ([466e7db](https://github.com/material-components/material-components-web/commit/466e7db))\n* **checkbox:** add aria-checked=mixed to indeterminate state ([#2389](https://github.com/material-components/material-components-web/issues/2389)) ([cf45654](https://github.com/material-components/material-components-web/commit/cf45654))\n* **demos:** Correct RTL/LTR toggling in demos in Safari ([#2348](https://github.com/material-components/material-components-web/issues/2348)) ([b9000a4](https://github.com/material-components/material-components-web/commit/b9000a4))\n* **drawer:** Update menu icon to be anchor element ([#2372](https://github.com/material-components/material-components-web/issues/2372)) ([1065a74](https://github.com/material-components/material-components-web/commit/1065a74))\n* **rtl:** Adding noflip annotations to fix downstream rtl issues ([#2344](https://github.com/material-components/material-components-web/issues/2344)) ([dc3d69f](https://github.com/material-components/material-components-web/commit/dc3d69f))\n* **text-field:** Clicking label should focus textfield ([#2353](https://github.com/material-components/material-components-web/issues/2353)) ([f17e0d3](https://github.com/material-components/material-components-web/commit/f17e0d3))\n* Use `var` instead of `const` in menu demo ([#2345](https://github.com/material-components/material-components-web/issues/2345)) ([ab85736](https://github.com/material-components/material-components-web/commit/ab85736))\n* **theme:** Move [@alternate](https://github.com/alternate) annotations for Closure Stylesheets ([#2355](https://github.com/material-components/material-components-web/issues/2355)) ([dc52201](https://github.com/material-components/material-components-web/commit/dc52201))\n* **toolbar:** Fix colors for svg icons. Update custom-toolbar demo ([#2331](https://github.com/material-components/material-components-web/issues/2331)) ([35a5cfc](https://github.com/material-components/material-components-web/commit/35a5cfc))\n* **top-app-bar:** Adjust title padding-left styles ([#2390](https://github.com/material-components/material-components-web/issues/2390)) ([e24480c](https://github.com/material-components/material-components-web/commit/e24480c))\n* **top-app-bar:** Fix border-radius mixin to use parameter instead of variable ([#2396](https://github.com/material-components/material-components-web/issues/2396)) ([671aa4c](https://github.com/material-components/material-components-web/commit/671aa4c))\n* **top-app-bar:** Update short collapsed border-radius to match baseline ([#2407](https://github.com/material-components/material-components-web/issues/2407)) ([cea9de6](https://github.com/material-components/material-components-web/commit/cea9de6))\n\n\n### Chores\n\n* **notched-outline:** separate outline from text-field ([#2326](https://github.com/material-components/material-components-web/issues/2326)) ([e215ca8](https://github.com/material-components/material-components-web/commit/e215ca8))\n\n\n### Code Refactoring\n\n* **button:** Remove compact variant ([#2361](https://github.com/material-components/material-components-web/issues/2361)) ([77b15f4](https://github.com/material-components/material-components-web/commit/77b15f4))\n\n\n### Features\n\n* **button:** Add ability to color icons separately from the text ([#2362](https://github.com/material-components/material-components-web/issues/2362)) ([6e5139c](https://github.com/material-components/material-components-web/commit/6e5139c))\n* **button:** Add support for SVG icons ([#2352](https://github.com/material-components/material-components-web/issues/2352)) ([499ad15](https://github.com/material-components/material-components-web/commit/499ad15))\n* **chips:** Replace leading icon with checkmark in selected filter chips ([#2320](https://github.com/material-components/material-components-web/issues/2320)) ([0b73002](https://github.com/material-components/material-components-web/commit/0b73002))\n* **image-list:** Add base styles and mixins for Standard Image List ([#2367](https://github.com/material-components/material-components-web/issues/2367)) ([71ea82a](https://github.com/material-components/material-components-web/commit/71ea82a))\n* **image-list:** Add corner radius mixin ([#2385](https://github.com/material-components/material-components-web/issues/2385)) ([567deec](https://github.com/material-components/material-components-web/commit/567deec))\n* **image-list:** Add Masonry Image List ([#2381](https://github.com/material-components/material-components-web/issues/2381)) ([d368fa7](https://github.com/material-components/material-components-web/commit/d368fa7))\n* **ripple:** Expose mdc-states-opacity; fix press fallback ([#2402](https://github.com/material-components/material-components-web/issues/2402)) ([2dfaec6](https://github.com/material-components/material-components-web/commit/2dfaec6))\n* **top-app-bar:** Add prominent style ([#2349](https://github.com/material-components/material-components-web/issues/2349)) ([f59b109](https://github.com/material-components/material-components-web/commit/f59b109))\n* **top-app-bar:** Switch to use variant specific foundations ([#2412](https://github.com/material-components/material-components-web/issues/2412)) ([2950b3e](https://github.com/material-components/material-components-web/commit/2950b3e))\n\n\n### BREAKING CHANGES\n\n* **notched-outline:** removed mdc-text-field__outline element for mdc-notched-outline.\nRenamed mdc-text-field-outlined-corner-radius to mdc-text-field-outline-corner-radius.\n* **chips:** renamed (de)registerInteractionHandler to (de)registerEventHandler and added multiple new methods to MDCChipAdapter. Also changed HTML structure of filter chips to include checkmark.\n* **checkbox:** Adds setNativeControlAttr and removeNativeControlAttr adapter APIs.\n* **button:** The compact variant of MDC Button is removed.\n\n\n\n<a name=\"0.32.0\"></a>\n# [0.32.0](https://github.com/material-components/material-components-web/compare/v0.31.0...v0.32.0) (2018-03-05)\n\n\n### Bug Fixes\n\n* **chips:** Emit custom event from trailing icon ([#2286](https://github.com/material-components/material-components-web/issues/2286)) ([e849937](https://github.com/material-components/material-components-web/commit/e849937))\n* **ripple:** Fix selected opacity levels ([#2294](https://github.com/material-components/material-components-web/issues/2294)) ([06e39b1](https://github.com/material-components/material-components-web/commit/06e39b1))\n* **select:** add tests for select label package ([#2289](https://github.com/material-components/material-components-web/issues/2289)) ([b8ae66c](https://github.com/material-components/material-components-web/commit/b8ae66c))\n* **select:** Fix floating label for pre-selected option ([#2306](https://github.com/material-components/material-components-web/issues/2306)) ([d8dae34](https://github.com/material-components/material-components-web/commit/d8dae34))\n* **text-field:** disable validation check in setRequired ([#2201](https://github.com/material-components/material-components-web/issues/2201)) ([0ba7d10](https://github.com/material-components/material-components-web/commit/0ba7d10))\n* **toolbar:** Fix icon padding for ripples, and vertical alignment in FF/IE/Edge ([#2138](https://github.com/material-components/material-components-web/issues/2138)) ([d2c9726](https://github.com/material-components/material-components-web/commit/d2c9726))\n* Use `var` instead of `const` in demos/ready.js ([#2343](https://github.com/material-components/material-components-web/issues/2343)) ([78408bb](https://github.com/material-components/material-components-web/commit/78408bb))\n\n\n### Chores\n\n* **floating-label:** separate label module from text-field ([#2237](https://github.com/material-components/material-components-web/issues/2237)) ([4b24b51](https://github.com/material-components/material-components-web/commit/4b24b51))\n\n\n### Features\n\n* **chips:** Add `mdc-chip-set--choice` variant ([#2215](https://github.com/material-components/material-components-web/issues/2215)) ([f89cd10](https://github.com/material-components/material-components-web/commit/f89cd10))\n* **chips:** Change chip color when selected ([#2329](https://github.com/material-components/material-components-web/issues/2329)) ([ecf4060](https://github.com/material-components/material-components-web/commit/ecf4060))\n* **chips:** Create mixin to customize chip margins ([#2277](https://github.com/material-components/material-components-web/issues/2277)) ([b996b7f](https://github.com/material-components/material-components-web/commit/b996b7f))\n* **chips:** Handle multi-select for filter chips ([#2297](https://github.com/material-components/material-components-web/issues/2297)) ([807b6ce](https://github.com/material-components/material-components-web/commit/807b6ce))\n* **top app bar:** Add short top app bar always collapsed feature ([#2327](https://github.com/material-components/material-components-web/issues/2327)) ([bc17291](https://github.com/material-components/material-components-web/commit/bc17291))\n* **top-app-bar:** Baseline top app bar component ([#2225](https://github.com/material-components/material-components-web/issues/2225)) ([0ad69c4](https://github.com/material-components/material-components-web/commit/0ad69c4))\n* **top-app-bar:** Implement short top app bar ([#2290](https://github.com/material-components/material-components-web/issues/2290)) ([fd8d8d9](https://github.com/material-components/material-components-web/commit/fd8d8d9))\n\n\n### BREAKING CHANGES\n\n* **text-field:** removed setRequired and isRequired from foundation.\n* **chips:** The `mdc-chip--activated` class, `mdc-chip-activated-ink-color` Sass mixin, and the `toggleActive` methods on `MDCChip`/`MDCChipSet` have been renamed to `mdc-chip--selected`, `mdc-chip-selected-ink-color`, and `toggleSelected`, respectively.\n* **floating-label:** must use `.mdc-floating-label` selector instead of `.mdc-text-field__label`\n* **chips:** Added `mdc-chip-set--filter` as a variant to be set in the HTML.\n* **chips:** New MDCChipAdapter methods for handling trailing icons must be implemented.\n\n\n\n<a name=\"0.31.0\"></a>\n# [0.31.0](https://github.com/material-components/material-components-web/compare/v0.30.0...v0.31.0) (2018-02-20)\n\n\n### Bug Fixes\n\n* **button:** Increase specifity of button icon's CSS class ([#2242](https://github.com/material-components/material-components-web/issues/2242)) ([f91d25e](https://github.com/material-components/material-components-web/commit/f91d25e))\n* **card:** Remove unused dep/import and add missing dep ([#2234](https://github.com/material-components/material-components-web/issues/2234)) ([a6de863](https://github.com/material-components/material-components-web/commit/a6de863)), closes [#2231](https://github.com/material-components/material-components-web/issues/2231)\n* **checkbox:** Avoid using & within [@at-root](https://github.com/at-root) context ([#2238](https://github.com/material-components/material-components-web/issues/2238)) ([665cf12](https://github.com/material-components/material-components-web/commit/665cf12))\n* **demos:** Remove space between toolbar title and navigation icon. ([#2174](https://github.com/material-components/material-components-web/issues/2174)) ([3b0977d](https://github.com/material-components/material-components-web/commit/3b0977d))\n* **menu:** Rename test files ([#2168](https://github.com/material-components/material-components-web/issues/2168)) ([5ea5c2f](https://github.com/material-components/material-components-web/commit/5ea5c2f))\n* **menu:** Use mdc-theme-prop to support css variables on background ([#2253](https://github.com/material-components/material-components-web/issues/2253)) ([1cc5dd5](https://github.com/material-components/material-components-web/commit/1cc5dd5))\n* **ripple:** Ensure hover/focus states have proper z-index ([#2204](https://github.com/material-components/material-components-web/issues/2204)) ([751dabd](https://github.com/material-components/material-components-web/commit/751dabd))\n* **ripple:** use default computeBoundingRect for all components with ripple ([#2216](https://github.com/material-components/material-components-web/issues/2216)) ([229e590](https://github.com/material-components/material-components-web/commit/229e590))\n* **select:** pre-selected option correctly floats label ([#2125](https://github.com/material-components/material-components-web/issues/2125)) ([fac0d03](https://github.com/material-components/material-components-web/commit/fac0d03))\n* **switch:** change all border-radius values to 50% instead of hardcoded pixel values ([#2255](https://github.com/material-components/material-components-web/issues/2255)) ([1b2219b](https://github.com/material-components/material-components-web/commit/1b2219b))\n* **text-field:** Apply error color on bottom line of fullwidth field ([#2197](https://github.com/material-components/material-components-web/issues/2197)) ([a6500bd](https://github.com/material-components/material-components-web/commit/a6500bd))\n* **theme:** fix select underline ([#2236](https://github.com/material-components/material-components-web/issues/2236)) ([4514e03](https://github.com/material-components/material-components-web/commit/4514e03))\n\n\n### Features\n\n* **card:** Add primary action element with hover, focused, and pressed states ([#2039](https://github.com/material-components/material-components-web/issues/2039)) ([3949dbe](https://github.com/material-components/material-components-web/commit/3949dbe)), closes [#1709](https://github.com/material-components/material-components-web/issues/1709)\n* **chips:** Add Sass mixins for customization ([#2177](https://github.com/material-components/material-components-web/issues/2177)) ([667513c](https://github.com/material-components/material-components-web/commit/667513c))\n* **chips:** Handle leading/trailing icon styles ([#2191](https://github.com/material-components/material-components-web/issues/2191)) ([be71f9f](https://github.com/material-components/material-components-web/commit/be71f9f))\n\n\n### BREAKING CHANGES\n\n* **chips:** MDC Chips has new Sass mixins.\n\n\n\n<a name=\"0.30.0\"></a>\n# [0.30.0](https://github.com/material-components/material-components-web/compare/v0.29.0...v0.30.0) (2018-02-05)\n\n\n### Bug Fixes\n\n* **checkbox:** Fix background fading too fast ([#2122](https://github.com/material-components/material-components-web/issues/2122)) ([d461374](https://github.com/material-components/material-components-web/commit/d461374))\n* **demos:** Fix drawer menu icon position in RTL ([#1931](https://github.com/material-components/material-components-web/issues/1931)) ([8848fcc](https://github.com/material-components/material-components-web/commit/8848fcc))\n* **demos:** Fix ready.js to avoid false positive before document load ([#2180](https://github.com/material-components/material-components-web/issues/2180)) ([2fe4dcd](https://github.com/material-components/material-components-web/commit/2fe4dcd))\n* **demos:** Re-enable JS source maps ([#2124](https://github.com/material-components/material-components-web/issues/2124)) ([929eb8c](https://github.com/material-components/material-components-web/commit/929eb8c))\n* **demos:** Sanitize slider input values ([#2018](https://github.com/material-components/material-components-web/issues/2018)) ([f3d4ca7](https://github.com/material-components/material-components-web/commit/f3d4ca7))\n* **drawer:** Fix slidable drawer's closed position in RTL ([#1957](https://github.com/material-components/material-components-web/issues/1957)) ([486ec87](https://github.com/material-components/material-components-web/commit/486ec87)), closes [#1930](https://github.com/material-components/material-components-web/issues/1930)\n* **drawer:** fixed drawer demo typos ([#2115](https://github.com/material-components/material-components-web/issues/2115)) ([c52a4b6](https://github.com/material-components/material-components-web/commit/c52a4b6))\n* **drawer:** remove dark theme ([#2080](https://github.com/material-components/material-components-web/issues/2080)) ([f05ebb5](https://github.com/material-components/material-components-web/commit/f05ebb5))\n* **list:** Add missing import ([#2150](https://github.com/material-components/material-components-web/issues/2150)) ([5dcc918](https://github.com/material-components/material-components-web/commit/5dcc918))\n* **list:** added ellipsis to text and secondary text if text overflows ([#2049](https://github.com/material-components/material-components-web/issues/2049)) ([526521c](https://github.com/material-components/material-components-web/commit/526521c))\n* **list:** Don't allow graphic to shrink when text overflows ([#1943](https://github.com/material-components/material-components-web/issues/1943)) ([da007f5](https://github.com/material-components/material-components-web/commit/da007f5)), closes [#1941](https://github.com/material-components/material-components-web/issues/1941)\n* **list:** updated demo to show checkbox examples ([fa0f58c](https://github.com/material-components/material-components-web/commit/fa0f58c))\n* **list:** updated demo to show checkbox examples ([#2064](https://github.com/material-components/material-components-web/issues/2064)) ([ec3d489](https://github.com/material-components/material-components-web/commit/ec3d489))\n* **menu:** Close menu when a list-item was clicked. ([#1756](https://github.com/material-components/material-components-web/issues/1756)) ([c052cfe](https://github.com/material-components/material-components-web/commit/c052cfe)), closes [#1747](https://github.com/material-components/material-components-web/issues/1747)\n* **ripple:** Fix nested ripple handling to work with touch events ([#2178](https://github.com/material-components/material-components-web/issues/2178)) ([a633cf5](https://github.com/material-components/material-components-web/commit/a633cf5))\n* **ripple:** Fix unbounded ripple sizes ([#2092](https://github.com/material-components/material-components-web/issues/2092)) ([41e3e89](https://github.com/material-components/material-components-web/commit/41e3e89))\n* **ripple:** Only deduplicate events on parents whose children activated ([#2160](https://github.com/material-components/material-components-web/issues/2160)) ([d83d5bd](https://github.com/material-components/material-components-web/commit/d83d5bd))\n* **ripple:** Prevent ancestors of nested ripple surfaces from activating ([#2123](https://github.com/material-components/material-components-web/issues/2123)) ([0a83568](https://github.com/material-components/material-components-web/commit/0a83568))\n* **select:** Fix background-color that changed during first mixin PR ([#2070](https://github.com/material-components/material-components-web/issues/2070)) ([fe6186a](https://github.com/material-components/material-components-web/commit/fe6186a))\n* **select:** Remove list CSS, and use mdc-list styles directly ([#2065](https://github.com/material-components/material-components-web/issues/2065)) ([e588392](https://github.com/material-components/material-components-web/commit/e588392))\n* **tabs:** centered and adjusted vertical placement of css-only tab indicator ([#2141](https://github.com/material-components/material-components-web/issues/2141)) ([e01bb84](https://github.com/material-components/material-components-web/commit/e01bb84))\n* **text-field:** Change text-field/label/variables file from css to scss. ([#2103](https://github.com/material-components/material-components-web/issues/2103)) ([2998a42](https://github.com/material-components/material-components-web/commit/2998a42))\n* **text-field:** Fix floating label for Outlined Text Fields with a leading icon. ([#2078](https://github.com/material-components/material-components-web/issues/2078)) ([ffca02d](https://github.com/material-components/material-components-web/commit/ffca02d)), closes [#1908](https://github.com/material-components/material-components-web/issues/1908)\n* **text-field:** Indent Outlined Helper Text ([#2140](https://github.com/material-components/material-components-web/issues/2140)) ([220168a](https://github.com/material-components/material-components-web/commit/220168a)), closes [#2139](https://github.com/material-components/material-components-web/issues/2139)\n* **text-field:** Make outline visibility directly linked to floating labels ([#2073](https://github.com/material-components/material-components-web/issues/2073)) ([6129f45](https://github.com/material-components/material-components-web/commit/6129f45))\n* **text-field:** move script tags below mdc.js tag ([#2179](https://github.com/material-components/material-components-web/issues/2179)) ([f5e506f](https://github.com/material-components/material-components-web/commit/f5e506f))\n* added back missing import scss packages ([#2104](https://github.com/material-components/material-components-web/issues/2104)) ([ceb3d51](https://github.com/material-components/material-components-web/commit/ceb3d51))\n* **text-field:** Remove unnecessary styling on label in disabled state ([#2058](https://github.com/material-components/material-components-web/issues/2058)) ([23e6b26](https://github.com/material-components/material-components-web/commit/23e6b26))\n* **text-field:** removed --float-above from --shake selectors ([#2007](https://github.com/material-components/material-components-web/issues/2007)) ([9d63b2e](https://github.com/material-components/material-components-web/commit/9d63b2e))\n\n\n### Chores\n\n* **checkbox:** Rename checkmark path for BEM ([#2096](https://github.com/material-components/material-components-web/issues/2096)) ([015c66b](https://github.com/material-components/material-components-web/commit/015c66b))\n* **list:** remove dark theme ([#2082](https://github.com/material-components/material-components-web/issues/2082)) ([a2c1bd0](https://github.com/material-components/material-components-web/commit/a2c1bd0))\n* **menu:** Rename SimpleMenu to Menu ([#2061](https://github.com/material-components/material-components-web/issues/2061)) ([26c9aec](https://github.com/material-components/material-components-web/commit/26c9aec))\n* **slider:** remove dark theme ([#2099](https://github.com/material-components/material-components-web/issues/2099)) ([e1ea223](https://github.com/material-components/material-components-web/commit/e1ea223))\n* **tabs:** removed .mdc-toolbar specific selectors ([#1979](https://github.com/material-components/material-components-web/issues/1979)) ([b32d013](https://github.com/material-components/material-components-web/commit/b32d013))\n* **theme:** remove dark theme ([#2169](https://github.com/material-components/material-components-web/issues/2169)) ([13b5605](https://github.com/material-components/material-components-web/commit/13b5605))\n\n\n### Features\n\n* **button:** removed dark theme from buttons ([#2038](https://github.com/material-components/material-components-web/issues/2038)) ([dee5055](https://github.com/material-components/material-components-web/commit/dee5055))\n* **button:** removed unused imports from css ([#2093](https://github.com/material-components/material-components-web/issues/2093)) ([339e15b](https://github.com/material-components/material-components-web/commit/339e15b))\n* **card:** Add `--stroked` variant and `mdc-card-stroke` mixin ([#2035](https://github.com/material-components/material-components-web/issues/2035)) ([76e56cf](https://github.com/material-components/material-components-web/commit/76e56cf)), closes [#1708](https://github.com/material-components/material-components-web/issues/1708)\n* **card:** Add theme mixins; remove content layouts ([#2025](https://github.com/material-components/material-components-web/issues/2025)) ([5f338e6](https://github.com/material-components/material-components-web/commit/5f338e6)), closes [#1126](https://github.com/material-components/material-components-web/issues/1126)\n* **chips:** Baseline chip and chip set ([#2083](https://github.com/material-components/material-components-web/issues/2083)) ([17c6c51](https://github.com/material-components/material-components-web/commit/17c6c51))\n* **dialog:** remove dark theme ([#2079](https://github.com/material-components/material-components-web/issues/2079)) ([3af1221](https://github.com/material-components/material-components-web/commit/3af1221))\n* **menu:** Add --selected class to menu items ([#2084](https://github.com/material-components/material-components-web/issues/2084)) ([04a6ee6](https://github.com/material-components/material-components-web/commit/04a6ee6))\n* **menu:** Add quickOpen option.  ([#2127](https://github.com/material-components/material-components-web/issues/2127)) ([e571a53](https://github.com/material-components/material-components-web/commit/e571a53))\n* **ripple:** Split radius mixin into bounded/unbounded versions ([#2112](https://github.com/material-components/material-components-web/issues/2112)) ([1f3871c](https://github.com/material-components/material-components-web/commit/1f3871c))\n* **select:** Add non box version  ([#2149](https://github.com/material-components/material-components-web/issues/2149)) ([d2e53e8](https://github.com/material-components/material-components-web/commit/d2e53e8))\n* **select:** Remove css version ([#2116](https://github.com/material-components/material-components-web/issues/2116)) ([f44721c](https://github.com/material-components/material-components-web/commit/f44721c))\n* **select:** removed dark theme ([#2098](https://github.com/material-components/material-components-web/issues/2098)) ([c928bce](https://github.com/material-components/material-components-web/commit/c928bce))\n* **text-field:** Move bottom-line to separate package ([#2037](https://github.com/material-components/material-components-web/issues/2037)) ([1dc0e85](https://github.com/material-components/material-components-web/commit/1dc0e85))\n* **text-field:** Move final JS colors to mixins. Update demos ([#2006](https://github.com/material-components/material-components-web/issues/2006)) ([989c516](https://github.com/material-components/material-components-web/commit/989c516))\n\n\n### BREAKING CHANGES\n\n* **theme:** Deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`\n* **tabs:** Removal of .mdc-toolbar selector forces clients to customize tab-bars within toolbars that require a different ink color.\n* **ripple:** Adds `containsEventTarget(target)` API to the ripple adapter.\n* **chips:** A new package `mdc-chip` has been added.\n* **text-field:** Moves the text-field bottom-line element to a new package (mdc-line-ripple), so we can reuse it in other components. The HTML class name for the bottom-line element has changed from mdc-text-field__bottom-line to mdc-line-ripple. Removes the animation end events from the bottom-line. Renames the bottom-line to line-ripple.\n* **select:** Removes the CSS version of the mdc-select element.\n* **menu:** Removes the `eventTargetHasClass` from the adapter.\n* **slider:** Removed `$mdc-slider-dark-theme-assumed-bg-color` from slider variables.\n* **ripple:** mdc-ripple-radius is replaced by mdc-ripple-radius-bounded and mdc-ripple-radius-unbounded; use one or the other as appropriate for the surface. The default 100% value of the unbounded mixin now results in a smaller, more appropriate radius.\n* **card:** All CSS classes for content layouts have been removed. Clients should decide what kind of layout is best for their specific use case. Dark theme CSS classes have been removed; use the Sass mixin or custom CSS instead.\n* **checkbox:** All checkboxes need to update the SVG path's class from `mdc-checkbox__checkmark__path` to `mdc-checkbox__checkmark-path`.\n* **menu:** Renames MDCSimpleMenu to MDCMenu. Renames all mdc-simple-menu classes to mdc-menu. JS and SASS file paths for the menu have changed.\n* **list:** Renamed divider sass vars `$mdc-list-divider-color-light` to `$mdc-list-divider-color-on-light-bg`, `$mdc-list-divider-color-dark` to `$mdc-list-divider-color-on-dark-bg`\n\n\n\n<a name=\"0.29.0\"></a>\n# [0.29.0](https://github.com/material-components/material-components-web/compare/v0.28.0...v0.29.0) (2018-01-22)\n\n\n### Bug Fixes\n\n* **checkbox:** Remove unnecessary :enabled ([#1944](https://github.com/material-components/material-components-web/issues/1944)) ([9525aec](https://github.com/material-components/material-components-web/commit/9525aec))\n* **demos:** Fix CSS selector for dark theme buttons ([#1933](https://github.com/material-components/material-components-web/issues/1933)) ([bbc479c](https://github.com/material-components/material-components-web/commit/bbc479c))\n* **demos:** Fix NPEs in drawer demos ([#1946](https://github.com/material-components/material-components-web/issues/1946)) ([2c92827](https://github.com/material-components/material-components-web/commit/2c92827))\n* **dialog:** Remove code that does nothing ([#1935](https://github.com/material-components/material-components-web/issues/1935)) ([fd0c675](https://github.com/material-components/material-components-web/commit/fd0c675))\n* **list:** Fix the height of the dense avatar list ([#1905](https://github.com/material-components/material-components-web/issues/1905)) ([3e5f6e0](https://github.com/material-components/material-components-web/commit/3e5f6e0))\n* **ripple:** Relax deduplication conditions for touch devices ([#1990](https://github.com/material-components/material-components-web/issues/1990)) ([450a699](https://github.com/material-components/material-components-web/commit/450a699))\n* **rtl:** Fix typo in error message and make it more readable ([#1956](https://github.com/material-components/material-components-web/issues/1956)) ([6e4432c](https://github.com/material-components/material-components-web/commit/6e4432c))\n* **select:** Remove unused JS logic for bottom-line scaleX transform ([#1910](https://github.com/material-components/material-components-web/issues/1910)) ([82a9fa3](https://github.com/material-components/material-components-web/commit/82a9fa3))\n* **slider:** Add MDCSliderFoundation export ([#1959](https://github.com/material-components/material-components-web/issues/1959)) ([3a1786f](https://github.com/material-components/material-components-web/commit/3a1786f))\n* **tabs:** removed ::after for css-only .mdc-tab__indicator ([#1983](https://github.com/material-components/material-components-web/issues/1983)) ([5787846](https://github.com/material-components/material-components-web/commit/5787846))\n* **text-field:** Add outline to foundation map ([#1914](https://github.com/material-components/material-components-web/issues/1914)) ([8a8d53e](https://github.com/material-components/material-components-web/commit/8a8d53e))\n* **text-field:** Fix focused hover state on outlined text field ([4df8319](https://github.com/material-components/material-components-web/commit/4df8319))\n* **text-field:** Fix label shake animation ([#1882](https://github.com/material-components/material-components-web/issues/1882)) ([f7b5da4](https://github.com/material-components/material-components-web/commit/f7b5da4))\n* **text-field:** Remove extra adapter method ([#1913](https://github.com/material-components/material-components-web/issues/1913)) ([656dc7c](https://github.com/material-components/material-components-web/commit/656dc7c))\n* **textfield:** add primary color to textfield label on focus ([#1820](https://github.com/material-components/material-components-web/issues/1820)) ([31aa288](https://github.com/material-components/material-components-web/commit/31aa288))\n* **textfield:** Fix textarea label from overlapping border. ([#1715](https://github.com/material-components/material-components-web/issues/1715)) ([673a84d](https://github.com/material-components/material-components-web/commit/673a84d))\n* **toolbar:** Use transparent bg for menu icon to avoid IE 11 bug ([#1909](https://github.com/material-components/material-components-web/issues/1909)) ([2da3dc8](https://github.com/material-components/material-components-web/commit/2da3dc8)), closes [#881](https://github.com/material-components/material-components-web/issues/881)\n\n\n### Chores\n\n* **demos:** Use CSS files directly instead of Webpack's .css.js ([#1916](https://github.com/material-components/material-components-web/issues/1916)) ([d1ec729](https://github.com/material-components/material-components-web/commit/d1ec729))\n* **select:** Remove multi-select from mdc-select. ([#1917](https://github.com/material-components/material-components-web/issues/1917)) ([145217c](https://github.com/material-components/material-components-web/commit/145217c))\n* **tabs:** move indicator sass into custom mixins ([#1965](https://github.com/material-components/material-components-web/issues/1965)) ([fc3a9d5](https://github.com/material-components/material-components-web/commit/fc3a9d5))\n* **text-field:** Move idle outline style method ([#1911](https://github.com/material-components/material-components-web/issues/1911)) ([5d3b350](https://github.com/material-components/material-components-web/commit/5d3b350))\n\n\n### Features\n\n* **demos:** Add global `demoReady()` function ([#1919](https://github.com/material-components/material-components-web/issues/1919)) ([da34cc9](https://github.com/material-components/material-components-web/commit/da34cc9))\n* **demos:** Add theme switcher to theme demo page ([#1975](https://github.com/material-components/material-components-web/issues/1975)) ([4f89819](https://github.com/material-components/material-components-web/commit/4f89819))\n* **select:** Move colors for default select to mixins ([#1934](https://github.com/material-components/material-components-web/issues/1934)) ([d6c68ce](https://github.com/material-components/material-components-web/commit/d6c68ce))\n* **text-field:** Expand the helper text foundation ([#1955](https://github.com/material-components/material-components-web/issues/1955)) ([468942b](https://github.com/material-components/material-components-web/commit/468942b))\n* **text-field:** Move color for default text-field to mixins. ([#1899](https://github.com/material-components/material-components-web/issues/1899)) ([ec4d18e](https://github.com/material-components/material-components-web/commit/ec4d18e))\n* **text-field:** Move text-field outline colors to mixins ([#1963](https://github.com/material-components/material-components-web/issues/1963)) ([1dae53c](https://github.com/material-components/material-components-web/commit/1dae53c))\n* **text-field:** Remove css only options. Update docs. Update demo ([#2012](https://github.com/material-components/material-components-web/issues/2012)) ([9d87adf](https://github.com/material-components/material-components-web/commit/9d87adf))\n\n\n### BREAKING CHANGES\n\n* **tabs:** removal of .mdc-toolbar selector forces clients to\ncustomize tab-bars within toolbars that require a different ink color.\n* **text-field:** Removes the css only version of the text-field component.\n* **tabs:** all css-only mdc-tab elements must have a .mdc-tab__indicator\nchild element\n* **select:** Move colors for default select element to mixins. Refer to the documentation for guidance.\nrefs: #1150\n\nMove colors for the select into a new mixins file.\n* **text-field:** Moves color customization of the outline text-field to SASS mixins.\n* **select:** Removes mdc-multi-select from the mdc-select package. Use lists to create components that allow multiple items to be selected.\n* **demos:** Sass source maps and hot reloading no longer work on demo pages. We can address those issues in future PRs if they become a problem. In addition, the `MDC_WRAP_CSS_IN_JS` env var now defaults to `false`.\n\nThis change:\n\n1. Makes it possible to dynamically switch themes at runtime (follow-up PR)\n2. Fixes the FOUC on all demo pages\n3. Fixes sporadic rendering errors on all demo pages that call `getComputedStyle()` on page load (e.g., ripple)\n4. Allows us to remove CSS polling from our demo JS (follow-up PR)\n5. Reduces Chrome devtools memory leaks after hot reloading\n* **text-field:** Text field outline adapter now must implement the `getIdleOutlineStyleValue` method previously implemented in the text field adapter. The functionality is exactly the same and requires only small changes to accessing the outline node.\n\n\n\n<a name=\"0.28.0\"></a>\n# [0.28.0](https://github.com/material-components/material-components-web/compare/v0.27.0...v0.28.0) (2018-01-08)\n\n\n### Bug Fixes\n\n* **checkbox:** Remove duplicate background props ([#1812](https://github.com/material-components/material-components-web/issues/1812)) ([d3a2901](https://github.com/material-components/material-components-web/commit/d3a2901))\n* **checkbox:** Respect BEM when outputting the base stylesheet ([#1733](https://github.com/material-components/material-components-web/issues/1733)) ([3e9bd5f](https://github.com/material-components/material-components-web/commit/3e9bd5f))\n* **drawer:** update radio button ids to correct add/remove classes on demos ([#1883](https://github.com/material-components/material-components-web/issues/1883)) ([ac46b88](https://github.com/material-components/material-components-web/commit/ac46b88))\n* **linear-progress:** restores progress when determinate set to true ([#1698](https://github.com/material-components/material-components-web/issues/1698)) ([1d9cd68](https://github.com/material-components/material-components-web/commit/1d9cd68)), closes [#1531](https://github.com/material-components/material-components-web/issues/1531)\n* **list:** Move divider color style so it takes precedence ([#1856](https://github.com/material-components/material-components-web/issues/1856)) ([e3cb47c](https://github.com/material-components/material-components-web/commit/e3cb47c))\n* **list:** Respect BEM when outputting the base stylesheet. ([#1799](https://github.com/material-components/material-components-web/issues/1799)) ([ee1c0db](https://github.com/material-components/material-components-web/commit/ee1c0db)), closes [#1748](https://github.com/material-components/material-components-web/issues/1748)\n* **ripple:** Apply will-change to surface rather than pseudo-elements ([#1872](https://github.com/material-components/material-components-web/issues/1872)) ([2a69fef](https://github.com/material-components/material-components-web/commit/2a69fef))\n* **ripple:** Listen for up events at document level ([#1800](https://github.com/material-components/material-components-web/issues/1800)) ([e9f02ed](https://github.com/material-components/material-components-web/commit/e9f02ed))\n* **select:** Disable ripple/state pseudos for native multiselect ([#1781](https://github.com/material-components/material-components-web/issues/1781)) ([e96fe2f](https://github.com/material-components/material-components-web/commit/e96fe2f))\n* **select:** Work around glitch with new list styles in Chrome ([#1757](https://github.com/material-components/material-components-web/issues/1757)) ([4c68267](https://github.com/material-components/material-components-web/commit/4c68267))\n* **text-field:** allow commit message text-field with dash ([#1850](https://github.com/material-components/material-components-web/issues/1850)) ([2f9dd6f](https://github.com/material-components/material-components-web/commit/2f9dd6f))\n* **text-field:** Update outline and label styles according to spec ([#1855](https://github.com/material-components/material-components-web/issues/1855)) ([6ada786](https://github.com/material-components/material-components-web/commit/6ada786))\n* **text-field:** updated dependency check test and added special case for text-field ([#1860](https://github.com/material-components/material-components-web/issues/1860)) ([3061a61](https://github.com/material-components/material-components-web/commit/3061a61))\n* **textfield:** Add isFocused to adapter in case autofocus attr is present ([#1815](https://github.com/material-components/material-components-web/issues/1815)) ([737f712](https://github.com/material-components/material-components-web/commit/737f712))\n* **textfield:** Fix mixin calls for keyframes ([#1735](https://github.com/material-components/material-components-web/issues/1735)) ([cef10e8](https://github.com/material-components/material-components-web/commit/cef10e8))\n* **textfield:** Fix placeholder colors ([#1813](https://github.com/material-components/material-components-web/issues/1813)) ([0e9fbe1](https://github.com/material-components/material-components-web/commit/0e9fbe1))\n* **textfield:** safari input has rounded corners ([#1793](https://github.com/material-components/material-components-web/issues/1793)) ([2519b09](https://github.com/material-components/material-components-web/commit/2519b09))\n* **theme:** replace inline comments in property-values map with multiline comments ([#1746](https://github.com/material-components/material-components-web/issues/1746)) ([f71025f](https://github.com/material-components/material-components-web/commit/f71025f))\n* **typography:** change display2 font size to correct value ([#1652](https://github.com/material-components/material-components-web/issues/1652)) ([a943ad6](https://github.com/material-components/material-components-web/commit/a943ad6)), closes [#1638](https://github.com/material-components/material-components-web/issues/1638)\n\n\n### Chores\n\n* **ripple:** move common ripple styles out of mixins and into [@material](https://github.com/material)/ripple/common ([#1736](https://github.com/material-components/material-components-web/issues/1736)) ([acb47d7](https://github.com/material-components/material-components-web/commit/acb47d7))\n* **text-field:** Split out icon into subelement ([#1697](https://github.com/material-components/material-components-web/issues/1697)) ([4e7fa3e](https://github.com/material-components/material-components-web/commit/4e7fa3e))\n* **text-field:** Split out label into subelement ([#1693](https://github.com/material-components/material-components-web/issues/1693)) ([e483aae](https://github.com/material-components/material-components-web/commit/e483aae))\n* **theme:** Remove constrast tone vars ([#1721](https://github.com/material-components/material-components-web/issues/1721)) ([f9527db](https://github.com/material-components/material-components-web/commit/f9527db))\n\n\n### Features\n\n* **drawer:** custom sass mixins for color, background, scrim ([#1730](https://github.com/material-components/material-components-web/issues/1730)) ([921a41f](https://github.com/material-components/material-components-web/commit/921a41f))\n* **drawer:** Remove obsolete pre-states styles; update demo pages ([#1738](https://github.com/material-components/material-components-web/issues/1738)) ([7c68674](https://github.com/material-components/material-components-web/commit/7c68674))\n* **elevation:** Remove transition mixin; use transition-value function ([#1871](https://github.com/material-components/material-components-web/issues/1871)) ([1ebad2c](https://github.com/material-components/material-components-web/commit/1ebad2c))\n* **icon-toggle:** Add color theme mixin; remove --primary/--accent modifiers ([#1717](https://github.com/material-components/material-components-web/issues/1717)) ([efd9d5d](https://github.com/material-components/material-components-web/commit/efd9d5d)), closes [#1147](https://github.com/material-components/material-components-web/issues/1147)\n* **list:** Rename elements to match spec; don't set size of meta ([#1716](https://github.com/material-components/material-components-web/issues/1716)) ([5dabcdf](https://github.com/material-components/material-components-web/commit/5dabcdf))\n* **list:** Use states mixins; change padding behavior to support them ([#1737](https://github.com/material-components/material-components-web/issues/1737)) ([c8772ea](https://github.com/material-components/material-components-web/commit/c8772ea))\n* **menu:** Add new anchor positioning functionality ([#1691](https://github.com/material-components/material-components-web/issues/1691)) ([da56619](https://github.com/material-components/material-components-web/commit/da56619)), closes [#1688](https://github.com/material-components/material-components-web/issues/1688)\n* **menu:** Remove obsolete pre-states styles; fix dark-mode selector ([#1739](https://github.com/material-components/material-components-web/issues/1739)) ([f82998a](https://github.com/material-components/material-components-web/commit/f82998a))\n* **ripple:** Add setUnbounded to foundation ([#1826](https://github.com/material-components/material-components-web/issues/1826)) ([a9e4868](https://github.com/material-components/material-components-web/commit/a9e4868))\n* **ripple:** Remove old mixin and obsolete JS logic ([#1784](https://github.com/material-components/material-components-web/issues/1784)) ([617c61d](https://github.com/material-components/material-components-web/commit/617c61d))\n* **select:** Move focus handling to surface element for focus shade ([#1803](https://github.com/material-components/material-components-web/issues/1803)) ([255b63e](https://github.com/material-components/material-components-web/commit/255b63e))\n* **snackbar:** Emit show or hide event. fixes [#1603](https://github.com/material-components/material-components-web/issues/1603) ([#1755](https://github.com/material-components/material-components-web/issues/1755)) ([3e53614](https://github.com/material-components/material-components-web/commit/3e53614))\n* **tab:** sass color mixins ([#1851](https://github.com/material-components/material-components-web/issues/1851)) ([9bb3be5](https://github.com/material-components/material-components-web/commit/9bb3be5))\n* **text-field:** Add CSS-only version of outlined text field ([#1824](https://github.com/material-components/material-components-web/issues/1824)) ([dd5ea7b](https://github.com/material-components/material-components-web/commit/dd5ea7b))\n* **text-field:** Add dense mode to outlined text field ([#1846](https://github.com/material-components/material-components-web/issues/1846)) ([5a19695](https://github.com/material-components/material-components-web/commit/5a19695))\n* **text-field:** Add outline subelement and demo for outlined text field ([#1749](https://github.com/material-components/material-components-web/issues/1749)) ([4ce3582](https://github.com/material-components/material-components-web/commit/4ce3582))\n* **text-field:** Add properties for value, disable, value, and required ([#1873](https://github.com/material-components/material-components-web/issues/1873)) ([d7b9345](https://github.com/material-components/material-components-web/commit/d7b9345))\n* **text-field:** Add ripple to outlined text field ([#1807](https://github.com/material-components/material-components-web/issues/1807)) ([49fc1c4](https://github.com/material-components/material-components-web/commit/49fc1c4))\n* **text-field:** Handle leading/trailing icons in outlined text field ([#1858](https://github.com/material-components/material-components-web/issues/1858)) ([ca0af1b](https://github.com/material-components/material-components-web/commit/ca0af1b))\n* **theme:** Switch to new theme demo page ([#1886](https://github.com/material-components/material-components-web/issues/1886)) ([daefeba](https://github.com/material-components/material-components-web/commit/daefeba))\n* **theme:** Update baseline theme colors ([#1884](https://github.com/material-components/material-components-web/issues/1884)) ([f19bfbe](https://github.com/material-components/material-components-web/commit/f19bfbe))\n* **toolbar:** Add theme color mixins ([#1720](https://github.com/material-components/material-components-web/issues/1720)) ([328df77](https://github.com/material-components/material-components-web/commit/328df77)), closes [#1154](https://github.com/material-components/material-components-web/issues/1154)\n* **typography:** Support custom properties in mdc-typography mixin ([#1664](https://github.com/material-components/material-components-web/issues/1664)) ([c50363d](https://github.com/material-components/material-components-web/commit/c50363d))\n\n\n### BREAKING CHANGES\n\n* **menu:** Removes 5 adapter methods and adds a new setMaxHeight adapter method; adds anchor positioning API to menu foundation; see README for details.\n* **text-field:** Remove `addClassToLabel` and `removeClassFromLabel` from `MDCTextFieldAdapter` implementations.\n* **ripple:** `registerDocumentInteractionHandler ` and `deregisterDocumentInteractionHandler` APIs have been added to the ripple adapter.\n* **elevation:** The `mdc-elevation-transition` mixin has been removed, and the `mdc-elevation-transition-rule` function has been renamed to `mdc-elevation-transition-value`, which should be used instead.\n* **text-field:** Please implement `hasClass` method on MDCTextFieldAdapter, and change `getFloatingWidth` method to `getWidth` on MDCTextFieldLabelFoundation.\n* **drawer:** Renamed `mdc-permanent-drawer` CSS class to `mdc-drawer--permanent`, renamed `mdc-temporary-drawer` CSS class to `mdc-drawer--temporary`, and renamed `mdc-persistent-drawer` to `mdc-drawer--persistent`. Also renamed all subelement classes by removing the variant from the selectors. Example:\n\n```\nmdc-persistent-drawer__drawer --> mdc-drawer__drawer\nmdc-persistent-drawer__toolbar-spacer --> mdc-drawer__toolbar-spacer\nmdc-temporary-drawer__header --> mdc-drawer__header\nmdc-temporary-drawer__header-content --> mdc-drawer__header-content\nmdc-permanent-drawer__content --> mdc-drawer__content\n```\n* **textfield:** Added isFocused() to Text Field adapter\n* **select:** JS-enhanced Select should now apply tabindex to the surface element instead of the root element. The adapter APIs related to focus, interaction handling, and tabbability now operate on the surface element instead of the root element.\n* **ripple:** The mdc-ripple-color mixin is removed; use the mdc-states-* mixins instead.\n* **text-field:** - The return type for `MDCTextFieldAdapter.getNativeInput()` has changed. See the 'NativeInputType` typedef in the adapter.\n- MDCTextFieldLabelFoundation has removed:\n  - `floatAbove`\n  - `deactivateFocus`\n  - `setValidity`\n- They are replaced with methods for updating the label float and label shake styles:\n  - `styleFloat`\n  - `styleShake`\n* **text-field:** Remove `setIconAttr`, `eventTargetHasClass` and `notifyIconAction` from `MDCTextFieldAdapter` implementations.\n* **drawer:** the \"mdc-...-drawer--selected\" classes are replaced by \"mdc-list-item--activated\", as it pertains to a specific list item and not the entire drawer.\n* **menu:** the \"mdc-simple-menu--selected\" class is replaced by \"mdc-list-item--selected\", as it pertains to a specific list item and not the entire menu.\n* **list:** List padding is now per-item rather than across the entire list. Separators now span the entire list width by default, with the addition of a mdc-list-divider--padded modifier class to achieve the old default behavior.\n* **theme:** `$mdc-theme-primary-tone` and friends have been removed. We now use a private function instead.\n* **ripple:** Please update all components which use MDC Ripple to import the new /common file\n* **list:** `__start-detail` has been renamed to `__graphic`, and `__end-detail` has been renamed to `__meta`. In addition, meta data tiles no longer have a default width/height (fixes #1644).\n\nAlso:\n- Format mdc-list README\n- Capitalize headings in mdc-list README and demo\n* **icon-toggle:** The `--primary` and `--accent` CSS modifier classes have been removed in favor of the new mixin.\n* **text-field:** Public method `layout()` and adapter methods `getIdleOutlineStyleValue()` and `isRtl()` were added to MDCTextField. Added a new subcomponent MDCTextFieldOutline, and adapter method `getWidth()` to MDCTextFieldLabel.\n\n\n\n<a name=\"0.27.0\"></a>\n# [0.27.0](https://github.com/material-components/material-components-web/compare/v0.26.0...v0.27.0) (2017-12-11)\n\n\n### Bug Fixes\n\n* **demos:** add back button to header on drawer demos page ([#1703](https://github.com/material-components/material-components-web/issues/1703)) ([fa72e42](https://github.com/material-components/material-components-web/commit/fa72e42))\n* **drawer:** Change how click events are handled ([3e173e1](https://github.com/material-components/material-components-web/commit/3e173e1))\n* **icon-toggle:** Don't nuke tabindex if initializing disabled to false ([#1667](https://github.com/material-components/material-components-web/issues/1667)) ([9ec35b7](https://github.com/material-components/material-components-web/commit/9ec35b7))\n* **linear-progress:** default size ([#1694](https://github.com/material-components/material-components-web/issues/1694)) ([35d362c](https://github.com/material-components/material-components-web/commit/35d362c)), closes [#1528](https://github.com/material-components/material-components-web/issues/1528)\n* **toolbar:** margin for fixed toolbar ([28b97a5](https://github.com/material-components/material-components-web/commit/28b97a5))\n\n\n### Chores\n\n* **list:** Rename CSS class to follow BEM naming ([#1660](https://github.com/material-components/material-components-web/issues/1660)) ([7a23183](https://github.com/material-components/material-components-web/commit/7a23183))\n* **text-field:** Pass subelement foundations through MDCTextField super constructor ([#1684](https://github.com/material-components/material-components-web/issues/1684)) ([80223f2](https://github.com/material-components/material-components-web/commit/80223f2))\n\n\n### Features\n\n* **button:** Use mdc-states mixin for button styles ([#1668](https://github.com/material-components/material-components-web/issues/1668)) ([55fbba9](https://github.com/material-components/material-components-web/commit/55fbba9))\n* **checkbox:** Use new mdc-states mixin for checkbox styles ([#1672](https://github.com/material-components/material-components-web/issues/1672)) ([dab612c](https://github.com/material-components/material-components-web/commit/dab612c))\n* **fab:** Use new mdc-states mixin for fab styles ([#1669](https://github.com/material-components/material-components-web/issues/1669)) ([9ab48b7](https://github.com/material-components/material-components-web/commit/9ab48b7))\n* **icon-toggle:** Use new mdc-states mixin for icon-toggle styles ([#1685](https://github.com/material-components/material-components-web/issues/1685)) ([75eb1bc](https://github.com/material-components/material-components-web/commit/75eb1bc))\n* **infrastructure:** Add build command for static demo assets ([#1589](https://github.com/material-components/material-components-web/issues/1589)) ([54465d9](https://github.com/material-components/material-components-web/commit/54465d9))\n* **list:** Add color theme mixins & --selected/--activated modifiers ([#1663](https://github.com/material-components/material-components-web/issues/1663)) ([6ea948f](https://github.com/material-components/material-components-web/commit/6ea948f)), closes [#1662](https://github.com/material-components/material-components-web/issues/1662)\n* **menu:** Fix menu to only fire one event per interaction ([02fe795](https://github.com/material-components/material-components-web/commit/02fe795))\n* **radio:** Use new mdc-states mixin for radio styles ([#1673](https://github.com/material-components/material-components-web/issues/1673)) ([5065576](https://github.com/material-components/material-components-web/commit/5065576))\n* **ripple:** Add new states mixins ([#1624](https://github.com/material-components/material-components-web/issues/1624)) ([9356449](https://github.com/material-components/material-components-web/commit/9356449))\n* **ripple:** Add support for activated and selected states ([#1696](https://github.com/material-components/material-components-web/issues/1696)) ([6f7008c](https://github.com/material-components/material-components-web/commit/6f7008c))\n* **select:** Add new UX styles and behavior to select ([99878c1](https://github.com/material-components/material-components-web/commit/99878c1))\n* **select:** Use new mdc-states mixin for select styles ([#1704](https://github.com/material-components/material-components-web/issues/1704)) ([3043a54](https://github.com/material-components/material-components-web/commit/3043a54))\n* **tabs:** Use new mdc-states mixin for tab styles ([#1674](https://github.com/material-components/material-components-web/issues/1674)) ([f7f1eb0](https://github.com/material-components/material-components-web/commit/f7f1eb0))\n* **textfield:** Use mdc-states mixin and add support for focus shade ([#1677](https://github.com/material-components/material-components-web/issues/1677)) ([2918031](https://github.com/material-components/material-components-web/commit/2918031))\n* **theme:** Add accessible-ink-color function ([#1719](https://github.com/material-components/material-components-web/issues/1719)) ([49cd750](https://github.com/material-components/material-components-web/commit/49cd750))\n* **theme:** Support currentColor in mdc-theme-prop* ([#1657](https://github.com/material-components/material-components-web/issues/1657)) ([7e1255e](https://github.com/material-components/material-components-web/commit/7e1255e))\n\n\n### BREAKING CHANGES\n\n* **select:** Adds several adapter methods to facilitate the new UX styles. Changes DOM requirements. Refer to https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/README.md for new implementation requirements.\n* **text-field:** Please update implementations of MDCTextField to pass in a map of subfoundations to the MDCTextFieldFoundation constructor. Methods getBottomLineFoundation() and getHelperTextFoundation() are no longer in MDCTextFieldAdapter. See the README for mdc-textfield/input for more information.\n* **button:** The $mdc-*-button-ripple-opacity variables have been removed, as these values are now available via the state opacity maps in mdc-ripple.\n* **drawer:** Adds eventTargetHasClass method to the temporary drawer adapter API.\n* **list:** The `mdc-list-item__text__secondary` class was renamed to `mdc-list-item__secondary-text` to follow BEM conventions. See the [BEM FAQ](http://getbem.com/faq/#css-nested-elements) for more details.\n* **menu:** Adds an adapter method eventTargetHasClass to check if a given event target has a given class\n\n\n\n<a name=\"0.26.0\"></a>\n# [0.26.0](https://github.com/material-components/material-components-web/compare/v0.25.0...v0.26.0) (2017-11-27)\n\n\n### Bug Fixes\n\n* **list:** Add 8px bottom padding ([cd03a0e](https://github.com/material-components/material-components-web/commit/cd03a0e)), closes [#1488](https://github.com/material-components/material-components-web/issues/1488)\n* **list:** Make bottom padding match top for dense lists ([#1622](https://github.com/material-components/material-components-web/issues/1622)) ([67354d0](https://github.com/material-components/material-components-web/commit/67354d0))\n* **select:** Don't scroll page when select's menu is open ([#1500](https://github.com/material-components/material-components-web/issues/1500)) ([bddd747](https://github.com/material-components/material-components-web/commit/bddd747)), closes [#879](https://github.com/material-components/material-components-web/issues/879)\n* **select:** Make CSS-only background transparent ([#1499](https://github.com/material-components/material-components-web/issues/1499)) ([964a419](https://github.com/material-components/material-components-web/commit/964a419))\n* **slider:** Properly handle arrow key events in IE ([#1613](https://github.com/material-components/material-components-web/issues/1613)) ([476c81f](https://github.com/material-components/material-components-web/commit/476c81f))\n* **textfield:** Should not be in both disabled and invalid state ([#1568](https://github.com/material-components/material-components-web/issues/1568)) ([874a17e](https://github.com/material-components/material-components-web/commit/874a17e))\n\n\n### Chores\n\n* **text-field:** Split out helper text as a subelement ([#1611](https://github.com/material-components/material-components-web/issues/1611)) ([8107b08](https://github.com/material-components/material-components-web/commit/8107b08))\n* **text-field:** Splitting out bottom line as a sub element ([#1585](https://github.com/material-components/material-components-web/issues/1585)) ([b12c576](https://github.com/material-components/material-components-web/commit/b12c576))\n\n\n### Features\n\n* **text-field:** rename helptext to helper text ([#1576](https://github.com/material-components/material-components-web/issues/1576)) ([1a5acee](https://github.com/material-components/material-components-web/commit/1a5acee))\n* **textfield:** helperTextContent setter ([#1569](https://github.com/material-components/material-components-web/issues/1569)) ([875e393](https://github.com/material-components/material-components-web/commit/875e393))\n\n\n### BREAKING CHANGES\n\n* **text-field:** Please update implementations of MDCTextFieldAdapter to implement the method getHelperTextFoundation. MDCTextFieldAdapter no longer implements addClassToHelperText, removeClassFromHelperText, helperTextHasClass,  setHelperTextAttr, removeHelperTextAttr, and setHelperTextContent. See the README for mdc-textfield/helper-text for more information.\n* **textfield:** Adds adapter method to set helper text content.\n* **text-field:** Please update implementations of MDCTextFieldAdapter to implement the methods registerBottomLineEventHandler, deregisterBottomLineEventHandler, and getBottomLineFoundation. See the README for mdc-textfield/bottom-line for more information.\n* **text-field:** Instances of \"helptext\" in mdc-textfield/adapter.js has changed to \"helperText\", and users should update their implementations of the adapter.\n\n\n\n<a name=\"0.25.0\"></a>\n# [0.25.0](https://github.com/material-components/material-components-web/compare/v0.24.0...v0.25.0) (2017-11-13)\n\n\n### Bug Fixes\n\n* **button:** Stroked buttons should change the padding of the button ([#1538](https://github.com/material-components/material-components-web/issues/1538)) ([97e5aa8](https://github.com/material-components/material-components-web/commit/97e5aa8))\n* **checkbox:** Close path tag to remove IE console error warnings ([1a82689](https://github.com/material-components/material-components-web/commit/1a82689)), closes [#1504](https://github.com/material-components/material-components-web/issues/1504)\n* **dialog:** fixed dark-theme dialog copy color ([#1524](https://github.com/material-components/material-components-web/issues/1524)) ([1aa3760](https://github.com/material-components/material-components-web/commit/1aa3760)), closes [#1032](https://github.com/material-components/material-components-web/issues/1032)\n* **menu:** Menu opening animation shows scrollbar ([#1513](https://github.com/material-components/material-components-web/issues/1513)) ([94b712a](https://github.com/material-components/material-components-web/commit/94b712a)), closes [#1387](https://github.com/material-components/material-components-web/issues/1387)\n* **slider:** Don't hide focus ring on discrete sliders ([#1545](https://github.com/material-components/material-components-web/issues/1545)) ([5a777af](https://github.com/material-components/material-components-web/commit/5a777af)), closes [#1427](https://github.com/material-components/material-components-web/issues/1427)\n* **slider:** Fix mobile Chrome by handling all \"up\" event types ([#1484](https://github.com/material-components/material-components-web/issues/1484)) ([bcc5ec5](https://github.com/material-components/material-components-web/commit/bcc5ec5))\n* **snackbar:** Add padding between text and button ([#1572](https://github.com/material-components/material-components-web/issues/1572)) ([93f2d5c](https://github.com/material-components/material-components-web/commit/93f2d5c))\n\n\n### Features\n\n* **elevation:** Update mixin to accept custom theme color ([#1449](https://github.com/material-components/material-components-web/issues/1449)) ([e02b4c9](https://github.com/material-components/material-components-web/commit/e02b4c9)), closes [#1534](https://github.com/material-components/material-components-web/issues/1534)\n* **linear-progress:** Add color theme mixins and remove `--accent` ([#1541](https://github.com/material-components/material-components-web/issues/1541)) ([31d9d7b](https://github.com/material-components/material-components-web/commit/31d9d7b)), closes [#1148](https://github.com/material-components/material-components-web/issues/1148)\n* **slider:** Add color theme mixins; default to secondary; remove `--off` ([#1544](https://github.com/material-components/material-components-web/issues/1544)) ([28024e9](https://github.com/material-components/material-components-web/commit/28024e9)), closes [#1151](https://github.com/material-components/material-components-web/issues/1151)\n* **text-field:** rename textfield to text-field ([#1485](https://github.com/material-components/material-components-web/issues/1485)) ([8093ad1](https://github.com/material-components/material-components-web/commit/8093ad1))\n* **textfield:** Convert some foundation methods from private to public ([#1543](https://github.com/material-components/material-components-web/issues/1543)) ([a8dcc59](https://github.com/material-components/material-components-web/commit/a8dcc59)), closes [#1550](https://github.com/material-components/material-components-web/issues/1550)\n* **theme:** Add new tone mixins and deprecate old one ([#1546](https://github.com/material-components/material-components-web/issues/1546)) ([57581ed](https://github.com/material-components/material-components-web/commit/57581ed))\n* **theme:** Allow overriding of text themes ([#1481](https://github.com/material-components/material-components-web/issues/1481)) ([f579e0a](https://github.com/material-components/material-components-web/commit/f579e0a))\n\n\n### Performance Improvements\n\n* **button:** Remove extra CSS, now that ripple handles tap highlight color ([#1520](https://github.com/material-components/material-components-web/issues/1520)) ([0a5fec5](https://github.com/material-components/material-components-web/commit/0a5fec5))\n\n\n### BREAKING CHANGES\n\n* **linear-progress:** The `mdc-linear-progres--accent` modifier class has been removed. Use Sass color mixins instead.\n* **slider:** The `mdc-slider--off` modifier class has been removed as it is being removed from the spec.\n* **text-field:** CSS class name \"mdc-textfield\" is changed to \"mdc-text-field\", JS objects name \"MDCTextfield\" is changed to \"MDCTextField\", .scss file names \"mdc-textfield.scss\" is changed to \"mdc-text-field.scss\", global namespace \"mdc.textfield\" is changed to \"mdc.textField\". Note that the package name is unchanged.\n\n\n\n<a name=\"0.24.0\"></a>\n# [0.24.0](https://github.com/material-components/material-components-web/compare/v0.23.0...v0.24.0) (2017-10-30)\n\n\n### Bug Fixes\n\n* **button:** Revise button minimum width ([#1487](https://github.com/material-components/material-components-web/issues/1487)) ([cb73283](https://github.com/material-components/material-components-web/commit/cb73283))\n* **layout-grid:** Import the variables in the mixin ([#1232](https://github.com/material-components/material-components-web/issues/1232)) ([924144b](https://github.com/material-components/material-components-web/commit/924144b))\n* **ripple:** Avoid duplicating common styles ([#1463](https://github.com/material-components/material-components-web/issues/1463)) ([756d8a6](https://github.com/material-components/material-components-web/commit/756d8a6))\n* **snackbar:** Explicitly use border-box ([#1453](https://github.com/material-components/material-components-web/issues/1453)) ([7455978](https://github.com/material-components/material-components-web/commit/7455978))\n\n\n### Features\n\n* **button:** Use new ripple mixins, and remove unnecessary mixin ([#1471](https://github.com/material-components/material-components-web/issues/1471)) ([510f356](https://github.com/material-components/material-components-web/commit/510f356))\n* **checkbox:** Use new ripple mixins, and remove unnecessary mixin ([#1472](https://github.com/material-components/material-components-web/issues/1472)) ([92b22eb](https://github.com/material-components/material-components-web/commit/92b22eb))\n* **fab:** Use new ripple mixins; remove unnecessary mixin/variable ([#1473](https://github.com/material-components/material-components-web/issues/1473)) ([fb798db](https://github.com/material-components/material-components-web/commit/fb798db))\n* **icon-toggle:** Add public API for MDCRipple in icon-toggle ([#1396](https://github.com/material-components/material-components-web/issues/1396)) ([f496581](https://github.com/material-components/material-components-web/commit/f496581))\n* **icon-toggle:** Use new ripple mixins ([#1474](https://github.com/material-components/material-components-web/issues/1474)) ([cbc3e1c](https://github.com/material-components/material-components-web/commit/cbc3e1c))\n* **list:** Use new ripple mixins ([#1475](https://github.com/material-components/material-components-web/issues/1475)) ([0647576](https://github.com/material-components/material-components-web/commit/0647576))\n* **radio:** Add theme color mixins and update default color to secondary ([#1410](https://github.com/material-components/material-components-web/issues/1410)) ([da9d48f](https://github.com/material-components/material-components-web/commit/da9d48f)), closes [#1149](https://github.com/material-components/material-components-web/issues/1149)\n* **radio:** Use new ripple mixins, and remove unnecessary mixin ([#1476](https://github.com/material-components/material-components-web/issues/1476)) ([94a826d](https://github.com/material-components/material-components-web/commit/94a826d))\n* **ripple:** Add new simpler mixins and remove unused CSS vars ([#1452](https://github.com/material-components/material-components-web/issues/1452)) ([a983c01](https://github.com/material-components/material-components-web/commit/a983c01))\n* **ripple:** Remove old complex mixins ([#1496](https://github.com/material-components/material-components-web/issues/1496)) ([47c6859](https://github.com/material-components/material-components-web/commit/47c6859))\n* **switch:** Add color theme mixins and update default color to secondary ([#1411](https://github.com/material-components/material-components-web/issues/1411)) ([e4b4fa7](https://github.com/material-components/material-components-web/commit/e4b4fa7)), closes [#1144](https://github.com/material-components/material-components-web/issues/1144)\n* **tabs:** Use new ripple mixins ([#1492](https://github.com/material-components/material-components-web/issues/1492)) ([253fba0](https://github.com/material-components/material-components-web/commit/253fba0))\n* **textfield:** Add mixin allowing customization of border radii ([#1446](https://github.com/material-components/material-components-web/issues/1446)) ([483e3d5](https://github.com/material-components/material-components-web/commit/483e3d5))\n* **textfield:** Use new ripple mixins and remove hover ripple styles ([#1477](https://github.com/material-components/material-components-web/issues/1477)) ([2a71ef7](https://github.com/material-components/material-components-web/commit/2a71ef7))\n* **theme:** rename all color_palette instances ([#1479](https://github.com/material-components/material-components-web/issues/1479)) ([375661d](https://github.com/material-components/material-components-web/commit/375661d))\n\n\n### BREAKING CHANGES\n\n* **ripple:** The existing MDC Ripple Sass mixins mdc-ripple-base, mdc-ripple-fg, and mdc-ripple-bg have been removed, replaced by the new easier-to-use mixins mdc-ripple-surface, mdc-ripple-color, and mdc-ripple-radius.\n* **radio:** The mdc-radio-ripple mixin has been removed; use mdc-ripple-color directly.\n* **fab:** The mdc-fab-ripple mixin and $mdc-fab-light-ripple-config variable have been removed; use MDC Ripple's mdc-ripple-color mixin and opacity variables directly.\n* **checkbox:** The mdc-checkbox-ripple mixin has been removed; use mdc-ripple-color directly.\n* **button:** The mdc-button-ripple mixin has been removed; use mdc-ripple-color directly.\n* **theme:** _color_palette.scss has been renamed to _color-palette.scss in mdc-theme\n\n\n\n<a name=\"0.23.0\"></a>\n# [0.23.0](https://github.com/material-components/material-components-web/compare/v0.22.0...v0.23.0) (2017-10-16)\n\n\n### Bug Fixes\n\n* **list item:** Add overflow hidden (#1290) ([05b1201](https://github.com/material-components/material-components-web/commit/05b1201)), closes [#1261](https://github.com/material-components/material-components-web/issues/1261)\n* **menu:** Add pointer-events: none to avoid blocking click events (#1421) ([b77895b](https://github.com/material-components/material-components-web/commit/b77895b))\n* **slider:** Deregister correct handlers on destroy (#1431) ([928d6b4](https://github.com/material-components/material-components-web/commit/928d6b4))\n* **toolbar:** Update menu-icon className (#992) (#1373) ([36577ab](https://github.com/material-components/material-components-web/commit/36577ab))\n\n\n### Features\n\n* **checkbox:** Add color theme mixins and update default color to secondary (#1365) ([cc7538f](https://github.com/material-components/material-components-web/commit/cc7538f)), closes [#1146](https://github.com/material-components/material-components-web/issues/1146)\n* **ripple:** Add optional event parameters to activate/deactivate methods ([891e962](https://github.com/material-components/material-components-web/commit/891e962))\n* **textfield:** Add textfield to the Closure whitelist. (#1394) ([8b05e88](https://github.com/material-components/material-components-web/commit/8b05e88))\n* **textfield:** Annotate textfield for Closure Compiler. (#1386) ([1152b8d](https://github.com/material-components/material-components-web/commit/1152b8d))\n\n\n### BREAKING CHANGES\n\n* Please update `mdc-toolbar__icon--menu` to `mdc-toolbar__menu-icon`\n\n\n\n<a name=\"0.22.0\"></a>\n# [0.22.0](https://github.com/material-components/material-components-web/compare/v0.21.1...v0.22.0) (2017-10-02)\n\n\n### Bug Fixes\n\n* **button:** Default to primary color ([#1356](https://github.com/material-components/material-components-web/issues/1356)) ([0b808b8](https://github.com/material-components/material-components-web/commit/0b808b8))\n* **button:** Ignore CSS variables in Edge for mdc-button-container-fill-color ([5c55e92](https://github.com/material-components/material-components-web/commit/5c55e92))\n* **checkbox:** Ignore CSS variables in Edge for __background::before ([67129e9](https://github.com/material-components/material-components-web/commit/67129e9))\n* **demos:** Update misleading textfield validation message ([#1377](https://github.com/material-components/material-components-web/issues/1377)) ([99c9596](https://github.com/material-components/material-components-web/commit/99c9596))\n* **fab:** Add hover/focus elevation ([#1331](https://github.com/material-components/material-components-web/issues/1331)) ([cb9995d](https://github.com/material-components/material-components-web/commit/cb9995d))\n* **fab:** Ignore CSS variables in Edge for mdc-fab-container-color ([bf0f722](https://github.com/material-components/material-components-web/commit/bf0f722))\n* **menu:** Only show scrollbar when menu item is too big  ([fe7d4c8](https://github.com/material-components/material-components-web/commit/fe7d4c8)), closes [#1247](https://github.com/material-components/material-components-web/issues/1247)\n* **radio:** Ignore CSS variables in Edge for __background::before ([a7e2db4](https://github.com/material-components/material-components-web/commit/a7e2db4))\n\n\n### Features\n\n* **textfield:** Implement updated UX states for text fields ([#998](https://github.com/material-components/material-components-web/issues/998)) ([45c6cf6](https://github.com/material-components/material-components-web/commit/45c6cf6))\n* **theme:** Add Edge opt-out option to mdc-theme-prop ([262e17b](https://github.com/material-components/material-components-web/commit/262e17b))\n\n\n### BREAKING CHANGES\n\n* **textfield:** DOM change to add a bottom line element. Adapter API changes to consolidate event handlers. Renamed multi-line text field to textarea.\n\n\n\n<a name=\"0.21.1\"></a>\n## [0.21.1](https://github.com/material-components/material-components-web/compare/v0.21.0...v0.21.1) (2017-09-20)\n\n\n### Bug Fixes\n\n* **fab:** Fix transitions by importing correct mdc-animation resource (#1325) ([e005460](https://github.com/material-components/material-components-web/commit/e005460)), closes [#1325](https://github.com/material-components/material-components-web/issues/1325)\n* **toolbar:** Fix toolbar padding on desktop and mobile (#1327) ([9b79871](https://github.com/material-components/material-components-web/commit/9b79871)), closes [#1327](https://github.com/material-components/material-components-web/issues/1327)\n\n\n\n<a name=\"0.21.0\"></a>\n# [0.21.0](https://github.com/material-components/material-components-web/compare/v0.20.0...v0.21.0) (2017-09-18)\n\n\n### Bug Fixes\n\n* **ripple:** Move feature detect CSS to mixins (#1302) ([628b8c4](https://github.com/material-components/material-components-web/commit/628b8c4))\n* **slider:** Add two test cases to cover give default value to step for discrete slider (#1262) ([38c40f7](https://github.com/material-components/material-components-web/commit/38c40f7))\n* **slider:** Set default step value directly when initialize (#1173) (#1245) ([148f510](https://github.com/material-components/material-components-web/commit/148f510)), closes [#1173](https://github.com/material-components/material-components-web/issues/1173)\n* **snackbar:** Drop mdc-button from snackbar's dependency (#1292) ([be502c8](https://github.com/material-components/material-components-web/commit/be502c8))\n* **snackbar:** Fix lint error (#1303) ([648f985](https://github.com/material-components/material-components-web/commit/648f985)), closes [#1303](https://github.com/material-components/material-components-web/issues/1303)\n\n\n### Chores\n\n* **animation:** Removing mixins and CSS classes (#1242) ([3f8c49b](https://github.com/material-components/material-components-web/commit/3f8c49b))\n* **fab:** Remove the mdc-fab--plain modifier (#1249) ([f561560](https://github.com/material-components/material-components-web/commit/f561560)), closes [#1143](https://github.com/material-components/material-components-web/issues/1143)\n\n\n### Code Refactoring\n\n* **button:** Remove primary and accent modifier (#1270) ([3e3c869](https://github.com/material-components/material-components-web/commit/3e3c869))\n\n\n### Features\n\n* **auto-init:** Fire event on mdcAutoInit complete (#1012) ([08b5a32](https://github.com/material-components/material-components-web/commit/08b5a32)), closes [#954](https://github.com/material-components/material-components-web/issues/954)\n* **button:** Add mdc-button-filled-accessible mixin (#1256) ([d37132f](https://github.com/material-components/material-components-web/commit/d37132f))\n* **button:** create theme mixin for button (#1244) ([5266776](https://github.com/material-components/material-components-web/commit/5266776))\n* **button:** Move disabled style into private base mixin  (#1255) ([2336128](https://github.com/material-components/material-components-web/commit/2336128))\n* **button:** Support icon in button (#1281) ([b727c14](https://github.com/material-components/material-components-web/commit/b727c14))\n* **fab:** Add mdc-fab-accessible mixin (#1238) ([4ed8b5e](https://github.com/material-components/material-components-web/commit/4ed8b5e))\n* **fab:** Implement enter/exit transitions (#1241) ([6d6ba4a](https://github.com/material-components/material-components-web/commit/6d6ba4a))\n* **tabs:** Publicize MDCTabBarScrollerFoundation#scrollToTabAtIndex (#1267) ([a8f7216](https://github.com/material-components/material-components-web/commit/a8f7216))\n\n\n### BREAKING CHANGES\n\n* **snackbar:** Removed the dependency of mdc-button from DOM structure of snackbar.\n* **button:** Remove support of `mdc-button--primary` and `mdc-button--accent` modifier classes. For custom and theme button implementation, use button mixins instead. See `demos.scss` for details.\n* **fab:** Removes mdc-fab--plain, please update your code to use mdc-fab-accessible mixin instead.\n* **animation:** Removes mdc-animation mixins and CSS classes, please reference mdc-animation Sass variables directly.\n\n\n\n<a name=\"0.20.0\"></a>\n# [0.20.0](https://github.com/material-components/material-components-web/compare/v0.19.0...v0.20.0) (2017-09-05)\n\n\n### Bug Fixes\n\n* **demos:** Fix trailing whitespace and mixed tabs in dialog demo (#1200) ([e1f5d53](https://github.com/material-components/material-components-web/commit/e1f5d53)), closes [#1200](https://github.com/material-components/material-components-web/issues/1200)\n* **demos:** Update first tab bar's layout when toggling RTL (#1204) ([cdd367e](https://github.com/material-components/material-components-web/commit/cdd367e))\n* **dialog:** Fix z-index & wrong CSS (#1094) ([88b7167](https://github.com/material-components/material-components-web/commit/88b7167)), closes [#1094](https://github.com/material-components/material-components-web/issues/1094) [#1095](https://github.com/material-components/material-components-web/issues/1095) [#1096](https://github.com/material-components/material-components-web/issues/1096)\n* **ripple:** Avoid errors in feature-detect within hidden iframes in Firefox (#1216) ([adbcce2](https://github.com/material-components/material-components-web/commit/adbcce2))\n* **ripple:** Don't create dynamic stylesheet for Edge feature-detect (#1206) ([81523a1](https://github.com/material-components/material-components-web/commit/81523a1))\n\n\n### Features\n\n* **button:** Implement stroked button (#1194) ([56bf37d](https://github.com/material-components/material-components-web/commit/56bf37d)), closes [#987](https://github.com/material-components/material-components-web/issues/987)\n* **fab:** Remove disabled styles (#1198) ([959d332](https://github.com/material-components/material-components-web/commit/959d332))\n* **textfield:** Add valid setter, so clients can set custom validity ([cb17052](https://github.com/material-components/material-components-web/commit/cb17052)), closes [#1018](https://github.com/material-components/material-components-web/issues/1018)\n* **theme:** `mdc-theme-prop` accepts literal color values (#1129) ([e47f3e6](https://github.com/material-components/material-components-web/commit/e47f3e6))\n* **theme:** Luminance-aware light/dark tonal variants (#1131) ([90e7556](https://github.com/material-components/material-components-web/commit/90e7556))\n\n\n### BREAKING CHANGES\n\n* **fab:** Removes styles for disabled FABs, as FABs were not designed to be disabled.\n\n\n\n<a name=\"0.19.0\"></a>\n# [0.19.0](https://github.com/material-components/material-components-web/compare/v0.18.1...v0.19.0) (2017-08-25)\n\n\n### Bug Fixes\n\n* **ripple:** Revert #1098 to fix bounded ripples (#1183) ([5769a7b](https://github.com/material-components/material-components-web/commit/5769a7b)), closes [#1183](https://github.com/material-components/material-components-web/issues/1183)\n\n\n### Features\n\n* **button:** implement unelevated button (#1157) ([3cca7ef](https://github.com/material-components/material-components-web/commit/3cca7ef))\n\n\n\n<a name=\"0.18.1\"></a>\n## [0.18.1](https://github.com/material-components/material-components-web/compare/v0.18.0...v0.18.1) (2017-08-24)\n\n\n### Bug Fixes\n\n* **button:** Restore order of disabled styles (#1176) ([6ffed49](https://github.com/material-components/material-components-web/commit/6ffed49))\n* **demos:** Fix button demo update from #1176 to work in IE 11 (#1178) ([dadc597](https://github.com/material-components/material-components-web/commit/dadc597)), closes [#1176](https://github.com/material-components/material-components-web/issues/1176) [#1178](https://github.com/material-components/material-components-web/issues/1178)\n* **ripple:** Correct unbounded ripple diameter (#1098) ([0f1ca35](https://github.com/material-components/material-components-web/commit/0f1ca35)), closes [#1067](https://github.com/material-components/material-components-web/issues/1067)\n* **textfield:** Add left and right margin to helptext ([3a24bca](https://github.com/material-components/material-components-web/commit/3a24bca))\n\n\n\n<a name=\"0.18.0\"></a>\n# [0.18.0](https://github.com/material-components/material-components-web/compare/v0.17.0...v0.18.0) (2017-08-21)\n\n\n### Bug Fixes\n\n* Make CSS custom properties compatible with sass-spec 3.5 (#1076) ([264c154](https://github.com/material-components/material-components-web/commit/264c154)), closes [#1075](https://github.com/material-components/material-components-web/issues/1075)\n* **button:** Un-break the build by referencing `secondary` theme prop instead of `accent` (#1156) ([d3ff8fc](https://github.com/material-components/material-components-web/commit/d3ff8fc))\n* **demos:** Convert NodeList to array for forEach; avoid fat arrow (#1073) ([c6a1f2a](https://github.com/material-components/material-components-web/commit/c6a1f2a))\n* **dialog:** Layout footer buttons' ripples after open transition ends (#1087) ([c51fcd5](https://github.com/material-components/material-components-web/commit/c51fcd5))\n* **grid-list:** Gracefully degrade tile width. (#1136) ([97575c3](https://github.com/material-components/material-components-web/commit/97575c3))\n* **layout-grid:** Enable setting max width of the layout grid (#1086) ([98ba98c](https://github.com/material-components/material-components-web/commit/98ba98c)), closes [#1085](https://github.com/material-components/material-components-web/issues/1085)\n* **snackbar:** Stop queued data from modifying current data (#1084) ([eb35255](https://github.com/material-components/material-components-web/commit/eb35255)), closes [#1083](https://github.com/material-components/material-components-web/issues/1083)\n* **toolbar:** Wrong placement of last icon when there is a menu (#1068) ([11a8ff3](https://github.com/material-components/material-components-web/commit/11a8ff3)), closes [#1026](https://github.com/material-components/material-components-web/issues/1026)\n\n\n### Features\n\n* **button:** Update text and raise button baseline styles (#1074) ([09a763a](https://github.com/material-components/material-components-web/commit/09a763a))\n* **infrastructure:** Add env var to emit CSS files directly instead of wrapping them in JS (#1133) ([5f6f829](https://github.com/material-components/material-components-web/commit/5f6f829))\n* **infrastructure:** Display webpack-dev-server build progress (#1132) ([0754628](https://github.com/material-components/material-components-web/commit/0754628))\n* **theme:** Add light/dark vars for primary/secondary color; rename `accent` to `secondary` (#1116) ([2314ad5](https://github.com/material-components/material-components-web/commit/2314ad5))\n* **theme:** Add SCSS variables for Material Design color palette (#1117) ([6c26958](https://github.com/material-components/material-components-web/commit/6c26958))\n\n\n### Performance Improvements\n\n* **infrastructure:** Cut build time in half with opt-in env var (#1128) ([e36639f](https://github.com/material-components/material-components-web/commit/e36639f))\n\n\n### BREAKING CHANGES\n\n* **dialog:** Adds a new adapter method, layoutFooterRipples, to allow the foundation to\ncommunicate with ripples when the dialog's opening transition ends.\n\n\n\n<a name=\"0.17.0\"></a>\n# [0.17.0](https://github.com/material-components/material-components-web/compare/v0.16.0...v0.17.0) (2017-08-07)\n\n\n### Bug Fixes\n\n* **dialog:** Dialog buttons should use primary color (#941) ([b4e8b5a](https://github.com/material-components/material-components-web/commit/b4e8b5a)), closes [#940](https://github.com/material-components/material-components-web/issues/940)\n* **ripple:** Feature-detect buggy Edge behavior for custom properties (#1041) ([5cc2115](https://github.com/material-components/material-components-web/commit/5cc2115))\n* **select:** menu positioning logic incorrect when select appears near viewport edge #671 (#680) ([874f043](https://github.com/material-components/material-components-web/commit/874f043))\n* **textfield:** Add font styles to input, remove from mdc wrapper (#908) ([a498a28](https://github.com/material-components/material-components-web/commit/a498a28))\n* **textfield:** Fix textfield input sizes  (#1016) ([e59ee21](https://github.com/material-components/material-components-web/commit/e59ee21)), closes [#1016](https://github.com/material-components/material-components-web/issues/1016) [#1002](https://github.com/material-components/material-components-web/issues/1002)\n\n\n### Features\n\n* **typography:** Add button style to typography (#1064) ([21c7a54](https://github.com/material-components/material-components-web/commit/21c7a54))\n\n\n\n<a name=\"0.16.0\"></a>\n# [0.16.0](https://github.com/material-components/material-components-web/compare/v0.15.0...v0.16.0) (2017-07-24)\n\n\n### Bug Fixes\n\n* **animation:** Update exit curves to match spec (#971) ([4844330](https://github.com/material-components/material-components-web/commit/4844330))\n* **button:** Add mdc-typography-base to button (#949) ([3b80525](https://github.com/material-components/material-components-web/commit/3b80525)), closes [#942](https://github.com/material-components/material-components-web/issues/942)\n* **card:** Correct text in a card to use text-primar-on-light (#931) ([e3966d9](https://github.com/material-components/material-components-web/commit/e3966d9)), closes [#930](https://github.com/material-components/material-components-web/issues/930)\n* **dialog:** allow click events to propagate (#869) ([ef7e540](https://github.com/material-components/material-components-web/commit/ef7e540)), closes [#794](https://github.com/material-components/material-components-web/issues/794)\n* **drawer:** Align open & close animations to spec (#976) ([b001aec](https://github.com/material-components/material-components-web/commit/b001aec)), closes [(#976](https://github.com/(/issues/976)\n* **drawer:** Temporary drawer is below toolbar (#925) ([cbc8436](https://github.com/material-components/material-components-web/commit/cbc8436))\n* **elevation:** Update _mixins.scss so Sass linter passes (#933) ([9e6623e](https://github.com/material-components/material-components-web/commit/9e6623e))\n* **list:** Correct list end detail padding (#909) ([d7aa726](https://github.com/material-components/material-components-web/commit/d7aa726)), closes [#904](https://github.com/material-components/material-components-web/issues/904)\n* **slider:** Set mdc-slider__thumb-container #user-select property to none (#968) ([b26b98c](https://github.com/material-components/material-components-web/commit/b26b98c))\n* **toolbar:** Add `pointer` for `icon` element (#974) ([830259c](https://github.com/material-components/material-components-web/commit/830259c))\n\n\n\n<a name=\"0.15.0\"></a>\n# [0.15.0](https://github.com/material-components/material-components-web/compare/v0.13.0...v0.15.0) (2017-07-10)\n\n\n### Bug Fixes\n\n* **base:** Fix compiler warnings (#788) ([56d8fff](https://github.com/material-components/material-components-web/commit/56d8fff)), closes [(#788](https://github.com/(/issues/788)\n* **button:** Sets text on raised buttons on dark theme to text-primary-on-primary (#853) ([49170d6](https://github.com/material-components/material-components-web/commit/49170d6))\n* **fab:** FAB z-index is wrong (#888) ([3812fbd](https://github.com/material-components/material-components-web/commit/3812fbd)), closes [#872](https://github.com/material-components/material-components-web/issues/872)\n* **infrastructure:** Downgrade closure-compiler (#915) ([5b10478](https://github.com/material-components/material-components-web/commit/5b10478))\n* **infrastructure:** Harden closure declaration source rewriting (#835) ([7c6da3a](https://github.com/material-components/material-components-web/commit/7c6da3a))\n* **layout-grid:** use correct selector for size specific column span (#862) ([0e2a0df](https://github.com/material-components/material-components-web/commit/0e2a0df))\n* **ripple:** Remove fg deactivation class when animation finishes ([4985b4b](https://github.com/material-components/material-components-web/commit/4985b4b))\n* **toolbar:** Adjusting sibling elements on mobile landscape (#846) ([798091f](https://github.com/material-components/material-components-web/commit/798091f))\n* **toolbar:** Fix toolbar margin for desktop (#887) ([0a8a75d](https://github.com/material-components/material-components-web/commit/0a8a75d)), closes [(#887](https://github.com/(/issues/887) [#786](https://github.com/material-components/material-components-web/issues/786)\n* **toolbar:** Increase fixed toolbar's z-index from 1 to 4(#897) ([78946c4](https://github.com/material-components/material-components-web/commit/78946c4)), closes [4(#897](https://github.com/4(/issues/897) [#834](https://github.com/material-components/material-components-web/issues/834)\n\n### Features\n\n* **checkbox:** Annotate mdc-checkbox for closure (#867) ([a6956b8](https://github.com/material-components/material-components-web/commit/a6956b8)), closes [#334](https://github.com/material-components/material-components-web/issues/334)\n* **framework-examples:** Add Vue continuous slider example (#827) ([6e0a8c9](https://github.com/material-components/material-components-web/commit/6e0a8c9))\n* **infrastructure:** Create script for that rewrites .scss imports (#831) ([bd0123b](https://github.com/material-components/material-components-web/commit/bd0123b))\n* **layout-grid:** Add fixed column width layout grid modifier. (#816) ([94d62ad](https://github.com/material-components/material-components-web/commit/94d62ad)), closes [(#816](https://github.com/(/issues/816) [#748](https://github.com/material-components/material-components-web/issues/748)\n* **layout-grid:** Implement layout grid alignment. (#885) ([1528ed7](https://github.com/material-components/material-components-web/commit/1528ed7)), closes [#749](https://github.com/material-components/material-components-web/issues/749)\n* **menu:** annotate mdc-menu for closure compiler ([b188d4f](https://github.com/material-components/material-components-web/commit/b188d4f)), closes [#339](https://github.com/material-components/material-components-web/issues/339)\n* **menu:** Export util (#824) ([7d0394b](https://github.com/material-components/material-components-web/commit/7d0394b)), closes [#823](https://github.com/material-components/material-components-web/issues/823)\n* **ripple:** Add layout() method to component ([ef99024](https://github.com/material-components/material-components-web/commit/ef99024))\n* **ripple:** Annotate mdc-ripple for closure (#856) ([f0f0a86](https://github.com/material-components/material-components-web/commit/f0f0a86)), closes [#341](https://github.com/material-components/material-components-web/issues/341)\n* **ripple:** export util from @material/ripple (#751) ([27c172a](https://github.com/material-components/material-components-web/commit/27c172a)), closes [#253](https://github.com/material-components/material-components-web/issues/253)\n* **ripple:** Reduce the fade out time for foreground ripple effect ([9394b5f](https://github.com/material-components/material-components-web/commit/9394b5f))\n* **slider:** Implement discrete slider and discrete slider with marker (#842) ([e681aae](https://github.com/material-components/material-components-web/commit/e681aae)), closes [#25](https://github.com/material-components/material-components-web/issues/25)\n* **snackbar:** Implement full-featured Snackbar component (#852) ([4be947f](https://github.com/material-components/material-components-web/commit/4be947f))\n* **textfield:** Implement text field boxes ([cfa3737](https://github.com/material-components/material-components-web/commit/cfa3737)), closes [#673](https://github.com/material-components/material-components-web/issues/673)\n\n\n### BREAKING CHANGES\n\n* snackbar: Adds adapter methods to capture blur, focus, and interaction events\n\n\n\n<a name=\"0.14.0\"></a>\n# [0.14.0](https://github.com/material-components/material-components-web/compare/v0.13.0...v0.14.0) (2017-06-26)\n\n\n### Bug Fixes\n\n* **base:** Fix compiler warnings (#788) ([56d8fff](https://github.com/material-components/material-components-web/commit/56d8fff)), closes [(#788](https://github.com/(/issues/788)\n* **button:** Sets text on raised buttons on dark theme to text-primary-on-primary (#853) ([49170d6](https://github.com/material-components/material-components-web/commit/49170d6))\n* **infrastructure:** Harden closure declaration source rewriting (#835) ([7c6da3a](https://github.com/material-components/material-components-web/commit/7c6da3a))\n* **ripple:** Remove fg deactivation class when animation finishes ([4985b4b](https://github.com/material-components/material-components-web/commit/4985b4b))\n* **toolbar:** Adjusting sibling elements on mobile landscape (#846) ([798091f](https://github.com/material-components/material-components-web/commit/798091f))\n\n### Features\n\n* **infrastructure:** Create script for that rewrites .scss imports (#831) ([bd0123b](https://github.com/material-components/material-components-web/commit/bd0123b))\n* **layout-grid:** Add fixed column width layout grid modifier. (#816) ([94d62ad](https://github.com/material-components/material-components-web/commit/94d62ad)), closes [(#816](https://github.com/(/issues/816) [#748](https://github.com/material-components/material-components-web/issues/748)\n* **menu:** annotate mdc-menu for closure compiler ([b188d4f](https://github.com/material-components/material-components-web/commit/b188d4f)), closes [#339](https://github.com/material-components/material-components-web/issues/339)\n* **menu:** Export util (#824) ([7d0394b](https://github.com/material-components/material-components-web/commit/7d0394b)), closes [#823](https://github.com/material-components/material-components-web/issues/823)\n* **ripple:** Add layout() method to component ([ef99024](https://github.com/material-components/material-components-web/commit/ef99024))\n* **ripple:** export util from @material/ripple (#751) ([27c172a](https://github.com/material-components/material-components-web/commit/27c172a)), closes [#253](https://github.com/material-components/material-components-web/issues/253)\n* **ripple:** Reduce the fade out time for foreground ripple effect ([9394b5f](https://github.com/material-components/material-components-web/commit/9394b5f))\n* **textfield:** Implement text field boxes ([cfa3737](https://github.com/material-components/material-components-web/commit/cfa3737)), closes [#673](https://github.com/material-components/material-components-web/issues/673)\n\n\n\n<a name=\"0.13.0\"></a>\n# [0.13.0](https://github.com/material-components/material-components-web/compare/v0.12.0...v0.13.0) (2017-06-12)\n\n\n### Bug Fixes\n\n* **demos:** Fix non-unique ids in radio demo (#792) ([cada61a](https://github.com/material-components/material-components-web/commit/cada61a)), closes [(#792](https://github.com/(/issues/792)\n* **dialog:** Add 8dp padding for side-by-side buttons in RTL (#752) ([07f4ee7](https://github.com/material-components/material-components-web/commit/07f4ee7)), closes [#750](https://github.com/material-components/material-components-web/issues/750)\n* **dialog:** Incorrect Text (#744) ([d38756f](https://github.com/material-components/material-components-web/commit/d38756f))\n* **drawer:** Prevent scrolling on body when temporary drawer open (#807) ([8686d85](https://github.com/material-components/material-components-web/commit/8686d85))\n* **infrastructure:** set Travis CI node version to 7 (#758) ([75ddf28](https://github.com/material-components/material-components-web/commit/75ddf28))\n* **menu:** Add disabled list items to menu (#780) ([ef44d3d](https://github.com/material-components/material-components-web/commit/ef44d3d))\n* **menu:** Fix wrong menu styling properties (#789) ([76714f2](https://github.com/material-components/material-components-web/commit/76714f2)), closes [(#789](https://github.com/(/issues/789)\n* **toolbar:** Improve layout and scrolling logic of items in toolbars (#764) ([f0ff94d](https://github.com/material-components/material-components-web/commit/f0ff94d))\n* **toolbar:** rename ambiguous identifiers (#765) (#773) ([0471f1f](https://github.com/material-components/material-components-web/commit/0471f1f))\n\n### Features\n\n* **layout-grid:** make layout grid nestable (#804) ([dec20ab](https://github.com/material-components/material-components-web/commit/dec20ab))\n* **layout-grid:** parameterize layout grid (#795) ([99d2bbd](https://github.com/material-components/material-components-web/commit/99d2bbd))\n* **slider:** Implement continuous slider component (#781) ([a9d46ab](https://github.com/material-components/material-components-web/commit/a9d46ab))\n\n\n### BREAKING CHANGES\n\n* drawer: Adapter API for temporary drawers contains two new methods: `addBodyClass` and `removeBodyClass`.\n* layout-grid: Add mdc-layout-grid__inner as a wrapper for mdc-layout-grid__cell. All existing implementation need to add this extra wrapper layer after upgrade to the latest layout grid.\n\nThis is for proper alignment both in nesting and removing the restriction that margin need to be at least half size of the padding.\n* menu: Rename symmetric registerDocumentClickHandler/deregisterDocumentClickHandler adapter methods to registerBodyClickHandler/deregisterBodyClickHandler\n* layout-grid: the css custom properties for customize margins and gutters are exposed in format of `mdc-layout-grid-margin-#{$size}`, where valid sizes are `desktop`, `tablet` and `phone`. The old name `mdc-layout-grid-margin` and `mdc-layout-grid-gutter` is no longer available in the new version. Sass variables change from single numeric value to Sass map to accomendate margins and gutters for different screens as well. Visually, the default value of margins and gutters change from 16px to 24px on desktop, while remain the same on tablet and mobile.\n* toolbar: The adapter method `getFlexibleRowElementOffsetHeight` has been _renamed_ to `getFirstRowElementOffsetHeight`. Please update your code accordingly.\n\n\n\n<a name=\"0.12.1\"></a>\n## [0.12.1](https://github.com/material-components/material-components-web/compare/v0.12.0...v0.12.1) (2017-05-31)\n\n\n### Bug Fixes\n\n* Include the JavaScript for linear-progress  (#760) (#759) ([94e2221](https://github.com/material-components/material-components-web/commit/94e2221)), closes [#759](https://github.com/material-components/material-components-web/issues/759)\n\n\n<a name=\"0.12.0\"></a>\n# [0.12.0](https://github.com/material-components/material-components-web/compare/v0.11.1...v0.12.0) (2017-05-30)\n\n\n### Bug Fixes\n\n* Add MDCSelectFoundation.strings and missing tests (#698) (#699) ([8a21b4a](https://github.com/material-components/material-components-web/commit/8a21b4a)), closes [#698](https://github.com/material-components/material-components-web/issues/698)\n* **card:** Add rounded corners to card component (#656) ([c342724](https://github.com/material-components/material-components-web/commit/c342724))\n* **checkbox:** Fix radio button stretching in IE11 (#640) ([34c1198](https://github.com/material-components/material-components-web/commit/34c1198)), closes [(#640](https://github.com/(/issues/640) [#632](https://github.com/material-components/material-components-web/issues/632)\n* **demos:** #633 IE11 incorrect layout in hero section (#636) ([b3b4173](https://github.com/material-components/material-components-web/commit/b3b4173)), closes [#633](https://github.com/material-components/material-components-web/issues/633)\n* **demos:** Fix misaligned title in Typography Demo (#625) ([d529094](https://github.com/material-components/material-components-web/commit/d529094)), closes [(#625](https://github.com/(/issues/625)\n* **dialog:** Add 8px of margin between side-by-side buttons in MDC Dialog (#681) ([4bb620e](https://github.com/material-components/material-components-web/commit/4bb620e))\n* **dialog:** Closing Animations not running #433 (#504) ([2b03c6b](https://github.com/material-components/material-components-web/commit/2b03c6b))\n* **drawer:** fix RTL closed position of temporary drawer (#592) ([a0c6d2d](https://github.com/material-components/material-components-web/commit/a0c6d2d)), closes [(#592](https://github.com/(/issues/592) [#551](https://github.com/material-components/material-components-web/issues/551)\n* **drawer:** Reconcile permanent drawers and large content (#639) ([25414ac](https://github.com/material-components/material-components-web/commit/25414ac))\n* **drawer:** Rename drawer slidable _mixins.css and _variables.css to .scss files (#691) ([d3dd2d4](https://github.com/material-components/material-components-web/commit/d3dd2d4))\n* **linear-progress:** Fix version number of linear progress indicator (#716) ([7942505](https://github.com/material-components/material-components-web/commit/7942505)), closes [(#716](https://github.com/(/issues/716)\n* **list:** Properly position interactive list items in RTL context (#746) ([ae4e87f](https://github.com/material-components/material-components-web/commit/ae4e87f)), closes [#725](https://github.com/material-components/material-components-web/issues/725)\n* **menu:** add 8px top and bottom padding (#718) ([1d71a46](https://github.com/material-components/material-components-web/commit/1d71a46)), closes [#708](https://github.com/material-components/material-components-web/issues/708)\n\n### Features\n\n* **base:** Annotate mdc-base for closure (#730) ([e21ec90](https://github.com/material-components/material-components-web/commit/e21ec90)), closes [#331](https://github.com/material-components/material-components-web/issues/331)\n* **linear-progress:** Implement Linear Progress indicators (#672) ([c47d1c2](https://github.com/material-components/material-components-web/commit/c47d1c2))\n* **snackbar:** Added dismissOnAction option to show method (#459) ([1d2d800](https://github.com/material-components/material-components-web/commit/1d2d800))\n* **tabs:** Implement a tab bar scroller component (#689) ([6c1043e](https://github.com/material-components/material-components-web/commit/6c1043e))\n\n### Performance Improvements\n\n* **ripple:** Use passive event listeners on adapter instantiation (#649) ([3dd9a13](https://github.com/material-components/material-components-web/commit/3dd9a13)), closes [#629](https://github.com/material-components/material-components-web/issues/629)\n\n\n### BREAKING CHANGES\n\n* dialog: -  Dialogs do not require a style=\"visibility:hidden\" attribute in html.\n-  registerTransitionEndHandler, deregisterTransitionEndHandler, and isDialog methods must be implemented by the adapter\n\n\n\n<a name=\"0.11.1\"></a>\n## [0.11.1](https://github.com/material-components/material-components-web/compare/v0.11.0...v0.11.1) (2017-05-17)\n\n\n### Bug Fixes\n\n* **tabs:** Use proper import for animation (#651) ([c3cb0e0](https://github.com/material-components/material-components-web/commit/c3cb0e0))\n\n\n\n<a name=\"0.11.0\"></a>\n# [0.11.0](https://github.com/material-components/material-components-web/compare/v0.10.0...v0.11.0) (2017-05-15)\n\n\n### Bug Fixes\n\n* **drawer:** Always remove overlay when drawer is swiped to close (#555) ([95dbcd0](https://github.com/material-components/material-components-web/commit/95dbcd0)), closes [(#555](https://github.com/(/issues/555)\n* **infrastructure:** Disable webpack-dev-server host checking (#571) ([023c851](https://github.com/material-components/material-components-web/commit/023c851))\n* **infrastructure:** update stylefmt command to the new params and format (#573) ([c54a797](https://github.com/material-components/material-components-web/commit/c54a797))\n* **menu:** Add z-index to MDC Menu to correct stacking related issue (#615) ([01c6ca5](https://github.com/material-components/material-components-web/commit/01c6ca5))\n* **ripple:** Ripple should not activate on disabled label click (#532) ([7cc3dc8](https://github.com/material-components/material-components-web/commit/7cc3dc8))\n* **tabs:** Typo in package.json ([c031d83](https://github.com/material-components/material-components-web/commit/c031d83))\n* **textfield:** Add badInput validity check to textfield (#570) ([e80fe7d](https://github.com/material-components/material-components-web/commit/e80fe7d))\n* **textfield:** Make bar respect invalid styling (#585) ([3e11d33](https://github.com/material-components/material-components-web/commit/3e11d33))\n\n### Features\n\n* **card:** Improve RTL support in Cards (#545) ([398c883](https://github.com/material-components/material-components-web/commit/398c883))\n* **tabs:** Implement a tab component (#581) ([0c00d3f](https://github.com/material-components/material-components-web/commit/0c00d3f))\n\n\n\n<a name=\"0.10.0\"></a>\n# [0.10.0](https://github.com/material-components/material-components-web/compare/v0.9.1...v0.10.0) (2017-05-01)\n\n\n### Bug Fixes\n\n* **checkbox:** Add --disabled modifier to checkbox root element to prevent hover state (#533) ([eb51e32](https://github.com/material-components/material-components-web/commit/eb51e32))\n* **drawer:** Remove -16px left positioning for interactive list items (#550) ([9229e0b](https://github.com/material-components/material-components-web/commit/9229e0b)), closes [#526](https://github.com/material-components/material-components-web/issues/526)\n* **radio:** Center align radio box (#538) ([83d1815](https://github.com/material-components/material-components-web/commit/83d1815))\n* **select:** Nest list-divider style in mdc-select declaration (#516) ([a3d2928](https://github.com/material-components/material-components-web/commit/a3d2928))\n* **toolbar:** Prevent cut-offs of the toolbar section content (#540) ([4affc5c](https://github.com/material-components/material-components-web/commit/4affc5c))\n\n### Features\n\n* **animation:** Annotate for closure compiler ([f28f465](https://github.com/material-components/material-components-web/commit/f28f465)), closes [#332](https://github.com/material-components/material-components-web/issues/332)\n* **drawer:** Emit open/close events on slidable drawers (#530) ([be85871](https://github.com/material-components/material-components-web/commit/be85871)), closes [(#530](https://github.com/(/issues/530)\n* **ripple:** Move getMatchesProperty into createAdapter for Ripple. (#469) (#523) ([74d6e6b](https://github.com/material-components/material-components-web/commit/74d6e6b)), closes [#523](https://github.com/material-components/material-components-web/issues/523)\n* **toolbar:** Implement flexible and waterfall toolbar. (#448) (#499) ([43cef6c](https://github.com/material-components/material-components-web/commit/43cef6c))\n\n\n\n<a name=\"0.9.1\"></a>\n## [0.9.1](https://github.com/material-components/material-components-web/compare/v0.9.0...v0.9.1) (2017-04-18)\n\n\n### Bug Fixes\n\n* **auto-init:** Register MDCPersistentDrawer (#528) ([bba6e3e](https://github.com/material-components/material-components-web/commit/bba6e3e)), closes [#527](https://github.com/material-components/material-components-web/issues/527)\n* **infrastructure:** correct reason why component is shown in summary table. (#519) ([f96a1ca](https://github.com/material-components/material-components-web/commit/f96a1ca))\n* **package:** Change scss file to use slash for comment. (#517) ([afec470](https://github.com/material-components/material-components-web/commit/afec470))\n\n\n\n<a name=\"0.9.0\"></a>\n# [0.9.0](https://github.com/material-components/material-components-web/compare/v0.8.0...v0.9.0) (2017-04-17)\n\n\n### Bug Fixes\n\n* **checkbox:** Prevent checkboxes and radios from changing size with multiline label (#497) ([2e1023c](https://github.com/material-components/material-components-web/commit/2e1023c))\n* **dialog:** Ensure isOpen() returns false when dialog is closed (#465) ([6abc3ee](https://github.com/material-components/material-components-web/commit/6abc3ee)), closes [(#465](https://github.com/(/issues/465)\n* **dialog:** Handle focus trapping correctly (#491) ([12bd03e](https://github.com/material-components/material-components-web/commit/12bd03e))\n* **grid-list:** Updates the grid-list's foundation to NOT center tile… (#467) ([a758519](https://github.com/material-components/material-components-web/commit/a758519))\n* **infrastructure:** Print the entire invalid git commit message. (#510) ([ea8f862](https://github.com/material-components/material-components-web/commit/ea8f862))\n* **list:** Update interactive list's with ripple-upgrade to be narrower (#468) ([c062319](https://github.com/material-components/material-components-web/commit/c062319)), closes [#463](https://github.com/material-components/material-components-web/issues/463)\n* **toolbar:** Make Toolbar accommodated very long section ([130246f](https://github.com/material-components/material-components-web/commit/130246f)), closes [#508](https://github.com/material-components/material-components-web/issues/508)\n\n### Features\n\n* **checkbox:** Add value property to the component and foundation. (#492) ([ff772ad](https://github.com/material-components/material-components-web/commit/ff772ad))\n* **drawer:** Implement persistent drawer (#488) ([79a2352](https://github.com/material-components/material-components-web/commit/79a2352))\n* **radio:** Add a value property to the component and foundation. (#490) ([279d3fd](https://github.com/material-components/material-components-web/commit/279d3fd))\n\n\n### BREAKING CHANGES\n\n* dialog: There are a few changes that need to be taken into\naccount for this commit:\n\n- Dialogs no longer require an `aria-hidden=\"true\"` attribute.\n- Dialogs _do_ require a `style=\"visibility:hidden\"` attribute for\n  correct first render.\n- `trapFocusOnSurface` and `untrapFocusOnSurface` methods must be\n  implemented for the adapter\n- `hasClass`, `setAttr`, `registerFocusTrappingHandler`,\n  `deregisterFocusTrappingHandler`, `numFocusableTargets`,\n  `setDialogFocusFirstTarget`, `setInitialFocus`,\n  `getFocusableElements`, `saveElementTabState`,\n  `restoreElementTabState`, `makeElementUntabbable`, `setBodyAttr`,\n  `rmBodyAttr`, `getFocusedTarget`, and `setFocusedTarget` have all been\n  removed from the adapter.\n- `applyPassive`, `saveElementTabState`, and `restoreElementTabState`\n  have all been removed from `mdcDialog.util`.\n* grid-list: Adds getNumberOfTiles to grid-list's adapter API. Please update adapters to implement getNumberOfTiles.\n\n\n\n<a name=\"0.8.0\"></a>\n# [0.8.0](https://github.com/material-components/material-components-web/compare/v0.7.0...v0.8.0) (2017-04-03)\n\n\n### Bug Fixes\n\n* **button:** Remove tap highlight when ripple is attached ([32f0b6b](https://github.com/material-components/material-components-web/commit/32f0b6b))\n* **dialog:** Center dialog on screen in all supported browsers (#413) (#415) ([c67a12f](https://github.com/material-components/material-components-web/commit/c67a12f))\n* **fab:** Ensure ripple styles take correct effect ([0bdf3ee](https://github.com/material-components/material-components-web/commit/0bdf3ee))\n* **framework-examples:** Fix VueJS lifecycle beforeDestroy hooks (#417) ([8bca925](https://github.com/material-components/material-components-web/commit/8bca925)), closes [(#417](https://github.com/(/issues/417) [#416](https://github.com/material-components/material-components-web/issues/416)\n* **framework-examples:** Fix VueJS snackbar example (#410) ([a1a91ac](https://github.com/material-components/material-components-web/commit/a1a91ac)), closes [(#410](https://github.com/(/issues/410) [#405](https://github.com/material-components/material-components-web/issues/405)\n* **select:** Fixing bug with select menu z-index (#460) ([d7784af](https://github.com/material-components/material-components-web/commit/d7784af)), closes [#432](https://github.com/material-components/material-components-web/issues/432)\n\n### Features\n\n* **drawer:** Export util methods (#423) ([1babd7c](https://github.com/material-components/material-components-web/commit/1babd7c)), closes [#422](https://github.com/material-components/material-components-web/issues/422)\n* **ripple:** Implement subset of improved interaction response guidelines (#419) ([046e337](https://github.com/material-components/material-components-web/commit/046e337)), closes [#190](https://github.com/material-components/material-components-web/issues/190)\n* **toolbar:** Improve toolbar to support multiple row. (#448) ([14ffe53](https://github.com/material-components/material-components-web/commit/14ffe53))\n\n\n### BREAKING CHANGES\n\n* toolbar: All existing toolbar need to add <div class=\"mdc-toolbar__row\">\nto properly align its contents.\n\n\n\n<a name=\"0.7.0\"></a>\n# [0.7.0](https://github.com/material-components/material-components-web/compare/v0.6.0...v0.7.0) (2017-03-20)\n\n\n### Bug Fixes\n\n* **infrastructure:** Update publishConfig.ignore to commands.publish.ignore. (#383) ([cc939ea](https://github.com/material-components/material-components-web/commit/cc939ea))\n\n### Features\n\n* **dialog:** Implement a dialog component (#395) ([413b54e](https://github.com/material-components/material-components-web/commit/413b54e))\n* **grid-list:** Implement mdc-grid-list (#47) (#359) ([5b84e73](https://github.com/material-components/material-components-web/commit/5b84e73))\n\n\n\n<a name=\"0.6.0\"></a>\n# [0.6.0](https://github.com/material-components/material-components-web/compare/v0.5.0...v0.6.0) (2017-03-06)\n\n\n### Bug Fixes\n\n* **checkbox:** Ensure correct positioning in RTL context (#381) ([e296032](https://github.com/material-components/material-components-web/commit/e296032)), closes [#375](https://github.com/material-components/material-components-web/issues/375)\n* **form-field:** Make gap btn control and label clickable (#373) ([61a65f6](https://github.com/material-components/material-components-web/commit/61a65f6)), closes [#371](https://github.com/material-components/material-components-web/issues/371)\n* **framework-examples:** Fix template syntax in VueJS example (#365) ([465a674](https://github.com/material-components/material-components-web/commit/465a674)), closes [(#365](https://github.com/(/issues/365)\n* **ripple:** Provide fallbacks for all custom properties (#367) ([d5873f6](https://github.com/material-components/material-components-web/commit/d5873f6))\n* **switch:** Remove checkbox references from SCSS (#352) ([ac88267](https://github.com/material-components/material-components-web/commit/ac88267)), closes [#322](https://github.com/material-components/material-components-web/issues/322)\n* **textfield:** Adjust labels when initializing pre-filled textfields ([f8d72ba](https://github.com/material-components/material-components-web/commit/f8d72ba)), closes [#300](https://github.com/material-components/material-components-web/issues/300)\n* **toolbar:** Correct class name for mdc-toolbar-fixed-adjust (#321) ([cd5238f](https://github.com/material-components/material-components-web/commit/cd5238f)), closes [#320](https://github.com/material-components/material-components-web/issues/320)\n\n### Features\n\n* **menu:** Move current time retrieval to adapter. ([4d0d587](https://github.com/material-components/material-components-web/commit/4d0d587))\n* **ripple:** Implement improved graceful degradation ([bfac404](https://github.com/material-components/material-components-web/commit/bfac404))\n* **select:** Add value retrieval mechanisms to JS API ([33d2008](https://github.com/material-components/material-components-web/commit/33d2008)), closes [#232](https://github.com/material-components/material-components-web/issues/232)\n\n\n### BREAKING CHANGES\n\n* select: **New adapter method:** `getValueForOptionAtIndex(index: string) => string`\nshould return the \"value\" of the option at the given index. Please add\nthis method to your adapter implementations.\n* menu: adapters have to implement the new `getAccurateTime`\nmethod.\n\n\n\n<a name=\"0.5.0\"></a>\n# [0.5.0](https://github.com/material-components/material-components-web/compare/v0.4.0...v0.5.0) (2017-02-21)\n\n\n### Bug Fixes\n\n* **base:** Ensure this.root_ is available within getDefaultFoundation() (#279) ([c637cb6](https://github.com/material-components/material-components-web/commit/c637cb6)), closes [#242](https://github.com/material-components/material-components-web/issues/242)\n* **checkbox:** Added box-sizing to component ([a7f6221](https://github.com/material-components/material-components-web/commit/a7f6221))\n* **checkbox:** Disable transitions when using mdc-checkbox-anim* classes (#285) ([3effc35](https://github.com/material-components/material-components-web/commit/3effc35)), closes [#205](https://github.com/material-components/material-components-web/issues/205)\n* **demos:** Fix missing whitespace in select demo (#262) ([8a14374](https://github.com/material-components/material-components-web/commit/8a14374)), closes [(#262](https://github.com/(/issues/262)\n* **drawer:** Fix Temporary Drawer on IE11 ([19ff4b7](https://github.com/material-components/material-components-web/commit/19ff4b7))\n* **icon-toggle:** Remove duplicate \"main\" property from package.json (#277) ([7f26bfc](https://github.com/material-components/material-components-web/commit/7f26bfc))\n* **scripts:** Ensure determine-pkg-versions outputs correct info (#261) ([1097e6f](https://github.com/material-components/material-components-web/commit/1097e6f))\n* **scripts:** Generate semver tag within post-release.sh (#263) ([82c3ffe](https://github.com/material-components/material-components-web/commit/82c3ffe))\n* **select:** Ensure disabled styles render correctly (#286) ([8d77853](https://github.com/material-components/material-components-web/commit/8d77853)), closes [#276](https://github.com/material-components/material-components-web/issues/276)\n* **textfield:** Fix \"colr\" typo of \"color\" property. (#316) ([6157b98](https://github.com/material-components/material-components-web/commit/6157b98)), closes [(#316](https://github.com/(/issues/316)\n* **toolbar:** Add z-index to fixed toolbars (#317) ([1916a81](https://github.com/material-components/material-components-web/commit/1916a81)), closes [(#317](https://github.com/(/issues/317) [#315](https://github.com/material-components/material-components-web/issues/315)\n* **webpack:** Fix tests unable to run ([1cd9e07](https://github.com/material-components/material-components-web/commit/1cd9e07))\n* **webpack:** Fix uglifyjs breaking and disable modules for webpack tree shaking to work ([c25d387](https://github.com/material-components/material-components-web/commit/c25d387))\n\n### Features\n\n* **button:** Add user-select: none; to button (#270) ([2b319dd](https://github.com/material-components/material-components-web/commit/2b319dd))\n* **form-field:** Make form field labels trigger input ripples. ([c441157](https://github.com/material-components/material-components-web/commit/c441157))\n* **toolbar:** Implement mdc-toolbar (#38) (#267) ([3ca957c](https://github.com/material-components/material-components-web/commit/3ca957c))\n* **npm-keywords:** Add keywords to components package.json files ([f3cc9ab](https://github.com/material-components/material-components-web/commit/f3cc9ab))\n* **ripple:** Add programmatic ripple activation/deactivation. ([acccc9e](https://github.com/material-components/material-components-web/commit/acccc9e))\n* **typography:** Add !default to variables ([23a0a12](https://github.com/material-components/material-components-web/commit/23a0a12))\n\n\n\n<a name=\"0.4.0\"></a>\n# [0.4.0](https://github.com/material-components/material-components-web/compare/v0.3.0...v0.4.0) (2017-02-06)\n\n\n### Bug Fixes\n\n* **button:** Add text-decoration: none to mdc-button to allow link styles (#210) ([eef6fe8](https://github.com/material-components/material-components-web/commit/eef6fe8))\n* **card:** Add bottom margin for 3x media in horizontal blocks (#207) ([2151bd4](https://github.com/material-components/material-components-web/commit/2151bd4))\n* **checkbox:** Ensure ripple is activated on keydown (#241) ([b661dae](https://github.com/material-components/material-components-web/commit/b661dae))\n* **checkbox:** Use correct animation end event type in adapter (#220) ([fd04c83](https://github.com/material-components/material-components-web/commit/fd04c83))\n* **demos:** Fix closing HTML tags in typography demo (#199) ([e53b11b](https://github.com/material-components/material-components-web/commit/e53b11b))\n* **demos:** Remove superfluous anchor tags for drawer demo (#223) ([7fa157c](https://github.com/material-components/material-components-web/commit/7fa157c))\n* **drawer:** Adds z-index to temporary drawer (#212) ([65b05bf](https://github.com/material-components/material-components-web/commit/65b05bf))\n* **icon-toggle:** Use correct fn signature for rmAttr adapter method (#216) ([c82d447](https://github.com/material-components/material-components-web/commit/c82d447))\n* **scripts:** Update release scripts for newest lerna version (#259) ([912f5da](https://github.com/material-components/material-components-web/commit/912f5da))\n\n### Features\n\n* **checkbox:** Add ripples to checkboxes (#206) ([8aa1c3d](https://github.com/material-components/material-components-web/commit/8aa1c3d))\n* **framework-examples:** Add ripple support to React checkbox example (#233) ([db6a6db](https://github.com/material-components/material-components-web/commit/db6a6db))\n* **layout-grid:** Add initial implementation of the layout grid. ([a2e3e04](https://github.com/material-components/material-components-web/commit/a2e3e04))\n* **ripple:** Implement improved origin point rules (#249) ([fc20d1a](https://github.com/material-components/material-components-web/commit/fc20d1a))\n* **ripple:** Implement new ripple sizing requirements (#244) ([f0d26e6](https://github.com/material-components/material-components-web/commit/f0d26e6)), closes [#187](https://github.com/material-components/material-components-web/issues/187)\n* **switch:** Implement css switch component (#235) ([625aa51](https://github.com/material-components/material-components-web/commit/625aa51))\n\n\n\n<a name=\"0.3.0\"></a>\n# [0.3.0](https://github.com/material-components/material-components-web/compare/v0.2.0...v0.3.0) (2017-01-23)\n\n\n### Bug Fixes\n\n* **button:** Show active button press feedback on iOS ([07279e2](https://github.com/material-components/material-components-web/commit/07279e2))\n* **demos:** Fix closing HTML tags in typography demo (#199) ([e53b11b](https://github.com/material-components/material-components-web/commit/e53b11b)), closes [(#199](https://github.com/(/issues/199)\n* **drawer:** Remove `numbers` import from temporary drawer. ([f77951e](https://github.com/material-components/material-components-web/commit/f77951e))\n* **fab:** Mdc web/fix misaligned icons mobile safari (#132) ([69397a6](https://github.com/material-components/material-components-web/commit/69397a6)), closes [(#132](https://github.com/(/issues/132)\n* **fab:** Show active button press feedback on iOS ([8e7bc5f](https://github.com/material-components/material-components-web/commit/8e7bc5f))\n* **framework-examples:** Fix Angular2 example (#123) ([781a0b4](https://github.com/material-components/material-components-web/commit/781a0b4)), closes [(#123](https://github.com/(/issues/123)\n* **framework-examples:** fix Aurelia example (#120) (#126) ([71f6162](https://github.com/material-components/material-components-web/commit/71f6162)), closes [(#120](https://github.com/(/issues/120) [(#126](https://github.com/(/issues/126) [#120](https://github.com/material-components/material-components-web/issues/120)\n* **framework-examples:** Fix React example (#121) ([03a4607](https://github.com/material-components/material-components-web/commit/03a4607)), closes [(#121](https://github.com/(/issues/121)\n* **framework-examples:** Fix VueJS example (#135) ([b79632d](https://github.com/material-components/material-components-web/commit/b79632d)), closes [(#135](https://github.com/(/issues/135)\n* **ripple:** Use correct start point for unbounded ripple expansion (#165) ([9c9ad82](https://github.com/material-components/material-components-web/commit/9c9ad82))\n* **scripts:** Make minor fixes to release scripts (and docs) (#164) ([9ba020c](https://github.com/material-components/material-components-web/commit/9ba020c)), closes [(#164](https://github.com/(/issues/164)\n* **scripts:** Update determine-pkg-versions to use new pkg names (#141) ([652a04a](https://github.com/material-components/material-components-web/commit/652a04a))\n* **select:** Prevent overflow on smaller screens (#122) ([fa926db](https://github.com/material-components/material-components-web/commit/fa926db)), closes [#112](https://github.com/material-components/material-components-web/issues/112)\n* **textfield:** Support native browser autocomplete on single-line text fields (#180) ([796d5e0](https://github.com/material-components/material-components-web/commit/796d5e0))\n\n### Features\n\n* **button:** Add ink ripple support ([7ef4d9a](https://github.com/material-components/material-components-web/commit/7ef4d9a))\n* **fab:** Add ink ripple support ([7460030](https://github.com/material-components/material-components-web/commit/7460030))\n* **list:** Add interactivity and ink ripple support to mdc-list-item (#191) ([ce0bbf6](https://github.com/material-components/material-components-web/commit/ce0bbf6))\n* **select:** Add multi-select styles to select component (#172) ([c78e7f4](https://github.com/material-components/material-components-web/commit/c78e7f4))\n\n\n### BREAKING CHANGES\n\n* textfield: Adapter API for textfields contains two new methods. `registerInputInputHandler` and `registerInputKeydownHandler`. To upgrade add these methods to your adapter.\n\n\n\n<a name=\"0.2.0\"></a>\n# [0.2.0](https://github.com/material-components/material-components-web/compare/v0.1.1...v0.2.0) (2017-01-09)\n\n\n### Bug Fixes\n\n* **drawer:** Remove `numbers` import from temporary drawer. ([f77951e](https://github.com/material-components/material-components-web/commit/f77951e))\n* **fab:** Mdc web/fix misaligned icons mobile safari (#132) ([69397a6](https://github.com/material-components/material-components-web/commit/69397a6)), closes [(#132](https://github.com/(/issues/132)\n* **framework-examples:** Fix Angular2 example (#123) ([781a0b4](https://github.com/material-components/material-components-web/commit/781a0b4)), closes [(#123](https://github.com/(/issues/123)\n* **framework-examples:** fix Aurelia example (#120) (#126) ([71f6162](https://github.com/material-components/material-components-web/commit/71f6162)), closes [(#120](https://github.com/(/issues/120) [(#126](https://github.com/(/issues/126) [#120](https://github.com/material-components/material-components-web/issues/120)\n* **framework-examples:** Fix React example (#121) ([03a4607](https://github.com/material-components/material-components-web/commit/03a4607)), closes [(#121](https://github.com/(/issues/121)\n* **framework-examples:** Fix VueJS example (#135) ([b79632d](https://github.com/material-components/material-components-web/commit/b79632d)), closes [(#135](https://github.com/(/issues/135)\n* **scripts:** Update determine-pkg-versions to use new pkg names (#141) ([652a04a](https://github.com/material-components/material-components-web/commit/652a04a))\n* **select:** Prevent overflow on smaller screens (#122) ([fa926db](https://github.com/material-components/material-components-web/commit/fa926db)), closes [#112](https://github.com/material-components/material-components-web/issues/112)\n\n\n### BREAKING CHANGES\n\n* fab: Button implementations in certain browsers such as Mobile Safari and IE11 do not adhere to flexbox rules. To center icons in all supported browsers, add a span element as a child of the button and give it a class of `mdc-fab__icon`\n\nexample:\n```html\n<button class=\"mdc-fab material-icons\">\n  <span class=\"mdc-fab__icon\">\n    favorite_border\n  </span>\n</button>\n```"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of\nexperience, education, socio-economic status, nationality, personal appearance,\nrace, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n*   Using welcoming and inclusive language\n*   Being respectful of differing viewpoints and experiences\n*   Gracefully accepting constructive criticism\n*   Focusing on what is best for the community\n*   Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n*   The use of sexualized language or imagery and unwelcome sexual attention or\n    advances\n*   Trolling, insulting/derogatory comments, and personal or political attacks\n*   Public or private harassment\n*   Publishing others' private information, such as a physical or electronic\n    address, without explicit permission\n*   Other conduct which could reasonably be considered inappropriate in a\n    professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, or to ban temporarily or permanently any\ncontributor for other behaviors that they deem inappropriate, threatening,\noffensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\nThis Code of Conduct also applies outside the project spaces when the Project\nSteward has a reasonable belief that an individual's behavior may have a\nnegative impact on the project or its community.\n\n## Conflict Resolution\n\nWe do not believe that all conflict is bad; healthy debate and disagreement\noften yield positive results. However, it is never okay to be disrespectful or\nto engage in behavior that violates the project’s code of conduct.\n\nIf you see someone violating the code of conduct, you are encouraged to address\nthe behavior directly with those involved. Many issues can be resolved quickly\nand easily, and this gives people more control over the outcome of their\ndispute. If you are unable to resolve the matter for any reason, or if the\nbehavior is threatening or harassing, report it. We are dedicated to providing\nan environment where participants feel welcome and safe.\n\nReports should be directed to the [Material Web Team](mailto:material-web-contact@google.com), the\nProject Steward(s) for Material Components Web. It is the Project Steward’s duty to\nreceive and address reported violations of the code of conduct. They will then\nwork with a committee consisting of representatives from the Open Source\nPrograms Office and the Google Open Source Strategy team. If for any reason you\nare uncomfortable reaching out to the Project Steward, please email\nopensource@google.com.\n\nWe will investigate every complaint, but you may not receive a direct response.\nWe will use our discretion in determining when and how to follow up on reported\nincidents, which may range from not taking action to permanent expulsion from\nthe project and project-sponsored spaces. We will notify the accused of the\nreport and provide them an opportunity to discuss it before any action is taken.\nThe identity of the reporter will be omitted from the details of the report\nsupplied to the accused. In potentially harmful situations, such as ongoing\nharassment or threats to anyone's safety, we may take action without notice.\n\n## Attribution\n\nThis Code of Conduct is adapted from the Contributor Covenant, version 1.4,\navailable at\nhttps://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to Material Components Web (MDC Web)\n\nWe'd love for you to contribute and make Material Components for the web even better than it is today!\nHere are the guidelines we'd like you to follow:\n\n- [Contributing to Material Components Web (MDC Web)](#contributing-to-material-components-web-mdc-web)\n  - [General Contributing Guidelines](#general-contributing-guidelines)\n  - [Development Process](#development-process)\n    - [Setting up your development environment](#setting-up-your-development-environment)\n    - [Building Components](#building-components)\n    - [Building MDC Web](#building-mdc-web)\n    - [Linting / Testing / Coverage Enforcement](#linting--testing--coverage-enforcement)\n      - [Running Tests across browsers](#running-tests-across-browsers)\n    - [Coding Style](#coding-style)\n    - [Submitting Pull Requests](#submitting-pull-requests)\n\n## General Contributing Guidelines\n\nThe Material Components contributing policies and procedures can be found in the main Material Components documentation repository’s [contributing page](https://github.com/material-components/material-components/blob/develop/CONTRIBUTING.md).\n\n## Development Process\n\nWe strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC Web codebase. Before beginning development, you may want to read through our overview on [architecture and best practices](./docs/code) to get a better understanding of our overall structure.\n\n### Setting up your development environment\n\nYou'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDC Web. We [test our builds](https://travis-ci.com/material-components/material-components-web) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.\n\n> **NOTE**: If you expect to commit updated or new dependencies, please ensure you are using npm 5, which will\n> also update `package-lock.json` correctly when you install or upgrade packages.\n\nOnce node is installed, simply clone our repo (or your fork of it) and run `npm install`\n\n```\ngit clone git@github.com:material-components/material-components-web.git  # or a path to your fork\ncd material-components-web && npm i\n```\n\n### Building Components\n\nEach component requires the following items in order to be complete:\n\n- An **Engineering Outline Document**, which should be linked to in a comment on the GitHub issue\n  where we're tracking the component. This way, the core team can review and sign off on the\n  outline doc. Outline docs should be signed off on _before_ submitting a PR.\n  Please [copy this google doc template](https://docs.google.com/document/d/1Kybm7XJDTy0KUcuMaw5bzirQNBsDqCPCae8U_ag_a1k/edit?usp=sharing) in order to make your outline.\n\n  We have found that enforcing an eng outline doc has allowed us to speed up development by\n  offering more informed feedback on component implementations. This results in components that\n  take into account all of the concepts MDC Web components should account for (RTL, a11y,\n  etc.) before they even reach the PR stage, meaning faster review and merge times :smile:.\n- A **foundation class** which is integrated into actual components\n- A **component class** using vanilla JS + SCSS\n- A **README.md** in its subdir which contains developer documentation on the component, including usage.\n- A **set of unit tests** within `packages/<mdc-component>/test/` with adequate coverage (which we enforce automatically).\n\nYou can find much more information with respect to building components within our [authoring components guide](./docs/authoring-components.md)\n\n### Building MDC Web\n\n```\nnpm run build # Cleans out build/ and builds unminified files for each MDC Web package\nnpm run build:min # Builds minified files for each MDC Web package\nnpm run dist # Runs both of the above commands sequentially\n```\n\n### Linting / Testing / Coverage Enforcement\n\n```\nnpm run lint:js # Lints javascript using eslint\nnpm run lint:css # Lints (S)CSS using stylelint\nnpm run lint # Runs both of the above commands in parallel\n\nnpm run fix:js # Runs eslint with the --fix option enabled\nnpm run fix:css # Runs stylefmt, which helps fix simple stylelint errors\nnpm run fix # Runs both of the above commands in parallel\n\nnpm run test:watch # Runs karma on Chrome, re-running when source files change\n\nnpm test # Lints all files, runs karma, runs typescript tests, and then runs coverage enforcement checks.\nnpm run test:unit # Only runs the karma tests\n```\n\n#### Running Tests across browsers\n\nIf you're making big changes or developing new components, we encourage you to be a good citizen and test your changes across browsers! A super simple way to do this is to use [sauce labs](https://saucelabs.com/), which is how we test our collaborator PRs on TravisCI:\n\n1. [Sign up](https://saucelabs.com/beta/signup) for a sauce labs account (choose \"Open Sauce\" as your selected plan; [it's free](https://saucelabs.com/opensauce/)!)\n2. [Download sauce connect](https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy) for your OS and make sure that the `bin` folder in the downloaded zip is somewhere on your `$PATH`.\n3. Navigate to your dashboard, scroll down to where it says \"Access Key\", and click \"Show\"\n4. Enter your password when prompted\n5. Copy your access key\n6. Run `SAUCE_USERNAME=<your-saucelabs-username> SAUCE_ACCESS_KEY=<your-saucelabs-access-key> npm test`\n\nThis will have karma run our unit tests across all browsers we support, and ensure your changes will not introduce regressions.\n\nAlternatively, you can run `npm run test:watch` and manually open browsers / use VMs / use emulators to test your changes.\n\n### Coding Style\n\nOur entire coding style is enforced automatically through the use of linters. Check out our [eslint config](https://github.com/material-components/material-components-web/blob/master/.eslintrc.yaml) (heavily influenced by [Google's Javascript Styleguide][js-style-guide]) as well as our [stylelint config][css-style-guide] (heavily annotated, with justifications for each rule) for further details.\n\n### Submitting Pull Requests\n\nWhen submitting PRs, make sure you're following our commit message conventions (which are the same as [angular's](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)); our `commit-msg` hook should automatically enforce this. We also support [commitizen](https://www.npmjs.com/package/commitizen), which you can\nuse to auto-format commit messages for you.\n\nWhen submitting PRs for large changes, be sure to include an adequate background in the description\nso that reviewers of the PR know what the changes entail at a high-level, the motivations for making\nthese changes, and what they affect.\n\nIf you've done some experimental work on your branch/fork and committed these via `git commit --no-verify`, you can rebase them into one correctly-formatted commit before submitting.\n\nFinally, it helps to make sure that your branch/fork is up to date with what's currently on master. You can ensure this by running `git pull --rebase origin master` on your branch.\n\n> **NOTE**: Please do _not merge_ master into your branch. _Always_ `pull --rebase` instead. This ensures a linear history by always putting the work you've done after the work that's already on master, regardless of the date in which those commits were made.\n\n[js-style-guide]: https://google.github.io/styleguide/jsguide.html\n[css-style-guide]: https://github.com/material-components/material-components-web/blob/master/.stylelintrc.yaml\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License\n\nCopyright (c) 2014-2020 Google, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[![Version](https://img.shields.io/npm/v/material-components-web.svg)](https://www.npmjs.com/package/material-components-web)\n[![Chat](https://img.shields.io/discord/259087343246508035.svg)](https://discord.gg/material-components)\n\nNote:\n\nThis project is no longer actively maintained. While automated updates may\nstill occur, the team will not be prioritizing new features or bug fixes, and\nthose updates will be turned off in the future.\n\nFor Angular users, our friends at Angular Material moved away from this\nlibrary, and they expect that this may actually allow for faster iteration - see\ntheir [blog post](https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b)\nfor more information.\n\n# Material Components for the web\n\nMaterial Components for the web helps developers execute [Material Design](https://www.material.io).\nDeveloped by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.\n\nMaterial Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.\n\nMaterial Components for the web is the successor to [Material Design Lite](https://getmdl.io/). In addition to implementing the [Material Design guidelines](https://material.io/design), it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically [architected](docs/code/architecture.md) for adaptability to various [major web frameworks](docs/framework-wrappers.md).\n\n> NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows\n> [semver](https://semver.org/) so you can control when you incorporate them.\n> We typically follow a 2-week release schedule which includes one major release per month with breaking changes,\n> and intermediate patch releases with bug fixes.\n\n## Important links\n\n- [Getting Started Guide](docs/getting-started.md)\n- [Demos](https://material-components.github.io/material-components-web-catalog) (external site)\n- [Material on other frameworks](docs/framework-wrappers.md)\n- [Examples using Material Web](docs/examples.md)\n- [Contributing](CONTRIBUTING.md)\n- [Material Design Guidelines](https://material.io/design) (external site)\n- [Supported browsers](docs/supported-browsers.md)\n- [All Components](packages/)\n- [Changelog](./CHANGELOG.md)\n\n## Quick start\n\n### Using via CDN\n\n```html\n<!-- Required styles for Material Web -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\">\n\n<!-- Render textfield component -->\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label\">Label</span>\n  <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n\n<!-- Required Material Web JavaScript library -->\n<script src=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js\"></script>\n<!-- Instantiate single textfield component rendered in the document -->\n<script>\n  mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field'));\n</script>\n```\n\n> Please see [quick start demo](https://codepen.io/abhiomkar/pen/gQWarJ) on codepen for full example.\n\n### Using NPM\n\n> This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full [getting started guide](docs/getting-started.md). You can also see the final code and result in the [Material Starter Kit](https://glitch.com/~material-starter-kit).\n\nInstall textfield node module to your project.\n\n```\nnpm install @material/textfield\n```\n\n#### HTML\n\nSample usage of text field component. Please see [Textfield](packages/mdc-textfield) component page for more options.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n  <span class=\"mdc-floating-label\" id=\"my-label\">Label</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n#### CSS\n\nLoad styles required for text field component.\n\n```scss\n@use \"@material/floating-label/mdc-floating-label\";\n@use \"@material/line-ripple/mdc-line-ripple\";\n@use \"@material/notched-outline/mdc-notched-outline\";\n@use \"@material/textfield\";\n\n@include textfield.core-styles;\n\n```\n\n#### JavaScript\n\nImport `MDCTextField` module to instantiate text field component.\n\n```js\nimport {MDCTextField} from '@material/textfield';\nconst textField = new MDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));\n```\n\nThis'll initialize text field component on a single `.mdc-text-field` element.\n\n> Please see [quick start demo](https://glitch.com/edit/#!/remix/new-web) on glitch for full example.\n\n## Need help?\n\nWe're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our [Discord Channel](https://discord.gg/material-components).\n"
  },
  {
    "path": "app.yaml",
    "content": "runtime: python27\napi_version: 1\nthreadsafe: true\n\nskip_files:\n- (?!^(demos|build))\n- ^.*.swp$\n- ^.*.swo$\n- ^.DS_Store$\n\nhandlers:\n- url: /\n  static_files: demos/redirect.html\n  upload: demos/redirect.html\n\n- url: /assets/(.*)\n  static_files: build/\\1\n  upload: build/(.*)\n\n- url: /(.*)\n  static_files: demos/\\1\n  upload: demos/(.*)\n"
  },
  {
    "path": "docs/README.md",
    "content": "<!--docs:\ntitle: \"Documentation\"\nlayout: landing\nsection: docs\npath: /docs/\n-->\n\n# Supporting documentation\n\nThis section includes supporting documentation aimed to both improve the onboarding experience for teams that are new to Material Components, as well as cover advanced issues for those interested in the reasoning behind our decisions and contributing to the project.\n\nTo jump right in and begin using the library, check out our [Getting Started Guide](./getting-started.md)\n\nIf you're interested in a general overview of MDC Web, check out [the MDC Repository README](../README.md).\n"
  },
  {
    "path": "docs/authoring-components.md",
    "content": "<!--docs:\ntitle: \"Authoring Components\"\nlayout: landing\nsection: docs\npath: /docs/authoring-components/\n-->\n\n# Authoring Components\n\nThis document serves as a reference for developing components either directly for MDC Web or\nexternal components that would like to interface with the MDC Web ecosystem.\n\n> Please note that since this project is still in its early stages of development, these practices\nmay be subject to change. They will stabilize as we near towards a full release.\n\n- [Authoring Components](#authoring-components)\n  - [Who this document is for](#who-this-document-is-for)\n  - [How to build a component](#how-to-build-a-component)\n    - [Start with a simple component prototype](#start-with-a-simple-component-prototype)\n    - [Identify host environment interactions](#identify-host-environment-interactions)\n    - [Create the adapter interface](#create-the-adapter-interface)\n    - [Refactor your existing code into a foundation](#refactor-your-existing-code-into-a-foundation)\n    - [Build a component on top of that foundation, providing an adapter](#build-a-component-on-top-of-that-foundation-providing-an-adapter)\n  - [What makes a good component](#what-makes-a-good-component)\n    - [Fully tested code](#fully-tested-code)\n    - [Thoroughly documented and strictly versioned adapter interface](#thoroughly-documented-and-strictly-versioned-adapter-interface)\n    - [Accessibility](#accessibility)\n    - [RTL Awareness](#rtl-awareness)\n    - [Support for theming](#support-for-theming)\n  - [General Best Practices](#general-best-practices)\n    - [Do what the user expects](#do-what-the-user-expects)\n    - [Design adapter interfaces to be simple and intuitive](#design-adapter-interfaces-to-be-simple-and-intuitive)\n    - [Do not reference host objects within foundation code](#do-not-reference-host-objects-within-foundation-code)\n    - [Clean up all references on destruction](#clean-up-all-references-on-destruction)\n  - [Authoring components for MDC Web](#authoring-components-for-mdc-web)\n    - [File Structure](#file-structure)\n    - [License Stanzas](#license-stanzas)\n    - [Scss](#scss)\n      - [Separate reusable variables and mixins from main scss](#separate-reusable-variables-and-mixins-from-main-scss)\n      - [Follow the BEM Pattern](#follow-the-bem-pattern)\n      - [Use mdc-theme for theming](#use-mdc-theme-for-theming)\n      - [Use mdc-rtl for RTL support](#use-mdc-rtl-for-rtl-support)\n    - [Javascript](#javascript)\n      - [Define a static attachTo(root) method for every component](#define-a-static-attachtoroot-method-for-every-component)\n      - [Define a defaultAdapter getter for every foundation](#define-a-defaultadapter-getter-for-every-foundation)\n      - [Define all exported CSS classes, strings, and numbers as foundation constants.](#define-all-exported-css-classes-strings-and-numbers-as-foundation-constants)\n      - [Extend components and foundations from mdc-base classes.](#extend-components-and-foundations-from-mdc-base-classes)\n      - [Packages must be registered with our build infrastructure, and with material-components-web pkg](#packages-must-be-registered-with-our-build-infrastructure-and-with-material-components-web-pkg)\n      - [TypeScript Compatibility](#typescript-compatibility)\n    - [Testing](#testing)\n      - [Verify foundation's adapters](#verify-foundations-adapters)\n      - [Use helper methods](#use-helper-methods)\n      - [Use bel for DOM fixture](#use-bel-for-dom-fixture)\n      - [Always clean up the DOM after every test](#always-clean-up-the-dom-after-every-test)\n      - [Verify adapters via testdouble.](#verify-adapters-via-testdouble)\n\n## Who this document is for\n\nThe first two sections of this document describe general guidelines for how to think about building\na component, as well as criteria for what makes a good component. Anyone interested in building\ncomponents either directly for MDC Web or as an external component that plays well within the\nMDC Web ecosystem should find it useful. The third section talks about authoring components\nspecifically for MDC Web, and is best suited for those looking to contribute directly to the\nproject.\n\nNote that this document assumes you are familiar with the library and its\n[architecture](code/architecture.md). If that is not the case, we recommend reading that first. If you\nare brand new to the project, we recommend starting with our [Getting Started Guide](./getting-started.md).\n\n## How to build a component\n\nThis section outlines the thought process behind authoring new components for MDC Web. It is\ninspired by React's [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html) article.\n\nStarting out from nothing and going straight to a component/adapter/foundation implementation can be\nat the best daunting, at worst completely impossible from a productivity and experimentation\nstandpoint. Often times, you'll want to _build a prototype component in the most straightforward way\npossible, and then work your way back towards a foundation and adapter_. We usually take the\nfollowing steps.\n\nTo demonstrate this approach, we will build a **red-blue toggle**, very simple toggle button that\ntoggles between a red background with blue text, and vice versa. While not a Material Design\ncomponent, it demonstrates the concepts of how to think about building for MDC Web.\n\n### Start with a simple component prototype\n\nWhen first starting out on a component, start by building a prototype using vanilla\nHTML/CSS/Javascript, without worrying about any foundations or adapters. Below is the prototype code\nfor our redblue-toggle, which you may also [view on codepen](http://codepen.io/traviskaufman/pen/jVxdNo).\n\n> **TIP**: When prototyping your own components, you can use [this Codepen template](http://codepen.io/traviskaufman/pen/pNQmRp) as a starting\npoint.\n\nStart out by experimenting with a DOM structure, and writing a simple prototype component to test\nout the dynamic functionality.\n\n```html\n<div class=\"redblue-toggle\" role=\"button\" aria-pressed=\"false\">\n  Toggle <span class=\"redblue-toggle__color\">Blue</span>\n</div>\n```\n\n```ts\nclass RedblueTogglePrototype {\n  get toggled() {\n    return this.root.getAttribute('aria-pressed') === 'true';\n  }\n\n  set toggled(toggled) {\n    this.toggle(toggled);\n  }\n\n  constructor(root) {\n    this.root = root;\n    this.clickHandler = () => this.toggle();\n    this.initialize();\n  }\n\n  initialize() {\n    this.root.addEventListener('click', this.clickHandler);\n  }\n\n  destroy() {\n    this.root.removeEventListener('click', this.clickHandler);\n  }\n\n  toggle(isToggled = undefined) {\n    const wasToggledExplicitlySet = isToggled === Boolean(isToggled);\n    const toggled = wasToggledExplicitlySet ? isToggled : !this.toggled;\n    const toggleColorEl = this.root.querySelector<HTMLElement>('.redblue-toggle__color');\n    let toggleColor;\n\n    this.root.setAttribute('aria-pressed', String(toggled));\n    if (toggled) {\n      toggleColor = 'Red';\n      this.root.classList.add('redblue-toggle--toggled');\n    } else {\n      toggleColor = 'Blue';\n      this.root.classList.remove('redblue-toggle--toggled');\n    }\n    toggleColorEl.textContent = toggleColor;\n  }\n}\n\nnew RedblueTogglePrototype(document.querySelector<HTMLElement>('.redblue-toggle'));\n```\n\nNote how the JS Component does not reference MDC Web in any way, nor does it have any notion\nof foundations or adapters. By omitting this work, you can rapidly experiment with your component,\nincorporating changes quickly and easily. Nonetheless, the way the component is prototype looks\nquite similar to the way that the MDC Web component will eventually be built.\n\n### Identify host environment interactions\n\nOnce you're satisfied with your prototype, the next step is to figure out what functionality will\nneed to be proxied through an adapter. Any direct interactions with the host\nenvironment will need to be proxied, so that our foundations will be able to integrate into all\nframeworks across the web platform.\n\n> As mentioned in our architecture doc, the term **host environment** refers to the context in which\nthe component is used. It could be the browser, a server which the component is being rendered on,\na Virtual DOM environment, or even a mobile application in the case of technologies like\n[React-Native](https://facebook.github.io/react-native/).\n\nFor the redblue-toggle, it's pretty easy to see all of the instances where we interact with the host\nenvironment: it occurs every place we read from or write to our `root` node.\n\n- Updating `aria-pressed` when toggled via `setAttribute`\n- Updating the classes on the root node when toggled via `classList.{add,remove}`.\n- Setting the `textContent` of the child color indicator element when toggled.\n- Adding/removing event listeners on the root node within `initialize()`/`destroy()` respectively.\n\nIn other cases, host environment interaction may not be straightforward, such as\n`window.addEventListener('resize', ...)`. These are also examples of host environment interaction\nand must be taken into account.\n\n### Create the adapter interface\n\nNow that the host environment interactions are identified, an adapter interface can be carved out\nwithin our existing component.\n\n```ts\nclass RedblueTogglePrototype {\n  get toggled() {\n    return SOMEHOW_GET_ATTRIBUTE('aria-pressed') === 'true';\n  }\n\n  set toggled(toggled) {\n    this.toggle(toggled);\n  }\n\n  constructor(root) {\n    this.root = root;\n    this.clickHandler = () => this.toggle();\n    this.initialize();\n  }\n\n  initialize() {\n    this.root.addEventListener('click', this.clickHandler);\n  }\n\n  destroy() {\n    this.root.removeEventListener('click', this.clickHandler);\n  }\n\n  toggle(isToggled = undefined) {\n    const wasToggledExplicitlySet = isToggled === Boolean(isToggled);\n    const toggled = wasToggledExplicitlySet ? isToggled : !this.toggled;\n\n    let toggleColor;\n\n    SOMEHOW_SET_ATTRIBUTE('aria-pressed', String(toggled));\n    if (toggled) {\n      toggleColor = 'Red';\n      SOMEHOW_ADD_CLASS('redblue-toggle--toggled');\n    } else {\n      toggleColor = 'Blue';\n      SOMEHOW_REMOVE_CLASS('redblue-toggle--toggled');\n    }\n    SOMEHOW_UPDATE_TOGGLE_COLOR_TEXT_CONTENT(toggleColor);\n  }\n}\n```\n\nIn the code above all of the host environment interactions have been replaced with fake `SOMEHOW_*`\nmethods. We can now take these fake methods and transform them into an adapter interface.\n\n| Fake Method Signature | Adapter Method Signature |\n| --- | --- |\n| SOMEHOW_GET_ATTRIBUTE(attr: string) => string | getAttr(attr: string) => string |\n| SOMEHOW_SET_ATTRIBUTE(attr: string, value: string) | setAttr(attr: string, value: string) |\n| SOMEHOW_ADD_CLASS(className: string) | addClass(className: string) |\n| SOMEHOW_REMOVE_CLASS(className: string) | removeClass(className: string) |\n| SOMEHOW_UPDATE_TOGGLE_COLOR_TEXT_CONTENT(textContent: string) | setToggleColorTextContent(textContent: string) |\n\n> Note: We no longer recommend using `registerInteractionHandler` and\n`deregisterInteractionHandler` as adapter methods for adding/removing generic event listeners. Event handling varies significantly across frameworks\n(e.g., [React Synthetic Events](https://reactjs.org/docs/events.html)),\nso we recommend managing events in the component layer.\n\n### Refactor your existing code into a foundation\n\nNow that our adapter API is defined, our existing code can be reworked into a foundation class.\nAs a convention in our codebase, we define a static `defaultAdapter` getter that returns\nan adapter with NOP signatures for each function. This helps us verify the shape of the adapter,\nprevent adapters from throwing errors when methods are forgotten, and in the future can (and should)\nbe used to build out lint tools to enforce proper adapter shape. This example shows that, as well\nas making use of our `MDCFoundation` class, which is the base class which all foundations inherit\nfrom.\n\n```ts\nclass RedblueToggleFoundation extends MDCFoundation {\n  static get defaultAdapter() {\n    return {\n      getAttr: (attr: string) => '',\n      setAttr: (attr: string, value: string) => undefined,\n      addClass: (className: string) => undefined,\n      removeClass: (className: string) => undefined,\n      setToggleColorTextContent: (textContent: string) => undefined,\n      registerInteractionHandler: (type: string, handler: EventListener) => undefined,\n      deregisterInteractionHandler: (type: string, handler: EventListener) => undefined,\n    };\n  }\n\n  private toggled = false;\n\n  constructor(adapter) {\n    super({...RedblueToggleFoundation.defaultAdapter, ...adapter});\n  }\n\n  handleClick() {\n    this.toggle();\n  }\n\n  isToggled() {\n    return this.adapter.getAttr('aria-pressed') === 'true';\n  }\n\n  private toggle(isToggled = undefined) {\n    const wasToggledExplicitlySet = isToggled === Boolean(isToggled);\n    this.toggled = wasToggledExplicitlySet ? isToggled : !this.toggled;\n\n    let toggleColor;\n\n    this.adapter.setAttr('aria-pressed', String(this.toggled));\n    if (this.toggled) {\n      toggleColor = 'Red';\n      this.adapter.addClass('redblue-toggle--toggled');\n    } else {\n      toggleColor = 'Blue';\n      this.adapter.removeClass('redblue-toggle--toggled');\n    }\n    this.adapter.setToggleColorTextContent(toggleColor);\n  }\n}\n```\n\nNote how `isToggled()` and `toggle()` are used in place of setters and getters. Given that a\nfoundation is a lower-level API, we feel that this convention is appropriate.\n\n### Build a component on top of that foundation, providing an adapter\n\nThe last step is simply to build your actual component using the foundation above. The component has\ntwo main jobs:\n\n* Provide an idiomatic interface to the foundation's functionality within the host environment\n* Provide an adapter to the foundation that will allow it to work within the host environment\n\nSince this component is a vanilla component, it should be modeled after the vanilla DOM API, which\nfavors getters and setters to implement its functionality (think `checked`, `disabled`, etc.). Our\nadapter is extremely straightforward as we can simply repurpose the methods we started out with.\n\n```ts\nclass RedblueToggle extends MDCComponent {\n  initialize() {\n    this.listen('click', this.foundation.handleClick);\n  }\n\n  destroy() {\n    this.unlisten('click', this.foundation.handleClick);\n  }\n\n  get toggled() {\n    return this.foundation.isToggled();\n  }\n\n  set toggled(toggled) {\n    this.foundation.toggle(toggled);\n  }\n\n  getDefaultFoundation() {\n    return new RedblueToggleFoundation({\n      getAttr: attr => this.root.getAttribute(attr),\n      setAttr: (attr, value) => this.root.setAttribute(attr, value),\n      addClass: className => this.root.classList.add(className),\n      removeClass: className => this.root.classList.remove(className),\n      setToggleColorTextContent: textContent => {\n        this.root.querySelector<HTMLElement>('.redblue-toggle__color').textContent = textContent;\n      },\n    });\n  }\n}\n```\n\nYou can view a [finished example on CodePen](http://codepen.io/traviskaufman/pen/gLExme?editors=0010).\n\n## What makes a good component\n\nThese additional guidelines provide a \"checklist\" of sorts when building your own components. We\nstrictly adhere to them within our codebase, and doing the same will ensure an enjoyable experience\nfor your component's consumers.\n\n### Fully tested code\n\nECMAScript, by design, is a dynamic and flexible language. The benefits of this dynamicism and\nflexibility come at the cost of verifying the correctness of your program. The only way to ensure\nthat your code will behave as expected is to execute that code and verify that the results are those\nyou expect. Strive for 100% test coverage for your foundations, adapters, and components.\n\n### Thoroughly documented and strictly versioned adapter interface\n\nSince framework authors will be designing code around your adapter interface, it's important that\nyou provide all information necessary for them to do so. Our recommended approach is to document\nthe adapter's interface within a component's README, providing both the method signature as well\nas the expected behavior of the method.\n\nEqually important is to _strictly version your adapter interfaces_. Changes to your adapter\ninterface - even associative ones - have the potential to break existing implementations or\ntrick implementors into thinking their code is working as expected whereas they may be missing a\nkey aspect of the component due to having failed to implement a new adapter method. We consider\n_each change to an adapter interface a breaking change_, and recommend this approach.\n\n### Accessibility\n\nWe require all of our core components to be fully accessible. We implement [ARIA specifications](https://www.w3.org/WAI/intro/aria)\nwhere it makes sense to do so, and ensure that we are being semantic as possible when it comes to\nour components' behavior. The [accessibility developer tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en) are a great way to analyze how\naccessible your component is.\n\n### RTL Awareness\n\nComponents should be RTL-aware. That is, there should be some sort of strategy a component uses to\ndetect whether or not it is in an RTL context, and make proper adjustments accordingly. We use\nour [@material/rtl](../packages/mdc-rtl) library to assist us with this.\n\n### Support for theming\n\nA component should be able to be altered according to a **theme**. A theme can be defined any way\nyou wish. It may be by using _primary_ and _secondary_ colors, or you may choose to expose scss\nvariables or CSS Custom properties specific to your component. Whichever way you choose, ensure that\n_clients can easily alter common aesthetic elements of your component to make it fit with their\noverall design_. We use [@material/theme](../packages/mdc-theme) for this purpose.\n\n## General Best Practices\n\nEven when a component satisfies all of the above requirements, it may still run into pitfalls.\nFollow the recommendations below to avoid pitfalls and unintended situations as much as possible.\n\n> Just like with any set of best practices, it is important to keep in mind that these are\n_guidelines_, not hard and fast rules. [If a best practice prevents you from improving or maintaining your component, ignore it](https://en.wikipedia.org/wiki/Wikipedia:Ignore_all_rules).\nHowever, justify your slight, preferably in the form of documentation or a code comment.\n\n### Do what the user expects\n\nThis is our \"golden rule\", if you will. _Design your component APIs to be intuitive and\neasy-to-understand. Ensure that your components behave in a way a user could predict_. For\nexample, the `checked` getter on `MDCCheckbox` returns a boolean indicating whether or not the\ninternal state of the checkbox is checked. It does not produce side effects, and functions in\nexactly the sameway `HTMLInputElement.prototype.checked` functions when its `type` is set to\n`\"checkbox\"`. When designing your components, model them after the environment you expect your users\nto use them in. In our case, our vanilla components are modeled after the DOM APIs.\n\n### Design adapter interfaces to be simple and intuitive\n\nThis follows the above practice of doing what the user expects. Since library consumers will be\nimplementing the adapter methods, they should be simple to implement as well as straightforward and\nintuitive in nature. Most adapter methods should be one-liners, such as \"add a class\" or \"update a\nstyle property.\" Users should not have to guess about what the purpose of an adapter method is, nor\nwhat its expected input and output should be.\n\nFor example, a good adapter interface method might be\n\n| Method Signature | Description |\n| --- | --- |\n| `setStyle(styleProperty: string, value: string) => void` | Sets a style on the root element given a dasherized `styleProperty` as well as a `value` for that property. |\n\nAs opposed to a bad adapter interface like the one below\n\n| Method Signature | Description |\n| --- | --- |\n| `applyComponentStyles() => void` | Sets the correct styles on the component's root element. Consult our documentation for more info. |\n\nThe above adapter interface is more suited for a foundation method. The adapter's sole\nresponsibility should be performing the style updates, not determining what they are.\n\n### Do not reference host objects within foundation code\n\nTo ensure your foundation is as compatible with as many frameworks as possible, avoid directly\nreferencing host objects within them. This includes `window`, `document`, `console`, and others.\n_Only reference global objects defined within the ECMAScript specification within your foundations._\n\nWe make an exception for this rule for `requestAnimationFrame`, but in the future we may refactor\nthat out as well. In addition, a workaround to working with host objects in a foundation is to ask\nfor them via the adapter.\n\n### Clean up all references on destruction\n\nThis includes event handlers, timer IDs, animation frame IDs, and any other external references that\nmay be retained. There are two accurate litmus tests to ensure this is being done:\n\n1. `init()` (or `initialize()` in a vanilla component) and `destroy()` are reflexive. For example,\n   any event listeners attached in `init()` are removed in `destroy()`.\n2. Every call which creates an external reference (e.g. `setTimeout()`, `requestAnimationFrame()`)\n   is kept track of, and cleaned up within destroy. For example, every `setTimeout()` call should have its ID retained by the foundation/component, and have `clearTimeout()` called on it within\n   destroy.\n\n## Authoring components for MDC Web\n\nThe following guidelines are for those who wish to contribute directly to MDC Web. In addition to\nadhering to all of the practices above, we have additional conventions we expect contributors to\nadhere to. It's worth noting that most of these conventions - including our coding style, commit\nmessage format, and test coverage - are _automatically enforced via linters_, both so that\ncontributors can move quickly and confidently, and core team members do not have to waste time and\nenergy nitpicking on pull requests.\n\n### File Structure\n\n- Source files: Reside under `packages/`.\n- Test files: Reside under `packages/<mdc-component>/test/`.\n\nA typical component within our codebase looks like so:\n\n```\npackages/\n  ├── mdc-component/\n      ├── test/\n          ├── foundation.test.ts # Unit tests for the component's foundation\n          ├── mdc-component.test.ts # Unit tests for the component\n      ├── README.md # Usage instructions and API documentation\n      ├── adapter.ts # Adapter interface implemented by framework wrappers and the vanilla component\n      ├── foundation.ts # Framework-agnostic business logic used by wrapper libraries and the vanilla component\n      ├── component.ts # Vanilla component and adapter implementations for clients who aren't using a framework\n      ├── constants.ts # Constant values used by one or more files in the package (e.g., cssClasses, strings, numbers)\n      ├── index.ts # Forwards exports from other files in the package (adapter, foundation, component, util, etc.)\n      ├── types.ts # (optional) Contains types and interfaces exposed in public APIs unrelated to the vanilla component\n      ├── util.ts # (optional) Framework-agnostic helper functions (e.g., feature detection)\n      ├── mdc-component.scss # The main source file for the component's CSS\n      └── package.json # The components package file\n```\n\n**Every component _must_ have these files before we will accept a PR for them.**\n\nWhen contributing a new component, we encourage you to look at existing components to get a better\nsense of our conventions. Your new component should \"blend in\" with all existing components.\n\nAdditionally, all new components require the following within their `package.json`:\n\n```\n\"publishConfig\": {\n  \"access\": \"public\"\n}\n```\n\nThis is needed so that lerna will be able to automatically publish new scoped packages.\n\nWe also require a list of keywords for each package. This list should always include `material components` and `material design`, followed by the component name:\n\n```\n\"keywords\": [\n  \"material components\",\n  \"material design\",\n  <COMPONENT_NAME>\n]\n```\n\nFor example, if you are building a checkbox component, `keywords` would include `material components`, `material design`, and `checkbox`\n\n**Below is an example of what a full `package.json` should look like for a new component:**\n\n```json\n{\n  \"name\": \"@material/example\",\n  \"version\": \"0.0.0\",\n  \"description\": \"The Material Components for the web example component\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\"\n  },\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"example\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n```\n\n### License Stanzas\n\nWe are required to put the following at the _top_ of _every source code file_, including tests,\ndemos, and demo html. The stanza is as follows:\n\n```\nCopyright <YEAR> Google Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n```\n\nPlease put this in a comment at the top of every source file, replacing `<YEAR>` with the year the file was created.\n\n### Scss\n\n#### Separate reusable variables and mixins from main scss\n\nIf variables and mixins are intended to be used outside of a single stylesheet, refactor them out\ninto [sass partials](http://sass-lang.com/guide#topic-4). These files can then be included in other\nstylesheets without having extra CSS omitted both times. As a rule of thumb, _never_ `@import` sass\nfiles which output CSS, as it will most likely be duplicate output.\n\n#### Follow the BEM Pattern\n\nWe follow a modified version of the [BEM](http://getbem.com/) pattern, which is defined within our\n[stylelint rules](../.stylelintrc.yaml#L252-L255). It's basically:\n\n```scss\n.mdc-block {\n\n}\n\n.mdc-block__element {\n\n}\n\n.mdc-block--modifier {\n\n}\n```\n\nUsually, we structure it within our code as such:\n\n```scss\n.mdc-block {\n  // ...\n\n  &__element {\n    // ...\n  }\n}\n\n.mdc-block--modifier {\n  // ...\n\n  .mdc-block__element {\n    // ...\n  }\n}\n```\n\nSometimes, you'll need to qualify selectors, which such as `.some-context .mdc-block {/* ... */}`.\nStylelint will complain about this, which you can disable by inserting the following:\n\n```scss\n// stylelint-disable plugin/selector-bem-pattern\n\n// styles select-bem-pattern complains about...\n\n// stylelint-enable plugin/selector-bem-pattern\n```\n\n#### Use mdc-theme for theming\nAll thematic elements of a component should be specified via [mdc-theme](../packages/mdc-theme).\nThis will ensure that the component integrates harmoniously into our theming system.\n\n#### Use mdc-rtl for RTL support\nAll RTL treatments within a component's style should be specified via [mdc-rtl](../packages/mdc-rtl).\nThis will ensure that all components treat RTL contexts the same way, and will behave consistently.\n\n### Javascript\n\n#### Define a static attachTo(root) method for every component\n\nAll components _must_ define a static `attachTo` method with the following signature:\n\n`static attachTo(element: HTMLElement) => Constructor`\n\ne.g.\n\n```js\nclass MDCNewComponent extends MDCComponent {\n  static attachTo(root) {\n    return new MDCNewComponent(root);\n  }\n}\n```\n\n`mdc-auto-init` requires this method to be present, and we guarantee its provision as a convenience\nto our users. We have spoken about writing a lint rule for this in the future.\n\n#### Define a defaultAdapter getter for every foundation\nAll foundations _must_ define a static `defaultAdapter` method which returns an adapter with all\nfunctions defined. The functions should essentially be NOPs; taking no parameters and returning the\ncorrect type (e.g. `false` for boolean, `0` for number, `{}` for object, etc.). Our convention is\nto annotate the function via inline comments using [Typescript's type annotations](https://basarat.gitbooks.io/typescript/content/docs/types/type-system.html).\n\nIt is also a convention to override a foundation's constructor to mix in the passed `adapter` param\nto a default adapter object. This ensures that the adapter is guaranteed to have the correct shape.\n\n```js\nclass MDCNewComponentFoundation extends MDCFoundation {\n  static get defaultAdapter() {\n    return {\n      addClass: (/* className: string */) => {},\n      getAttr: (/* attr: string */) => /* string */ '',\n      // ...\n    }\n  }\n\n  constructor(adapter) {\n    super(...MDCNewComponentFoundation.defaultAdapter, ...adapter});\n  }\n}\n```\n\nThis of course comes at the cost of potentially obscuring erroneous passed in adapters. However,\nwe plan on providing type definitions for adapters in the future to help assuage this. Similar to\nthe aforementioned rule, we would also like to provide lint rules to enforce these conventions.\n\n#### Define all exported CSS classes, strings, and numbers as foundation constants.\n- All CSS Classes referenced by a component's foundation must be referenced by a `cssClasses` static\n  getter.\n- All strings that are used outside the context of the foundation class (CSS selectors, custom event names,\n  text that could potentially be localized, etc.) must be referenced by a `strings` static getter.\n- All semantic numbers leveraged by the foundation (timeout lengths, transition durations, etc.) must\n  be referenced by a `numbers` static getter.\n- These constants should be defined within a `constants.ts` file, and then proxied through the\n  foundation.\n\n```ts\n// constants.ts\n\nexport const cssClasses = {\n  ROOT: 'mdc-new-component',\n  ACTIVE: 'mdc-new-component--active',\n  DISABLED: 'mdc-new-component--disabled',\n};\n\nexport const strings = {\n  CHILD_SELECTOR: '.mdc-new-component__child',\n  CUSTOM_EVENT: 'MDCNewComponent:event',\n};\n\nexport const numbers = {\n  DEFAULT_THROTTLE_DELAY_MS: 300,\n};\n\n// foundation.ts\n\nimport {cssClasses, strings, numbers} from './constants';\n\nclass MDCNewComponentFoundation extends MDCFoundation {\n  static get defaultAdapter() {\n    // ...\n  }\n\n  static get cssClasses() {\n    return cssClasses;\n  }\n\n  static get strings() {\n    return strings;\n  }\n\n  static get numbers() {\n    return numbers;\n  }\n}\n```\n\nThe primary purpose of this is so that our components can interoperate with aspects of Google's\nfront-end infrastructure, such as Closure Stylesheets' [CSS Class Renaming](https://github.com/google/closure-stylesheets#renaming) mechanism. In addition, it\nprovides the added benefit of semantic code, and less magic strings/numbers.\n\n#### Extend components and foundations from mdc-base classes.\nTo ensure that all packages behave consistently, all components must extend `MDCComponent` and all\nfoundations must extend `MDCFoundation`. More information for both of these classes can be found in\nthe [mdc-base README](../packages/mdc-base).\n\n#### Packages must be registered with our build infrastructure, and with material-components-web pkg\nWhenever you create a new component, it's important to notify the proper tools and packages of it.\nConcretely:\n\n- Ensure that an entry for it exists in `webpack.config.js` for the `js-components` and `css` module\n- Ensure that it is added as a dependency of `material-components-web`. If the component contains\n  styles, ensure that they are `@import`ed within `material-components-web.scss`. If the component\n  contains javascript, ensure that its component namespace is exported within\n  `material-components-web`, and it is registered with `mdc-auto-init`. Lastly, remember to add it\n  to `package.json` of `material-components-web`.\n- Ensure that the correct **commit subject** for the package is added to the\n  `config.validate-commit-msg.scope.allowed` array within the top-level `package.json` at the root\n  of the repo. The commit subject is the _name the component, without the `mdc-`/`@material/`_.\n  E.g., for `mdc-icon-button`, the correct subject is `icon-button`.\n\n#### TypeScript Compatibility\n\nAll core MDC Web components must be fully compatible with strict-mode [TypeScript](https://www.typescriptlang.org/). We've provided a list of requirements and further explanation of meeting the TypeScript compatibility, as well as\nconventions, examples, and common TypeScript patterns you may not be used to, in our [Coding Best Practices](./code/best_practices.md).\n\n### Testing\n\nThe following guidelines should be used to help write tests for MDC Web code. Our tests are written\nusing the [Jasmine](https://jasmine.github.io/) testing framework and are driven by [Karma](https://karma-runner.github.io/1.0/index.html).\n\n#### Verify foundation's adapters\nWhen testing foundations, ensure that at least one of your test cases uses the\n`verifyDefaultAdapter` method defined with our [foundation helpers](../testing/helpers/foundation.ts). This is done to ensure that adapter interfaces do not\nchange unexpectedly.\n\n#### Use helper methods\nWe have helper modules within [testing/helpers](../testing/helpers) for things like\nbootstrapping foundation tests, intercepting adapter methods used for listening to events, and\ndealing with `requestAnimationFrame`. We encourage you to make use of them in your code to make it\nas easy as possible to write tests!\n\n#### Use `getFixture` for DOM fixture\nTo generate fixtures for component/adapter tests, use the [#getFixture](../testing/dom/index.ts) helper.\n\n#### Always clean up the DOM after every test\nThis is important. _Before a test ends, ensure that any elements attached to the DOM have been\nremoved_.\n"
  },
  {
    "path": "docs/code/README.md",
    "content": "# Code\n\n## Foundation / Adapter\n\nMDC Web has split each dynamic component's JavaScript into two pieces:\nFoundation and Adapter. This lets us reuse Foundation code across multiple web\nplatforms, e.g. React and Angular, by re-implementing only the Adapter. For now\nwe've only implemented a vanilla JavaScript version of the Adapter.\n\n## Architecture\n\nMDC Web is split into packages. Each package is either a Subsystem or a\nComponent. Subsystems apply to many components. They generally describe style\n(e.g.: color) or motion (e.g.: animation). Component packages tend to rely on\nmany subsystem packages. But component packages rarely depend on other\ncomponent packages. Components require an HTML structure. Some components are\nstatic, but most are dynamic and include some JavaScript.\n\n> Each component is usable separately from any other component.\n\n## Best Practices\n\nMDC Web follows naming and documentation best practices to keep our code\nconsistent, and our APIs user-friendly. We follow isolation best practices to\nkeep our code loosely coupled. And we follow performance best practices to keep\nour components fast.\n\n## README standards\n\nMDC Web component documentation serves two purposes:\n\n* Populate the [Catalog Site](https://material.io/components/web/catalog/)\n* Highlight [how to use our APIs](readme_standards.md), for our external developers\n\n> Developers should not have to read our code to know how to use our APIs\n\n"
  },
  {
    "path": "docs/code/architecture.md",
    "content": "# Architecture\n\nMDC Web is split into packages. Each package is either a Subsystem or a\nComponent. Subsystems apply to many components. They generally describe style\n(e.g.: color) or motion (e.g.: animation). Component packages tend to rely on\nmany subsystem packages. On the other hand, component packages rarely depend on\nother component packages. Components require an HTML structure. Some components\nare static, but most are dynamic and include some JavaScript.\n\n> Each component is usable separate from any other component.\n\n## Sass\n\nAll of MDC Web's CSS is generated using [Sass](http://sass-lang.com/). Sass\nmixins let us make groups of CSS declarations that we want to reuse on\nmultiple components. Subsystems provide a Sass mixin, which the component\nimports in its Sass file. Each package compiles its Sass files into a single CSS\nfile.\n\n## HTML\n\nMDC Web does NOT provide any HTML templates. We simply provide documentation\nwith the required HTML structure.\n\n## JavaScript\n\nMDC Web has split each dynamic component's JavaScript into two pieces:\nFoundation and Adapter. This lets us reuse Foundation code across multiple web\nplatforms, e.g. React and Angular, by re-implementing only the Adapter. For now\nwe've only implemented a vanilla JavaScript version of the Adapter.\n\n### TypeScript\n\nMDC Web components are written in [TypeScript](https://www.typescriptlang.org/)\nto increase developer velocity and reduce errors. Our npm releases include\nUMD JavaScript bundles, ES Modules containing ES5, and `.d.ts` typing\ndeclaration files for TypeScript users.\nSee [Importing JS](../importing-js.md) for more information.\n\n### Foundation\n\nThe Foundation contains the business logic that best represents Material Design,\nwithout actually referring to any DOM elements. The Foundation delegates to Adapter\nmethods for any logic requiring DOM manipulation.\n\n### Adapter\n\nThe Adapter is an interface with all the methods the Foundation needs to\nimplement Material Design business logic. There can be many implementations of\nthe Adapter, allowing for interoperability with different frameworks.\n\n### Vanilla Component\n\nInstantiated with a root [element](https://developer.mozilla.org/en-US/docs/Web/API/Element),\nthe Vanilla Component creates a Foundation instance with a Vanilla Adapter by\noverriding the `getDefaultFoundation` method of `MDCComponent`. The Vanilla Adapter\nimplements the Adapter APIs and directly references the root element. The Vanilla\nComponent also exposes proxy methods for any Foundation methods a developer needs to access.\n\nDevelopers who are simply interested in consuming MDC Web (i.e. not providing a\nwrapper library) should only need to interact with the Component. They should not\nneed to directly access Foundation or Adapter APIs.\n"
  },
  {
    "path": "docs/code/best_practices.md",
    "content": "# Best Practices\n\nMDC Web follows naming and documentation best practices to keep our code\nconsistent, and our APIs user-friendly. We follow isolation best practices to\nkeep our code loosely coupled. And we follow performance best practices to keep\nour components fast.\n\n### Naming\n\n*  Match [spec](https://material.io/guidelines) whenever possible. If the nomenclature used in spec conflicts with a natively implemented element or pattern, reach out for guidance\n*  Use the [BEM naming convention](http://getbem.com/naming/) for CSS classes\n\n### Documentation\n\n* Keep documentation short, don't use ten words when one will do\n* Let Material Design guidelines cover when/why to use a component\n\n### Isolation\n\n*  Never reference [element](https://developer.mozilla.org/en-US/docs/Web/API/Element) directly in the Foundation\n\nTODO: Add more notes about how to isolate subsystems from component specifics\n\n### Performance\n\n*  Only animate properties that will run on the GPU\n*  Use `requestAnimationFrame`\n*  Avoid constant synchronous DOM reads/writes\n*  Reduce the number of composite layers\n\n### Typescript\n\n#### Definite assignment operator\n* MDC Web has other lifecycle methods (`initialize()` and `initSyncWithDom()`) that are not contained within the `constructor`.\n* Typescript compiler cannot infer that the other methods are run in conjunction, and will throw an error on properties not defined.\n* Feel free to use the `!` when you run into the error `<PROPERTY_NAME> has no initializer and is not definitely assigned in the constructor.`. ie.\n\n```\nprivate progress!: number; // Assigned in init\n\ninit() {\n  this.progress = 0;\n}\n```\n\n#### type vs. interface\n\n* Prefer `interface` over `type` for defining types when possible.\n\n#### any vs. unknown vs. {}\n\n* Defer to using `unknown` over both `any` and `{}` types.\n* If you must choose between `any` and `{}` defer to `{}`.\n\n#### Events\n\n* `@material/base` defines convenience types (`EventType` and `SpecificEventListener`) for working with events and event listeners.\n* Prefer to type as `EventType` over `string` when you expect that the string will be a standard event name (e.g. `click`, `keydown`).\n* Prefer to type as `SpecificEventListener` over `EventListener` when you know what type of event is being listened for (e.g. `SpecificEventHandler<'click'>`).\n\n#### When to use Node/Element/HTMLElement\n\n* `Node` is more generic than `Element`, while `Element` is more generic than `HTMLElement`.\n* `Node` is mainly used for the document or comments/text.\n* `Element` should be used when the type in question could be `HTMLElement`, `SVGElement`, or others.\n* `HTMLElement` only pertains to DOM Elements such as `<a>`, `<li>`, `<div>` just to name a few.\n* Use the most generic type that you think is possible during runtime.\n\n#### Foundation `import` statements must _not_ use re-exported modules\n\nOnly the `index.ts` or `component.ts` files are allowed to reference from other component packages' `index.ts`.\nThis is because wrapping libraries only use `foundation` and `adapter`, so we should decouple the `component`.\n\n```ts\n// BAD\nimport {MDCFoundation} from '@material/base';\n// GOOD\nimport {MDCFoundation} from '@material/base/foundation';\n```\n\n#### All adapters must be defined as interfaces\n\nEach adapter must be defined within an `adapter.ts` file in the component's package directory.\nAll methods should contain a summary of what they should do. This summary should be\ncopied over to the adapter API documentation in our README. This will facilitate future endeavors\nto potentially automate the generation of our adapter API docs.\n_Note that this replaces the inline comments present in the methods within `defaultAdapter`_.\n\n```ts\n// adapter.ts\nexport interface MDCComponentAdapter {\n  /**\n   * Adds a class to the root element.\n   */\n  addClass(className: string): void;\n\n   /**\n   * Removes a class from the root element.\n   */\n  removeClass(className: string): void;\n}\n```\n\n#### Foundation classes must extend `MDCFoundation`\n\nFoundations must extend `MDCFoundation` parameterized by their respective adapter.\nThe `defaultAdapter` must return an object with the correct adapter shape.\n\n```ts\n// foundation.ts\nimport {MDCFoundation} from '@material/base/foundation';\nimport MDCComponentAdapter from './adapter';\nexport class MDCComponentFoundation extends MDCFoundation<MDCComponentAdapter> {\n  static get defaultAdapter(): MDCComponentAdapter {\n    return {\n      addClass: (className: string) => undefined,\n      removeClass: (className: string) => undefined,\n    };\n  }\n}\n```\n\n#### Component classes must extend `MDCComponent`\n\nComponents must extend `MDCComponent` parameterized by their respective foundation.\n\n```ts\n// index.ts\nimport {MDCComponent} from '@material/base/component';\nimport MDCComponentFoundation from './foundation';\nexport class MDCAwesomeComponent extends MDCComponent<MDCComponentFoundation> {\n  getDefaultFoundation(): MDCComponentFoundation {\n    return new MDCComponentFoundation({\n      addClass: (className: string) => this.root.classList.add(className),\n      removeClass: (className: string) => this.root.classList.remove(className),\n    });\n  }\n}\n```\n"
  },
  {
    "path": "docs/code/readme_standards.md",
    "content": "# README Standards\n\nMDC Web component documentation serves two purposes:\n\n* Populate the [Catalog Site](https://material.io/components/web/catalog/)\n* Highlight how to use our APIs, for our external developers.\n\n## README Template\n\nPlease follow the [README template](readme_template.md) *exactly*. This format is\nread/understood by the [Catalog Site](https://material.io/components/web/catalog/)\n\n## Basic Usage\n\nThe 'Basic Usage' section documents the bare minimum to get the most basic version of this component up and running, including:\n* HTML structure\n* Style import\n* JavaScript import and instantiation, if applicable\n\n~~~\n### HTML Structure\n\n```html\n<button class=\"mdc-button\">Foo</button>\n```\n~~~\n\nIn the 'Styles' subsection, include any imports and mixin invocations necessary to make the component look as desired.\n~~~\n### Styles\n\n```scss\n@import \"@material/button/mdc-button\";\n\n// Include necessary mixin invocations here\n```\n~~~\n\nIn the 'JavaScript Instantiation' subsection, include a note about importing a JavaScript component with a link to our importing documentation.\n~~~\n### JavaScript Instantiation\n\n```js\nimport {MDCButton} from '@material/button';\n\nconst button = new MDCButton(document.querySelector('.mdc-button'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n~~~\n\n## Variants\n\nIf the component has variants, add a subsection for each variant, under the 'Variants' section. Include a short description of the variant along with the necessary HTML structure.\n\n~~~\n### Foo Button\n\nShort description of Foo Button.\n\n```html\n<button class=\"mdc-button mdc-button--foo\">Foo</button>\n```\n~~~\n\n## Style Customization\n\nCSS classes are documented in [tabular format](#tabular-format).\n\n~~~\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-foo` | Indicates the foo\n~~~\n\nCSS custom properties (if applicable) are also documented in [tabular format](#tabular-format).\n\n~~~\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`mdc-bar` | The bar\n~~~\n\nSass mixins, variables, and functions are documented in [tabular format](#tabular-format) under a single subsection. Only include the tables that are applicable. You can include subsections or separate the tables into smaller tables if it makes the documentation easier to read (e.g. having two tables for Basic Mixins and Advanced Mixins). \n\n~~~\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-foo($value)` | Sets the foo\n\nFunction | Description\n--- | ---\n`mdc-bar($value)` | Sets the bar\n\nVariable | Description\n--- | ---\n`mdc-bar` | Value of baz\n~~~\n\nYou may add additional subsections at your discretion, such as Additional Information, Tips & Tricks, Util API, Caveats, etc.\n\n~~~\n### Additional Information\n\n#### Some special case\n\nExplanation of this special case.\n~~~\n\n## `MDCComponent` Properties and Methods\n\nThis section documents the properties and methods of the vanilla JS component class, e.g. `MDCButton`. They are documented in [tabular format](#tabular-format).\n\n~~~\nProperty | Value Type | Description\n--- | --- | ---\n`foo` | String | Proxies to the foundation's `getFoo`/`setFoo` methods\n~~~\n\n~~~\nMethod Signature | Description\n--- | ---\n`doFoo() => void` | Does the foo\n~~~\n\n## Usage within Web Frameworks\n\nThis section documents usage of the Adapter and the Foundation. Methods are documented in [tabular format](#tabular-format).\n\n~~~\n### `MDCTextFieldAdapter`\n\nMethod Signature | Description\n--- | ---\n`getFoo() => string` | Returns the foo\n~~~\n\n~~~\n### `MDCTextFieldFoundation`\n\nMethod Signature | Description\n--- | ---\n`getBar() => string` | Returns the bar\n~~~\n\n## Tabular format\n\nThe tabular format is meant to\n\n* Keep documentation short\n* Facilitate showing changes in APIs, through row diffs\n\nAll tables should follow this pattern:\n\n```\n<COLUMN_NAME> | Description\n--- | ---\n<INLINE_CODE> | <ONE_LINE_DESCRIPTION>\n```\n\n* `COLUMN_NAME` should be title case, e.g. Method Signature\n* `INLINE_CODE` should always be formatted as inline code, e.g. `foo`\n* `ONE_LINE_DESCRIPTION` should not be more than one line long\n\nIf you need more than one line to describe code, create a row with a\nsummary description. Then create a note below the table with the longer description, formatted in this way:\n\n~~~\n> _NOTE_: This is the long description.\n~~~\n\nKeep descriptions brief, to make the table as easy to read as possible.\n"
  },
  {
    "path": "docs/code/readme_template.md",
    "content": "# README Template\n\nCopy the snippet and replace the following\n\n* Component name related\n  * `COMPONENT_TITLE`: title case of the component, e.g. Layout Grid\n  * `COMPONENT_ID`: lower dash case name of the component, e.g. layout-grid\n  * `COMPONENT_NAME`: capitalized name of the component, e.g. Layout grid\n  * `MODULE_NAME`: name of the Node module, e.g. layout-grid\n  * `JS_COMPONENT_NAME`: name of the JS component class, e.g. MDCLayoutGrid\n* [Spec](https://material.io/guidelines) related\n  * `ONE_SENTENCE_FROM_SPEC`: explaining what the component is\n  * `LINK_TO_SPEC`, link to spec: the same article you copied the one sentence from\n  * `NAME_OF_ARTICLE`: name of the article in spec\n* [Catalog site](https://material.io/components/web/catalog/) related\n  * `SHORT_EXCERPT`: short excerpt about the component\n  * `ICON_ID`: id for the icon representing the component\n  * `SCREENSHOT_NAME`: name of the screenshot image of the component\n  * `SCREENSHOT_WIDTH`: width of the screenshot image of the component\n  * `LINK_TO_CATALOG_SERVER`: link to the component page on [Catalog](https://material-components.github.io/material-components-web-catalog/)\n* Usage sections\n  * `BASIC_USAGE_SECTION`: see [README standards on Basic Usage](readme_standards.md#basic-usage)\n  * `VARIANTS_SECTION`: see [README standards on Variants](readme_standards.md#variants)\n  * `STYLE_CUSTOMIZATION_SECTION`: see [README standards on Style Customization](readme_standards.md#style-customization)\n  * `MDC_COMPONENT_SECTION`: see [README standards on `MDCComponent` Properties and Methods](readme_standards.md#mdccomponent-properties-and-methods)\n  * `FRAMEWORKS_SECTION`: see [README standards on Usage within Web Frameworks](readme_standards.md#usage-within-web-frameworks)\n\n~~~\n<!--docs:\ntitle: \"<COMPONENT_TITLE>\"\nlayout: detail\nsection: components\nexcerpt: \"<SHORT_EXCERPT>\"\niconId: <ICON_ID>\npath: /catalog/<COMPONENT_ID>/\n-->\n\n# <COMPONENT_TITLE>\n\n<ONE_SENTENCE_FROM_SPEC>\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"<LINK_TO_SPEC>\">Material Design guidelines: <NAME_OF_ARTICLE></a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"<LINK_TO_CATALOG_SERVER>\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/<MODULE_NAME>\n```\n\n## Basic Usage\n\n<BASIC_USAGE_SECTION>\n\n## Variants\n\n<VARIANTS_SECTION>\n\n## Style Customization\n\n<STYLE_CUSTOMIZATION_SECTION>\n\n## `<JS_COMPONENT_NAME>` Properties and Methods\n\n<MDC_COMPONENT_SECTION>\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a <COMPONENT_NAME> for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n<FRAMEWORKS_SECTION>\n~~~\n"
  },
  {
    "path": "docs/codelabs/codelabs-index.md",
    "content": "<!--docs:\ntitle: \"Codelabs\"\nlayout: landing\nsection: codelabs\npath: /codelabs/\n-->\n\n# Material Design Components Codelabs\n\nGoogle codelabs provide a guided, hands-on coding experience.\n\n* [MDC-101 Web: Material Components (MDC) Basics (Web)](https://codelabs.developers.google.com/codelabs/mdc-101-web/index.html)\n* [MDC-102 Web: Material Structure and Layout (Web)](https://codelabs.developers.google.com/codelabs/mdc-102-web/index.html)\n* [MDC-103 Web: Material Theming with Color, Shape, Elevation and Type (Web)](https://codelabs.developers.google.com/codelabs/mdc-103-web/index.html)\n* [MDC-111 Web: Incorporating Material Components into your codebase (Web)](https://codelabs.developers.google.com/codelabs/mdc-111-web/index.html)\n* [MDC-112 Web: Integrating MDC with Web Frameworks](https://codelabs.developers.google.com/codelabs/mdc-112-web/index.html)\n"
  },
  {
    "path": "docs/contribute/README.md",
    "content": "# How to Contribute\n\nMDC Web is an open source project, so we encourage contributions! If you are\nlooking for a bug to fix, check out [Help Wanted Issues](https://github.com/material-components/material-components-web/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) on GitHub. (Or you can file\nnew bugs, which will fall into our [Triage Process](../open_source/triage.md).)\n\n### Fix a Bug\n\nIf you want to fix a bug, check out the workflow [here](bug_fix.md).\n\n### Add a Feature\n\nWe consider any new API to be a new feature. An API is any of the following:\n\n* Sass Variables, Mixins, Functions\n* CSS classes\n* DOM structure\n* Utility JavaScript Functions\n* Foundation\n* Adapter\n* Component\n\n> API changes should be done in a backwards compatible way, a.k.a add _new_ APIs,\ndo not _remove_ old APIs. DOM structure and Adapter methods are the opposite,\nyou cannot add new _required_ DOM structure or Adapter methods, because this is\nbackwards incompatible\n\nIf you want to add a feature, check out the workflow [here](feat.md). You can\nalso check out our [Code Review Process](code_review.md)\n\n"
  },
  {
    "path": "docs/contribute/bug_fix.md",
    "content": "# Fix a Bug\n\nFixing a bug begins with a GitHub issue, a new branch, and a failing test.\n_All bug fixes require test coverage_. This test can be either a JavaScript\ntest, _or_ it can be a demo page. A lot of our fixes are CSS only fixes, and\nthis can only be verified with a demo page.\n\n![MDC Web Bug Fix](bug_fix.jpg?raw=true)\n\n> If your fix requires a new API, then you'll have to break your PR into two.\nFirst create a new PR with a new feature, following [this feature workflow](feat.md).\nAfter that PR is merged, then submit the fix PR.\n\n### Format Commit Message\n\nThe final commit message for a fix to the mdc-foo package, for GitHub issue 1234, should look like this:\n\n```\nfix(foo): Short description of fix\nResolves #1234\n```\n\nThis commit message is pulled into our CHANGELOG when we [release](../open_source/README.md) and is based on [Angular's Git commit guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits).\n"
  },
  {
    "path": "docs/contribute/code_review.md",
    "content": "# Code Review\n\nMDC Web team members review every single pull request (PR) before it is merged\ninto the code base. We aim for a quick review process, but without sacrificing\ngood component APIs and code maintenance.\n\n## Pull Request Assignments\n\nWe currently have six team members, and we normally have bandwidth to respond to\ntwo PRs each a day (thats twelve PRs total). We do NOT have a service level agreement\nto respond to PRs within some timeframe. If there are lots of PRs to review, then we\nsimply might not get to yours for a couple days.\n\nOnce a MDC Web team member has started reviewing a PR, they will be the only\npoint of contact until the PR is closed. The reviewer should self-assign so that\nother team members don't review the same code.\n\nIf an MDC Web team member requests changes, and the contributor hasn't responded\nin more than two weeks, the reviewer might close the PR. This saves our sanity\nof having too many open pull requests.\n\n## Checklist\n\n### Check The Obvious\n\n*  Do tests pass?\n*  Are there corresponding (internal) screenshot tests?\n*  Do types of the methods/variables/objects/etc. follow our [best practices and conventions](../code/best_practices.md#typescript)?\n\nIf the tests are failing, or the demo does not work, request changes from the\ndeveloper before reviewing the contents of the PR.\n\n### API Design\n\nAn API should be in it's simplest form! Check each of these developer facing\nAPIs:\n\n*  Sass Variables, Mixins, Functions\n*  CSS classes\n*  DOM structure\n*  Utility JavaScript Functions\n*  Foundation\n*  Adapter\n*  Component\n\nReference [naming best practices](../code/best_practices.md)\nas necessary. Verify the documentation follows [README standards](../code/readme_standards.md).\nIf you have large concerns with the API design, send those comments first\nbefore diving into the rest of this checklist.\n\n### Catalog Coverage\n\nCSS needs to be visually verified. So run the catalog server and:\n\n*  Verify there is 100% coverage of CSS modifier classes on the catalog page\n*  Verify there is coverage of overflow situations, e.g. long text in a small container\n\n### Test Coverage\n\nVerify there is no decrease in code coverage!\n\n### Code Maintainability\n\nOnce you're satisfied the component actually works, comment on ways to improve\nthe code. Reference [isolation best practices](../code/best_practices.md)\nas necessary.\n\n*  Every property of a CSS stanzas should be understandable without too much context\n*  DOM structure should be understandable without too much context\n*  Sass functions should not be too long, break up logic with smaller functions\n*  JS Methods should not be too long, break up logic with smaller methods\n*  Vanilla adapter method implementations should be as short as possible. Users will override these methods, so they must be atomic\n\n\n"
  },
  {
    "path": "docs/contribute/feat.md",
    "content": "# Add a Feature\n\nAdding a feature begins with a new branch and a new API.\n_All new APIs require test coverage_. This test can be either a JavaScript\ntest, _or_ it can be a demo page. CSS only APIs can only be verified with a\ndemo page.\n\n![MDC Web New Feature](feat.jpg?raw=true)\n\n> If your feature spans multiple packages, then you'll have to break your PR\ninto multiple PRs. First create a new feature PR for the package which does not\ndepend on any of the other packages. After that PR is merged, continue working\nyour way up the dependency tree, submiting new PRs until the last PR is merged.\n\n### Format Commit Message\n\nThe final commit message for a feature to the `mdc-foo` package should look like this:\n\n```\nfeat(foo): Short description of feature\n```\n\nThis commit message is pulled into our CHANGELOG when we [release](../open_source/README.md) and is based on [Angular's Git commit guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits).\n"
  },
  {
    "path": "docs/docsite-components.md",
    "content": "---\n# This file is used by the docsite to generate a component index.\ntitle: \"Components\"\nlayout: landing-no-drawer\nsection: components\npath: /catalog/\nvirtual_source_path: /packages/README.md\n---\n\n{% include components-list.html %}\n"
  },
  {
    "path": "docs/docsite-index.md",
    "content": "---\n# This file is used by the docsite to generate the platform index page.\ntitle: \"Material Components for the Web\"\nlayout: \"homepage\"\npath: /\n---\n\n{% contentfor benefits %}\n<ul class=\"benefits-list\">\n  <li class=\"benefits-list-item\">\n    <h3>Accurate &amp; up to date</h3>\n    <p>Implement <a href=\"https://material.io/guidelines\">Material Design</a> with pixel-perfect components, maintained by Google engineers and designers</p>\n  </li>\n  <li class=\"benefits-list-item\">\n    <h3>Seamless integrations</h3>\n    <p>Use components designed to work in any context, allowing seamless integration with libraries like React, AngularJS, and server-side rendering</p>\n  </li>\n  <li class=\"benefits-list-item\">\n    <h3>Industry standards</h3>\n    <p>Take advantage of components developed with minimal dependencies and tested for flexibility, accessibility, and internationalization</p>\n  </li>\n</ul>\n{% endcontentfor %}\n\n# Getting Started\n\n## Quick Start\n\nTo try Material Components for the web with minimal setup, load the CSS and JS from unpkg:\n\n```html\nhttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\nhttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.js\n```\n\nThen include MDC markup...\n\n```html\n<button class=\"foo-button mdc-button\">Button</button>\n```\n\n...and instantiate JavaScript:\n\n```js\nmdc.ripple.MDCRipple.attachTo(document.querySelector<HTMLElement>('.foo-button'));\n```\n\nHowever, it is highly recommended to install Material Components for the web via npm and consume its ES Modules and Sass directly. This is outlined in the steps below.\n\n## Using MDC Web with ES Modules and Sass\n\n> **Note:** This assumes you have Node.js and npm installed locally, and have configured webpack to compile Sass and ES Modules. See the [Getting Started Guide](getting-started.md) for pointers on how to configure webpack.\n\n1.  {: .step-list-item } ### Install components\n\n    Install dependencies for the components you wish to use:\n\n    ```\n    npm install @material/button @material/ripple\n    ```\n\n2.  {: .step-list-item } ### Import the stylesheet and include styles\n\n    Import the Sass files into your application, and use Sass mixins to customize components:\n\n    ```scss\n    @import \"@material/button/mdc-button\";\n\n    .foo-button {\n      @include mdc-button-ink-color(teal);\n      @include mdc-states(teal);\n    }\n    ```\n\n    You also need to configure sass-loader to understand the `@material` imports used by MDC Web. Update your `webpack.config.js` by changing `{ loader: 'sass-loader' }` to:\n\n    ```js\n    {\n      loader: 'sass-loader',\n      options: {\n        sassOptions: {\n          includePaths: ['./node_modules']\n        }\n      }\n    }\n    ```\n\n3.  {: .step-list-item } ### Add components\n\n    Each component (e.g. [`@material/button`](../packages/mdc-button/README.md)) includes documentation about its required HTML structure. Update your application's HTML to include the MDC Button markup, and add the `foo-button` class to the element:\n\n    ```html\n    <button class=\"foo-button mdc-button\">\n      Button\n    </button>\n    ```\n\n    Combined with the styles above, this will produce a customized Material Design button!\n\n    <img src=\"button.png\" alt=\"Button\" width=\"90\" height=\"36\">\n\n4.  {: .step-list-item } ### Add scripts and instantiate components\n\n    Next, import the ES Module file for `@material/ripple` into your application, and initialize an `MDCRipple` with a DOM element:\n\n    ```js\n    import {MDCRipple} from '@material/ripple';\n    const ripple = new MDCRipple(document.querySelector<HTMLElement>('.foo-button'));\n    ```\n\n    This will produce a Material Design ripple on the button when it is pressed!\n\n    <img src=\"button_with_ripple.png\" alt=\"Button with Ripple\" width=\"90\" height=\"36\">\n\n5.  {: .step-list-item } ### What's next?\n\n    <ul class=\"icon-list\">\n      <li class=\"icon-list-item icon-list-item--guide\">\n        <a href=\"getting-started.md\">Read the Getting Started Guide</a>\n      </li>\n      <li class=\"icon-list-item icon-list-item--components\">\n        <a href=\"../packages\">View the Component Documentation</a>\n      </li>\n      <li class=\"icon-list-item icon-list-item--github\">\n        <a href=\"https://github.com/material-components/material-components-web/\">View the project on GitHub</a>\n      </li>\n    </ul>\n{: .step-list }\n"
  },
  {
    "path": "docs/docsite-input-controls.md",
    "content": "---\n# This file exists describes the directory housing the input components. If the\n# URL is visited, it will immediately redirect to the Form Fields component.\ntitle: \"Inputs and Controls\"\nlayout: detail\nsection: components\nexcerpt: \"Form fields, checkboxes, menus, and other input components.\"\niconId: text_field\npath: /catalog/input-controls/\nredirect_path: /catalog/input-controls/form-fields/\n---\n\n{% include redirect-page.html %}\n"
  },
  {
    "path": "docs/docsite-tabs.md",
    "content": "---\n# This file exists describes the directory housing the tab components. If the\n# URL is visited, it will immediately redirect to the Tab component.\ntitle: \"Tabs\"\nlayout: detail\nsection: components\nexcerpt: \"Components for tabbed navigation.\"\niconId: tabs\npath: /catalog/tabs/\nredirect_path: /catalog/tabs/tab-bar/\n---\n\n{% include redirect-page.html %}\n"
  },
  {
    "path": "docs/examples.md",
    "content": "<!--docs:\ntitle: \"Examples\"\nlayout: landing\nsection: docs\npath: /docs/examples/\n-->\n\n# Examples using MDC Web\n\n- [Shrine](https://glitch.com/~material-example-app-shrine) - An e-commerce app using Text Field, Button, Drawer, List, Image List and Material Theming capabilities. You can build Shrine from scratch by walking through the Google Developers Codelabs [MDC-101 Web](https://codelabs.developers.google.com/codelabs/mdc-101-web), [MDC-102 Web](https://codelabs.developers.google.com/codelabs/mdc-102-web), and [MDC-103 Web](https://codelabs.developers.google.com/codelabs/mdc-103-web).\n- [Adopt a Pup](https://glitch.com/~adopt-a-pup) - A pet adoption app using Top App Bar, Tabs, Layout Grid, Card, Text Field, Chips, and Material Theming capabilities"
  },
  {
    "path": "docs/framework-wrappers.md",
    "content": "<!--docs:\ntitle: \"MDC Web on other frameworks\"\nnavTitle: \"Framework Wrappers\"\nlayout: landing\nsection: docs\npath: /docs/framework-wrappers/\n-->\n\n# MDC Web on other frameworks\n\nMaterial Components for the web are architected to be adaptable to various major web frameworks. The following wrapper libraries are available:\n\n  - [Material Web Components](https://github.com/material-components/material-components-web-components): MDC Web integration for Web Components (using [vanilla components](./integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))\n  - [Material Components for React](https://github.com/material-components/material-components-web-react): MDC Web integration for React (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters)). *Please note that this project is no longer under active development.*\n  - Additional third-party integrations\n    - [Preact Material Components](https://github.com/prateekbh/preact-material-components)\n    - [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc) (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)\n    - [Angular MDC](https://github.com/trimox/angular-mdc-web)\n    - [Blox Material](https://blox.src.zone/material): Angular Integration Library.\n    - [Vue MDC Adapter](https://github.com/pgbross/vue-material-adapter): MDC Web Integration for Vue.js (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)\n    - [Material Components Vue](https://github.com/matsp/material-components-vue): MDC Web Integration for Vue.js (using [vanilla components](./integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))\n    - [BalmUI](https://material.balmjs.com/): Next Generation Material UI for Vue.js\n    - [Ember Material Components](https://github.com/onehilltech/ember-cli-mdc): MDC Web integration for Ember (using [vanilla components](./integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))\n    - [MatBlazor](https://github.com/SamProf/MatBlazor): Material Design components for Blazor\n    - [Svelte Material UI](https://github.com/hperrin/svelte-material-ui): A library of Svelte 3 Material UI components.\n\n  - More coming soon! Feel free to submit a pull request adding your library to this list, so long as you meet our [criteria](integrating-into-frameworks.md).\n"
  },
  {
    "path": "docs/getting-started.md",
    "content": "<!--docs:\ntitle: \"Getting Started\"\nlayout: landing\nsection: docs\npath: /docs/getting-started/\n-->\n\n# Getting Started\n\n## Quick Start (CDN)\n\nTo try Material Components for the web with minimal setup, load the precompiled all-in-one CSS and JS bundles from unpkg:\n\n```html\n<head>\n  <link href=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\" rel=\"stylesheet\">\n  <script src=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js\"></script>\n</head>\n```\n\nWe also recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts. (Some of our examples implicitly use Material Icons.)\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nThen include MDC markup...\n\n```html\n<button class=\"mdc-button foo-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n...and instantiate JavaScript:\n\n```js\nmdc.ripple.MDCRipple.attachTo(document.querySelector<HTMLElement>('.foo-button'));\n```\n\n## Installing Locally\n\nMaterial Components for the web can be installed locally using npm. It is available as a single all-in-one package:\n\n```\nnpm i material-components-web\n```\n\n...or as individual components:\n\n```\nnpm i @material/button @material/ripple\n```\n\nEach package provides precompiled CSS and JS under its `dist` folder. The precompiled JS is converted to UMD format and is consumable directly by browsers or within any workflow that expects to consume ES5. Referencing `@material/foo` within a Node.js context will automatically reference the precompiled JS under `dist`.\n\nHowever, for optimal results, we recommend consuming MDC Web's ES2015 modules and Sass directly. This is outlined in the steps below.\n\n## Using MDC Web with Sass and ES2015\n\nThis section walks through how to [install MDC Web Node modules](https://www.npmjs.com/org/material), and bundle the Sass and JavaScript from those Node modules in your [webpack](https://webpack.js.org/) configuration.\n\nYou can also see the final code and result in the [Material Starter Kit](https://glitch.com/~material-starter-kit).\n\n> Note: This guide assumes you have Node.js and npm installed locally.\n\n### Step 1: Webpack with Sass\n\nWe’re going to use `webpack-dev-server` to demonstrate how webpack bundles our Sass and JavaScript. First, run `npm init` to create a `package.json` file. When complete, add the `start` property to the `scripts` section.\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"webpack serve\"\n  }\n}\n```\n\nYou’ll need all of these Node dependencies:\n- [webpack](https://www.npmjs.com/package/webpack): Bundles Sass and JavaScript\n- [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server): Development server\n- [sass-loader](https://www.npmjs.com/package/sass-loader): Webpack loader to preprocess Sass files\n- [sass](https://www.npmjs.com/package/sass): Sass compiler\n- [css-loader](https://www.npmjs.com/package/css-loader): Resolves CSS @import and url() paths\n- [extract-loader](https://github.com/peerigon/extract-loader): Extracts the CSS into a `.css` file\n- [file-loader](https://github.com/webpack-contrib/file-loader): Serves the `.css` file as a public URL\n\nYou can install all of them by running this command:\n\n```\nnpm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader sass extract-loader file-loader\n```\n\nIn order to demonstrate how webpack bundles our Sass, you’ll need an `index.html`. This HTML file needs to include CSS. The CSS is generated by sass-loader, which compiles Sass files into CSS. The CSS is extracted into a `.css` file by extract-loader. Create this simple “hello world” `index.html`:\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"bundle.css\">\n  </head>\n  <body>Hello World</body>\n</html>\n```\n\nAnd create a simple Sass file called `app.scss`:\n\n```scss\nbody {\n  color: blue;\n}\n```\n\nThen configure webpack to convert `app.scss` into `bundle.css`. For that you need a new `webpack.config.js` file:\n\n```js\nmodule.exports = [{\n  entry: './app.scss',\n  output: {\n    // This is necessary for webpack to compile\n    // But we never use style-bundle.js\n    filename: 'style-bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: 'bundle.css',\n            },\n          },\n          { loader: 'extract-loader' },\n          { loader: 'css-loader' },\n          {\n            loader: 'sass-loader',\n            options: {\n              // Prefer Dart Sass\n              implementation: require('sass'),\n\n              // See https://github.com/webpack-contrib/sass-loader/issues/804\n              webpackImporter: false,\n            },\n          },\n        ]\n      }\n    ]\n  },\n}];\n```\n\nTo test your webpack configuration, run:\n\n```\nnpm start\n```\n\nAnd open http://localhost:8080 in a browser. You should see a blue “Hello World”.\n\n<img src=\"hello_world.png\" alt=\"Hello World\" width=\"92\" height=\"34\">\n\n### Step 2: Include CSS for a component\n\nNow that you have webpack configured to compile Sass into CSS, let's include the Sass files for the Material Design button. First, install the Node dependency:\n\n```\nnpm install @material/button\n```\n\nWe need to tell our `app.scss` to import the Sass files for `@material/button`. We can also use Sass mixins to customize the button. Replace your “hello world” version of `app.scss` with this code:\n\n```scss\n@use '@material/button/mdc-button';\n@use '@material/button';\n\n.foo-button {\n  @include button.container-fill-color(darksalmon);\n}\n```\n\nWe also need to configure sass-loader to understand the `@material` imports used by MDC Web. Update your `webpack.config.js` by changing `{ loader: 'sass-loader' }` to:\n\n```js\n{\n  loader: 'sass-loader',\n  options: {\n    // Prefer Dart Sass\n    implementation: require('sass'),\n\n    // See https://github.com/webpack-contrib/sass-loader/issues/804\n    webpackImporter: false,\n    sassOptions: {\n      includePaths: ['./node_modules']\n    },\n  }\n}\n```\n\n> Note: Configuring `includePaths` should suffice for most cases where all MDC Web packages are kept up-to-date\n> together. If you encounter problems compiling Sass due to nested `node_modules` directories, see the\n> [Appendix](#appendix-configuring-a-sass-importer-for-nested-node_modules) below on how to configure a custom importer\n> instead.\n\nIn order to add vendor-specific styles to the Sass files, we need to configure `autoprefixer` through PostCSS.\n\nYou'll need all of these Node dependencies:\n- [autoprefixer](https://www.npmjs.com/package/autoprefixer): Parses CSS and adds vendor prefixes to CSS rules\n- [postcss-loader](https://github.com/postcss/postcss-loader): Loader for Webpack used in conjunction with autoprefixer\n\nYou can install all of them by running this command:\n\n```\nnpm install --save-dev autoprefixer postcss-loader\n```\n\nAdd `autoprefixer` at the top of your `webpack.config.js`:\n\n```js\nconst autoprefixer = require('autoprefixer');\n```\n\nThen add `postcss-loader`, using `autoprefixer` as a plugin:\n\n```js\n{ loader: 'extract-loader' },\n{ loader: 'css-loader' },\n  {\n    loader: 'postcss-loader',\n    options: {\n      postcssOptions: {\n        plugins: [\n          autoprefixer()\n        ]\n      }\n    } \n  },\n{\n  loader: 'sass-loader',\n  options: {\n    sassOptions: {\n      includePaths: ['./node_modules']\n    },\n    // Prefer Dart Sass\n    implementation: require('sass'),\n\n    // See https://github.com/webpack-contrib/sass-loader/issues/804\n    webpackImporter: false,\n  }\n},\n```\n\n`@material/button` has [documentation](../packages/mdc-button/README.md) about the required HTML for a button. Update your `index.html` to include the MDC Button markup, and add the `foo-button` class to the element:\n\n```html\n<body>\n  <button class=\"foo-button mdc-button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Button</span>\n  </button>\n</body>\n```\n\nNow run `npm start` again and open http://localhost:8080. You should see a Material Design button!\n\n<img src=\"button.png\" alt=\"Button\" width=\"90\" height=\"36\">\n\n### Step 3: Webpack with ES2015\n\nWe need to configure webpack to bundle ES2015 JavaScript into standard JavaScript, through [babel](https://babeljs.io). You’ll need all of these dependencies:\n\n- [@babel/core](https://www.npmjs.com/package/@babel/core)\n- [babel-loader](https://www.npmjs.com/package/babel-loader): Compiles JavaScript files using babel\n- [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env): Preset for compiling es2015\n\nYou can install all of them by running this command:\n\n```\nnpm install --save-dev @babel/core babel-loader @babel/preset-env\n```\n\nIn order to demonstrate how webpack bundles our JavaScript, you’ll need to update `index.html` to include JavaScript. The JavaScript file is generated by babel-loader, which compiles ES2015 files into JavaScript. Add this script tag to `index.html` before the closing `</body>` tag:\n\n```html\n<script src=\"bundle.js\" async></script>\n```\n\nAnd create a simple ES2015 file called `app.js`:\n\n```js\nconsole.log('hello world');\n```\n\nThen configure webpack to convert `app.js` into `bundle.js` by modifying the following properties in the `webpack.config.js` file:\n\n1. Change entry to an array containing both `app.scss` and `app.js`:\n   ```js\n   entry: ['./app.scss', './app.js']\n   ```\n2. Change `output.filename` to be `bundle.js`:\n   ```js\n   output: {\n     filename: 'bundle.js',\n   }\n   ```\n3. Add the `babel-loader` object to the rules array after the `sass-loader` object:\n   ```js\n   {\n     test: /\\.js$/,\n     loader: 'babel-loader',\n     query: {\n       presets: ['@babel/preset-env'],\n     },\n   }\n   ```\n\nThe final `webpack.config.js` file should look like this:\n\n```js\nconst autoprefixer = require('autoprefixer');\n\nmodule.exports = {\n  entry: ['./app.scss', './app.js'],\n  output: {\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: 'bundle.css',\n            },\n          },\n          {loader: 'extract-loader'},\n          {loader: 'css-loader'},\n          {\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: {\n                plugins: [\n                  autoprefixer()\n                ]\n              }\n            } \n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              // Prefer Dart Sass\n              implementation: require('sass'),\n\n              // See https://github.com/webpack-contrib/sass-loader/issues/804\n              webpackImporter: false,\n              sassOptions: {\n                includePaths: ['./node_modules'],\n              },\n            },\n          }\n        ],\n      },\n      {\n        test: /\\.js$/,\n        loader: 'babel-loader',\n        query: {\n          presets: ['@babel/preset-env'],\n        },\n      }\n    ],\n  },\n};\n```\n\nNow run `npm start` again and open http://localhost:8080. You should see a “hello world” in the console.\n\n### Step 4: Include JavaScript for a component\n\nNow that you have webpack configured to compile ES2015 into JavaScript, let's include the ES2015 files from the Material Design ripple. First, install the Node dependency:\n\n```\nnpm install @material/ripple\n```\n\nWe need to tell our `app.js` to import the ES2015 file for `@material/ripple`. We also need to initialize an `MDCRipple` with a DOM element. Replace your “hello world” version of `app.js` with this code:\n\n```js\nimport {MDCRipple} from '@material/ripple/index';\nconst ripple = new MDCRipple(document.querySelector<HTMLElement>('.foo-button'));\n```\n\n> Note: We explicitly reference `index` within each MDC Web package in order to import the ES2015 source directly.\n> This allows for tree-shaking and avoiding duplicate code for common dependencies (e.g. Ripple).\n> However, it requires transpiling the MDC Web modules using the tools installed in Step 3.\n\nNow run `npm start` again and open http://localhost:8080. You should see a Material Design ripple on the button!\n\n<img src=\"button_with_ripple.png\" alt=\"Button with Ripple\" width=\"90\" height=\"36\">\n\n### Step 5: Build Assets for Production\n\nUp to this point, we've used `webpack-dev-server` to preview our work with live updates. However, `webpack-dev-server` is not intended for production use. Instead, we should generate production-ready assets.\n\nAdd another script to `package.json`:\n\n```json\n  \"scripts\": {\n    \"build\": \"webpack\",\n    \"start\": \"webpack serve\"\n  }\n```\n\nNow run the following command:\n\n```\nnpm run build\n```\n\nThis will produce `bundle.js` and `bundle.css` in the project directory. These contain the compiled CSS and transpiled JS, which you can then copy into a directory served by any web server.\n\n## Appendix: Configuring a Sass Importer for Nested node_modules\n\nIt is possible to end up with nested `node_modules` folders if you have dependencies on conflicting versions of\nindividual MDC Web packages. This may lead to errors when attempting to compile Sass with the `includePaths`\nconfiguration shown above, since Sass is only scanning for `@material` packages under the top-level `node_modules`\ndirectory.\n\nAlternatively, you can implement an importer as follows, which makes use of node's module resolution algorithm to find\nthe dependency nearest to the file that imported it. Add the following code near the top of your `webpack.config.js`\n(before the `exports`):\n\n```js\nconst path = require('path');\n\nfunction tryResolve_(url, sourceFilename) {\n  // Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors\n  // when the importer throws\n  try {\n    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});\n  } catch (e) {\n    return '';\n  }\n}\n\nfunction tryResolveScss(url, sourceFilename) {\n  // Support omission of .scss and leading _\n  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;\n  return tryResolve_(normalizedUrl, sourceFilename) ||\n    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),\n      sourceFilename);\n}\n\nfunction materialImporter(url, prev) {\n  if (url.startsWith('@material')) {\n    const resolved = tryResolveScss(url, prev);\n    return {file: resolved || url};\n  }\n  return {file: url};\n}\n```\n\nThen update your `sass-loader` config to the following:\n\n```js\n {\n   loader: 'sass-loader',\n   options: {   \n     // Prefer Dart Sass\n     implementation: require('sass'),\n\n     // See https://github.com/webpack-contrib/sass-loader/issues/804\n     webpackImporter: false,\n     sassOptions: {\n       importer: materialImporter,\n       includePaths: ['./node_modules'],\n     },\n   },\n }\n```\n"
  },
  {
    "path": "docs/importing-js.md",
    "content": "<!--docs:\ntitle: \"Importing JS Components\"\nnavTitle: \"Importing JS Components\"\nlayout: landing\nsection: docs\npath: /docs/importing-js/\n-->\n\n# Importing JS\n\n## Importing the JS component\n\nMost components ship with Component / Foundation classes which are used to provide a full-fidelity Material Design component. Depending on what technology you use in your stack, there are several ways to import the JavaScript.\n\n### ES Modules\n\n```js\nimport {MDCFoo, MDCFooFoundation} from '@material/foo';\n```\n\nNote that MDC Web's packages point `main` to pre-compiled UMD modules under `dist` to maximize compatibility.\nBuild toolchains often assume that dependencies under `node_modules` are already ES5, and thus skip transpiling them.\n\nHowever, if you want to take advantage of tree-shaking and dependency sharing within MDC Web's code to reduce the size\nof your built assets, you will want to explicitly reference the package's `index.js`:\n\n```js\nimport {MDCFoo, MDCFooFoundation} from '@material/foo/index';\n```\n\nCertain build tools will detect the [`module`](https://github.com/rollup/rollup/wiki/pkg.module) property in `package.json`,\nwhich points to an ES Module otherwise only containing ES5 syntax.\nIf you're using [Webpack](https://webpack.js.org/) or\n[Rollup](https://rollupjs.org/guide/en), you do not need to\nreference `/index` directly, and can continue to use the shorter\n`@material/foo` import path syntax.\n\nNote that in this case, you must ensure your build toolchain is configured to process MDC Web's modules\nas well as your own.\n\nSee the [Getting Started guide](getting-started.md) for more details on setting up an environment.\n\n#### TypeScript\n\nIf you are using TypeScript, MDC Web's packages also include `.d.ts` files for your consumption.\nMost of the time you shouldn't need to explicitly reference these, as the TypeScript compiler should automatically\nfind them via the `types` property found in `package.json`. There is a bundled `.d.ts` file found under the `dist`\ndirectory that maps to the respective UMD module.\nThere are corresponding `.d.ts` files for each foundation/component/adapter/etc. within the package.\n\n> NOTE: We intentionally omit `.ts` source files in our packages because the `.d.ts` files and transpiled `.js` (in UMD or ES Module format) are universally accepted.\n\n### CommonJS\n\n```js\nconst mdcFoo = require('@material/foo');\nconst MDCFoo = mdcFoo.MDCFoo;\nconst MDCFooFoundation = mdcFoo.MDCFooFoundation;\n```\n\n### AMD\n\n```js\nrequire(['path/to/@material/foo'], mdcFoo => {\n  const MDCFoo = mdcFoo.MDCFoo;\n  const MDCFooFoundation = mdcFoo.MDCFooFoundation;\n});\n```\n\n### Global / CDN\n\n```js\nconst MDCFoo = mdc.foo.MDCFoo;\nconst MDCFooFoundation = mdc.foo.MDCFooFoundation;\n```\n\n## Instantiating components via CSS selector queries\n\nMany of the examples across the MDC Web documentation demonstrate how to create a component instance for a single element in a page:\n\n```js\nconst foo = new MDCFoo(document.querySelector('.mdc-foo'));\n```\n\nThis assumes there is one element of interest on the entire page, because `document.querySelector` always returns at most one element (the first match it finds).\n\nTo instantiate components for **multiple** elements at once, use `querySelectorAll`:\n\n```js\nconst foos = [].map.call(document.querySelectorAll('.mdc-foo'), function(el) {\n  return new MDCFoo(el);\n});\n```\n"
  },
  {
    "path": "docs/integrating-into-frameworks.md",
    "content": "<!--docs:\ntitle: \"Integrating MDC Web into Frameworks\"\nnavTitle: \"Framework Integration\"\nlayout: landing\nsection: docs\npath: /docs/framework-integration/\n-->\n\n# Integrating MDC Web into Frameworks\n\nMDC Web was designed to be integrated as easily as possible into any and all web frameworks. This\ndocument will walk you through strategies for integrating components into various types of\nframeworks.\n\n## Examples\n\nWe maintain a list of component libraries, which wrap MDC Web for other frameworks, in our main [README](../README.md) (under the [MDC Web on other frameworks](./framework-wrappers.md) document). Each library must:\n- Serve components in an à-la-carte delivery model\n- Have existed for longer than 6 weeks and show continued maintenance over time\n- Provide usage documentation per component\n\n## Approaches\n\nThere are two approaches you can take for integrating our components into frameworks: the **simple**\napproach and the **advanced** approach. Both have their benefits and drawbacks, and are explained\nbelow.\n\n### The Simple Approach: Wrapping MDC Web vanilla components.\n\nThe easiest way to integrate MDC Web into frameworks is to use our vanilla components directly. This\nworks well for frameworks which assume they will be executed within the context of a browser, such\nas [angular v1](https://angularjs.org), [backbone.js](http://backbonejs.org/), or even things such as [jQuery plugins](https://learn.jquery.com/plugins/basic-plugin-creation/).\n\nThe simple approach can be outlined as follows:\n\n1. Include the Component's CSS on the page any way you wish\n2. Create a **wrapper component** for your framework of choice, and add a property which will be\n   set to the value of the MDC Web Component. We'll call this `mdcComponent`.\n3. When the wrapper component is **initialized** (e.g. it is instantiated and attached to the DOM),\n   _instantiate the MDC Web component with a root element, and assign it to the `mdcComponent`\n   property_.\n4. When the wrapper component is **destroyed** (e.g. it is unbound and detached from the DOM), call\n   `mdcComponent.destroy()` to clean up the MDC Web component.\n\nThis general approach will work for almost all basic use-cases. For an example of this approach,\ncheck out [this plunk](https://plnkr.co/edit/qZl2frDGBT6Ro7jEMbjP?p=preview) which\nshows how to wrap our text field within an angular v1 component, as well as our button (with a\nripple) within an attribute directive.\n\nNote that this approach will also work for [custom elements](https://developers.google.com/web/fundamentals/getting-started/primers/customelements). Use `connectedCallback` for initialization\nand `disconnectedCallback` for destruction.\n\n### The Advanced Approach: Using foundations and adapters\n\nMany modern front-end libraries/frameworks, such as react and angular, wind up targeting more than\njust a web browser. For these frameworks - and for some highly advanced application architectures -\na more robust approach is required. We provide foundations and adapters to accommodate this use\ncase.\n\n> If you are interested in wrapping our components using foundations/adapters, you should first read\n> through our [architecture overview](code/architecture.md) in order to familiarize yourself with the\n> general concepts behind them.\n\nEvery component comes with a complementary foundation class, which is usually called\n`MDCComponentFoundation`, where `MDCComponent` is the name of a component. For example, we have an\n[MDCMenuFoundation](../packages/mdc-menu/foundation.ts) that is used by our\n[MDCMenu](../packages/mdc-menu/index.ts) component, and which are both exported\npublicly.\n\nIn order to implement a component via a foundation, take the following steps:\n\n1. Include the component's CSS on the page any way you wish\n2. Add an instance property to your component which will be set to the proper foundation class.\n   We'll call this `mdcFoundation`.\n3. Instantiate a foundation class, passing it a properly configured adapter as an argument\n4. When your component is initialized, call `mdcFoundation.init()`\n5. When your component is destroyed, call `mdcFoundation.destroy()`\n\nBecause of the nature of our components, some of the adapter APIs can be quite complex. However, we\nare working as hard as we can to make writing adapters as easy and predictable as possible:\n\n- Adapters are strictly versioned: _any_ change to an adapter interface - associative or not - is\n  considered breaking and will cause a major version update of the component.\n- Every adapter interface is thoroughly documented within each component's README\n- Most adapter methods are one-liners, and for those that aren't, we provide `util` objects which\n  implement those methods.\n- We try and provide guidance on different ways to implement certain adapter methods that may seem\n  ambiguous\n- We plan on creating Type Definitions for our adapters in the future so that TypeScript users can\n  validate that their interface conforms correctly to the adapter's specification.\n\n> Please [file an issue](https://github.com/material-components/material-components-web/issues/new/choose) with us if there are certain snags you've ran into trying to implement an\n  adapter, or if you feel that we can provide better guidance on a particular problem. This is\n  definitely something we want to know about.\n"
  },
  {
    "path": "docs/local-development.md",
    "content": "# Local Development\n\nUse this document to run demos for local development of Material Components Web\nproject.\n\n## Create demo assets\n\nCreate `demo/` folder inside component package folder that you're working on.\nFor example, `packages/mdc-checkbox/demo/`\n\n### HTML\n\nAdd HTML structure required to render component (Copy HTML structure from\ncomponent README files).\n\n**index.html** (Sample HTML structure for checkbox):\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\"\n           class=\"mdc-checkbox__native-control\"\n           id=\"checkbox-1\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n    <div class=\"mdc-checkbox__ripple\"></div>\n  </div>\n  <label for=\"checkbox-1\">Checkbox 1</label>\n</div>\n\n<script type=\"module\" src=\"./index.ts\"></script>\n```\n\nWe'll create demo `index.ts` file in following steps.\n\n### Sass\n\nInclude Sass files required to style target components using relative path\n(relative to `demo/` folder).\n\n**index.scss**:\n\n```scss\n@use \"../../mdc-form-field/mdc-form-field\";\n@use \"../mdc-checkbox\";\n```\n\n### TypeScript\n\nAdd TypeScript code to initialize components and to add any additional\nTypeScript code for the demo.\n\n**index.ts**:\n\n```ts\nimport {MDCFormField} from '../../mdc-form-field/component';\nimport {MDCCheckbox} from '../component';\nimport './index.scss';\n\nconst checkboxEl = document.querySelector<HTMLElement>('.mdc-checkbox');\nconst formFieldEl = document.querySelector<HTMLElement>('.mdc-form-field');\n\nif (checkboxEl && formFieldEl) {\n  const checkbox = new MDCCheckbox();\n  const formField = new MDCFormField();\n  formField.input = checkbox;\n}\n```\n\n`index.scss` is the demo Sass file created in above section.\n\n## Run dev server\n\nWe'll use [Parcel.js](https://parceljs.org) bundler to compile & run dev server.\nUse `index.html` created above as entry point to parcel bundler CLI.\n\n```shell\nnpm i\nnpx parcel packages/mdc-checkbox/demo/index.html\n```\n\nNow open http://localhost:1234/ in your browser.\n"
  },
  {
    "path": "docs/migrating-from-mdl.md",
    "content": "<!--docs:\ntitle: \"Migrating from Material Design Lite\"\nnavTitle: \"Migrating from MDL\"\nlayout: landing\nsection: docs\npath: /docs/migrating-from-mdl/\n-->\n\n# Migrating from Material Design Lite\n\nMaterial Components for the web (MDC Web) is the successor to the Material Design Lite (MDL) project.\n\nWhile the philosophy behind the two projects is quite similar, migrating to MDC Web requires a number of changes, from\nclass names to different DOM structures. In addition, there are several choices to be made regarding component\ninitialization, how to depend on MDC Web, and theming/styling mechanisms.\n\nThis document attempts to summarize and guide you through the work involved. Let’s get started!\n\n> **Note:** If you’re thinking of migrating your application to MDC Web, please bear in mind that it’s still in an alpha\nstate and thus APIs and certain UX features are subject to change.\n\n\n## Depending on MDC Web\n\nMDL is distributed on npm, Bower, and through its own CDN. It is a singular, universal library consisting of all\ncomponents and styles in one package.\n\nIn contrast, MDC Web is available only via npm. It is designed to be modular and is subdivided into individual component\npackages, in addition to the all-encompassing `material-components-web` package, allowing you to choose whether to pull\nin everything, or just the packages you want.\n\n### npm\n\nMDC Web is available on [npm](https://www.npmjs.com/), with packages living under the `@material` namespace.\n\nIn order to install e.g. the button component, you can run:\n\n```\nnpm install @material/button\n```\n\nSome packages serve as dependencies for others, so don’t be surprised if you end up with multiple packages in your\n`node_modules` folder! There are very few runtime dependencies outside of MDC Web, so the dependency tree should remain\nsmall.\n\nIf you want all of MDC Web, you can pull in the meta package:\n\n```\nnpm install material-components-web\n```\n\n### Content Distribution Network (CDN)\n\nWhile MDL is available over a CDN, there’s currently no equivalent in MDC Web.\n\nIn the meantime, you can take advantage of the [unpkg CDN](https://unpkg.com/), which automatically provides\ndistribution for all npm packages.\n\nFor easily getting all MDC Web CSS:\n\n```\nhttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\n```\n\nAnd JS:\n\n```\nhttps://unpkg.com/material-components-web@latest/dist/material-components-web.min.js\n```\n\nCheck the [unpkg CDN main page](https://unpkg.com/) for more information on how to request particular version ranges.\n\nYou can also request individual packages' JS and CSS, e.g.:\n\n```\nhttps://unpkg.com/@material/textfield@latest/dist/mdc.textfield.min.js\nhttps://unpkg.com/@material/textfield@latest/dist/mdc.textfield.min.css\n```\n\n> **Note:** We heavily recommend installing MDC Web packages locally in order to take full advantage of their\ncustomization APIs. See the [Getting Started Guide](getting-started.md) for more information.\n\n## Initializing components\n\nBoth MDL and MDC Web require the user to provide a specific DOM structure for a component, in order for it to function\ncorrectly. This DOM has certain requirements, such as requiring the presence of specific CSS classes, a certain\nhierarchy, and in some cases, specific HTML elements.\n\nMDL:\n\n```html\n<div class=\"mdl-text-field mdl-js-text-field\">\n  <input class=\"mdl-text-field__input\" type=\"text\" id=\"input\">\n  <label class=\"mdl-text-field__label\" for=\"input\">Input Label</label>\n</div>\n```\n\nMDC Web:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"label\">\n  <span id=\"label\" class=\"mdc-floating-label\">Input Label</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\nIn MDC Web, the DOM you specify must be complete; unlike MDL, the library will not create any missing elements for you.\nThis is done in order to make behavior more deterministic and give you greater freedom in customizing the non-critical\nparts of a component's DOM.\n\nOnce a DOM is available, MDL manages component lifecycles automatically, by running through the page on load,\nidentifying DOM structures that correspond to MDL components, and automatically upgrading them.\n\nIn MDC Web, however, you have the choice between managing components’ lifecycles yourself, or having them automatically\ninitialized, similarly to MDL.\n\n### Auto-initialization\n\nAuto-initialization is handled by the `@material/auto-init` package, so start by ensuring that you’re depending on it\n(check the [Depending on MDC Web section](#depending-on-mdc-web)).\n\nFor every component that you want to automatically initialize, set the `data-mdc-auto-init` attribute on the root\nelement, with the component’s class name as the value. For example:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\" data-mdc-auto-init=\"MDCTextField\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"label\">\n  <span id=\"label\" class=\"mdc-floating-label\">Input Label</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\nAuto-initialization needs to be triggered explicitly, but doing so is very straightforward.\n\nIf you're using already-transpiled JS:\n\n```js\nmdc.autoInit();\n```\n\nIf you're using ES Module syntax:\n\n```js\nimport autoInit from '@material/auto-init';\n\nautoInit();\n```\n\nWhen using `autoInit`, you can access a component’s JavaScript instance via its root DOM element, on a property with the\nsame name as the value you passed to `data-mdc-auto-init`. So, for the example above:\n\n```js\ndocument.querySelector('.mdc-text-field').MDCTextField.disabled = true;\n```\n\nSee the [`@material/auto-init` README](../packages/mdc-auto-init/README.md) for more details.\n\n### Manual lifecycle management\n\nWhile auto-initialization works very well for simpler use cases, manual management of components’ lifecycles is a better\noption for complex applications that dynamically create and destroy parts of their user interface.\n\nMDC Web modules include both UMD and ES Module sources. Both are transpiled ES5, so you can choose the best option depending on\nyour build toolchain.\n\n> **Note:** When instantiating manually, be sure to store the returned instance somewhere so that you can access it when\nyou need to; unlike with auto-initialization, there is no way to retrieve it later via the DOM.\n\n#### Importing a component from ES Module sources\n\nStart by importing the component:\n\n```js\nimport {MDCTextField} from '@material/textfield';\n```\n\nThen instantiate it by calling the constructor on the root node:\n\n```js\nconst textField = new MDCTextField(document.querySelector('.mdc-text-field'));\n```\n\n> See the [Getting Started Guide](getting-started.md) for information on setting up a toolchain to consume ES Modules.\n\n#### Using the component class in an ES5 bundle\n\nEach MDC Web component ships with a transpiled ES5 [UMD](https://github.com/umdjs/umd) bundle, with component classes\nplaced into a package-specific property inside of the `mdc` namespace. These bundles are located under the `dist`\nsubdirectory in each published package, as opposed to the ES Modules sources under the root directory.\n\nAside from how the module is referenced, its usage otherwise remains the same. Instantiate a component by calling the\nconstructor on the root node:\n\n```js\nvar textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));\n```\n\n## Styling\n\nStyling in MDL is achieved with a collection of CSS classes that get applied to the DOM. Internally, MDL is built with\n[Sass](http://sass-lang.com/), but there was no effort in exposing the Sass mixins and functions to developers.\n\nMDC Web similarly involves applying CSS classes to the DOM, but it also puts much more emphasis on customization via\nSass mixins and functions.\n\n### Using CSS classes\n\nLike in MDL, styling components with CSS classes is simply a matter of applying them to the DOM:\n\n```html\n<div class=\"mdc-button mdc-button--raised\">Button</div>\n```\n\nEach component lists the required CSS classes, as well as all of the optional modifiers, as part of its README.\n\n### Using Sass\n\nMDC Web components expose Sass mixins and functions to help customize properties supported by Material Theming.\n\nYou can access the Sass sources for a component in the similarly named `scss` file at its package root:\n\n```scss\n@import \"@material/button/mdc-button\";\n```\n\nIn the case of `@material/button`, for example, there are several mixins that allow you to customize specific button\nproperties, as well as a convenience mixin to specify a fill color and automatically determine an accessible ink color:\n\n```scss\n.my-button {\n  @include mdc-button-filled-accessible(darkblue);\n}\n```\n\n## Theming\n\nTheming in MDL is primarily handled either by overriding the theme variables in Sass, or by depending on a pre-generated\nCSS bundle with the colors baked in, via [the customizer](https://getmdl.io/customize/index.html).\n\nMDC Web similarly includes several centralized theme variables in the `@material/theme` package, along with helper\nmixins and functions. Furthermore, MDC Web supports fine-grained theme customization via Sass mixins in each respective\ncomponent package. As with MDL, you can override the theme variables in Sass, but there’s no longer a customizer or a\nCDN with different combinations. There is CSS custom property support, however.\n\nIn the future, additional tools will be available to assist in theme customization.\n\nThe process of customizing central theme variables is described in the following sections, but check the\n[`@material/theme` README](../packages/mdc-theme/README.md) as well as the Sass APIs in each package for more details.\n\n### Sass variables\n\nIn order to change the theme colors for your entire application, simply define the desired theme color variables before\nimporting `@material/theme` or any MDC Web components that rely on it:\n\n```scss\n$mdc-theme-primary: #9c27b0;\n$mdc-theme-secondary: #ffab40;\n$mdc-theme-background: #fff;\n\n@import \"@material/theme/mdc-theme\";\n```\n\nThe correct text colors will automatically be calculated based on the provided theme colors.\n\n### CSS custom properties\n\nIf you are only targeting browsers which support CSS custom properties, you can use the custom properties provided by\n`@material/theme`:\n\n```css\n:root {\n  --mdc-theme-primary: #9c27b0;\n  --mdc-theme-secondary: #ffab40;\n  --mdc-theme-background: #fff;\n}\n```\n\nUnfortunately, due to the current limitations of CSS color handling, it’s not currently possible to automatically\ncalculate the correct text colors to use, based on the chosen theme colors. These will all need to be set manually.\nPlease check the [`@material/theme` README](../packages/mdc-theme/README.md) for more details.\n\n## Browser support\n\nUnlike MDL, in which support goes back to Internet Explorer 9, MDC Web only supports IE 11.\n\nFor modern browsers, MDC Web supports the 2 most recent stable releases.\n\n## Component equivalence\n\nFor many components, there is a 1:1 relation between MDL and MDC Web. In other cases there are some differences, with\nMDL components being split up into multiple MDC Web ones, new ones being added, and some still to be implemented.\n\nThe following table summarizes the current situation (TBI = to be investigated):\n\n| MDL component | MDC Web component | Notes |\n| ------------- | ----------------- | ----- |\n| `mdl-animation` | [`@material/animation`](../packages/mdc-animation/README.md) | Very similar. |\n| `mdl-badge` | None | Not currently planned for MDC Web. |\n| `mdl-button` | Split into [`@material/button`](../packages/mdc-button/README.md) and [`@material/fab`](../packages/mdc-fab/README.md) | No equivalent to MDL's Icon Button in MDC Web at the moment, [TBI](https://github.com/material-components/material-components-web/issues/12). |\n| `mdl-card` | [`@material/card`](../packages/mdc-card/README.md) | Very different DOM. More options in MDC Web. |\n| `mdl-checkbox` | [`@material/checkbox`](../packages/mdc-checkbox/README.md) | Very different DOM. Recommended use with [`@material/form-field`](../packages/mdc-form-field/README.md). |\n| `mdl-chip` | [`@material/chips`](../packages/mdc-chips/README.md) | Different DOM and variants. |\n| `mdl-data-table` | [`@material/data-table`](../packages/mdc-data-table/README.md) | |\n| `mdl-dialog` | [`@material/dialog`](../packages/mdc-dialog/README.md) | Sufficiently different from MDL. MDL uses the `dialog` element which has limited cross-browser support. `mdc-dialog` relies on elements with more cross-browser support. |\n| `mdl-footer` | None | Not currently planned for MDC Web. |\n| `mdl-grid` | [`@material/layout-grid`](../packages/mdc-layout-grid/README.md) | Very similar. No offsets in MDC Web. |\n| `mdl-icon-toggle` | [`@material/icon-button`](../packages/mdc-icon-button/README.md) | Very different DOM. |\n| `mdl-layout` | Split into [`@material/drawer`](../packages/mdc-drawer/README.md), [`@material/top-app-bar`](../packages/mdc-top-app-bar/README.md), [`@material/layout-grid`](../packages/mdc-layout-grid/README.md), and [`@material/tab-bar`](../packages/mdc-tab-bar/README.md), [`@material/tab-scroller`](../packages/mdc-tab-scroller/README.md), [`@material/tab`](../packages/mdc-tab/README.md), [`@material/tab-indicator`](../packages/mdc-tab-indicator/README.md) | Different DOM and variants. |\n| `mdl-list` | [`@material/list`](../packages/mdc-list/README.md) | Very different DOM. |\n| `mdl-menu` | [`@material/menu`](../packages/mdc-menu/README.md) | Very different DOM. |\n| `mdl-palette` | [`@material/theme`](../packages/mdc-theme/README.md) | All theming is handled via [`@material/theme`](../packages/mdc-theme/README.md). |\n| `mdl-progress` | [`@material/linear-progress`](../packages/mdc-linear-progress/README.md) | Very different DOM. |\n| `mdl-radio` | [`@material/radio`](../packages/mdc-radio/README.md) | Very different DOM. Recommended use with [`@material/form-field`](../packages/mdc-form-field/README.md). |\n| `mdl-resets` | None. | Not currently planned for MDC Web. |\n| `mdl-ripple` | [`@material/ripple`](../packages/mdc-ripple/README.md) | Very different usage; much improved in MDC Web. |\n| `mdl-shadow` | [`@material/elevation`](../packages/mdc-elevation/README.md) | Similar usage. |\n| `mdl-slider` | [`@material/slider`](../packages/mdc-slider/README.md) | Very different DOM. |\n| `mdl-snackbar` | [`@material/snackbar`](../packages/mdc-snackbar/README.md) | Very different DOM. |\n| `mdl-spinner` | [`@material/circular-progress`](../packages/mdc-circular-progress/README.md) |  |\n| `mdl-switch` | [`@material/switch`](../packages/mdc-switch/README.md) | Very different DOM. |\n| `mdl-tabs` | Split into [`@material/tab-bar`](../packages/mdc-tab-bar/README.md), [`@material/tab-scroller`](../packages/mdc-tab-scroller/README.md), [`@material/tab`](../packages/mdc-tab/README.md), [`@material/tab-indicator`](../packages/mdc-tab-indicator/README.md) | Very different DOM. |\n| `mdl-text-field` | [`@material/textfield`](../packages/mdc-textfield/README.md) | Very different DOM and variants. |\n| `mdl-tooltip` | [`@material/tooltip`](../packages/mdc-tooltip/README.md) | |\n| `mdl-typography` | [`@material/typography`](../packages/mdc-typography/README.md) | Somewhat different usage; different/updated typography styles. |\n\nMDC Web also includes several new components/packages which have no MDL equivalents. See the list of\n[Material Components for the web](https://material.io/components/web/catalog/) for more information.\n"
  },
  {
    "path": "docs/open_source/README.md",
    "content": "# Open Source Community\n\nIn addition to working within the Material Design team, MDC Web communicates\nwith its external developers. External developers are the people who depend on\nMDC Web code in their web applications. Specifically, they depend on our Node\nmodules.\n\n![MDC Web External Feedback Loops](feedback.jpg?raw=true)\n\n## External Developers\n\nExternal developers have two critical ways of communicating with us\n\n* [Filing GitHub issues](https://github.com/material-components/material-components-web/issues)\n* Talking on Discord (See Discord section)\n\nWe have several ways of pushing content to external developers:\n\n* Node Modules: the code in an installable form (See Releases section)\n* GitHub Documentation: Explain how to use the Node modules\n* GitHub Milestones: Detail our priorities for fixing bugs and completing feature requests\n* Catalog: Visualize our components (See Releases section)\n\nGitHub is where we do most of our communication with external developers. The\nGitHub documentation is critical to our external developers understanding how\nto use our Node modules. GitHub is also where they can file bugs and feature\nrequests. External developers see these issues prioritized in our release milestones\non GitHub.\n\n## Release Cop\n\nMDC Web team members are expected to triage GitHub issues and release code to\nNPM. Triage and release are only performed when the team member is\n“release cop”, which is determined by a rotation calendar. Each team member is\nrelease cop for two weeks.\n\n* [Triage Process](triage.md)\n* [Release Process](release-process.md)\n* Idle in Discord\n\n## External Contributors\n\nThere is a special kind of external developer: the kind that also contributes\ncode back to our repository. These external contributors fix GitHub issue we\nmark as “help wanted” in our triage process. This prevents the GitHub issue from\nbecoming a bug in our icebox or milestones, which saves core contributors from\nhaving to fix the bug.\n\n> Our GitHub code must be readable by external contributors. And we must review\n> code from external contributors.\n\n## Releases\n\n[NPM](https://www.npmjs.com/org/material)\n\nOur code is released as Node modules. External developers install these modules.\n\n[Catalog Server](https://material-components.github.io/material-components-web-catalog/)\n\nOur catalog server is where we visually display the components to our external\ndevelopers.\n\n## Discord\n\n[Discord channel](https://discordapp.com/invite/material-components)\n\nOur Discord channel is where we can talk with external developers in realtime.\n"
  },
  {
    "path": "docs/open_source/releases-and-branches.md",
    "content": "# Releases and Branches\n\nThis document describes the branching and release strategy we use for MDC Web, and how it affects dependent repositories\nwe maintain, namely the [MDC Web Catalog](https://github.com/material-components/material-components-web-catalog) and\n[MDC React](https://github.com/material-components/material-components-web-react).\n\nFor an explanation of the steps needed to cut a release of MDC Web, see [Release Process](./release-process.md).\n\n## Branches\n\n- The `master` branch is the default branch for any non-breaking changes.\n- The `develop` branch is the target branch for breaking changes.\n\n## MDC Web Release Schedule and Versioning\n\nMDC Web follows a 2-week release cycle. We expect to have 2 - 4 releases per year containing breaking changes.\nAny other interim releases will be patch or minor releases including any non-breaking changes.\n\nBy having a lower rate of releases with breaking changes, we will decrease the amount of overhead that users experience trying to upgrade.\n\n## Release Types\n\nIn summary, MDC Web has the following types of releases:\n\n* **Major release:** A release with new features and breaking changes; this revs the major version number (e.g. 2.0.0)\n* **Minor release:** A release with non breaking changes including new features and/or bugfixes; this revs the minor version number (e.g. 1.1.0)\n* **Patch release:** A release consisting primarily of bugfixes, with no features or breaking changes; this revs the patch version number (e.g. 1.0.1)\n* **Pre-release:** A preview release containing breaking changes, cut before the next scheduled major release (e.g. 2.0.0-0)\n\nSee [Release Process](./release-process.md) for steps to perform for different types of releases.\n\n### About Pre-releases\n\nMDC Web Catalog and MDC React both depend on MDC Web via npm dependencies. In order to be able to integrate\nbreaking changes for the upcoming release ahead of time - preferably while the necessary changes are fresh in someone's\nmind - we will cut pre-releases of MDC Web when breaking changes are merged which warrant updates in the other\nrepositories. These will be cut on an as-needed basis, with no set schedule.\n\nThe Catalog repository will each have a `next` branch, which will be updated\nto point to the pre-release (or tested against unreleased code using\n[this script](https://gist.github.com/kfranqueiro/d06c7073c5012de3edb6c5875d6a4a50)).\nPull requests should be filed against this branch for changes needed for the upcoming MDC Web release.\n\nAfter the next major release is cut and the `next` branch is squashed and merged into `master`, we will hard-reset the\n`next` branch against `master` and force-push it to accommodate the subsequent minor release.\n\n## Feature Branches\n\nIf we foresee a new component requiring a large amount of work across multiple PRs and release cycles, we\nshould keep the work in a collective feature branch first, in an attempt to avoid API churn across releases.\n(The TypeScript rewrite is one example, which occured in v1.0.0.)\n\nThis allows work on the feature to be performed across multiple separate PRs, which will each be merged into the feature\nbranch, before finally merging the feature branch into `master` after all aspects of the feature are complete.\n"
  },
  {
    "path": "docs/supported-browsers.md",
    "content": "## MDC Web: Browser support\n\nWe officially support the last two versions of every major browser. Specifically, we test on the following browsers:\n\n- **Chrome** on Android, Windows, macOS, and Linux\n- **Firefox** on Windows, macOS, and Linux\n- **Safari** on iOS and macOS\n- **Edge** on Windows\n- **IE 11** on Windows\n"
  },
  {
    "path": "docs/theming.md",
    "content": "<!--docs:\ntitle: \"Theming Guide\"\nlayout: landing\nsection: docs\npath: /docs/theming/\n-->\n\n# Theming Guide\n\n## Overview\n\nMDC Web includes a theming system designed to make it easy to change your application's colors. It provides multiple options\nfor implementing themes, allowing for maximum flexibility. At the moment, MDC Web supports theming with Sass and with CSS\nCustom Property, with plans for CDN support as well, once that service is available.\n\n## Colors\n\nMDC Web theming, like Material Design theming, uses two main colors: **primary** and **secondary**. The primary color is used\nthroughout most of the application and components, as the main color for your application. The secondary color is used\nfor floating action buttons and other interactive elements, serving as visual contrast to the primary.\n\nIn addition to the primary and secondary colors, MDC Web also defines a _surface_ color, which is used as a background in\ncomponents.\n\nFinally, MDC Web has a number of text colors, which are used for rendering text and other shapes on top of the primary,\nsecondary and background colors. These are specified as either dark or light, in order to provide sufficient contrast to\nwhat's behind them, and have\n[different levels of opacity depending on usage](https://material.io/go/design-theming#color-color-schemes):\n\n- Primary, used for most text.\n- Secondary, used for text which is lower in the visual hierarchy.\n- Hint, used for text hints (such as those in text fields and labels).\n- Disabled, used for text in disabled components and content.\n- Icon, used for icons.\n- On-surface, used for text that is on top of a surface background.\n- On-secondary, used for text that is on top of a secondary background.\n- On-primary, used for text that is on top of a primary background.\n\n## Building a themed application\n\nLet's start with a simple application, which displays several cards for different categories. We ultimately want each\ncard to have a color scheme that matches its category, but we'll start with the default theming provided by MDC Web.\n\nYou can [take a look at the end result here](https://plnkr.co/edit/jeBSvWC8mAIhUmUQvHSA?p=preview), but let's start from\nscratch.\n\n> Note: We won't cover the basics of starting an MDC Web project in this guide, so please take a look at the\n[getting started guide](./getting-started.md) if you need more information.\n\n### Step 1: No theming\n\nHere's the markup:\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <title>Elements</title>\n    <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\" />\n    <link rel=\"stylesheet\" href=\"material-components-web.min.css\" />\n    <style>\n      .cards {\n        display: flex;\n        flex-wrap: wrap;\n      }\n\n      .element-card {\n        width: 20em;\n        margin: 16px;\n      }\n\n      .element-card > .mdc-card__media {\n        height: 9em;\n      }\n\n      #demo-absolute-fab {\n        position: fixed;\n        bottom: 1rem;\n        right: 1rem;\n        z-index: 1;\n      }\n    </style>\n  </head>\n  <body class=\"mdc-typography\">\n    <h1>Choose your element</h1>\n    <div class=\"cards\">\n      <div class=\"mdc-card element-card earth\">\n        <div class=\"mdc-card__media\">\n          <div class=\"mdc-card__media-content\">\n            <h1 class=\"mdc-typography--headline4\">Earth</h1>\n            <h2 class=\"mdc-typography--headline6\">A solid decision.</h2>\n          </div>\n        </div>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </p>\n      </div>\n      <div class=\"mdc-card element-card wind\">\n        <div class=\"mdc-card__media\">\n          <h1 class=\"mdc-typography--headline4\">Wind</h1>\n          <h2 class=\"mdc-typography--headline6\">Stormy weather ahead.</h2>\n        </div>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </p>\n      </div>\n      <div class=\"mdc-card element-card fire\">\n        <div class=\"mdc-card__media\">\n          <h1 class=\"mdc-typography--headline4\">Fire</h1>\n          <h2 class=\"mdc-typography--headline6\">Hot-headed much?</h2>\n        </div>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </p>\n      </div>\n      <div class=\"mdc-card element-card water\">\n        <div class=\"mdc-card__media\">\n          <h1 class=\"mdc-typography--headline4\">Water</h1>\n          <h2 class=\"mdc-typography--headline6\">Go with the flow.</h2>\n        </div>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </p>\n      </div>\n    </div>\n    <button class=\"mdc-fab\" id=\"demo-absolute-fab\" aria-label=\"Favorite\">\n      <div class=\"mdc-fab__ripple\"></div>\n      <span class=\"mdc-fab__icon material-icons\">favorite</span>\n    </button>\n  </body>\n</html>\n```\n\nYou'll see that we have a number of pretty empty looking cards, with black text on a white background. The only hint of\ncolor comes from the FAB, which adopts the secondary color by default.\n\n### Step 2: Use the MDC Web colors in your own markup\n\nNot everything has a `--primary` option, though, particularly where it comes to your own markup.\n\nLet's make things look a bit more interesting, by using the primary color as a background to the cards' media area.\nOne way of doing this would be to write your own custom CSS rules, and set the background to the same color that's being\nused as the primary:\n\n```css\n/* Bad approach */\n.element-card > .mdc-card__media {\n  background-color: #3f51b5;\n}\n```\n\nHowever, that would not take advantage of MDC Web's theming and would thus be brittle; changes to theming would need to be\ncopied to your CSS rules, adding a maintenance cost.\n\nMDC Web provides a number of CSS classes as part of the `mdc-theme` module to help you tackle this problem in a more\nmaintainable way. Here are the classes that deal with primary, secondary and background colors:\n\n| Class                           | Description                                                                  |\n| ------------------------------- | -----------------------------------------------------------------------      |\n| `mdc-theme--primary`            | Sets the text color to the theme primary color.                              |\n| `mdc-theme--primary-bg`         | Sets the background color to the theme primary color.                        |\n| `mdc-theme--on-primary`         | Sets the text color to the color configured for text on the primary color.   |\n| `mdc-theme--secondary`          | Sets the text color to the theme secondary color.                            |\n| `mdc-theme--secondary-bg`       | Sets the background color to the theme secondary color.                      |\n| `mdc-theme--on-secondary`       | Sets the text color to the color configured for text on the secondary color. |\n| `mdc-theme--surface`            | Sets the background color to the surface background color.                   |\n| `mdc-theme--on-surface`       | Sets the text color to the color configured for text on the surface color.     |\n| `mdc-theme--background`         | Sets the background color to the theme background color.                     |\n\nFrom here, we can see that we want to apply `mdc-theme--primary-bg` to the cards' media areas:\n\n```html\n<div class=\"mdc-card element-card earth\">\n  <div class=\"mdc-card__media mdc-theme--primary-bg\">\n    <div class=\"mdc-card__media-content\">\n      <h1 class=\"mdc-typography--headline4\">Earth</h1>\n      <h2 class=\"mdc-typography--headline6\">A solid decision.</h2>\n    </div>\n  </div>\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  </p>\n</div>\n```\n\nAll the cards now use the default primary color (Indigo 500 from the Material palette) as the background for the media\narea.\n\nHowever, you'll notice that the text in the media area is still black, which provides very little contrast to the\ndefault primary color. Not all primary colors are dark, though, so you can't just switch the text color to white and\ncall it a day. Ideally, we want a solution which is as maintainable as the `mdc-theme--primary-bg` class, and which\ntakes into account the primary color, in order to determine whether to overlay white or black text on top.\n\n`mdc-theme` provides utility classes for that purpose as well. Namely, for overlaying text on a primary color\nbackground, there are:\n\n| Class                        | Description                                                                         |\n| -----------------------------| ------------------------------------------------------------------------------------|\n| `mdc-theme--on-primary`      | Set text to suitable color for text on top of a theme primary color background.     |\n| `mdc-theme--on-secondary`    | Set text to suitable color for text on top of a theme secondary color background.   |\n| `mdc-theme--on-surface`      | Set text to suitable color for text on top of a theme surface color background.     |\n\nFrom here, we can see the right choice is `mdc-theme--on-primary`. Let's apply that class to the media area :\n\n```html\n      <div class=\"mdc-card element-card earth\">\n        <div class=\"mdc-card__media mdc-theme--primary-bg mdc-theme--on-primary\">\n          <div class=\"mdc-card__media-content\">\n            <h1 class=\"mdc-typography--headline4\">Earth</h1>\n            <h2 class=\"mdc-typography--headline6\">A solid decision.</h2>\n          </div>\n        </div>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </p>\n      </div>\n```\n\nThe text is now white, which provides much better contrast. If we were to change the primary color to a light color,\nhowever, the text would be dark again, for the same reason. So how _do_ we change the primary color?\n\n\n### Step 3: Changing the theme with Sass\n\nThe application-wide theme colors that are used as the default across your entire application can be set in Sass.\nThis is as easy as defining three variables (`$primary`, `$secondary` and `$background`) in\nyour Sass file, before importing any MDC Web modules.\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #9c27b0,\n  $secondary: #76ff03,\n  $background: #fff,\n);\n@use \"material-components-web\";\n```\n\nThese definitions will override the defaults included in the `mdc-theme` module, which every themeable component depends\non. As for the text colors, these will all be automatically calculated from the primary, secondary and background you\nprovide, as part of the Sass definitions in `mdc-theme`. Pretty simple!\n\n> Note: theme colors don't have to be part of the Material palette; you can use any valid color. You may want to read\nthe [color section](https://material.io/go/design-theming) in the Material Design spec to inform your pick of an\nalternative palette.\n\nIf you want to go a step further with your theming then you can override any SASS variable throughout the codebase by\nredefining it in your application's SASS file. Exercise caution when doing this, however, as modifying internal variables\nmay have unintended consequences.\n\n\n### Step 4: Changing the theme with CSS Custom Properties\n\nChanging the theme colors with Sass affects the whole application, which is great if you want consistency across the\nboard. What we want here is slightly different, though: we want each card to have its own internally consistent theme.\n\nSo how do we keep all the current theme color \"plumbing\" for maintainability, while having different themes in different\nplaces? CSS Custom properties to the rescue!\n\nThe generated MDC Web CSS uses CSS Custom Properties with hardcoded fallbacks, which are set to the colors provided in Sass.\nThis means that you can define your default theme in Sass (like we did above), but override it in CSS, dependent on\ncontext or user preference.\n\nLet's take a closer look at how MDC Web does things. Here's an excerpt of a compiled MDC Web CSS rule:\n\n```css\n.mdc-fab {\n  background-color: #ff4081;\n  background-color: var(--mdc-theme-secondary, #ff4081);\n}\n```\n\nHere, you can see that MDC Web sets a fallback for the color, for browsers that don't support CSS Custom Properties. If\nthey do, however, that declaration gets overriden by a `var()` lookup, using the same fallback as the default value\n(in case the custom property definition isn't found).\n\nAs such, you can easily override the colors that get used in MDC Web components by simply redefining the custom property at\nsome level. So if we want to apply it to our cards, we can take advantage of the element classes we had set up:\n\n```css\n.element-card.earth {\n  --mdc-theme-primary: #795548;\n}\n\n.element-card.wind {\n  --mdc-theme-primary: #9e9e9e;\n}\n\n.element-card.fire {\n  --mdc-theme-primary: #f44336;\n}\n\n.element-card.water {\n  --mdc-theme-primary: #00bcd4;\n}\n```\n\nIt works! You can see that the colors get applied to the backgrounds. If the cards had any other\ncomponents, they'd use the correct colors as well.\n\nThe custom properties used by MDC Web follow a similar naming convention to the Sass variables and CSS classes:\n\n| Custom property               | Description                                 |\n| ----------------------------- | ------------------------------------------- |\n| `--mdc-theme-primary`         | The theme primary color.                    |\n| `--mdc-theme-secondary`       | The theme secondary color.                  |\n| `--mdc-theme-surface`         | The theme surface color.                    |\n| `--mdc-theme-background`      | The theme background color.                 |\n\nHowever, if you look closely at the page, we're not quite done yet. The text colors are incorrect: the wind and water\ncards should have dark text, rather than white. So what's happening?\n\nThe problem is that we only set the `--mdc-theme-primary` custom property. Whereas setting `$mdc-theme-primary` in Sass\nallows for calculating all the related text colors, it's currently not possible to perform those complex contrast\ncalculations in CSS. This means you'll also have to set all the related text colors:\n\n| Custom property                               | Description                                                                |\n| --------------------------------------------- | -------------------------------------------------------------------------- |\n| `--mdc-theme-on-primary`                      | Primary text on top of a theme primary color background.                   |\n| `--mdc-theme-on-secondary`                    | Secondary text on top of a theme primary color background.                 |\n| `--mdc-theme-on-surface`                      | Hint text on top of a theme primary color background.                      |\n\nThe same pattern is followed for text colors on _background_:\n\n| Custom property                            | Description                                                |\n| ------------------------------------------ | ---------------------------------------------------------- |\n| `--mdc-theme-text-primary-on-background`   | Primary text on top of the theme background color.         |\n| `--mdc-theme-text-secondary-on-background` | Secondary text on top of the theme background color.       |\n| `--mdc-theme-text-hint-on-background`      | Hint text on top of the theme background color.            |\n| `--mdc-theme-text-disabled-on-background`  | Disabled text on top of the theme background color.        |\n| `--mdc-theme-text-icon-on-background`      | Icons on top of the theme background color.                |\n\nIn addition, we also define custom properties for known dark and light backgrounds:\n\n| Custom property                            | Description                                                |\n| ------------------------------------------ | ---------------------------------------------------------- |\n| `--mdc-theme-text-primary-on-light`        | Primary text on top of a light-colored background.         |\n| `--mdc-theme-text-secondary-on-light`      | Secondary text on top of a light-colored background.       |\n| `--mdc-theme-text-hint-on-light`           | Hint text on top of a light-colored background.            |\n| `--mdc-theme-text-disabled-on-light`       | Disabled text on top of a light-colored background.        |\n| `--mdc-theme-text-icon-on-light`           | Icons on top of a light-colored background.                |\n\n| Custom property                            | Description                                                |\n| ------------------------------------------ | ---------------------------------------------------------- |\n| `--mdc-theme-text-primary-on-dark`        | Primary text on top of a dark-colored background.         |\n| `--mdc-theme-text-secondary-on-dark`      | Secondary text on top of a dark-colored background.       |\n| `--mdc-theme-text-hint-on-dark`           | Hint text on top of a dark-colored background.            |\n| `--mdc-theme-text-disabled-on-dark`       | Disabled text on top of a dark-colored background.        |\n| `--mdc-theme-text-icon-on-dark`           | Icons on top of a dark-colored background.                |\n\n\nIdeally, we should set all of the text colors on primary, since we never know which one an MDC Web component might use.\nSince our cards only contain text and no components, let's keep it simple for now:\n\n```css\n.element-card.earth {\n  --mdc-theme-primary: #795548;\n  --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-dark);\n}\n\n.element-card.wind {\n  --mdc-theme-primary: #9e9e9e;\n  --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-light);\n}\n\n.element-card.fire {\n  --mdc-theme-primary: #f44336;\n  --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-dark);\n}\n\n.element-card.water {\n  --mdc-theme-primary: #00bcd4;\n  --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-light);\n}\n```\n\nLet's see how it looks with another component inside it. Add the following code to each card just after the `p`\ntag:\n\n```html\n<button class=\"mdc-button mdc-card__actions\">\n  <i class=\"material-icons mdc-button__icon\">favorite</i>\n  Look At My Color\n</button>\n```\n## Custom Themes\n\nMost MDC Web components provide a set of Sass mixins to customize their appearance,\nsuch as changing the fill color, ink color, stroke width, etc.\nThese mixins are documented in each component's README file\n(e.g., the [Button readme](../packages/mdc-button/README.md#advanced-sass-mixins)).\n\nFor example, to change the fill color of a button and automatically select an accessible ink color,\nsimply call the `button.filled-accessible` mixin inside a custom CSS class:\n\n```scss\n@use \"@material/button\";\n\n.accessible-button {\n  @include button.filled-accessible(blue);\n}\n```\n\nThen apply the custom class to the button elements:\n\n```html\n<button class=\"mdc-button accessible-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n  <div class=\"mdc-button__label\">Button</div>\n</button>\n```\n"
  },
  {
    "path": "jasmine-node.json",
    "content": "{\n  \"spec_dir\": \".\",\n  \"spec_files\": [\n    \"packages/**/test/*.scss.test.ts\"\n  ],\n  \"helpers\": [\n    \"testing/ts-node.register.js\",\n    \"testing/featuretargeting/sass-test-compile.helper.ts\"\n  ],\n  \"stopSpecOnExpectationFailure\": false\n}\n"
  },
  {
    "path": "karma.conf.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst HEADLESS_LAUNCHERS = {\n  'ChromeHeadlessNoSandbox': {\n    base: 'ChromeHeadless',\n    flags: ['--no-sandbox'],\n  },\n};\nconst USE_SAUCE = Boolean(process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY);\nconst PROGRESS = USE_SAUCE ? 'dots' : 'progress';\nconst customLaunchers = Object.assign({}, HEADLESS_LAUNCHERS);\nconst browsers = USE_SAUCE ? Object.keys(customLaunchers) : ['Chrome'];\n\n// Files to include in Jasmine tests.\nconst FILES_TO_USE = [\n  'packages/*/!(node_modules)/**/!(*.d).ts',\n  'packages/*/!(*.d).ts',\n  'testing/**/*.ts',\n];\n\n// Files to exclude in Jasmine tests.\nconst EXCLUDE_FILES = [\n  'packages/**/*.scss.test.ts',\n  'testing/featuretargeting/**',\n  'testing/ts-node.register.js',\n  'scripts/**/*.ts',\n];\n\nmodule.exports = function(config) {\n  // Karma config options: http://karma-runner.github.io/4.0/config/configuration-file.html\n  config.set({\n    basePath: '',\n    files: FILES_TO_USE,\n    exclude: EXCLUDE_FILES,\n    frameworks: ['jasmine', 'karma-typescript'],\n    // karma-typescript: https://github.com/monounity/karma-typescript/tree/master/packages/karma-typescript\n    karmaTypescriptConfig: {\n      exclude: EXCLUDE_FILES,\n      tsconfig: './tsconfig-testing.json',\n    },\n    preprocessors: FILES_TO_USE.reduce((obj, file) => {\n      obj[file] = 'karma-typescript';\n      return obj;\n    }, {}),\n    reporters: [PROGRESS, 'karma-typescript'],\n\n    // Test runner config.\n    logLevel: config.LOG_INFO,\n    port: 9876,\n    colors: true,\n    browsers: browsers,\n    browserDisconnectTimeout: 40000,\n    browserNoActivityTimeout: 120000,\n    captureTimeout: 240000,\n    concurrency: USE_SAUCE ? 10 : Infinity,\n    customLaunchers: customLaunchers,\n  });\n\n  if (USE_SAUCE) {\n    const sauceLabsConfig = {\n      username: process.env.SAUCE_USERNAME,\n      accessKey: process.env.SAUCE_ACCESS_KEY,\n      testName: 'Material Components Web Unit Tests - CI',\n      build: process.env.SAUCE_BUILD_ID,\n      tunnelIdentifier: process.env.SAUCE_TUNNEL_ID,\n    };\n\n    config.set({\n      sauceLabs: sauceLabsConfig,\n      // Attempt to de-flake Sauce Labs tests.\n      transports: ['polling'],\n      browserDisconnectTolerance: 3,\n    });\n  }\n};\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n  \"version\": \"14.0.0\",\n  \"command\": {\n    \"version\": {\n      \"conventionalCommits\": true\n    },\n    \"publish\": {\n      \"ignoreChanges\": [\n        \"*.md\",\n        \"*.test-increment3\"\n      ]\n    },\n    \"bootstrap\": {\n      \"hoist\": true,\n      \"npmClientArgs\": [\n        \"--no-package-lock\"\n      ]\n    }\n  },\n  \"packages\": [\n    \"packages/*\"\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"description\": \"Material Components Web\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"bootstrap\": \"lerna bootstrap\",\n    \"link\": \"lerna link\",\n    \"build\": \"npm run clean && mkdirp build && webpack --mode=development --progress --colors --display=minimal\",\n    \"build:esmodules\": \"tsc --project ./tsconfig.json --module esnext --outDir ./packages --importHelpers\",\n    \"build:min\": \"mkdirp build && cross-env MDC_ENV=production webpack -p --mode=production --progress --colors --display=minimal\",\n    \"clean\": \"node ./scripts/build/clean\",\n    \"dist\": \"npm run build && npm run build:min && npm run build:esmodules\",\n    \"docgen\": \"npm run clean && npm run build:esmodules && tsc ./scripts/documentation/tsdoc.ts --resolveJsonModule && node ./scripts/documentation/tsdoc.js\",\n    \"fix:js\": \"eslint --fix scripts webpack.config.js karma.conf.js\",\n    \"fix:ts\": \"tslint --exclude \\\"**/*.d.ts\\\" --exclude \\\"packages/**/test/*.ts\\\" --fix \\\"packages/test/*.ts\\\" \\\"test/**/*.ts\\\" \\\"scripts/**/*.ts\\\"\",\n    \"fix:css\": \"prettier --write \\\"packages/**/*.scss\\\" && stylelint --fix \\\"packages/**/*.scss\\\"\",\n    \"fix\": \"npm-run-all --parallel fix:*\",\n    \"lint:css\": \"stylelint \\\"packages/**/*.scss\\\"\",\n    \"lint:js\": \"eslint scripts webpack.config.js karma.conf.js\",\n    \"lint:ts\": \"tslint --exclude \\\"**/*.d.ts\\\" --exclude \\\"packages/**/test/*.ts\\\" \\\"packages/test/*.ts\\\" \\\"test/**/*.ts\\\" \\\"scripts/**/*.ts\\\"\",\n    \"lint\": \"npm-run-all --parallel lint:*\",\n    \"postinstall\": \"npm run bootstrap\",\n    \"pretest\": \"npm run lint\",\n    \"test\": \"npm run test:unit && npm run test:dependency && npm run build && npm run clean\",\n    \"test:sass\": \"jasmine --config=jasmine-node.json\",\n    \"test:dependency\": \"./scripts/dependency-test.sh\",\n    \"test:unit\": \"karma start --single-run\",\n    \"test:watch\": \"karma start --auto-watch\",\n    \"version\": \"cat lerna.json | grep -e '^  \\\"version\\\": ' | awk '{print $2}' | sed 's/[\\\",]//g'\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.4.5\",\n    \"@babel/polyfill\": \"^7.4.4\",\n    \"@babel/traverse\": \"^7.3.4\",\n    \"@babel/types\": \"^7.3.4\",\n    \"@documentalist/compiler\": \"^2.7.0\",\n    \"@types/babel__traverse\": \"^7.0.9\",\n    \"@types/glob\": \"^7.1.1\",\n    \"@types/jasmine\": \"3.5.12\",\n    \"@types/node\": \"^12.0.10\",\n    \"@types/resize-observer-browser\": \"^0.1.3\",\n    \"@types/resolve\": \"0.0.8\",\n    \"autoprefixer\": \"^9.0.0\",\n    \"babel-core\": \"^6.22.1\",\n    \"babel-loader\": \"^7.0.0\",\n    \"babel-plugin-transform-object-assign\": \"^6.8.0\",\n    \"babel-preset-env\": \"^1.7.0\",\n    \"babel-traverse\": \"^6.24.1\",\n    \"babel-types\": \"^6.24.1\",\n    \"camel-case\": \"^3.0.0\",\n    \"conventional-changelog-cli\": \"^2.0.31\",\n    \"core-js\": \"^3.6.5\",\n    \"cp-file\": \"^7.0.0\",\n    \"cross-env\": \"^5.0.0\",\n    \"css-loader\": \"^2.0.0\",\n    \"del\": \"^4.0.0\",\n    \"dts-bundle\": \"^0.7.3\",\n    \"eslint\": \"^5.1.0\",\n    \"eslint-config-google\": \"^0.11.0\",\n    \"eslint-plugin-mocha\": \"^5.0.0\",\n    \"fs-extra\": \"^7.0.0\",\n    \"fs-readdir-recursive\": \"^1.1.0\",\n    \"glob\": \"^7.1.6\",\n    \"gts\": \"^1.1.2\",\n    \"jasmine\": \"^3.5.0\",\n    \"jasmine-core\": \"^3.5.0\",\n    \"karma\": \"^4.4.1\",\n    \"karma-babel-preprocessor\": \"^8.0.1\",\n    \"karma-chrome-launcher\": \"^2.0.0\",\n    \"karma-firefox-launcher\": \"^1.0.0\",\n    \"karma-jasmine\": \"^2.0.1\",\n    \"karma-sauce-launcher\": \"^2.0.2\",\n    \"karma-sourcemap-loader\": \"^0.3.7\",\n    \"karma-tap\": \"^4.0.0\",\n    \"karma-typescript\": \"^5.4.0\",\n    \"karma-webpack\": \"^3.0.0\",\n    \"lerna\": \"^3.20.2\",\n    \"mini-css-extract-plugin\": \"^0.7.0\",\n    \"mkdirp\": \"^0.5.1\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"postcss-loader\": \"^3.0.0\",\n    \"prettier\": \"^2.2.1\",\n    \"recast\": \"^0.17.3\",\n    \"resolve\": \"^1.3.2\",\n    \"sass\": \"^1.41.1\",\n    \"sass-loader\": \"^7.1.0\",\n    \"semver\": \"^5.3.0\",\n    \"stylelint\": \"^13.8.0\",\n    \"stylelint-config-standard\": \"^18.0.0\",\n    \"stylelint-order\": \"^2.0.0\",\n    \"stylelint-prettier\": \"^1.1.2\",\n    \"stylelint-scss\": \"^3.13.0\",\n    \"stylelint-selector-bem-pattern\": \"^2.1.0\",\n    \"to-slug-case\": \"^1.0.0\",\n    \"ts-loader\": \"^6.0.3\",\n    \"ts-node\": \"^8.0.3\",\n    \"tslib\": \"^2.1.0\",\n    \"tslint\": \"^5.12.0\",\n    \"typescript\": \"^4.3.5\",\n    \"uglifyjs-webpack-plugin\": \"^2.1.3\",\n    \"webpack\": \"^4.34.0\",\n    \"webpack-cli\": \"^3.3.11\"\n  },\n  \"babel\": {\n    \"presets\": [\n      [\n        \"env\",\n        {\n          \"modules\": false\n        }\n      ]\n    ],\n    \"plugins\": [\n      \"transform-object-assign\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/README.md",
    "content": "This folder contains all of our individual components as npm packages, along with the comprehensive\n`material-components-web` package.\n"
  },
  {
    "path": "packages/material-components-web/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/material-components-web/README.md",
    "content": "# Material Components Web (MDC Web)\n\nThis package contains the master library for Material Components Web. It simply wraps all of its\nsibling packages up into one comprehensive library for convenience.\n\n## Installation\n\n```\nnpm install material-components-web\n```\n\n## Usage\n\n### Including the Sass\n\n```scss\n@use \"material-components-web/material-components-web\";\n```\n\n### Including the Javascript\n\n```js\nimport * as mdc from 'material-components-web';\nconst checkbox = new mdc.checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));\n// OR\nimport {checkbox} from 'material-components-web';\nconst checkbox = new checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n> NOTE: Since switch is a reserved word in JS, switch is instead named `switchControl`. \n\n> NOTE: Built CSS files as well as UMD JS bundles will be available as part of the package.\n\n\n### Auto-initialization of components\n\nThe `material-components-web` package automatically registers all MDC Web components with\n[mdc-auto-init](../mdc-auto-init), making it dead simple to create and initialize components\nwith zero configuration or manual work.\n\nFor example, say you want to use an [icon button toggle](../mdc-icon-button). Simply render the necessary\nDOM, and attach the `data-mdc-auto-init=\"MDCIconButtonToggle\"` attribute.\n\n```html\n<button class=\"mdc-icon-button\" \n   aria-label=\"Add to favorites\"\n   aria-pressed=\"false\"\n   data-mdc-auto-init=\"MDCIconButtonToggle\">\n  <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n  <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n</button>\n```\n\nThen at the bottom of your html, insert this one-line script tag:\n\n```html\n<script>mdc.autoInit()</script>\n```\n\nThis will automatically initialize the icon button toggle, as well as any other components marked with the\nauto init data attribute. See [mdc-auto-init](../mdc-auto-init) for more info.\n"
  },
  {
    "path": "packages/material-components-web/index.scss",
    "content": "@use './material-components-web';\n"
  },
  {
    "path": "packages/material-components-web/index.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport autoInit from '@material/auto-init/index';\nimport * as banner from '@material/banner/index';\nimport * as base from '@material/base/index';\nimport * as checkbox from '@material/checkbox/index';\nimport * as chips from '@material/chips/deprecated/index';\nimport * as circularProgress from '@material/circular-progress/index';\nimport * as dataTable from '@material/data-table/index';\nimport * as dialog from '@material/dialog/index';\nimport * as dom from '@material/dom/index';\nimport * as drawer from '@material/drawer/index';\nimport * as floatingLabel from '@material/floating-label/index';\nimport * as formField from '@material/form-field/index';\nimport * as iconButton from '@material/icon-button/index';\nimport * as lineRipple from '@material/line-ripple/index';\nimport * as linearProgress from '@material/linear-progress/index';\nimport * as list from '@material/list/index';\nimport * as menuSurface from '@material/menu-surface/index';\nimport * as menu from '@material/menu/index';\nimport * as notchedOutline from '@material/notched-outline/index';\nimport * as radio from '@material/radio/index';\nimport * as ripple from '@material/ripple/index';\nimport * as segmentedButton from '@material/segmented-button/index';\nimport * as select from '@material/select/index';\nimport * as slider from '@material/slider/index';\nimport * as snackbar from '@material/snackbar/index';\nimport * as switchControl from '@material/switch/index';\nimport * as tabBar from '@material/tab-bar/index';\nimport * as tabIndicator from '@material/tab-indicator/index';\nimport * as tabScroller from '@material/tab-scroller/index';\nimport * as tab from '@material/tab/index';\nimport * as textField from '@material/textfield/index';\nimport * as tooltip from '@material/tooltip/index';\nimport * as topAppBar from '@material/top-app-bar/index';\n\n// Register all components\nautoInit.register('MDCBanner', banner.MDCBanner);\nautoInit.register('MDCCheckbox', checkbox.MDCCheckbox);\nautoInit.register('MDCChip', chips.MDCChip);\nautoInit.register('MDCChipSet', chips.MDCChipSet);\nautoInit.register('MDCCircularProgress', circularProgress.MDCCircularProgress);\nautoInit.register('MDCDataTable', dataTable.MDCDataTable);\nautoInit.register('MDCDialog', dialog.MDCDialog);\nautoInit.register('MDCDrawer', drawer.MDCDrawer);\nautoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);\nautoInit.register('MDCFormField', formField.MDCFormField);\nautoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);\nautoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);\nautoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);\nautoInit.register('MDCList', list.MDCList);\nautoInit.register('MDCMenu', menu.MDCMenu);\nautoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);\nautoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);\nautoInit.register('MDCRadio', radio.MDCRadio);\nautoInit.register('MDCRipple', ripple.MDCRipple);\nautoInit.register('MDCSegmentedButton', segmentedButton.MDCSegmentedButton);\nautoInit.register('MDCSelect', select.MDCSelect);\nautoInit.register('MDCSlider', slider.MDCSlider);\nautoInit.register('MDCSnackbar', snackbar.MDCSnackbar);\nautoInit.register('MDCSwitch', switchControl.MDCSwitch);\nautoInit.register('MDCTabBar', tabBar.MDCTabBar);\nautoInit.register('MDCTextField', textField.MDCTextField);\nautoInit.register('MDCTooltip', tooltip.MDCTooltip);\nautoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);\n\n// Export all components.\nexport {\n  autoInit,\n  banner,\n  base,\n  checkbox,\n  chips,\n  circularProgress,\n  dataTable,\n  dialog,\n  dom,\n  drawer,\n  floatingLabel,\n  formField,\n  iconButton,\n  lineRipple,\n  linearProgress,\n  list,\n  menu,\n  menuSurface,\n  notchedOutline,\n  radio,\n  ripple,\n  segmentedButton,\n  select,\n  slider,\n  snackbar,\n  switchControl,\n  tab,\n  tabBar,\n  tabIndicator,\n  tabScroller,\n  textField,\n  tooltip,\n  topAppBar,\n};\n"
  },
  {
    "path": "packages/material-components-web/material-components-web.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/banner/styles' as banner-styles;\n@use '@material/button/mdc-button';\n@use '@material/card/mdc-card';\n@use '@material/checkbox/mdc-checkbox';\n@use '@material/chips/deprecated/mdc-chips';\n@use '@material/circular-progress/mdc-circular-progress';\n// Select's styles must be emitted before datatable's due to equal specificity.\n@use '@material/select/mdc-select';\n@use '@material/data-table/mdc-data-table';\n@use '@material/dialog/mdc-dialog';\n@use '@material/drawer/mdc-drawer';\n@use '@material/elevation/mdc-elevation';\n@use '@material/fab/mdc-fab';\n@use '@material/floating-label/mdc-floating-label';\n@use '@material/form-field/mdc-form-field';\n@use '@material/icon-button/mdc-icon-button';\n@use '@material/image-list/mdc-image-list';\n@use '@material/layout-grid/mdc-layout-grid';\n@use '@material/line-ripple/mdc-line-ripple';\n@use '@material/linear-progress/mdc-linear-progress';\n@use '@material/list/mdc-list';\n@use '@material/menu/mdc-menu';\n@use '@material/menu-surface/mdc-menu-surface';\n@use '@material/notched-outline/mdc-notched-outline';\n@use '@material/radio/mdc-radio';\n@use '@material/ripple/mdc-ripple';\n@use '@material/segmented-button/styles' as segmented-button-styles;\n@use '@material/slider/styles' as slider-styles;\n@use '@material/snackbar/mdc-snackbar';\n@use '@material/switch/styles';\n@use '@material/tab/mdc-tab';\n@use '@material/tab-bar/mdc-tab-bar';\n@use '@material/tab-indicator/mdc-tab-indicator';\n@use '@material/tab-scroller/mdc-tab-scroller';\n@use '@material/textfield/mdc-text-field';\n@use '@material/theme/mdc-theme';\n@use '@material/tooltip/styles' as tooltip-styles;\n@use '@material/top-app-bar/mdc-top-app-bar';\n@use '@material/typography/mdc-typography';\n"
  },
  {
    "path": "packages/material-components-web/package.json",
    "content": "{\n  \"name\": \"material-components-web\",\n  \"description\": \"Modular and customizable Material Design UI components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\"\n  ],\n  \"main\": \"dist/material-components-web.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"types\": \"dist/material-components-web.d.ts\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/material-components-web\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/auto-init\": \"^14.0.0\",\n    \"@material/banner\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/button\": \"^14.0.0\",\n    \"@material/card\": \"^14.0.0\",\n    \"@material/checkbox\": \"^14.0.0\",\n    \"@material/chips\": \"^14.0.0\",\n    \"@material/circular-progress\": \"^14.0.0\",\n    \"@material/data-table\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dialog\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/drawer\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/fab\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/floating-label\": \"^14.0.0\",\n    \"@material/focus\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/form-field\": \"^14.0.0\",\n    \"@material/icon-button\": \"^14.0.0\",\n    \"@material/image-list\": \"^14.0.0\",\n    \"@material/layout-grid\": \"^14.0.0\",\n    \"@material/line-ripple\": \"^14.0.0\",\n    \"@material/linear-progress\": \"^14.0.0\",\n    \"@material/list\": \"^14.0.0\",\n    \"@material/menu\": \"^14.0.0\",\n    \"@material/menu-surface\": \"^14.0.0\",\n    \"@material/notched-outline\": \"^14.0.0\",\n    \"@material/radio\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/segmented-button\": \"^14.0.0\",\n    \"@material/select\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/slider\": \"^14.0.0\",\n    \"@material/snackbar\": \"^14.0.0\",\n    \"@material/switch\": \"^14.0.0\",\n    \"@material/tab\": \"^14.0.0\",\n    \"@material/tab-bar\": \"^14.0.0\",\n    \"@material/tab-indicator\": \"^14.0.0\",\n    \"@material/tab-scroller\": \"^14.0.0\",\n    \"@material/textfield\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/tooltip\": \"^14.0.0\",\n    \"@material/top-app-bar\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-animation/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-animation/README.md",
    "content": "<!--docs:\ntitle: \"Animation\"\nlayout: detail\nsection: components\nexcerpt: \"Animation timing curves and utilities for smooth and consistent motion.\"\niconId: animation\npath: /catalog/animation/\n-->\n\n# Animation\n\nMaterial in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-motion\">Material Design guidelines: Motion</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/animation\n```\n\n## Usage\n\n### Sass Variables\n\nWe provide timing functions which you can use with the `animation` or `transition` CSS properties\n\n```scss\n@use \"@material/animation\";\n\n.my-element--animating {\n  animation: foo-keyframe 175ms animation.$standard-curve-timing-function;\n}\n```\n\nVariable | Description\n--- | ---\n`$deceleration-curve-timing-function` | Timing function to decelerate\n`$standard-curve-timing-function` | Timing function to quickly accelerate and slowly decelerate\n`$acceleration-curve-timing-function` | Timing function to accelerate\n`$sharp-curve-timing-function` | Timing function to quickly accelerate and decelerate\n\nThe following functions create transitions given `$name` and the `$duration`. You can also specify `$delay`, but the default is 0ms. `$name` can either refer to the keyframe, or to CSS property used in `transition`.\n\n```scss\n@use \"@material/animation\";\n\n.my-element {\n  transition: animation.exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);\n  opacity: 0;\n  will-change: opacity;\n\n  &--animating {\n    transition: animation.enter(/* $name: */ opacity, /* $duration: */ 175ms);\n    opacity: 1;\n  }\n}\n```\n\n\n```scss\n@use \"@material/animation\";\n\n@keyframes fade-in {\n  from {\n    transform: translateY(-80px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.my-element {\n  animation: animation.enter(/* $name: */ fade-in, /* $duration: */ 350ms);\n}\n```\n\nFunction | Description\n--- | ---\n`enter($name, $duration, $delay)` | Defines transition for entering the frame\n`exit-permanent($name, $duration, $delay)` | Defines transition for exiting the frame permanently\n`exit-temporary($name, $duration, $delay)` | Defines transition for exiting the frame temporarily\n\n### JavaScript\n\nThese functions handle prefixing across various browsers\n\n```js\nimport {getCorrectEventName} from '@material/animation';\n\nconst eventToListenFor = getCorrectEventName(window, 'animationstart');\n```\n\nMethod Signature | Description\n--- | ---\n`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \\| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary. See [`types.ts`](types.ts) for supported values.\n`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \\| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary. See [`types.ts`](types.ts) for supported values.\n"
  },
  {
    "path": "packages/mdc-animation/_animation.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay linear;\n}\n"
  },
  {
    "path": "packages/mdc-animation/_functions.import.scss",
    "content": "@forward \"./index\" as mdc-animation-*;\n"
  },
  {
    "path": "packages/mdc-animation/_functions.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_animation.scss' instead.\n@forward './animation' show enter, exit-permanent, exit-temporary, standard;\n"
  },
  {
    "path": "packages/mdc-animation/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-animation/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n"
  },
  {
    "path": "packages/mdc-animation/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecation Import '_animation.scss' instead.\n@forward './animation' show $deceleration-curve-timing-function, $standard-curve-timing-function, $acceleration-curve-timing-function, $sharp-curve-timing-function;\n"
  },
  {
    "path": "packages/mdc-animation/animationframe.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * AnimationFrame provides a user-friendly abstraction around requesting\n * and canceling animation frames.\n */\nexport class AnimationFrame {\n  private readonly rafIDs = new Map<string, number>();\n\n  /**\n   * Requests an animation frame. Cancels any existing frame with the same key.\n   * @param {string} key The key for this callback.\n   * @param {FrameRequestCallback} callback The callback to be executed.\n   */\n  request(key: string, callback: FrameRequestCallback) {\n    this.cancel(key);\n    const frameID = requestAnimationFrame((frame) => {\n      this.rafIDs.delete(key);\n      // Callback must come *after* the key is deleted so that nested calls to\n      // request with the same key are not deleted.\n      callback(frame);\n    });\n    this.rafIDs.set(key, frameID);\n  }\n\n  /**\n   * Cancels a queued callback with the given key.\n   * @param {string} key The key for this callback.\n   */\n  cancel(key: string) {\n    const rafID = this.rafIDs.get(key);\n    if (rafID) {\n      cancelAnimationFrame(rafID);\n      this.rafIDs.delete(key);\n    }\n  }\n\n  /**\n   * Cancels all queued callback.\n   */\n  cancelAll() {\n    // Need to use forEach because it's the only iteration method supported\n    // by IE11. Suppress the underscore because we don't need it.\n    // tslint:disable-next-line:enforce-name-casing\n    this.rafIDs.forEach((_, key) => {\n      this.cancel(key);\n    });\n  }\n\n  /**\n   * Returns the queue of unexecuted callback keys.\n   */\n  getQueue(): string[] {\n    const queue: string[] = [];\n    // Need to use forEach because it's the only iteration method supported\n    // by IE11. Suppress the underscore because we don't need it.\n    // tslint:disable-next-line:enforce-name-casing\n    this.rafIDs.forEach((_, key) => {\n      queue.push(key);\n    });\n    return queue;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-animation/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};  // New namespace\nexport * from './animationframe';\nexport * from './types';\nexport * from './util';  // Old namespace for backward compatibility\n"
  },
  {
    "path": "packages/mdc-animation/package.json",
    "content": "{\n  \"name\": \"@material/animation\",\n  \"description\": \"Animation Variables and Mixins used by Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"animation\"\n  ],\n  \"main\": \"dist/mdc.animation.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-animation\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-animation/test/animationframe.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {AnimationFrame} from '../index';\n\ndescribe('AnimationFrame', () => {\n  setUpMdcTestEnvironment();\n\n  it('#request adds an animation frame callback', () => {\n    const af = new AnimationFrame();\n    const cb = jasmine.createSpy('callback');\n    af.request('x', cb);\n    jasmine.clock().tick(1);\n    expect(cb).toHaveBeenCalledTimes(1);\n  });\n\n  it('#request with duplicate keys only executes the latest callback', () => {\n    const af = new AnimationFrame();\n    const cb1 = jasmine.createSpy('callback1');\n    const cb2 = jasmine.createSpy('callback2');\n    const cb3 = jasmine.createSpy('callback3');\n    af.request('x', cb1);\n    af.request('x', cb2);\n    af.request('x', cb3);\n    jasmine.clock().tick(1);\n    expect(cb1).not.toHaveBeenCalled();\n    expect(cb2).not.toHaveBeenCalled();\n    expect(cb3).toHaveBeenCalledTimes(1);\n  });\n\n  it('#cancel will cancel the keyed callback', () => {\n    const af = new AnimationFrame();\n    const cb = jasmine.createSpy('callback');\n    af.request('x', cb);\n    af.cancel('x');\n    jasmine.clock().tick(1);\n    expect(cb).not.toHaveBeenCalled();\n  });\n\n  it('#cancel will not cancel a mismatched key', () => {\n    const af = new AnimationFrame();\n    const cb = jasmine.createSpy('callback');\n    af.request('x', cb);\n    af.cancel('a');\n    jasmine.clock().tick(1);\n    expect(cb).toHaveBeenCalledTimes(1);\n  });\n\n  it('#cancelAll cancels all keys', () => {\n    const af = new AnimationFrame();\n    const cb1 = jasmine.createSpy('callback1');\n    const cb2 = jasmine.createSpy('callback2');\n    const cb3 = jasmine.createSpy('callback3');\n    af.request('x', cb1);\n    af.request('y', cb2);\n    af.request('z', cb3);\n    af.cancelAll();\n    jasmine.clock().tick(3);\n    expect(cb1).not.toHaveBeenCalled();\n    expect(cb2).not.toHaveBeenCalled();\n    expect(cb3).not.toHaveBeenCalled();\n  });\n\n  it('#getQueue will return the keys in the order they were entered', () => {\n    const af = new AnimationFrame();\n    const cb1 = jasmine.createSpy('callback1');\n    const cb2 = jasmine.createSpy('callback2');\n    const cb3 = jasmine.createSpy('callback3');\n    af.request('x', cb1);\n    af.request('y', cb2);\n    af.request('z', cb3);\n    expect(af.getQueue()).toEqual(['x', 'y', 'z']);\n  });\n\n  it('#getQueue will return not return keys that have finished', () => {\n    const af = new AnimationFrame();\n    const cb = jasmine.createSpy('callback');\n    af.request('x', cb);\n    jasmine.clock().tick(1);\n    expect(af.getQueue()).toEqual([]);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-animation/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {getCorrectEventName, getCorrectPropertyName} from '../../mdc-animation/index';\n\n// Has no properties without a prefix\nconst legacyWindowObj = {\n  document: {\n    createElement: () => ({\n      style: {\n        'webkitTransform': 'nah',\n      },\n    })\n  },\n} as any;\n\ndescribe('MDCAnimation', () => {\n  it('#getCorrectEventName does not prefix events when not necessary', () => {\n    const windowObj = {\n      document: {\n        createElement: () => ({\n          style: {\n            animation: 'none',\n          },\n        })\n      },\n    } as any;\n\n    expect(getCorrectEventName(windowObj, 'animationstart'))\n        .toEqual('animationstart');\n  });\n\n  it('#getCorrectPropertyName does not prefix events when not necessary',\n     () => {\n       const windowObj = {\n         document: {\n           createElement: () => ({\n             style: {\n               animation: 'none',\n             },\n           })\n         },\n       } as any;\n\n       expect(getCorrectPropertyName(windowObj, 'animation'))\n           .toEqual('animation');\n     });\n\n  it('#getCorrectEventName does not prefix events if window does not contain a DOM node',\n     () => {\n       const windowObj = {} as any;\n\n       expect(getCorrectEventName(windowObj, 'animationstart'))\n           .toEqual('animationstart');\n     });\n\n  it('#getCorrectPropertyName does not prefix events if window does not contain a DOM node',\n     () => {\n       const windowObj = {} as any;\n\n       expect(getCorrectPropertyName(windowObj, 'transition'))\n           .toEqual('transition');\n     });\n\n  it('#getCorrectPropertyName prefixes css properties when required', () => {\n    expect(getCorrectPropertyName(legacyWindowObj, 'animation'))\n        .toEqual('-webkit-animation');\n\n    expect(getCorrectPropertyName(legacyWindowObj, 'transform'))\n        .toEqual('-webkit-transform');\n\n    expect(getCorrectPropertyName(legacyWindowObj, 'transition'))\n        .toEqual('-webkit-transition');\n  });\n\n  it('#getCorrectEventName prefixes javascript events when required', () => {\n    expect(getCorrectEventName(legacyWindowObj, 'animationstart'))\n        .toEqual('webkitAnimationStart');\n\n    expect(getCorrectEventName(legacyWindowObj, 'animationend'))\n        .toEqual('webkitAnimationEnd');\n\n    expect(getCorrectEventName(legacyWindowObj, 'animationiteration'))\n        .toEqual('webkitAnimationIteration');\n\n    expect(getCorrectEventName(legacyWindowObj, 'transitionend'))\n        .toEqual('webkitTransitionEnd');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-animation/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport type StandardCssPropertyName = 'animation'|'transform'|'transition';\n\nexport type PrefixedCssPropertyName =\n    '-webkit-animation'|'-webkit-transform'|'-webkit-transition';\n\nexport type StandardJsEventType =\n    'animationend'|'animationiteration'|'animationstart'|'transitionend';\n\nexport type PrefixedJsEventType = 'webkitAnimationEnd'|\n    'webkitAnimationIteration'|'webkitAnimationStart'|'webkitTransitionEnd';\n\nexport interface CssVendorProperty {\n  prefixed: PrefixedCssPropertyName;\n  standard: StandardCssPropertyName;\n}\n\nexport interface JsVendorProperty {\n  cssProperty: StandardCssPropertyName;\n  prefixed: PrefixedJsEventType;\n  standard: StandardJsEventType;\n}\n\nexport type CssVendorPropertyMap = {\n  [K in StandardCssPropertyName]: CssVendorProperty\n};\nexport type JsVendorPropertyMap = {\n  [K in StandardJsEventType]: JsVendorProperty\n};\n"
  },
  {
    "path": "packages/mdc-animation/util.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {CssVendorPropertyMap, JsVendorPropertyMap, PrefixedCssPropertyName, PrefixedJsEventType, StandardCssPropertyName, StandardJsEventType} from './types';\n\nconst cssPropertyNameMap: CssVendorPropertyMap = {\n  animation: {\n    prefixed: '-webkit-animation',\n    standard: 'animation',\n  },\n  transform: {\n    prefixed: '-webkit-transform',\n    standard: 'transform',\n  },\n  transition: {\n    prefixed: '-webkit-transition',\n    standard: 'transition',\n  },\n};\n\nconst jsEventTypeMap: JsVendorPropertyMap = {\n  animationend: {\n    cssProperty: 'animation',\n    prefixed: 'webkitAnimationEnd',\n    standard: 'animationend',\n  },\n  animationiteration: {\n    cssProperty: 'animation',\n    prefixed: 'webkitAnimationIteration',\n    standard: 'animationiteration',\n  },\n  animationstart: {\n    cssProperty: 'animation',\n    prefixed: 'webkitAnimationStart',\n    standard: 'animationstart',\n  },\n  transitionend: {\n    cssProperty: 'transition',\n    prefixed: 'webkitTransitionEnd',\n    standard: 'transitionend',\n  },\n};\n\nfunction isWindow(windowObj: Window): boolean {\n  return Boolean(windowObj.document) &&\n      typeof windowObj.document.createElement === 'function';\n}\n\nexport function getCorrectPropertyName(\n    windowObj: Window, cssProperty: StandardCssPropertyName):\n    StandardCssPropertyName|PrefixedCssPropertyName {\n  if (isWindow(windowObj) && cssProperty in cssPropertyNameMap) {\n    const el = windowObj.document.createElement('div');\n    const {standard, prefixed} = cssPropertyNameMap[cssProperty];\n    const isStandard = standard in el.style;\n    return isStandard ? standard : prefixed;\n  }\n  return cssProperty;\n}\n\nexport function getCorrectEventName(\n    windowObj: Window, eventType: StandardJsEventType): StandardJsEventType|\n    PrefixedJsEventType {\n  if (isWindow(windowObj) && eventType in jsEventTypeMap) {\n    const el = windowObj.document.createElement('div');\n    const {standard, prefixed, cssProperty} = jsEventTypeMap[eventType];\n    const isStandard = cssProperty in el.style;\n    return isStandard ? standard : prefixed;\n  }\n  return eventType;\n}\n"
  },
  {
    "path": "packages/mdc-auto-init/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-auto-init/README.md",
    "content": "<!--docs:\ntitle: \"Auto Init\"\nlayout: detail\nsection: components\nexcerpt: \"Utilities for declarative, DOM-based initialization of components on simple web sites.\"\npath: /catalog/auto-init/\n-->\n\n# Auto Init\n\n`mdc-auto-init` is a utility package that provides declarative, DOM-based method of initialization\nfor MDC Web components on simple web sites. Note that for more advanced use-cases and complex sites,\nmanual instantiation of components will give you more flexibility. However, `mdc-auto-init` is great\nfor static websites, prototypes, and other use-cases where simplicity and convenience is most\nappropriate.\n\n## Installation\n\n```\nnpm install @material/auto-init\n```\n\n## Usage\n\n### Using as part of `material-components-web`\n\nIf you are using mdc-auto-init as part of the [material-components-web](../material-components-web)\npackage, simply write the necessary DOM needed for a component, and attach a `data-mdc-auto-init`\nattribute to the root element with its value set to the component's JavaScript class name (e.g.,\n`MDCTextField`). Then, after writing the markup, simply insert a script tag that calls\n`mdc.autoInit()`. Make sure you call `mdc.autoInit()` after all scripts are loaded so it works\nproperly.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\" data-mdc-auto-init=\"MDCTextField\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"label\">\n  <span id=\"label\" class=\"mdc-floating-label\">Input Label</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n\n<!-- at the bottom of the page -->\n<script type=\"text/javascript\">\n  window.mdc.autoInit();\n</script>\n```\n\nThis will attach an [MDCTextField](../mdc-textfield) instance to the root `<div>` element.\n\n#### Accessing the component instance\n\nWhen `mdc-auto-init` attaches a component to an element, it assign that instance to the element\nusing a property whose name is the value of `data-mdc-auto-init`. For example, given\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\" data-mdc-auto-init=\"MDCTextField\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"label\">\n  <span id=\"label\" class=\"mdc-floating-label\">Input Label</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\nOnce `mdc.autoInit()` is called, you can access the component instance via an `MDCTextField`\nproperty on that element.\n\n```js\ndocument.querySelector<HTMLElement>('.mdc-text-field').MDCTextField.disabled = true;\n```\n\n#### Calling subsequent `mdc.autoInit()`\n\nIf you decide to add new components into the DOM after the initial `mdc.autoInit()`, you can make subsequent calls to `mdc.autoInit()`. This will not reinitialize existing components. This works since mdc-auto-init will add the `data-mdc-auto-init-state=\"initialized\"` attribute, which tracks if the component has already been initialized. After calling `mdc.autoInit()` your component will then look like:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\" data-mdc-auto-init=\"MDCTextField\" data-mdc-auto-init-state=\"initialized\">\n  ...\n</label>\n```\n\n### Using as a standalone module\n\n#### Registering Components\n\nIf you are using `mdc-auto-init` outside of `material-components-web`, you must manually provide a\nmapping between `data-mdc-auto-init` attribute values and the components which they map to. This can\nbe achieved via `mdcAutoInit.register`.\n\n```js\nimport mdcAutoInit from '@material/auto-init';\nimport {MDCTextField} from '@material/textfield';\n\nmdcAutoInit.register('MDCTextField', MDCTextField);\n```\n\n`mdcAutoInit.register()` tells `mdc-auto-init` that when it comes across an element with a\n`data-mdc-auto-init` attribute set to `\"MDCTextField\"`, it should initialize an `MDCTextField`\ninstance on that element. The `material-components-web` package does this for all components for\nconvenience.\n\nAlso note that a component can be mapped to any string, not necessarily the name of its constructor.\n\n```js\nimport mdcAutoInit from '@material/auto-init';\nimport {MDCTextField} from '@material/textfield';\n\nmdcAutoInit.register('My amazing text field!!!', MDCTextField);\n```\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\" data-mdc-auto-init=\"My amazing text field!!!\">\n  <!-- ... -->\n</label>\n<script>window.mdc.autoInit();</script>\n```\n\n### De-registering components\n\nAny component can be deregistered by calling `mdcAutoInit.deregister` with the name used to register\nthe component.\n\n```js\nmdcAutoInit.deregister('MDCTextField');\n```\n\nThis will simply remove the name -> component mapping. It will _not_ affect any already-instantiated\ncomponents on the page.\n\nTo unregister all name -> component mappings, you can use `mdcAutoInit.deregisterAll()`.\n\n## How `mdc-auto-init` works\n\n`mdc-auto-init` maintains a registry object which maps string identifiers, or **names**, to\ncomponent constructors. When the default exported function - `mdcAutoInit()` - is called,\n`mdc-auto-init` queries the DOM for all elements with a `data-mdc-auto-init` attribute. For each\nelement returned, the following steps are taken:\n\n1. If the `data-mdc-auto-init` attribute does not have a value associated with it, throw an error\n2. If the value of `data-mdc-auto-init` cannot be found in the registry, throw an error\n3. If the element has an existing property whose name is the value of `data-mdc-auto-init`, it is\n   assumed to have already been initialized. Therefore it is skipped, and a warning will be logged\n   to the console (this behavior can be overridden).\n4. Let `Ctor` be the component constructor associated with the given name in the register\n5. Let `instance` be the result of calling `Ctor.attachTo()` and passing in the element as an\n   argument.\n6. Create a non-writable, non-enumerable property on the node whose name is the value of\n   `data-mdc-auto-init` and whose value is `instance`.\n\n### Initializing only a certain part of the page\n\nBy default, `mdc-auto-init` will query the entire document to figure out which components to\ninitialize. To override this behavior, you can pass in an optional `root` first argument specifying\nthe root node whose children will be queried for instantiation.\n\n```html\n<div id=\"mdc-section\">\n  <!-- MDC Web Components, etc. -->\n</div>\n<script>window.mdc.autoInit(document.getElementById('mdc-section'));</script>\n```\n\nIn the above example, only elements within `<div id=\"mdc-section\">` will be queried.\n\n### Calling autoInit() multiple times\n\nBy default, `mdc-auto-init` only expects to be called once, at page-load time. However, there may be\ncertain scenarios where one may want to use `mdc-auto-init` and may still need to call it multiple\ntimes, such as on a Wordpress site that contains an infinitely-scrolling list of new blog post\nelements containing MDC Web components. `mdcAutoInit()` takes an optional second argument which is the\nfunction used to warn users when a component is initialized multiple times. By default, this is just\n`console.warn()`. However, to skip over already-initialized components without logging a\nwarning, you could simply pass in a nop.\n\n```html\n<script>window.mdc.autoInit(/* root */ document, () => {});</script>\n```\n\nThis will suppress any warnings about already initialized elements.\n\n### Events\n\n#### MDCAutoInit:End\nTriggered when initialization of all components is complete.\n\n`document.addEventListener(\"MDCAutoInit:End\", () => {...});`\n"
  },
  {
    "path": "packages/mdc-auto-init/constants.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const strings = {\n  AUTO_INIT_ATTR: 'data-mdc-auto-init',\n  DATASET_AUTO_INIT_STATE: 'mdcAutoInitState',\n  INITIALIZED_STATE: 'initialized',\n};\n"
  },
  {
    "path": "packages/mdc-auto-init/index.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n// tslint:disable:only-arrow-functions\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {strings} from './constants';\n\nconst {AUTO_INIT_ATTR, DATASET_AUTO_INIT_STATE, INITIALIZED_STATE} = strings;\n\n/** MDC Attachable */\nexport interface MDCAttachable extends Function {\n  attachTo(root: HTMLElement): MDCComponent<MDCFoundation>;\n}\n\ninterface InternalComponentRegistry {\n  [key: string]: MDCAttachable;\n}\n\nconst registry: InternalComponentRegistry = {};\n\n// tslint:disable-next-line:no-console\nconst CONSOLE_WARN = console.warn.bind(console);\n\nfunction emit<T extends object>(\n    eventType: string, eventData: T, shouldBubble = false) {\n  let event;\n  if (typeof CustomEvent === 'function') {\n    event = new CustomEvent<T>(eventType, {\n      bubbles: shouldBubble,\n      detail: eventData,\n    });\n  } else {\n    event = document.createEvent('CustomEvent');\n    event.initCustomEvent(eventType, shouldBubble, false, eventData);\n  }\n\n  document.dispatchEvent(event);\n}\n\n/* istanbul ignore next: optional argument is not a branch statement */\n/**\n * Auto-initializes all MDC components on a page.\n */\nfunction mdcAutoInit(root: ParentNode = document) {\n  const components = [];\n  let nodes =\n      Array.from(root.querySelectorAll<HTMLElement>(`[${AUTO_INIT_ATTR}]`));\n  nodes = nodes.filter(\n      (node) => node.dataset[DATASET_AUTO_INIT_STATE] !== INITIALIZED_STATE);\n\n  for (const node of nodes) {\n    const ctorName = node.getAttribute(AUTO_INIT_ATTR);\n    if (!ctorName) {\n      throw new Error('(mdc-auto-init) Constructor name must be given.');\n    }\n\n    // tslint:disable-next-line:enforce-name-casing\n    const Constructor = registry[ctorName];\n    if (typeof Constructor !== 'function') {\n      throw new Error(\n          `(mdc-auto-init) Could not find constructor in registry for ${\n              ctorName}`);\n    }\n\n    // TODO: Should we make an eslint rule for an attachTo() static method?\n    // See https://github.com/Microsoft/TypeScript/issues/14600 for discussion\n    // of static interface support in TS\n    const component = Constructor.attachTo(node);\n    Object.defineProperty(node, ctorName, {\n      configurable: true,\n      enumerable: false,\n      value: component,\n      writable: false,\n    });\n    components.push(component);\n    node.dataset[DATASET_AUTO_INIT_STATE] = INITIALIZED_STATE;\n  }\n\n  emit('MDCAutoInit:End', {});\n  return components;\n}\n\n// Constructor is PascalCased because it is a direct reference to a class,\n// rather than an instance of a class.\nmdcAutoInit.register = function(\n    componentName: string,\n    // tslint:disable-next-line:enforce-name-casing\n    Constructor: MDCAttachable, warn = CONSOLE_WARN) {\n  if (typeof Constructor !== 'function') {\n    throw new Error(`(mdc-auto-init) Invalid Constructor value: ${\n        Constructor}. Expected function.`);\n  }\n  const registryValue = registry[componentName];\n  if (registryValue) {\n    warn(`(mdc-auto-init) Overriding registration for ${componentName} with ${\n        Constructor}. Was: ${registryValue}`);\n  }\n  registry[componentName] = Constructor;\n};\n\nmdcAutoInit.deregister = function(componentName: string) {\n  delete registry[componentName];\n};\n\n/** @nocollapse */\nmdcAutoInit.deregisterAll = function() {\n  for (const componentName of Object.keys(registry)) {\n    mdcAutoInit.deregister(componentName);\n  }\n};\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default mdcAutoInit;\nexport {mdcAutoInit};\n"
  },
  {
    "path": "packages/mdc-auto-init/package.json",
    "content": "{\n  \"name\": \"@material/auto-init\",\n  \"description\": \"Declarative, easy-to-use auto-initialization for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"main\": \"dist/mdc.autoInit.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-auto-init\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-auto-init/test/mdc-auto-init.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {MDCAttachable, mdcAutoInit} from '../index';\n\nclass FakeComponent {\n  static attachTo(node: HTMLElement) {\n    return new FakeComponent(node);\n  }\n\n  constructor(readonly node: HTMLElement) {\n    this.node = node;\n  }\n}\n\nclass InvalidComponent {\n  constructor(readonly node: HTMLElement) {\n    this.node = node;\n  }\n}\n\ninterface FakeHTMLElement extends HTMLElement {\n  FakeComponent: FakeComponent;\n}\n\nfunction getFixture() {\n  return createFixture(html`\n  <div id=\"root\">\n    <p data-mdc-auto-init=\"FakeComponent\" class=\"mdc-fake\">Fake Element</p>\n  </div>\n`);\n}\n\nfunction setupTest() {\n  mdcAutoInit.deregisterAll();\n  mdcAutoInit.register(\n      'FakeComponent', FakeComponent as unknown as MDCAttachable);\n  return getFixture();\n}\n\nfunction setupInvalidTest() {\n  mdcAutoInit.deregisterAll();\n  mdcAutoInit.register(\n      'InvalidComponent', InvalidComponent as unknown as MDCAttachable);\n  return getFixture();\n}\n\ndescribe('MDCAutoInit', () => {\n  it('calls attachTo() on components registered for identifier on nodes w/ data-mdc-auto-init attr',\n     () => {\n       const root = setupTest();\n       mdcAutoInit(root);\n\n       expect(root.querySelector<FakeHTMLElement>('.mdc-fake')!.FakeComponent)\n           .toBeInstanceOf(FakeComponent);\n     });\n\n  it('throws when attachTo() is missing', () => {\n    const root = setupInvalidTest();\n    expect(() => mdcAutoInit(root)).toThrow();\n  });\n\n  it('passes the node where \"data-mdc-auto-init\" was found to attachTo()',\n     () => {\n       const root = setupTest();\n       mdcAutoInit(root);\n\n       const fake = root.querySelector<FakeHTMLElement>('.mdc-fake')!;\n       expect(fake.FakeComponent.node).toEqual(fake);\n     });\n\n  it('throws when no constructor name is specified within \"data-mdc-auto-init\"',\n     () => {\n       const root = setupTest();\n       root.querySelector<HTMLElement>('.mdc-fake')!.dataset['mdcAutoInit'] =\n           '';\n\n       expect(() => mdcAutoInit(root)).toThrow();\n     });\n\n  it('throws when constructor is not registered', () => {\n    const root = setupTest();\n    root.querySelector<HTMLElement>('.mdc-fake')!.dataset['mdcAutoInit'] =\n        'MDCUnregisteredComponent';\n\n    expect(() => mdcAutoInit(root)).toThrow();\n  });\n\n  it('#register warns when registered key is being overridden', () => {\n    setupTest();\n    const warn = jasmine.createSpy('warn');\n    mdcAutoInit.register(\n        'FakeComponent',\n        (() => ({overridden: true})) as unknown as MDCAttachable, warn);\n    expect(warn).toHaveBeenCalledWith(\n        jasmine.stringMatching(/Overriding registration/));\n  });\n\n  it('#dispatches a MDCAutoInit:End event when all components are initialized',\n     () => {\n       const handler = jasmine.createSpy('eventHandler');\n       const type = 'MDCAutoInit:End';\n\n       document.addEventListener(type, handler);\n       mdcAutoInit(document);\n\n       expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({type}));\n     });\n\n  interface WindowWithCustomEvent extends Window {\n    CustomEvent: typeof CustomEvent;\n  }\n\n  it('#dispatches a MDCAutoInit:End event when all components are initialized - custom events not supported',\n     () => {\n       const handler = jasmine.createSpy('eventHandler');\n       const type = 'MDCAutoInit:End';\n\n       document.addEventListener(type, handler);\n\n       const customEvent = CustomEvent;\n       (window as unknown as WindowWithCustomEvent).CustomEvent = undefined!;\n       try {\n         mdcAutoInit(document);\n       } finally {\n         (window as unknown as WindowWithCustomEvent).CustomEvent = customEvent;\n       }\n\n       expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({type}));\n     });\n\n  it('#returns the initialized components', () => {\n    const root = setupTest();\n    const components = mdcAutoInit(root);\n\n    expect(components.length).toEqual(1);\n    expect(components[0] instanceof FakeComponent).toBeTruthy();\n  });\n\n  it('does not register any components if element has data-mdc-auto-init-state=\"initialized\"',\n     () => {\n       const root = setupTest();\n       root.querySelector('[data-mdc-auto-init]')!.setAttribute(\n           'data-mdc-auto-init-state', 'initialized');\n       mdcAutoInit(root);\n\n       expect(\n           root.querySelector<FakeHTMLElement>(\n                   '.mdc-fake')!.FakeComponent instanceof\n           FakeComponent)\n           .toBe(false);\n     });\n\n  it('does not return any new components after calling autoInit a second time',\n     () => {\n       const root = setupTest();\n\n       let components = mdcAutoInit(root);\n       expect(components.length).toEqual(1);\n       components = mdcAutoInit(root);\n       expect(components.length).toEqual(0);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-banner/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-banner/README.md",
    "content": "<!--docs:\ntitle: \"Banner\"\nlayout: detail\nsection: components\nexcerpt: \"A banner displays a prominent message and related optional actions.\"\niconId: banner\npath: /catalog/banners/\n-->\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n<div class=\"mdc-banner\" role=\"banner\">\n  <div class=\"mdc-banner__content\"\n       role=\"alertdialog\"\n       aria-live=\"assertive\">\n    <div class=\"mdc-banner__graphic-text-wrapper\">\n      <div class=\"mdc-banner__text\">\n        There was a problem processing a transaction on your credit card.\n      </div>\n    </div>\n    <div class=\"mdc-banner__actions\">\n      <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n        <div class=\"mdc-button__ripple\"></div>\n        <div class=\"mdc-button__label\">Fix it</div>\n      </button>\n    </div>\n  </div>\n</div>\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n<div class=\"mdc-banner mdc-banner--centered\">\n  ...\n</div>\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n  @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n<div class=\"mdc-banner\" role=\"banner\">\n  <div class=\"mdc-banner__fixed\">\n    <div class=\"mdc-banner__content\"\n         role=\"alertdialog\"\n         aria-live=\"assertive\">\n      <div class=\"mdc-banner__graphic-text-wrapper\">\n        <div class=\"mdc-banner__text\">\n          There was a problem processing a transaction on your credit card.\n        </div>\n      </div>\n      <div class=\"mdc-banner__actions\">\n        <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n          <div class=\"mdc-button__ripple\"></div>\n          <div class=\"mdc-button__label\">Fix it</div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n<div class=\"mdc-banner\" role=\"banner\">\n  <div class=\"mdc-banner__content\"\n       role=\"alertdialog\"\n       aria-live=\"assertive\">\n    <div class=\"mdc-banner__graphic-text-wrapper\">\n      <div class=\"mdc-banner__graphic\" role=\"img\" alt=\"\"><i class=\"material-icons mdc-banner__icon\">error_outline</i></div>\n      <div class=\"mdc-banner__text\">\n        There was a problem processing a transaction on your credit card.\n      </div>\n    </div>\n    <div class=\"mdc-banner__actions\">\n      <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n        <div class=\"mdc-button__ripple\"></div>\n        <div class=\"mdc-button__label\">Fix it</div>\n      </button>\n    </div>\n  </div>\n</div>\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n<div class=\"mdc-banner\" role=\"banner\">\n  <div class=\"mdc-banner__content\"\n       role=\"alertdialog\"\n       aria-live=\"assertive\">\n    <div class=\"mdc-banner__graphic-text-wrapper\">\n      <div class=\"mdc-banner__text\">\n        There was a problem processing a transaction on your credit card.\n      </div>\n    </div>\n    <div class=\"mdc-banner__actions\">\n      <button type=\"button\" class=\"mdc-button mdc-banner__secondary-action\">\n        <div class=\"mdc-button__ripple\"></div>\n        <div class=\"mdc-button__label\">Learn more</div>\n      </button>\n      <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n        <div class=\"mdc-button__ripple\"></div>\n        <div class=\"mdc-button__label\">Fix it</div>\n      </button>\n    </div>\n  </div>\n</div>\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n<div class=\"mdc-banner mdc-banner--mobile-stacked\">\n  ...\n</div>\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n  @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n"
  },
  {
    "path": "packages/mdc-banner/_banner-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/button/button-text-theme';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/keys';\n@use '@material/typography/typography';\n@use '@material/tokens/resolvers';\n\n$fill-color: surface;\n$text-color: on-surface;\n$divider-color: rgba(theme-color.prop-value(on-surface), 0.12);\n$graphic-background-color: primary;\n$graphic-color: surface;\n$graphic-shape-radius: 50%;\n$primary-action-text-color: primary;\n$secondary-action-text-color: primary;\n\n$mobile-breakpoint: 480px;\n$custom-property-prefix: 'banner';\n\n$light-theme: (\n  action-focus-state-layer-color: theme-color.$primary,\n  action-focus-state-layer-opacity: 0.12,\n  action-focus-label-text-color: null,\n  action-hover-state-layer-color: theme-color.$primary,\n  action-hover-state-layer-opacity: 0.04,\n  action-hover-label-text-color: null,\n  action-label-text-color: theme-color.$primary,\n  // TODO(b/197004146): Support action label typography.\n  action-label-text-font: null,\n  action-label-text-size: null,\n  action-label-text-tracking: null,\n  action-label-text-weight: null,\n  action-pressed-state-layer-color: theme-color.$primary,\n  action-pressed-state-layer-opacity: 0.1,\n  action-pressed-label-text-color: null,\n  container-color: theme-color.$surface,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: 0,\n  content-max-width: 720px,\n  divider-color: $divider-color,\n  divider-height: 1px,\n  supporting-text-color: theme-color.$on-surface,\n  supporting-text-font: typography.get-font(body2),\n  supporting-text-line-height: typography.get-line-height(body2),\n  supporting-text-size: typography.get-size(body2),\n  supporting-text-tracking: typography.get-tracking(body2),\n  supporting-text-weight: typography.get-weight(body2),\n  with-image-image-shape: $graphic-shape-radius,\n  with-image-image-size: 40px,\n  with-image-image-color: $graphic-color,\n  with-image-image-container-color: $graphic-background-color,\n  z-index: 1,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  // TODO(b/251881053): Replace with `validate-theme`.\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  @return map.merge(\n    $theme,\n    _resolve-theme-elevation(\n      $theme,\n      map.get($resolvers, elevation),\n      container-elevation\n    )\n  );\n}\n\n@function _resolve-theme-elevation($theme, $resolver, $keys...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $key in $keys {\n    // Resolve the value for each state key.\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: map.get($theme, $key),\n      $shadow-color: map.get($theme, container-shadow-color)\n    );\n\n    // Update the theme with the resolved value.\n    $theme: map.set($theme, $key, $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include z-index(map.get($theme, 'z-index'), $query: $query);\n\n  @include max-width(map.get($theme, 'content-max-width'), $query: $query);\n\n  @include graphic-color(\n    map.get($theme, 'with-image-image-color'),\n    $query: $query\n  );\n  @include graphic-background-color(\n    map.get($theme, 'with-image-image-container-color'),\n    $query: $query\n  );\n\n  @include text-color(map.get($theme, supporting-text-color), $query: $query);\n  @include _supporting-text-typography(\n    (\n      font: map.get($theme, supporting-text-font),\n      size: map.get($theme, supporting-text-size),\n      tracking: map.get($theme, supporting-text-tracking),\n      weight: map.get($theme, supporting-text-weight),\n      line-height: map.get($theme, supporting-text-line-height),\n    ),\n    $query: $query\n  );\n\n  @include graphic-shape-radius(\n    map.get($theme, with-image-image-shape),\n    $query: $query\n  );\n  @include _graphic-size(\n    map.get($theme, with-image-image-size),\n    $query: $query\n  );\n\n  @include fill-color(map.get($theme, container-color), $query: $query);\n  @include divider-color(map.get($theme, divider-color), $query: $query);\n  @include _divider-height(map.get($theme, divider-height), $query: $query);\n  @include _banner-shape(map.get($theme, container-shape), $query: $query);\n  @include _banner-elevation(\n    $resolver,\n    map.get($theme, container-elevation),\n    map.get($theme, container-shadow-color),\n    $query\n  );\n\n  .mdc-button {\n    @include button-text-theme.theme-styles(\n      (\n        focus-label-text-color: map.get($theme, action-focus-label-text-color),\n        focus-state-layer-color: map.get($theme, action-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, action-focus-state-layer-opacity),\n        hover-label-text-color: map.get($theme, action-hover-label-text-color),\n        hover-state-layer-color: map.get($theme, action-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, action-hover-state-layer-opacity),\n        label-text-color: map.get($theme, action-label-text-color),\n        label-text-font: map.get($theme, action-label-text-font),\n        label-text-size: map.get($theme, action-label-text-size),\n        label-text-tracking: map.get($theme, action-label-text-tracking),\n        label-text-weight: map.get($theme, action-label-text-weight),\n        pressed-label-text-color:\n          map.get($theme, action-pressed-label-text-color),\n        pressed-state-layer-color:\n          map.get($theme, action-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, action-pressed-state-layer-opacity),\n      ),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Customizes fill color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes text color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Customizes divider color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin divider-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(border-bottom-color, $color);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin _divider-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(border-bottom-width, $height);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-bottom-width, $height);\n    }\n  }\n}\n\n///\n/// Customizes the graphic color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin graphic-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the graphic background color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin graphic-background-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the graphic shape radius.\n/// @param {Number} $shape-radius Shape radius in length or percentage.\n///\n@mixin graphic-shape-radius($shape-radius, $query: feature-targeting.all()) {\n  .mdc-banner__graphic {\n    @include shape-mixins.radius($shape-radius, $query: $query);\n  }\n}\n\n///\n/// Sets the min-width for the banner content.\n/// @param {Number} $min-width Minimum width value in `px`.\n/// @param {Number} $mobile-breakpoint Mobile breakpoint value in `px`.\n///\n@mixin min-width(\n  $min-width,\n  $mobile-breakpoint: $mobile-breakpoint,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-banner__content,\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: $min-width;\n\n      // The first media query ensures that banners are always 100% width on\n      // mobile devices, as required by the spec. The second media query\n      // prevents banners from being wider than the viewport for large min-width\n      // values.\n      @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n        min-width: 100%;\n      }\n    }\n  }\n}\n\n///\n/// Sets the max-width for the banner content.\n/// @param {Number} $max-width Maximum width value in `px`.\n///\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(max-width, $max-width);\n    }\n  }\n}\n\n///\n/// Sets the banner content to centered instead of leading.\n///\n@mixin position-centered($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      left: 0;\n      margin-left: auto;\n      margin-right: auto;\n      right: 0;\n    }\n  }\n}\n\n///\n/// Sets the banner content to stacked layout.\n///\n@mixin layout-stacked($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-banner__content {\n      flex-wrap: wrap;\n    }\n\n    .mdc-banner__graphic {\n      margin-bottom: 12px;\n    }\n\n    .mdc-banner__text {\n      @include rtl.reflexive-property(margin, 16px, 8px);\n      padding-bottom: 4px;\n    }\n\n    .mdc-banner__actions {\n      margin-left: auto;\n    }\n  }\n}\n\n// Sets the z-index of the banner.\n// @param {Number} $z-index\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(z-index, $z-index);\n  }\n}\n\n// Sets the width of the banner fixed element. Use to adjust the width of the\n// fixed banner in cases where width is not the same as the viewport.\n// @param {Number} $width Width value in `px`.\n@mixin fixed-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      width: $width;\n    }\n  }\n}\n\n@mixin _supporting-text-typography(\n  $typography-map,\n  $query: feature-targeting.all()\n) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $font: map.get($typography-map, font);\n  $size: map.get($typography-map, size);\n  $tracking: map.get($typography-map, tracking);\n  $weight: map.get($typography-map, weight);\n  $line-height: map.get($typography-map, line-height);\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-typography) {\n      @include theme.property(letter-spacing, $tracking);\n      @include theme.property(font-size, $size);\n      @include theme.property(font-family, $font);\n      @include theme.property(font-weight, $weight);\n      @include theme.property(line-height, $line-height);\n    }\n  }\n}\n\n@mixin _banner-shape($shape, $query: feature-targeting.all()) {\n  @include shape-mixins.radius($shape, $query: $query);\n}\n\n@mixin _banner-elevation(\n  $resolver,\n  $elevation,\n  $shadow-color,\n  $query: feature-targeting.all()\n) {\n  $elevation-resolver: map.get($resolver, elevation);\n\n  @include elevation-theme.with-resolver(\n    $elevation-resolver,\n    $elevation: $elevation,\n    $shadow-color: $shadow-color,\n    $query: $query\n  );\n}\n\n@mixin _graphic-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-banner/_banner.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use '@material/button/button-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use './banner-theme';\n\n$_text-type-scale: body2;\n$_min-width: 344px;\n// Minimum banner height minus standard text height, divided by 2 for both top\n// and bottom padding. This is used to support two/three line banners.\n$_text-padding-top-bottom: math.div(52px - 20px, 2);\n\n$_enter-duration: 300ms;\n$_exit-duration: 250ms;\n\n/// Core styles for banner component.\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include banner-theme.min-width($_min-width, $query: $query);\n  @include static-styles($query: $query);\n\n  .mdc-banner {\n    @include banner-theme.theme-styles(\n      banner-theme.$light-theme,\n      $query: $query\n    );\n  }\n\n  .mdc-banner__secondary-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 0, 8px);\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-banner {\n    @include feature-targeting.targets($feat-structure) {\n      // Mobile view styles.\n      @media (max-width: banner-theme.$mobile-breakpoint) {\n        // Span across viewport for fixed mobile view.\n        .mdc-banner__fixed {\n          left: 0;\n          right: 0;\n        }\n\n        .mdc-banner__text {\n          @include rtl.reflexive-property(margin, 16px, 36px);\n        }\n      }\n\n      border-bottom-style: solid;\n      box-sizing: border-box;\n      display: none;\n      flex-shrink: 0;\n      height: 0;\n      position: relative;\n      width: 100%;\n    }\n\n    &.mdc-banner--mobile-stacked {\n      @media (max-width: banner-theme.$mobile-breakpoint) {\n        @include banner-theme.layout-stacked($query: $query);\n      }\n    }\n  }\n\n  .mdc-banner--opening,\n  .mdc-banner--open,\n  .mdc-banner--closing {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n    }\n  }\n\n  .mdc-banner--open {\n    @include feature-targeting.targets($feat-animation) {\n      transition: height $_enter-duration ease;\n    }\n\n    .mdc-banner__content {\n      @include feature-targeting.targets($feat-animation) {\n        transition: transform $_enter-duration ease;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        transform: translateY(0);\n      }\n    }\n  }\n\n  .mdc-banner--closing {\n    @include feature-targeting.targets($feat-animation) {\n      transition: height $_exit-duration ease;\n    }\n\n    .mdc-banner__content {\n      @include feature-targeting.targets($feat-animation) {\n        transition: transform $_exit-duration ease;\n      }\n    }\n  }\n\n  .mdc-banner--centered {\n    @include banner-theme.position-centered($query: $query);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      border-bottom-style: solid;\n      box-sizing: border-box;\n      height: inherit;\n      position: fixed;\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      min-height: 52px;\n      position: absolute;\n      transform: translateY(-100%);\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__graphic-text-wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 16px, 0);\n\n      flex-shrink: 0;\n      margin-top: 16px;\n      margin-bottom: 16px;\n      text-align: center;\n    }\n  }\n\n  .mdc-banner__icon {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 24px, 90px);\n\n      align-self: center;\n      flex-grow: 1;\n\n      padding-top: $_text-padding-top-bottom;\n      padding-bottom: $_text-padding-top-bottom;\n    }\n  }\n\n  .mdc-banner__actions {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, 0, 8px);\n\n      align-self: flex-end;\n      display: flex;\n      flex-shrink: 0;\n      padding-bottom: 8px;\n      padding-top: 8px;\n    }\n  }\n\n  .mdc-banner__secondary-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 0, 8px);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-banner/_index.scss",
    "content": "@forward './banner-theme';\n"
  },
  {
    "path": "packages/mdc-banner/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {Action, CloseReason} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCBannerAdapter {\n  /**\n   * Adds the given class to the banner root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * @return Returns the height of the banner content element.\n   */\n  getContentHeight(): number;\n\n  /**\n   * Broadcasts an event denoting that the banner has finished closing.\n   */\n  notifyClosed(reason: CloseReason): void;\n\n  /**\n   * Broadcasts an event denoting that the banner has just started closing.\n   */\n  notifyClosing(reason: CloseReason): void;\n\n  /**\n   * Broadcasts an event denoting that the banner has finished opening.\n   */\n  notifyOpened(): void;\n\n  /**\n   * Broadcasts an event denoting that the banner has just started opening.\n   */\n  notifyOpening(): void;\n\n  /**\n   * Broadcasts an event denoting that a banner button was clicked without\n   * changing the banner state.\n   */\n  notifyActionClicked(action: Action): void;\n\n  /**\n   * Releases focus from banner and restores focus to the previously focused\n   * element.\n   */\n  releaseFocus(): void;\n\n  /**\n   * Removes the given class from the banner root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Sets a style property of the banner root element to the passed value.\n   */\n  setStyleProperty(propertyName: string, value: string): void;\n\n  /**\n   * Traps focus in banner and focuses on the primary action button.\n   */\n  trapFocus(): void;\n}\n"
  },
  {
    "path": "packages/mdc-banner/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {FocusTrap} from '@material/dom/focus-trap';\nimport {closest} from '@material/dom/ponyfill';\n\nimport {MDCBannerAdapter} from './adapter';\nimport {CloseReason, events, MDCBannerActionEventDetail, MDCBannerCloseEventDetail, MDCBannerFocusTrapFactory, selectors} from './constants';\nimport {MDCBannerFoundation} from './foundation';\n\n/** Vanilla implementation of banner component. */\nexport class MDCBanner extends MDCComponent<MDCBannerFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCBanner(root);\n  }\n\n  private handleContentClick!:\n      SpecificEventListener<'click'>;            // Assigned in #initialize.\n  private primaryActionEl!: HTMLElement;         // Assigned in #initialize.\n  private secondaryActionEl!: HTMLElement|null;  // Assigned in #initialize.\n  private textEl!: HTMLElement;                  // Assigned in #initialize.\n  private contentEl!: HTMLElement;               // Assigned in #initialize.\n  private focusTrap!: FocusTrap;  // assigned in initialSyncWithDOM()\n  private focusTrapFactory!:\n      MDCBannerFocusTrapFactory;  // assigned in initialize()\n\n  override initialize(\n      focusTrapFactory: MDCBannerFocusTrapFactory = (el, focusOptions) =>\n          new FocusTrap(el, focusOptions),\n  ) {\n    this.contentEl = this.root.querySelector<HTMLElement>(selectors.CONTENT)!;\n    this.textEl = this.root.querySelector<HTMLElement>(selectors.TEXT)!;\n    this.primaryActionEl =\n        this.root.querySelector<HTMLElement>(selectors.PRIMARY_ACTION)!;\n    this.secondaryActionEl =\n        this.root.querySelector<HTMLElement>(selectors.SECONDARY_ACTION)!;\n    this.focusTrapFactory = focusTrapFactory;\n\n    this.handleContentClick = (event) => {\n      const target = event.target as Element;\n      if (closest(target, selectors.PRIMARY_ACTION)) {\n        this.foundation.handlePrimaryActionClick();\n      } else if (closest(target, selectors.SECONDARY_ACTION)) {\n        this.foundation.handleSecondaryActionClick();\n      }\n    };\n  }\n\n  override initialSyncWithDOM() {\n    this.registerContentClickHandler(this.handleContentClick);\n    this.focusTrap = this.focusTrapFactory(\n        this.root, {initialFocusEl: this.primaryActionEl});\n  }\n\n  override destroy() {\n    super.destroy();\n    this.deregisterContentClickHandler(this.handleContentClick);\n  }\n\n  layout() {\n    this.foundation.layout();\n  }\n\n  /**\n   * Opens the banner and fires events.OPENING to indicate the beginning of its\n   * opening animation and then events.OPENED once the animation finishes.\n   */\n  open() {\n    this.foundation.open();\n  }\n\n  /**\n   * Closes the banner and fires events.CLOSING to indicate the beginning of its\n   * closing animation and then events.CLOSED once the animation finishes.\n   * @param reason Why the banner was closed. Value will be passed to\n   *     events.CLOSING and events.CLOSED via the `event.detail.reason`\n   *     property. Standard values are CloseReason.PRIMARY and\n   *     CloseReason.SECONDARY, but CloseReason.UNSPECIFIED is provided for\n   *     custom handling of programmatic closing of the banner.\n   */\n  close(reason: CloseReason) {\n    this.foundation.close(reason);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCBannerAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      getContentHeight: () => {\n        return this.contentEl.offsetHeight;\n      },\n      notifyClosed: (reason) => {\n        this.emit<MDCBannerCloseEventDetail>(events.CLOSED, {reason});\n      },\n      notifyClosing: (reason) => {\n        this.emit<MDCBannerCloseEventDetail>(events.CLOSING, {reason});\n      },\n      notifyOpened: () => {\n        this.emit(events.OPENED, {});\n      },\n      notifyOpening: () => {\n        this.emit(events.OPENING, {});\n      },\n      notifyActionClicked: (action) => {\n        this.emit<MDCBannerActionEventDetail>(events.ACTION_CLICKED, {action});\n      },\n      releaseFocus: () => {\n        this.focusTrap.releaseFocus();\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setStyleProperty: (propertyName, value) => {\n        this.root.style.setProperty(propertyName, value);\n      },\n      trapFocus: () => {\n        this.focusTrap.trapFocus();\n      },\n    };\n    return new MDCBannerFoundation(adapter);\n  }\n\n  get isOpen(): boolean {\n    return this.foundation.isOpen();\n  }\n\n  getText(): string {\n    return this.textEl.textContent || '';\n  }\n\n  setText(text: string) {\n    this.textEl.textContent = text;\n  }\n\n  getPrimaryActionText(): string {\n    return this.primaryActionEl.textContent || '';\n  }\n\n  setPrimaryActionText(actionButtonText: string) {\n    this.primaryActionEl.textContent = actionButtonText;\n  }\n\n  /** Returns null if the banner has no secondary action. */\n  getSecondaryActionText(): string|null {\n    return this.secondaryActionEl ? this.secondaryActionEl.textContent || '' :\n                                    null;\n  }\n\n  setSecondaryActionText(actionButtonText: string) {\n    if (this.secondaryActionEl) {\n      this.secondaryActionEl.textContent = actionButtonText;\n    }\n  }\n\n  private registerContentClickHandler(handler: SpecificEventListener<'click'>) {\n    this.contentEl.addEventListener('click', handler as EventListener);\n  }\n\n  private deregisterContentClickHandler(handler:\n                                            SpecificEventListener<'click'>) {\n    this.contentEl.removeEventListener('click', handler as EventListener);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-banner/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {FocusOptions, FocusTrap} from '@material/dom/focus-trap';\n\n/** Banner element classes. */\nexport const cssClasses = {\n  CLOSING: 'mdc-banner--closing',\n  OPEN: 'mdc-banner--open',\n  OPENING: 'mdc-banner--opening',\n};\n\n/** Banner numbers. */\nexport const numbers = {\n  BANNER_ANIMATION_CLOSE_TIME_MS: 250,\n  BANNER_ANIMATION_OPEN_TIME_MS: 300,\n};\n\n/** Banner events. */\nexport const events = {\n  CLOSED: 'MDCBanner:closed',\n  CLOSING: 'MDCBanner:closing',\n  OPENED: 'MDCBanner:opened',\n  OPENING: 'MDCBanner:opening',\n  ACTION_CLICKED: 'MDCBanner:actionClicked',\n};\n\n/** Banner selectors. */\nexport const selectors = {\n  CONTENT: '.mdc-banner__content',\n  PRIMARY_ACTION: '.mdc-banner__primary-action',\n  SECONDARY_ACTION: '.mdc-banner__secondary-action',\n  TEXT: '.mdc-banner__text',\n};\n\n/** Reason as to why the banner was closed. */\nexport enum CloseReason {\n  // Indicates the banner was closed via primary action button.\n  PRIMARY,\n  // Indicates the banner was closed via secondary action button.\n  SECONDARY,\n  // Will never be used by the component. Provided for custom handling of\n  // programmatic closing of the banner.\n  UNSPECIFIED,\n}\n\n/**\n * Payload of actionClicked events to signify which action emitted the event.\n */\nexport enum Action {\n  PRIMARY,\n  SECONDARY,\n  UNKNOWN\n}\n\n/** Interface for the detail of the closing and closed events emitted. */\nexport interface MDCBannerCloseEventDetail {\n  reason: CloseReason;\n}\n\n/** Interface for the detail of the closing and closed events emitted. */\nexport interface MDCBannerActionEventDetail {\n  action: Action;\n}\n\n/**  */\nexport type MDCBannerFocusTrapFactory = (\n    element: HTMLElement,\n    options: FocusOptions,\n    ) => FocusTrap;\n"
  },
  {
    "path": "packages/mdc-banner/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCBannerAdapter} from './adapter';\nimport {Action, CloseReason, cssClasses, numbers} from './constants';\n\nconst {OPENING, OPEN, CLOSING} = cssClasses;\n\n/**\n * Foundation class for banner. Responsibilities include opening and closing the\n * banner.\n */\nexport class MDCBannerFoundation extends MDCFoundation<MDCBannerAdapter> {\n  static override get defaultAdapter(): MDCBannerAdapter {\n    return {\n      addClass: () => undefined,\n      getContentHeight: () => 0,\n      notifyClosed: () => undefined,\n      notifyClosing: () => undefined,\n      notifyOpened: () => undefined,\n      notifyOpening: () => undefined,\n      notifyActionClicked: () => undefined,\n      releaseFocus: () => undefined,\n      removeClass: () => undefined,\n      setStyleProperty: () => undefined,\n      trapFocus: () => undefined,\n    };\n  }\n\n  private isOpened = false;\n  // Request id for open animation, used to cancel the refresh callback\n  // request on close() and destroy().\n  private animationFrame = 0;\n  // Timer id for close and open animation, used to cancel the timer on\n  // close() and destroy().\n  private animationTimer = 0;\n\n  constructor(adapter?: Partial<MDCBannerAdapter>) {\n    super({...MDCBannerFoundation.defaultAdapter, ...adapter});\n  }\n\n  override destroy() {\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = 0;\n    clearTimeout(this.animationTimer);\n    this.animationTimer = 0;\n  }\n\n  open() {\n    this.isOpened = true;\n    this.adapter.removeClass(CLOSING);\n    this.adapter.addClass(OPENING);\n    this.adapter.notifyOpening();\n\n    const contentHeight = this.adapter.getContentHeight();\n    this.animationFrame = requestAnimationFrame(() => {\n      this.adapter.addClass(OPEN);\n      this.adapter.setStyleProperty('height', `${contentHeight}px`);\n\n      this.animationTimer = setTimeout(() => {\n        this.handleAnimationTimerEnd();\n        this.adapter.trapFocus();\n        this.adapter.notifyOpened();\n      }, numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    });\n  }\n\n  /**\n   * @param reason Why the banner was closed. Value will be passed to\n   *     events.CLOSING and events.CLOSED via the `event.detail.reason`\n   *     property. Standard values are CloseReason.PRIMARY and\n   *     CloseReason.SECONDARY, but CloseReason.UNSPECIFIED is provided for\n   *     custom handling of programmatic closing of the banner.\n   */\n  close(reason: CloseReason) {\n    if (!this.isOpened) {\n      // Avoid redundant close calls (and events), e.g. repeated interactions as\n      // the banner is animating closed\n      return;\n    }\n\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = 0;\n\n    this.isOpened = false;\n    this.adapter.notifyClosing(reason);\n    this.adapter.addClass(CLOSING);\n    this.adapter.setStyleProperty('height', '0');\n    this.adapter.removeClass(OPEN);\n    this.adapter.removeClass(OPENING);\n\n    clearTimeout(this.animationTimer);\n    this.animationTimer = setTimeout(() => {\n      this.adapter.releaseFocus();\n      this.handleAnimationTimerEnd();\n      this.adapter.notifyClosed(reason);\n    }, numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n  }\n\n  isOpen(): boolean {\n    return this.isOpened;\n  }\n\n  handlePrimaryActionClick(disableAutoClose = false) {\n    if (disableAutoClose) {\n      this.adapter.notifyActionClicked(Action.PRIMARY);\n    } else {\n      this.close(CloseReason.PRIMARY);\n    }\n  }\n\n  handleSecondaryActionClick(disableAutoClose = false) {\n    if (disableAutoClose) {\n      this.adapter.notifyActionClicked(Action.SECONDARY);\n\n    } else {\n      this.close(CloseReason.SECONDARY);\n    }\n  }\n\n  layout() {\n    const contentHeight = this.adapter.getContentHeight();\n    this.adapter.setStyleProperty('height', `${contentHeight}px`);\n  }\n\n  private handleAnimationTimerEnd() {\n    this.animationTimer = 0;\n    this.adapter.removeClass(OPENING);\n    this.adapter.removeClass(CLOSING);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-banner/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-banner/package.json",
    "content": "{\n  \"name\": \"@material/banner\",\n  \"description\": \"The Material Components Web banner component.\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"banner\"\n  ],\n  \"main\": \"dist/mdc.banner.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-banner\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/button\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-banner/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './banner';\n\n@include banner.core-styles;\n"
  },
  {
    "path": "packages/mdc-banner/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {CloseReason, cssClasses, events, numbers, selectors} from '../constants';\nimport {MDCBanner} from '../index';\n\nfunction setupTest(fixture: HTMLElement) {\n  const contentEl = fixture.querySelector<HTMLElement>(selectors.CONTENT)!;\n  const textEl = fixture.querySelector<HTMLElement>(selectors.TEXT)!;\n  const primaryActionEl =\n      fixture.querySelector<HTMLElement>(selectors.PRIMARY_ACTION)!;\n  const secondaryActionEl =\n      fixture.querySelector<HTMLElement>(selectors.SECONDARY_ACTION)!;\n  const component = new MDCBanner(fixture);\n\n  return {\n    component,\n    contentEl,\n    primaryActionEl,\n    textEl,\n    secondaryActionEl,\n  };\n}\n\ndescribe('MDCBanner', () => {\n  setUpMdcTestEnvironment();\n\n  let fixture: HTMLElement;\n\n  beforeEach(() => {\n    fixture = createFixture(html`<div>\n      <div class=\"mdc-banner\" role=\"banner\">\n        <div class=\"mdc-banner__content\">\n          <div class=\"mdc-banner__text\"\n               role=\"alertdialog\"\n               aria-live=\"assertive\">\n            Single line banner.\n          </div>\n          <div class=\"mdc-banner__actions\">\n            <button type=\"button\" class=\"mdc-button mdc-banner__secondary-action\">\n              <div class=\"mdc-button__ripple\"></div>\n              <div class=\"mdc-button__label\">Learn more</div>\n            </button>\n            <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n              <div class=\"mdc-button__ripple\"></div>\n              <div class=\"mdc-button__label\">Fix it</div>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>`);\n    document.body.appendChild(fixture);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(fixture);\n  });\n\n  it('attachTo returns a component instance', () => {\n    expect(MDCBanner.attachTo(fixture)).toEqual(jasmine.any(MDCBanner));\n  });\n\n  it('#initialize registers click handlers for primary action button', () => {\n    const {component, primaryActionEl} = setupTest(fixture);\n    const handler = jasmine.createSpy('notifyClosingHandler');\n\n    component.open();\n    component.listen(events.CLOSING, handler);\n    emitEvent(primaryActionEl, 'click', {bubbles: true});\n    component.unlisten(events.CLOSING, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {reason: CloseReason.PRIMARY}}));\n  });\n\n  it('#initialize registers click handlers for secondary action button', () => {\n    const {component, secondaryActionEl} = setupTest(fixture);\n    const handler = jasmine.createSpy('notifyClosingHandler');\n\n    component.open();\n    component.listen(events.CLOSING, handler);\n    emitEvent(secondaryActionEl, 'click', {bubbles: true});\n    component.unlisten(events.CLOSING, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {reason: CloseReason.SECONDARY}}));\n  });\n\n  it('#initialSyncWithDom adds a click event listener on the content element',\n     () => {\n       const contentEl =\n           fixture.querySelector<HTMLElement>('.mdc-banner__content')!;\n       spyOn(contentEl, 'addEventListener').and.callThrough();\n       const component = MDCBanner.attachTo(fixture);\n\n       component.open();\n       expect(contentEl.addEventListener)\n           .toHaveBeenCalledWith('click', jasmine.any(Function));\n     });\n\n  it('#destroy removes the click event listener on the content element', () => {\n    const {component, contentEl} = setupTest(fixture);\n    spyOn(contentEl, 'removeEventListener').and.callThrough();\n\n    component.destroy();\n    expect(contentEl.removeEventListener)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n  });\n\n  it('clicking on content element does nothing', () => {\n    const {component, contentEl} = setupTest(fixture);\n    const handler = jasmine.createSpy('notifyClosingHandler');\n\n    component.open();\n    component.listen(events.CLOSING, handler);\n    emitEvent(contentEl, 'click', {bubbles: true});\n    component.unlisten(events.CLOSING, handler);\n\n    expect(handler).not.toHaveBeenCalled();\n  });\n\n  it('#open emits opening animation events and adds/removes necessary classes',\n     () => {\n       const {component} = setupTest(fixture);\n       const openingHandler = jasmine.createSpy('notifyOpeningHandler');\n       const openedHandler = jasmine.createSpy('notifyOpenedHandler');\n\n       component.listen(events.OPENING, openingHandler);\n       component.listen(events.OPENED, openedHandler);\n       component.open();\n       expect(openingHandler).toHaveBeenCalled();\n       expect(fixture).toHaveClass(cssClasses.OPENING);\n       expect(fixture).not.toHaveClass(cssClasses.CLOSING);\n       jasmine.clock().tick(1);\n       expect(fixture).toHaveClass(cssClasses.OPEN);\n       jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n       expect(openedHandler).toHaveBeenCalled();\n       expect(fixture).not.toHaveClass(cssClasses.OPENING);\n       component.unlisten(events.OPENING, openingHandler);\n       component.unlisten(events.OPENED, openedHandler);\n     });\n\n  it('#close emits closing animation events and adds/removes necessary classes',\n     () => {\n       const {component} = setupTest(fixture);\n       component.open();\n       const closingHandler = jasmine.createSpy('notifyClosingHandler');\n       const closedHandler = jasmine.createSpy('notifyClosedHandler');\n\n       component.listen(events.CLOSING, closingHandler);\n       component.listen(events.CLOSED, closedHandler);\n       component.close(CloseReason.UNSPECIFIED);\n       expect(closingHandler).toHaveBeenCalled();\n       expect(fixture).toHaveClass(cssClasses.CLOSING);\n       expect(fixture).not.toHaveClass(cssClasses.OPEN);\n       expect(fixture).not.toHaveClass(cssClasses.OPENING);\n       jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n       expect(closedHandler).toHaveBeenCalled();\n       expect(fixture).not.toHaveClass(cssClasses.CLOSING);\n       component.unlisten(events.CLOSING, closingHandler);\n       component.unlisten(events.CLOSED, closedHandler);\n     });\n\n  it('#open sets the root element height to the content element height', () => {\n    const {component, contentEl} = setupTest(fixture);\n\n    component.open();\n    jasmine.clock().tick(1);\n    expect(fixture.offsetHeight).toEqual(contentEl.offsetHeight);\n  });\n\n  it('#close sets the root element height back to 0', () => {\n    const {component} = setupTest(fixture);\n    component.open();\n\n    component.close(CloseReason.UNSPECIFIED);\n    expect(fixture.offsetHeight).toEqual(0);\n  });\n\n  it('#layout sets the root element height to the content element height',\n     () => {\n       const {component, contentEl} = setupTest(fixture);\n\n       contentEl.style.height = '50px';\n       component.layout();\n       jasmine.clock().tick(1);\n       expect(fixture.offsetHeight).toEqual(contentEl.offsetHeight);\n     });\n\n  it('get isOpen returns true when open', () => {\n    const {component} = setupTest(fixture);\n\n    component.open();\n    expect(component.isOpen).toBe(true);\n  });\n\n  it('get isOpen returns false when not open', () => {\n    const {component} = setupTest(fixture);\n\n    expect(component.isOpen).toBe(false);\n  });\n\n  it('getText returns textContent', () => {\n    const {component, textEl} = setupTest(fixture);\n\n    expect(component.getText()).toEqual(textEl.textContent!);\n  });\n\n  it('setText sets the text textContent', () => {\n    const {component} = setupTest(fixture);\n\n    component.setText('foo');\n    expect(component.getText()).toEqual('foo');\n  });\n\n  it('getPrimaryActionText returns the primary button textContent', () => {\n    const {component, primaryActionEl} = setupTest(fixture);\n\n    expect(component.getPrimaryActionText())\n        .toEqual(primaryActionEl.textContent!);\n  });\n\n  it('setPrimaryActionText sets the primary button textContent', () => {\n    const {component} = setupTest(fixture);\n\n    component.setPrimaryActionText('foo');\n    expect(component.getPrimaryActionText()).toEqual('foo');\n  });\n\n  it('getSecondaryActionText returns the secondary button textContent', () => {\n    const {component, secondaryActionEl} = setupTest(fixture);\n\n    expect(component.getSecondaryActionText())\n        .toEqual(secondaryActionEl.textContent!);\n  });\n\n  it('getSecondaryActionText returns null if no secondary action', () => {\n    fixture = createFixture(html`<div>\n      <div class=\"mdc-banner\" role=\"banner\">\n        <div class=\"mdc-banner__content\">\n          <div class=\"mdc-banner__text\"\n               role=\"alertdialog\"\n               aria-live=\"assertive\">\n            Single line banner.\n          </div>\n          <div class=\"mdc-banner__actions\">\n            <button type=\"button\" class=\"mdc-button mdc-banner__primary-action\">\n              <div class=\"mdc-button__ripple\"></div>\n              <div class=\"mdc-button__label\">Fix it</div>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>`);\n    document.body.appendChild(fixture);\n    const component = MDCBanner.attachTo(fixture);\n\n    expect(component.getSecondaryActionText()).toEqual(null);\n  });\n\n  it('setSecondaryActionText sets the secondary button textContent', () => {\n    const {component} = setupTest(fixture);\n\n    component.setSecondaryActionText('foo');\n    expect(component.getSecondaryActionText()).toEqual('foo');\n  });\n\n  it('#open sets focus on primary action', () => {\n    const {component, primaryActionEl} = setupTest(fixture);\n    component.open();\n\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    expect(document.activeElement).toEqual(primaryActionEl);\n  });\n\n  it('#close releases focus to previously focused element', () => {\n    const {component} = setupTest(fixture);\n\n    const backgroundElement = document.createElement('button');\n    document.body.appendChild(backgroundElement);\n    backgroundElement.focus();\n    expect(document.activeElement).toEqual(backgroundElement);\n\n    component.open();\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    expect(document.activeElement).not.toEqual(backgroundElement);\n    component.close(CloseReason.UNSPECIFIED);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n    expect(document.activeElement).toEqual(backgroundElement);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-banner/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {Action, CloseReason, cssClasses, numbers} from '../constants';\nimport {MDCBannerFoundation} from '../foundation';\n\ndescribe('MDCBannerFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCBannerFoundation, [\n      'addClass',\n      'getContentHeight',\n      'notifyOpening',\n      'notifyOpened',\n      'notifyClosing',\n      'notifyClosed',\n      'notifyActionClicked',\n      'setStyleProperty',\n      'removeClass',\n      'trapFocus',\n      'releaseFocus',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCBannerFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#destroy cancels all timers', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.destroy();\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#layout sets the root element height to the content height', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.layout();\n    expect(mockAdapter.getContentHeight).toHaveBeenCalled();\n    // 0px since nothing is being generated.\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('height', '0px');\n  });\n\n  it('#open adds CSS classes after rAF', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#close removes CSS classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close(CloseReason.UNSPECIFIED);\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#close cancels rAF scheduled by open if still pending', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close(CloseReason.UNSPECIFIED);\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#open adds the opening class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPENING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPENING);\n\n       jasmine.clock().tick(1);\n       jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n     });\n\n  it('#close adds the closing class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n       foundation.close(CloseReason.UNSPECIFIED);\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n     });\n\n  it('#open emits \"opening\" and \"opened\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    expect(mockAdapter.notifyOpening).toHaveBeenCalledTimes(1);\n\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    expect(mockAdapter.notifyOpened).toHaveBeenCalledTimes(1);\n  });\n\n  it('#close emits \"closing\" and \"closed\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    foundation.close(CloseReason.UNSPECIFIED);\n\n    expect(mockAdapter.notifyClosing)\n        .toHaveBeenCalledWith(CloseReason.UNSPECIFIED);\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledTimes(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.notifyClosed)\n        .toHaveBeenCalledWith(CloseReason.UNSPECIFIED);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledTimes(1);\n  });\n\n  it('#close does nothing if the banner is already closed', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.close(CloseReason.UNSPECIFIED);\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.OPENING);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.CLOSING);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '\"\"' is not\n    //  assignable to parameter of type 'Expected<CloseReason>'.\n    expect(mockAdapter.notifyClosing).not.toHaveBeenCalledWith('');\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '\"\"' is not\n    //  assignable to parameter of type 'Expected<CloseReason>'.\n    expect(mockAdapter.notifyClosed).not.toHaveBeenCalledWith('');\n    expect(mockAdapter.releaseFocus).not.toHaveBeenCalled();\n  });\n\n  it('#open activates focus trapping on the banner', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    expect(mockAdapter.trapFocus).toHaveBeenCalled();\n  });\n\n  it('#close deactivates focus trapping on the dialog surface', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close(CloseReason.UNSPECIFIED);\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);\n    expect(mockAdapter.releaseFocus).toHaveBeenCalled();\n  });\n\n  it('#isOpen returns false when the banner has never been opened', () => {\n    const {foundation} = setupTest();\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it('#isOpen returns true when the banner is open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n\n    expect(foundation.isOpen()).toBe(true);\n  });\n\n  it('#isOpen returns false when the banner is closed after being open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n    foundation.close(CloseReason.UNSPECIFIED);\n\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it(`#handlePrimaryActionClick closes the banner with reason \"${\n         CloseReason.PRIMARY}\" if disableAutoClose is false`,\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handlePrimaryActionClick();\n\n       expect(foundation.close).toHaveBeenCalledWith(CloseReason.PRIMARY);\n     });\n\n  it(`#handlePrimaryActionClick does not close the banner if disableAutoClose is\n     true, instead emits ActionClicked with action \"${Action.PRIMARY}\"`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handlePrimaryActionClick(/** disableAutoClose= */ true);\n\n       expect(foundation.close).not.toHaveBeenCalled();\n       expect(mockAdapter.notifyActionClicked)\n           .toHaveBeenCalledWith(Action.PRIMARY);\n     });\n\n  it(`#handleSecondaryActionClick closes the banner with reason \"${\n         CloseReason.SECONDARY}\" if disableAutoClose is false`,\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleSecondaryActionClick();\n\n       expect(foundation.close).toHaveBeenCalledWith(CloseReason.SECONDARY);\n     });\n\n  it(`#handleSecondaryActionClick does not close the banner if disableAutoClose\n     is true, instead emits ActionClicked with action \"${Action.SECONDARY}\"`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleSecondaryActionClick(/** disableAutoClose= */ true);\n\n       expect(foundation.close).not.toHaveBeenCalled();\n       expect(mockAdapter.notifyActionClicked)\n           .toHaveBeenCalledWith(Action.SECONDARY);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-base/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-base/README.md",
    "content": "<!--docs:\ntitle: \"Base\"\nlayout: detail\nsection: components\nexcerpt: \"Base foundation and component classes.\"\npath: /catalog/base/\n-->\n\n# Base\n\nMDC Base contains core foundation and component classes that serve as the base classes for all of MDC Web's foundation classes and components (respectively).\n\nMost of the time, you shouldn't need to depend on `mdc-base` directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.\n\n## Installation\n\nFirst install the module:\n\n```\nnpm install @material/base\n```\n\nThen include it in your code in one of the following ways:\n\n#### ES Module syntax\n\n```javascript\nimport {MDCComponent, MDCFoundation} from '@material/base';\n```\n#### CommonJS\n\n```javascript\nconst MDCComponent = require('mdc-base').MDCComponent;\nconst MDCFoundation = require('mdc-base').MDCFoundation;\n```\n\n#### AMD\n\n```javascript\nrequire(['path/to/mdc-base'], function(mdcBase) {\n  const MDCComponent = mdcBase.MDCComponent;\n  const MDCFoundation = mdcBase.MDCFoundation;\n});\n```\n\n#### Vanilla\n\n```javascript\nconst MDCComponent = mdc.base.MDCComponent;\nconst MDCFoundation = mdc.base.MDCFoundation;\n```\n\n## Usage\n\nmdc-base exposes two classes: `MDCComponent` (the default export) which all components extend from, and `MDCFoundation`, which all foundation classes extend from. To learn more about foundation classes vs. components, check out our overview on [architecture and best practices](../../docs/code).\n\n### MDCFoundation\n\nMDCFoundation provides the basic mechanisms for implementing foundation classes. Subclasses are expected to:\n\n- Provide implementations of the proper static getters where necessary.\n- Provide `init()` and `destroy()` lifecycle methods\n\n```javascript\nimport {MDCFoundation} from '@material/base/foundation';\n\nexport default class MyFoundation extends MDCFoundation {\n  static get cssClasses() {\n    return {\n      ROOT: 'my-component',\n      MESSAGE: 'my-component__message',\n      BUTTON: 'my-component__button',\n      TOGGLED: 'my-component--toggled'\n    };\n  }\n\n  static get defaultAdapter() {\n    return {\n      toggleClass: (/* className: string */) => {},\n      registerBtnClickHandler: (/* handler: Function */) => {},\n      deregisterBtnClickHandler: (/* handler: Function */) => {}\n    };\n  }\n\n  constructor(adapter) {\n    super({...MyFoundation.defaultAdapter, ...adapter});\n    const {TOGGLED} = MyFoundation.cssClasses;\n    this.clickHandler = () => this.adapter.toggleClass(TOGGLED);\n  }\n\n  init() {\n    this.adapter.registerBtnClickHandler(this.clickHandler);\n  }\n\n  destroy() {\n    this.adapter.deregisterBtnClickHandler(this.clickHandler);\n  }\n}\n```\n\n#### Static Getters\n\nThe static getters specify constants that can be used within the foundation class, its component, and by 3rd-party code. _It's important to remember to always put constants into these getters_. This will ensure your component can interop in as many environments as possible, including those where CSS classes need to be overwritten by the host library (e.g., Closure Stylesheets), or strings need to be modified (for i18n, for example).\n\nNote that you do not have to explicitly provide getters for constants if your component has none.\n\nThe getters which should be provided are specified below:\n\n| getter | description |\n| --- | --- |\n| cssClasses | returns an object where each key identifies a css class that some code will rely on. |\n| strings | returns an object where each key identifies a string constant, e.g. `ARIA_ROLE` |\n| numbers | returns an object where each key identifies a numeric constant, e.g. `TRANSITION_DELAY_MS` |\n| defaultAdapter | returns an object specifying the shape of the adapter. Can be used as sensible defaults for an adapter as well as a way to specify your adapter's \"schema\" |\n\n#### Lifecycle Methods\n\nEach foundation class has two lifecycle methods: `init()` and `destroy()`, which are described below:\n\n| method | time of invocation | use case |\n| --- | --- | --- |\n| init() | called by a host class when a component is ready to be initialized | add event listeners, query for info via adapters, etc. |\n| destroy() | called by a host class when a component is no longer in use | remove event listeners, reset any transient state, etc. |\n\n### MDCComponent\n\nMDCComponent provides the basic mechanisms for implementing component classes.\n\n```javascript\nimport MyComponentFoundation from './foundation';\n\nexport class MyComponent extends MDCComponent {\n  static attachTo(root) {\n    return new MyComponent(root);\n  }\n\n  getDefaultFoundation() {\n    const btn = this.root.querySelector<HTMLElement>(`.${MyComponentFoundation.cssClasses.BUTTON}`)!;\n    return new MyComponentFoundation({\n      toggleClass: className => {\n        if (this.root.classList.contains(className)) {\n          this.root.classList.remove(className);\n          return;\n        }\n        this.root.classList.add(className);\n      },\n      registerBtnClickHandler: handler => btn.addEventListener('click', handler),\n      deregisterBtnClickHandler: handler => btn.removeEventListener('click', handler)\n    });\n  }\n}\n```\n\n#### Properties\n\n`MDCComponent` provides the following \"private\" properties to subclasses:\n\n| property | description |\n| --- | --- |\n| `root` | The root element passed into the constructor as the first argument. |\n| `foundation` | The foundation class for this component. This is either passed in as an optional second argument to the constructor, or assigned the result of calling `getDefaultFoundation()` |\n\n#### Methods\n\n`MDCComponent` provides the following methods to subclasses:\n\n| method | description |\n| --- | --- |\n| `initialize(...args)` | Called after the root element is attached to the component, but _before_ the foundation is instantiated. Any positional arguments passed to the component constructor after the root element, along with the optional foundation 2nd argument, will be provided to this method. This is a good place to do any setup work normally done within a constructor function. |\n| `getDefaultFoundation()` | Returns an instance of a foundation class properly configured for the component. Called when no foundation instance is given within the constructor. Subclasses **must** implement this method. |\n| `initialSyncWithDOM()` | Called within the constructor. Subclasses may override this method if they wish to perform initial synchronization of state with the host DOM element. For example, a slider may want to check if its host element contains a pre-set value, and adjust its internal state accordingly. Note that the same caveats apply to this method as to foundation class lifecycle methods. Defaults to a no-op. |\n| `destroy()` | Subclasses may override this method if they wish to perform any additional cleanup work when a component is destroyed. For example, a component may want to deregister a window resize listener. |\n| `listen(type: string, handler: EventListener)` | Adds an event listener to the component's root node for the given `type`. Note that this is simply a proxy to `this.root.addEventListener`. |\n| `unlisten(type: string, handler: EventListener)` | Removes an event listener from the component's root node. Note that this is simply a proxy to `this.root.removeEventListener`. |\n| `emit(type: string, data: Object, shouldBubble: boolean = false)` | Dispatches a custom event of type `type` with detail `data` from the component's root node. It also takes an optional shouldBubble argument to specify if the event should bubble. This is the preferred way of dispatching events within our vanilla components. |\n\n#### Static Methods\n\nIn addition to methods inherited, subclasses should implement the following two static methods within their code:\n\n| method | description |\n| --- | --- |\n| `attachTo(root) => <ComponentClass>` | Subclasses must implement this as a convenience method to instantiate and return an instance of the class using the root element provided. This will be used within `mdc-auto-init`, and in the future its presence may be enforced via a custom lint rule.|\n\n#### Foundation Lifecycle handling\n\n`MDCComponent` calls its foundation's `init()` function within its _constructor_, and its foundation's `destroy()` function within its own _destroy()_ function. Therefore it's important to remember to _always call super() when overriding destroy()_. Not doing so can lead to leaked resources.\n\n#### Initialization and constructor parameters\n\nIf you need to pass in additional parameters into a component's constructor, you can make use of the\n`initialize` method, as shown above. An example of this is passing in a child component as a\ndependency.\n\n```js\nclass MyComponent extends MDCComponent {\n  initialize(childComponent = null) {\n    this.child = childComponent ?\n      childComponent : new ChildComponent(this.root.querySelector<HTMLElement>('.child'));\n  }\n\n  getDefaultFoundation() {\n    return new MyComponentFoundation({\n      doSomethingWithChildComponent: () => this.child.doSomething(),\n      // ...\n    });\n  }\n}\n```\n\nYou could call this code like so:\n\n```js\nconst childComponent = new ChildComponent(document.querySelector<HTMLElement>('.some-child'));\nconst myComponent = new MyComponent(\n  document.querySelector<HTMLElement>('.my-component'), /* foundation */ undefined, childComponent\n);\n// use myComponent\n```\n\n> NOTE: You could also pass in an initialized foundation if you wish. The example above simply\n> showcases how you could pass in initialization arguments without instantiating a foundation.\n\n#### Best Practice: Keep your adapters simple\n\nIf you find your adapters getting too complex, you should consider refactoring the complex parts out into their own implementations.\n\n```javascript\nimport MyComponentFoundation from './foundation';\nimport {toggleClass} from './util';\n\nclass MyComponent {\n  // ...\n  getDefaultFoundation() {\n    return new MyComponentFoundation({\n      toggleClass: className => util.toggleClass(this.root, className),\n      // ...\n    });\n  }\n}\n```\n\nWhere `./util` could look like:\n\n```javascript\nexport function toggleClass(element, className) {\n  if (root.classList.contains(className)) {\n    root.classList.remove(className);\n    return;\n  }\n  root.classList.add(className);\n}\n```\n\nThis not only reduces the complexity of your component class, but allows for the functionality of complex adapters to be adequately tested:\n\n```javascript\ntest('toggleClass() removes a class when present on an element', t => {\n  const root = document.createElement('div');\n  root.classList.add('foo');\n\n  util.toggleClass(root, 'foo');\n\n  t.false(root.classList.contains('foo'));\n  t.end();\n});\n```\n"
  },
  {
    "path": "packages/mdc-base/_index.scss",
    "content": "@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-base/_mixins.import.scss",
    "content": "@forward \"./index\" as mdc-base-*;\n"
  },
  {
    "path": "packages/mdc-base/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n\n// This variable is not intended to be overridden externally; it uses !default to avoid being reset\n// every time this file is imported.\n$styles-emitted_: () !default;\n\n@mixin emit-once($key) {\n  @if not list.index($styles-emitted_, $key) {\n    $styles-emitted_: list.append($styles-emitted_, $key, comma) !global;\n\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-base/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {safeAttrPrefix} from 'safevalues';\nimport {setElementPrefixedAttribute} from 'safevalues/dom';\n\nimport {MDCFoundation} from './foundation';\nimport {CustomEventListener, EventType, SpecificEventListener} from './types';\n\nfunction toCamelCase(str: string) {\n  // tslint:disable-next-line:enforce-name-casing\n  return String(str).replace(/\\-([a-z])/g, (_, match) => match.toUpperCase());\n}\n\n/** MDC Component base */\nexport class MDCComponent<FoundationType extends MDCFoundation> {\n  static attachTo(root: HTMLElement): MDCComponent<MDCFoundation<{}>> {\n    // Subclasses which extend MDCBase should provide an attachTo() method that\n    // takes a root element and returns an instantiated component with its root\n    // set to that element. Also note that in the cases of subclasses, an\n    // explicit foundation class will not have to be passed in; it will simply\n    // be initialized from getDefaultFoundation().\n    return new MDCComponent(root, new MDCFoundation({}));\n  }\n\n  protected foundation: FoundationType;\n\n  constructor(\n    public root: HTMLElement,\n    foundation?: FoundationType,\n    ...args: unknown[]\n  ) {\n    this.initialize(...args);\n    // Note that we initialize foundation here and not within the constructor's\n    // default param so that this.root is defined and can be used within the\n    // foundation class.\n    this.foundation =\n      foundation === undefined ? this.getDefaultFoundation() : foundation;\n    this.foundation.init();\n    this.initialSyncWithDOM();\n  }\n\n  /* istanbul ignore next: method param only exists for typing purposes; it does\n   * not need to be unit tested */\n  // tslint:disable-next-line:enforce-name-casing\n  initialize(..._args: unknown[]) {\n    // Subclasses can override this to do any additional setup work that would\n    // be considered part of a \"constructor\". Essentially, it is a hook into the\n    // parent constructor before the foundation is initialized. Any additional\n    // arguments besides root and foundation will be passed in here.\n  }\n\n  getDefaultFoundation(): FoundationType {\n    // Subclasses must override this method to return a properly configured\n    // foundation class for the component.\n    throw new Error(\n      'Subclasses must override getDefaultFoundation to return a properly configured ' +\n        'foundation class',\n    );\n  }\n\n  initialSyncWithDOM() {\n    // Subclasses should override this method if they need to perform work to\n    // synchronize with a host DOM object. An example of this would be a form\n    // control wrapper that needs to synchronize its internal state to some\n    // property or attribute of the host DOM. Please note: this is *not* the\n    // place to perform DOM reads/writes that would cause layout / paint, as\n    // this is called synchronously from within the constructor.\n  }\n\n  destroy() {\n    // Subclasses may implement this method to release any resources /\n    // deregister any listeners they have attached. An example of this might be\n    // deregistering a resize event from the window object.\n    this.foundation.destroy();\n  }\n\n  /**\n   * Wrapper method to add an event listener to the component's root element.\n   * This is most useful when listening for custom events.\n   */\n  listen<K extends EventType>(\n    eventType: K,\n    handler: SpecificEventListener<K>,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  listen<E extends Event>(\n    eventType: string,\n    handler: CustomEventListener<E>,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  listen(\n    eventType: string,\n    handler: EventListener,\n    options?: AddEventListenerOptions | boolean,\n  ) {\n    this.root.addEventListener(eventType, handler, options);\n  }\n\n  /**\n   * Wrapper method to remove an event listener to the component's root element.\n   * This is most useful when unlistening for custom events.\n   */\n  unlisten<K extends EventType>(\n    eventType: K,\n    handler: SpecificEventListener<K>,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  unlisten<E extends Event>(\n    eventType: string,\n    handler: CustomEventListener<E>,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  unlisten(\n    eventType: string,\n    handler: EventListener,\n    options?: AddEventListenerOptions | boolean,\n  ) {\n    this.root.removeEventListener(eventType, handler, options);\n  }\n\n  /**\n   * Fires a cross-browser-compatible custom event from the component root of\n   * the given type, with the given data.\n   */\n  emit<T extends object>(\n    eventType: string,\n    eventData: T,\n    shouldBubble = false,\n  ) {\n    let event: CustomEvent<T>;\n    if (typeof CustomEvent === 'function') {\n      event = new CustomEvent<T>(eventType, {\n        bubbles: shouldBubble,\n        detail: eventData,\n      });\n    } else {\n      event = document.createEvent('CustomEvent');\n      event.initCustomEvent(eventType, shouldBubble, false, eventData);\n    }\n\n    this.root.dispatchEvent(event);\n  }\n\n  /**\n   * This is a intermediate fix to allow components to use safevalues. This\n   * limits setAttribute to setting tabindex, data attributes, and aria\n   * attributes.\n   *\n   * TODO(b/263990206): remove this method and add these directly in each\n   * component. This will remove this abstraction and make it clear that the\n   * caller can't set any attribute.\n   */\n  protected safeSetAttribute(\n    element: HTMLElement,\n    attribute: string,\n    value: string,\n  ) {\n    if (attribute.toLowerCase() === 'tabindex') {\n      element.tabIndex = Number(value);\n    } else if (attribute.indexOf('data-') === 0) {\n      const dataKey = toCamelCase(attribute.replace(/^data-/, ''));\n      element.dataset[dataKey] = value;\n    } else {\n      setElementPrefixedAttribute(\n        [safeAttrPrefix`aria-`, safeAttrPrefix`role`],\n        element,\n        attribute,\n        value,\n      );\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCComponent;\n"
  },
  {
    "path": "packages/mdc-base/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/** MDC Foundation */\nexport class MDCFoundation<AdapterType extends {} = {}> {\n  static get cssClasses(): {[key: string]: string} {\n    // Classes extending MDCFoundation should implement this method to return an\n    // object which exports every CSS class the foundation class needs as a\n    // property. e.g. {ACTIVE: 'mdc-component--active'}\n    return {};\n  }\n\n  static get strings(): {[key: string]: string} {\n    // Classes extending MDCFoundation should implement this method to return an\n    // object which exports all semantic strings as constants. e.g. {ARIA_ROLE:\n    // 'tablist'}\n    return {};\n  }\n\n  static get numbers(): {[key: string]: number} {\n    // Classes extending MDCFoundation should implement this method to return an\n    // object which exports all of its semantic numbers as constants.\n    // e.g. {ANIMATION_DELAY_MS: 350}\n    return {};\n  }\n\n  static get defaultAdapter(): {} {\n    // Classes extending MDCFoundation may choose to implement this getter in\n    // order to provide a convenient way of viewing the necessary methods of an\n    // adapter. In the future, this could also be used for adapter validation.\n    return {};\n  }\n\n  constructor(protected adapter: AdapterType = {} as AdapterType) {}\n\n  init() {\n    // Subclasses should override this method to perform initialization routines\n    // (registering events, etc.)\n  }\n\n  destroy() {\n    // Subclasses should override this method to perform de-initialization\n    // routines (de-registering events, etc.)\n  }\n}\n\n/**\n * The constructor for MDCFoundation.\n */\nexport interface MDCFoundationConstructor<AdapterType extends object = any> {\n  new(adapter: AdapterType): MDCFoundation<AdapterType>;\n  readonly prototype: MDCFoundation<AdapterType>;\n}\n\n/**\n * The deprecated constructor for MDCFoundation.\n */\nexport interface MDCFoundationDeprecatedConstructor<\n    AdapterType extends object = any> {\n  readonly cssClasses: Record<string, string>;\n  readonly strings: Record<string, string>;\n  readonly numbers: Record<string, number>;\n  readonly defaultAdapter: AdapterType;\n\n  new(adapter?: Partial<AdapterType>): MDCFoundation<AdapterType>;\n  readonly prototype: MDCFoundation<AdapterType>;\n}\n\n/**\n * Retrieves the AdapaterType from the provided MDCFoundation generic type.\n */\nexport type MDCFoundationAdapter<T> =\n    T extends MDCFoundation<infer A>? A : never;\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCFoundation;\n"
  },
  {
    "path": "packages/mdc-base/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './component';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-base/observer-foundation.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from './foundation';\nimport {observeProperty, Observer, ObserverRecord, setObserversEnabled} from './observer';\n\n// @ts-ignore(go/ts48upgrade) Fix code and remove this comment. Error:\n// TS2344: Type 'Adapter' does not satisfy the constraint '{}'.\nexport class MDCObserverFoundation<Adapter> extends MDCFoundation<Adapter> {\n  /** A set of cleanup functions to unobserve changes. */\n  protected unobserves = new Set<Function>();\n\n  constructor(adapter: Adapter) {\n    super(adapter);\n  }\n\n  override destroy() {\n    super.destroy();\n    this.unobserve();\n  }\n\n  /**\n   * Observe a target's properties for changes using the provided map of\n   * property names and observer functions.\n   *\n   * @template T The target type.\n   * @param target - The target to observe.\n   * @param observers - An object whose keys are target properties and values\n   *     are observer functions that are called when the associated property\n   *     changes.\n   * @return A cleanup function that can be called to unobserve the\n   *     target.\n   */\n  protected observe<T extends object>(\n      target: T, observers: ObserverRecord<T, this>) {\n    const cleanup: Function[] = [];\n    for (const property of Object.keys(observers) as Array<keyof T>) {\n      const observer = observers[property]!.bind(this);\n      cleanup.push(this.observeProperty(target, property, observer));\n    }\n\n    const unobserve = () => {\n      for (const cleanupFn of cleanup) {\n        cleanupFn();\n      }\n\n      this.unobserves.delete(unobserve);\n    };\n\n    this.unobserves.add(unobserve);\n    return unobserve;\n  }\n\n  /**\n   * Observe a target's property for changes. When a property changes, the\n   * provided `Observer` function will be invoked with the properties current\n   * and previous values.\n   *\n   * The returned cleanup function will stop listening to changes for the\n   * provided `Observer`.\n   *\n   * @template T The observed target type.\n   * @template K The observed property.\n   * @param target - The target to observe.\n   * @param property - The property of the target to observe.\n   * @param observer - An observer function to invoke each time the property\n   *     changes.\n   * @return A cleanup function that will stop observing changes for the\n   *     provided `Observer`.\n   */\n  protected observeProperty<T extends object, K extends keyof T>(\n      target: T, property: K, observer: Observer<T, K>) {\n    return observeProperty(target, property, observer);\n  }\n\n  /**\n   * Enables or disables all observers for the provided target. Disabling\n   * observers will prevent them from being called until they are re-enabled.\n   *\n   * @param target - The target to enable or disable observers for.\n   * @param enabled - Whether or not observers should be called.\n   */\n  protected setObserversEnabled(target: object, enabled: boolean) {\n    setObserversEnabled(target, enabled);\n  }\n\n  /**\n   * Clean up all observers and stop listening for property changes.\n   */\n  protected unobserve() {\n    // Iterate over a copy since unobserve() will remove themselves from the set\n    for (const unobserve of [...this.unobserves]) {\n      unobserve();\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-base/observer-proxy.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {getDescriptor, MDCObserver, Observer, ObserverRecord} from './observer';\nimport {Constructor} from './types';\n\n/**\n * Mixin to add `MDCObserver` functionality.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @return A class with `MDCObserver` functionality.\n */\nexport function mdcObserver(): Constructor<MDCObserver>;\n\n/**\n * Mixin to add `MDCObserver` functionality to a base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template T Base class instance type. Specify this generic if the base class\n *     itself has generics that cannot be inferred.\n * @template C Base class constructor type.\n * @param baseClass - Base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver<T, C extends Constructor<T>>(baseClass: C):\n    Constructor<MDCObserver>&Constructor<T>&C;\n\n/**\n * Mixin to add `MDCObserver` functionality to an optional base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template C Optional base class constructor type.\n * @param baseClass - Optional base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver<C extends Constructor>(\n    baseClass: C = class {} as C) {\n  const unobserves = Symbol();\n  return class MDCObserver extends baseClass implements MDCObserver {\n    [unobserves]: Function[] = [];\n\n    observe<T extends object>(target: T, observers: ObserverRecord<T, this>) {\n      const cleanup: Function[] = [];\n      for (const property of Object.keys(observers) as Array<keyof T>) {\n        const observer = observers[property]!.bind(this);\n        cleanup.push(observeProperty(target, property, observer));\n      }\n\n      const unobserve = () => {\n        for (const cleanupFn of cleanup) {\n          cleanupFn();\n        }\n        const index = this[unobserves].indexOf(unobserve);\n        if (index > -1) {\n          this[unobserves].splice(index, 1);\n        }\n      };\n\n      this[unobserves].push(unobserve);\n      return unobserve;\n    }\n\n    setObserversEnabled(target: object, enabled: boolean) {\n      setObserversEnabled(target, enabled);\n    }\n\n    unobserve() {\n      // Iterate over a copy since unobserve() will remove themselves from the\n      // array\n      for (const unobserve of [...this[unobserves]]) {\n        unobserve();\n      }\n    }\n  };\n}\n\nconst isTargetObservers = Symbol();\nconst isEnabled = Symbol();\nconst getObservers = Symbol();\n\n/**\n * A manager for observers listening to a target. A target's `prototype` is its\n * `TargetObservers` instance.\n *\n * @template T The observed target type.\n */\ninterface TargetObservers<T extends object> {\n  /**\n   * Indicates that the prototype is a `TargetObservers` instance.\n   */\n  [isTargetObservers]: true;\n\n  /**\n   * Indicates whether or not observers for this target are enabled. If\n   * disabled, observers will not be called in response to target property\n   * changes.\n   */\n  [isEnabled]: boolean;\n\n  /**\n   * Retrieves all observers for a given target property.\n   *\n   * @template K The target property key.\n   * @param key - The property to retrieve observers for.\n   * @return An array of observers for the provided target property.\n   */\n  [getObservers]: <K extends keyof T>(key: K) => Array<Observer<T, K>>;\n}\n\n/**\n * Observe a target's property for changes. When a property changes, the\n * provided `Observer` function will be invoked with the properties current and\n * previous values.\n *\n * The returned cleanup function will stop listening to changes for the\n * provided `Observer`.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @param target - The target to observe.\n * @param property - The property of the target to observe.\n * @param observer - An observer function to invoke each time the property\n *     changes.\n * @return A cleanup function that will stop observing changes for the provided\n *     `Observer`.\n */\nexport function observeProperty<T extends object, K extends keyof T>(\n    target: T, property: K, observer: Observer<T, K>) {\n  const observerPrototype = installObserver(target);\n  const observers = observerPrototype[getObservers](property);\n  observers.push(observer);\n  return () => {\n    observers.splice(observers.indexOf(observer), 1);\n  };\n}\n\n/**\n * Installs a `TargetObservers` for the provided target (if not already\n * installed).\n *\n * A target's `TargetObservers` is installed as a Proxy on the target's\n * prototype.\n *\n * @template T The observed target type.\n * @param target - The target to observe.\n * @return The installed `TargetObservers` for the provided target.\n */\nfunction installObserver<T extends object>(target: T): TargetObservers<T> {\n  const prototype = Object.getPrototypeOf(target);\n  if (prototype[isTargetObservers]) {\n    return prototype as TargetObservers<T>;\n  }\n\n  // Proxy prototypes will not trap plain properties (not a getter/setter) that\n  // are already defined. They only work on new plain properties.\n  // We can work around this by deleting the properties, installing the Proxy,\n  // then re-setting the properties.\n  const existingKeyValues = new Map<keyof T, T[keyof T]>();\n  const keys = Object.getOwnPropertyNames(target) as Array<keyof T>;\n  for (const key of keys) {\n    const descriptor = getDescriptor(target, key);\n    if (descriptor && descriptor.writable) {\n      existingKeyValues.set(key, descriptor.value as T[keyof T]);\n      delete target[key];\n    }\n  }\n\n  const proxy =\n      new Proxy<T>(Object.create(prototype), {\n        get(target, key, receiver) {\n          return Reflect.get(target, key, receiver);\n        },\n        set(target, key, newValue, receiver) {\n          const isTargetObserversKey = key === isTargetObservers ||\n              key === isEnabled || key === getObservers;\n          const previous = Reflect.get(target, key, receiver);\n          // Do not use receiver when setting the target's key. We do not want\n          // to change whatever the target's inherent receiver is.\n          Reflect.set(target, key, newValue);\n          if (!isTargetObserversKey && proxy[isEnabled] &&\n              newValue !== previous) {\n            for (const observer of proxy[getObservers](key as keyof T)) {\n              observer(newValue, previous);\n            }\n          }\n\n          return true;\n        }\n      }) as TargetObservers<T>;\n\n  proxy[isTargetObservers] = true;\n  proxy[isEnabled] = true;\n  const observersMap = new Map<keyof T, Array<Observer<T>>>();\n  proxy[getObservers] = (key: keyof T) => {\n    const observers = observersMap.get(key) || [];\n    if (!observersMap.has(key)) {\n      observersMap.set(key, observers);\n    }\n\n    return observers;\n  };\n\n  Object.setPrototypeOf(target, proxy);\n  // Re-set plain pre-existing properties so that the Proxy can trap them\n  for (const [key, value] of existingKeyValues.entries()) {\n    target[key] = value;\n  }\n\n  return proxy;\n}\n\n/**\n * Enables or disables all observers for a provided target. Changes to observed\n * properties will not call any observers when disabled.\n *\n * @template T The observed target type.\n * @param target - The target to enable or disable observers for.\n * @param enabled - True to enable or false to disable observers.\n */\nexport function setObserversEnabled<T extends object>(\n    target: T, enabled: boolean) {\n  const prototype = Object.getPrototypeOf(target);\n  if (prototype[isTargetObservers]) {\n    (prototype as TargetObservers<T>)[isEnabled] = enabled;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-base/observer.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {Constructor} from './types';\n\n/**\n * A class that can observe targets and perform cleanup logic. Classes may\n * implement this using the `mdcObserver()` mixin.\n */\nexport interface MDCObserver {\n  /**\n   * Observe a target's properties for changes using the provided map of\n   * property names and observer functions.\n   *\n   * @template T The target type.\n   * @param target - The target to observe.\n   * @param observers - An object whose keys are target properties and values\n   *     are observer functions that are called when the associated property\n   *     changes.\n   * @return A cleanup function that can be called to unobserve the\n   *     target.\n   */\n  observe<T extends object>(target: T, observers: ObserverRecord<T, this>):\n      () => void;\n\n  /**\n   * Enables or disables all observers for the provided target. Disabling\n   * observers will prevent them from being called until they are re-enabled.\n   *\n   * @param target - The target to enable or disable observers for.\n   * @param enabled - Whether or not observers should be called.\n   */\n  setObserversEnabled(target: object, enabled: boolean): void;\n\n  /**\n   * Clean up all observers and stop listening for property changes.\n   */\n  unobserve(): void;\n}\n\n/**\n * A function used to observe property changes on a target.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @template This The `this` context of the observer function.\n * @param current - The current value of the property.\n * @param previous - The previous value of the property.\n */\nexport type Observer<T extends object, K extends keyof T = keyof T,\n                                                 This = unknown> =\n    (this: This, current: T[K], previous: T[K]) => void;\n\n/**\n * An object map whose keys are properties of a target to observe and values\n * are `Observer` functions for each property.\n *\n * @template T The observed target type.\n * @template This The `this` context of observer functions.\n */\nexport type ObserverRecord<T extends object, This = unknown> = {\n  [K in keyof T]?: Observer<T, K, This>;\n};\n\n/**\n * Mixin to add `MDCObserver` functionality.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @return A class with `MDCObserver` functionality.\n */\nexport function mdcObserver(): Constructor<MDCObserver>;\n\n/**\n * Mixin to add `MDCObserver` functionality to a base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template T Base class instance type. Specify this generic if the base class\n *     itself has generics that cannot be inferred.\n * @template C Base class constructor type.\n * @param baseClass - Base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver<T, C extends Constructor<T>>(baseClass: C):\n    Constructor<MDCObserver>&Constructor<T>&C;\n\n/**\n * Mixin to add `MDCObserver` functionality to an optional base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template C Optional base class constructor type.\n * @param baseClass - Optional base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver<C extends Constructor>(\n    baseClass: C = class {} as C) {\n  // Mixin classes cannot use private members and Symbol() cannot be used in 3P\n  // for IE11.\n  const unobserveMap = new WeakMap<MDCObserver, Function[]>();\n  return class MDCObserver extends baseClass implements MDCObserver {\n    observe<T extends object>(target: T, observers: ObserverRecord<T, this>) {\n      const cleanup: Function[] = [];\n      for (const property of Object.keys(observers) as Array<keyof T>) {\n        const observer = observers[property]!.bind(this);\n        cleanup.push(observeProperty(target, property, observer));\n      }\n\n      const unobserve = () => {\n        for (const cleanupFn of cleanup) {\n          cleanupFn();\n        }\n        const unobserves = unobserveMap.get(this) || [];\n        const index = unobserves.indexOf(unobserve);\n        if (index > -1) {\n          unobserves.splice(index, 1);\n        }\n      };\n\n      let unobserves = unobserveMap.get(this);\n      if (!unobserves) {\n        unobserves = [];\n        unobserveMap.set(this, unobserves);\n      }\n\n      unobserves.push(unobserve);\n      return unobserve;\n    }\n\n    setObserversEnabled(target: object, enabled: boolean) {\n      setObserversEnabled(target, enabled);\n    }\n\n    unobserve() {\n      // Iterate over a copy since unobserve() will remove themselves from the\n      // array\n      const unobserves = unobserveMap.get(this) || [];\n      for (const unobserve of [...unobserves]) {\n        unobserve();\n      }\n    }\n  };\n}\n\n/**\n * A manager for observers listening to a target. A target's `prototype` is its\n * `TargetObservers` instance.\n *\n * @template T The observed target type.\n */\ninterface TargetObservers<T extends object> {\n  /**\n   * Indicates whether or not observers for this target are enabled. If\n   * disabled, observers will not be called in response to target property\n   * changes.\n   */\n  isEnabled: boolean;\n\n  /**\n   * Retrieves all observers for a given target property.\n   *\n   * @template K The target property key.\n   * @param key - The property to retrieve observers for.\n   * @return An array of observers for the provided target property.\n   */\n  getObservers<K extends keyof T>(key: K): Array<Observer<T, K>>;\n\n  /**\n   * A Set of properties that have been installed (their getter/setter) replaced\n   * to connect with the `TargetObservers`. This prevents multiple installations\n   * of the same property.\n   */\n  installedProperties: Set<keyof T>;\n}\n\n/**\n * Observe a target's property for changes. When a property changes, the\n * provided `Observer` function will be invoked with the properties current and\n * previous values.\n *\n * The returned cleanup function will stop listening to changes for the\n * provided `Observer`.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @param target - The target to observe.\n * @param property - The property of the target to observe.\n * @param observer - An observer function to invoke each time the property\n *     changes.\n * @return A cleanup function that will stop observing changes for the provided\n *     `Observer`.\n */\nexport function observeProperty<T extends object, K extends keyof T>(\n    target: T, property: K, observer: Observer<T, K>) {\n  const targetObservers = installObserver(target, property);\n  const observers = targetObservers.getObservers(property);\n  observers.push(observer);\n  return () => {\n    observers.splice(observers.indexOf(observer), 1);\n  };\n}\n\n/**\n * A Map of all `TargetObservers` that have been installed.\n */\nconst allTargetObservers = new WeakMap<object, TargetObservers<any>>();\n\n/**\n * Installs a `TargetObservers` for the provided target (if not already\n * installed), and replaces the given property with a getter and setter that\n * will respond to changes and call `TargetObservers`.\n *\n * Subsequent calls to `installObserver()` with the same target and property\n * will not override the property's previously installed getter/setter.\n *\n * @template T The observed target type.\n * @template K The observed property to create a getter/setter for.\n * @param target - The target to observe.\n * @param property - The property to create a getter/setter for, if needed.\n * @return The installed `TargetObservers` for the provided target.\n */\nfunction installObserver<T extends object, K extends keyof T>(\n    target: T, property: K): TargetObservers<T> {\n  const observersMap = new Map<keyof T, Array<Observer<T>>>();\n\n  if (!allTargetObservers.has(target)) {\n    allTargetObservers.set(target, {\n      isEnabled: true,\n      getObservers(key) {\n        const observers = observersMap.get(key) || [];\n        if (!observersMap.has(key)) {\n          observersMap.set(key, observers);\n        }\n\n        return observers;\n      },\n      installedProperties: new Set()\n    } as TargetObservers<T>);\n  }\n\n  const targetObservers = allTargetObservers.get(target)!;\n  if (targetObservers.installedProperties.has(property)) {\n    // The getter/setter has already been replaced for this property\n    return targetObservers;\n  }\n\n  // Retrieve (or create if it's a plain property) the original descriptor from\n  // the target...\n  const descriptor = getDescriptor(target, property) || {\n    configurable: true,\n    enumerable: true,\n    value: target[property],\n    writable: true\n  };\n\n  // ...and create a copy that will be used for the observer.\n  const observedDescriptor = {...descriptor};\n  let {get: descGet, set: descSet} = descriptor;\n  if ('value' in descriptor) {\n    // The descriptor is a simple value (not a getter/setter).\n    // For our observer descriptor that we copied, delete the value/writable\n    // properties, since they are incompatible with the get/set properties\n    // for descriptors.\n    delete observedDescriptor.value;\n    delete observedDescriptor.writable;\n\n    // Set up a simple getter...\n    let value = descriptor.value as T[K];\n    descGet = () => value;\n\n    // ...and setter (if the original property was writable).\n    if (descriptor.writable) {\n      descSet = (newValue) => {\n        value = newValue;\n      };\n    }\n  }\n\n  if (descGet) {\n    observedDescriptor.get = function(this: T) {\n      // `this as T` needed for closure conformance\n      // tslint:disable-next-line:no-unnecessary-type-assertion\n      return descGet!.call(this as T);\n    };\n  }\n\n  if (descSet) {\n    observedDescriptor.set = function(this: T, newValue: T[K]) {\n      // `thus as T` needed for closure conformance\n      // tslint:disable-next-line:no-unnecessary-type-assertion\n      const previous = descGet ? descGet.call(this as T) : newValue;\n      // tslint:disable-next-line:no-unnecessary-type-assertion\n      descSet!.call(this as T, newValue);\n      if (targetObservers.isEnabled && (!descGet || newValue !== previous)) {\n        for (const observer of targetObservers.getObservers(property)) {\n          observer(newValue, previous);\n        }\n      }\n    };\n  }\n\n  targetObservers.installedProperties.add(property);\n  Object.defineProperty(target, property, observedDescriptor);\n  return targetObservers;\n}\n\n/**\n * Retrieves the descriptor for a property from the provided target. This\n * function will walk up the target's prototype chain to search for the\n * descriptor.\n *\n * @template T The target type.\n * @template K The property type.\n * @param target - The target to retrieve a descriptor from.\n * @param property - The name of the property to retrieve a descriptor for.\n * @return the descriptor, or undefined if it does not exist. Keep in mind that\n *     plain properties may not have a descriptor defined.\n */\nexport function getDescriptor<T extends object, K extends keyof T>(\n    target: T, property: K) {\n  let descriptorTarget: object|null = target;\n  let descriptor: TypedPropertyDescriptor<T[K]>|undefined;\n  while (descriptorTarget) {\n    descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property);\n    if (descriptor) {\n      break;\n    }\n\n    // Walk up the instance's prototype chain in case the property is declared\n    // on a superclass.\n    descriptorTarget = Object.getPrototypeOf(descriptorTarget);\n  }\n\n  return descriptor;\n}\n\n/**\n * Enables or disables all observers for a provided target. Changes to observed\n * properties will not call any observers when disabled.\n *\n * @template T The observed target type.\n * @param target - The target to enable or disable observers for.\n * @param enabled - True to enable or false to disable observers.\n */\nexport function setObserversEnabled<T extends object>(\n    target: T, enabled: boolean) {\n  const targetObservers = allTargetObservers.get(target);\n  if (targetObservers) {\n    targetObservers.isEnabled = enabled;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-base/package.json",
    "content": "{\n  \"name\": \"@material/base\",\n  \"description\": \"The set of base classes for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.base.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-base\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-base/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '../../mdc-base/component';\nimport {MDCFoundation} from '../../mdc-base/foundation';\nimport {emitEvent} from '../../../testing/dom/events';\n\nclass FakeComponent extends MDCComponent<MDCFoundation> {\n  initializeArgs!: unknown[];\n  initializeComesBeforeFoundation!: boolean;\n  synced!: boolean;\n\n  override getDefaultFoundation() {\n    const defaultFoundation = {\n      isDefaultFoundation: true,\n      init: jasmine.createSpy('init'),\n      rootElementAtTimeOfCall: this.root,\n    } as any;\n    return defaultFoundation;\n  }\n\n  override initialize(...args: unknown[]) {\n    this.initializeArgs = args;\n    this.initializeComesBeforeFoundation = !this.foundation;\n  }\n\n  override initialSyncWithDOM() {\n    this.synced = true;\n  }\n}\n\ndescribe('MDCComponent', () => {\n  it('provides a static attachTo() method that returns a basic instance with the specified root',\n     () => {\n       const root = document.createElement('div');\n       const b = MDCComponent.attachTo(root);\n       expect(b instanceof MDCComponent).toBeTruthy();\n     });\n\n  it('takes a root node constructor param and assigns it to the \"root\" property',\n     () => {\n       const root = document.createElement('div');\n       const f = new FakeComponent(root);\n       expect(f['root']).toEqual(root);\n     });\n\n  it('takes an optional foundation constructor param and assigns it to the \"foundation\" property',\n     () => {\n       const root = document.createElement('div');\n       const foundation = {init: () => {}} as any;\n       const f = new FakeComponent(root, foundation);\n       expect(f['foundation']).toEqual(foundation);\n     });\n\n  it('assigns the result of \"getDefaultFoundation()\" to \"foundation\" by default',\n     () => {\n       const root = document.createElement('div');\n       const f = new FakeComponent(root);\n       expect((f['foundation'] as any).isDefaultFoundation).toBeTruthy();\n     });\n\n  it('calls the foundation\\'s init() method within the constructor', () => {\n    const root = document.createElement('div');\n    const foundation = {init: jasmine.createSpy('init')};\n    // Testing side effects of constructor\n    // eslint-disable-next-line no-new\n    new FakeComponent(root, foundation as any);\n    expect(foundation.init).toHaveBeenCalled();\n  });\n\n  it('throws an error if getDefaultFoundation() is not overridden', () => {\n    const root = document.createElement('div');\n    expect(() => new MDCComponent(root)).toThrow();\n  });\n\n  it('calls initialSyncWithDOM() when initialized', () => {\n    const root = document.createElement('div');\n    const f = new FakeComponent(root);\n    expect(f.synced).toBeTruthy();\n  });\n\n  it('provides a default initialSyncWithDOM() no-op if none provided by subclass',\n     () => {\n       expect(MDCComponent.prototype.initialSyncWithDOM.bind({})).not.toThrow();\n     });\n\n  it('provides a default destroy() method which calls the foundation\\'s destroy() method',\n     () => {\n       const root = document.createElement('div');\n       const foundation = {\n         init: jasmine.createSpy('init'),\n         destroy: jasmine.createSpy('destroy')\n       };\n       const f = new FakeComponent(root, foundation as any);\n       f.destroy();\n       expect(foundation.destroy).toHaveBeenCalled();\n     });\n\n  it('#initialize is called within constructor and passed any additional positional component args',\n     () => {\n       const f = new FakeComponent(\n           document.createElement('div'), /* foundation */ undefined, 'foo',\n           42);\n       expect(f.initializeArgs).toEqual(['foo', 42]);\n     });\n\n  it('#initialize is called before getDefaultFoundation()', () => {\n    const f = new FakeComponent(document.createElement('div'));\n    expect(f.initializeComesBeforeFoundation).toBeTruthy();\n  });\n\n  it('#listen adds an event listener to the root element', () => {\n    const root = document.createElement('div');\n    const f = new FakeComponent(root);\n    const handler = jasmine.createSpy('eventHandler');\n    f.listen('FakeComponent:customEvent', handler);\n    emitEvent(root, 'FakeComponent:customEvent');\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#unlisten removes an event listener from the root element', () => {\n    const root = document.createElement('div');\n    const f = new FakeComponent(root);\n    const handler = jasmine.createSpy('eventHandler');\n    root.addEventListener('FakeComponent:customEvent', handler);\n    f.unlisten('FakeComponent:customEvent', handler);\n    emitEvent(root, 'FakeComponent:customEvent');\n    expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#emit dispatches a custom event with the supplied data', () => {\n    const root = document.createElement('div');\n    const f = new FakeComponent(root);\n    const handler = jasmine.createSpy('eventHandler');\n    let event: any = null;\n    handler.withArgs(jasmine.any(Object)).and.callFake((e: any) => {\n      event = e;\n    });\n    const data = {eventData: true};\n    const type = 'customeventtype';\n\n    root.addEventListener(type, handler);\n    f.emit(type, data);\n\n    expect(event !== null).toBeTruthy();\n    // assertion above ensures non-null event, but compiler doesn't know this\n    // tslint:disable:no-unnecessary-type-assertion\n    expect(event!.type).toEqual(type);\n    expect(event!.detail).toEqual(data);\n    // tslint:enable:no-unnecessary-type-assertion\n  });\n\n  it('#emit dispatches a custom event with the supplied data where custom events aren\\'t available',\n     () => {\n       const root = document.createElement('div');\n       const f = new FakeComponent(root);\n       const handler = jasmine.createSpy('eventHandler');\n       let event: any = null;\n       handler.withArgs(jasmine.any(Object)).and.callFake((e: any) => {\n         event = e;\n       });\n       const data = {eventData: true};\n       const type = 'customeventtype';\n\n       root.addEventListener(type, handler);\n\n       const {CustomEvent} = (window as any);\n       (window as any).CustomEvent = undefined;\n       try {\n         f.emit(type, data);\n       } finally {\n         (window as any).CustomEvent = CustomEvent;\n       }\n\n       expect(event !== null).toBeTruthy();\n       // assertion above ensures non-null event, but compiler doesn't know this\n       // tslint:disable:no-unnecessary-type-assertion\n       expect(event!.type).toEqual(type);\n       expect(event!.detail).toEqual(data);\n       // tslint:enable:no-unnecessary-type-assertion\n     });\n\n  it('(regression) ensures that this.root is available for use within getDefaultFoundation()',\n     () => {\n       const root = document.createElement('div');\n       const f = new FakeComponent(root);\n       expect((f['foundation'] as any).rootElementAtTimeOfCall).toEqual(root);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-base/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '../../mdc-base/foundation';\n\ndescribe('MDCFoundation', () => {\n  it('cssClasses getter returns an empty object', () => {\n    expect(MDCFoundation.cssClasses).toEqual({});\n  });\n\n  it('strings getter returns an empty object', () => {\n    expect(MDCFoundation.strings).toEqual({});\n  });\n\n  it('numbers getter returns an empty object', () => {\n    expect(MDCFoundation.numbers).toEqual({});\n  });\n\n  it('defaultAdapter getter returns an empty object', () => {\n    expect(MDCFoundation.defaultAdapter).toEqual({});\n  });\n\n  it('takes an adapter object in its constructor, assigns it to \"adapter\"',\n     () => {\n       const adapter = {adapter: true};\n       const f = new MDCFoundation(adapter);\n       expect(f['adapter']).toEqual(adapter);\n     });\n\n  it('assigns adapter to an empty object when none given', () => {\n    const f = new MDCFoundation();\n    expect(f['adapter']).toEqual({});\n  });\n\n  it('provides an init() lifecycle method, which defaults to a no-op', () => {\n    const f = new MDCFoundation();\n    expect(() => f.init).not.toThrow();\n  });\n\n  it('provides a destroy() lifecycle method, which defaults to a no-op', () => {\n    const f = new MDCFoundation();\n    expect(() => f.destroy).not.toThrow();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-base/test/observer-foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport {ObserverRecord} from '../observer';\nimport {MDCObserverFoundation} from '../observer-foundation';\n\ndescribe('MDCObserverFoundation', () => {\n  class TestMDCObserverFoundation extends MDCObserverFoundation<{}> {\n    override observe<T extends object>(\n        target: T, observers: ObserverRecord<T, this>) {\n      return super.observe(target, observers);\n    }\n\n    override setObserversEnabled(target: object, enabled: boolean) {\n      super.setObserversEnabled(target, enabled);\n    }\n\n    override unobserve() {\n      super.unobserve();\n    }\n  }\n\n  let instance!: TestMDCObserverFoundation;\n  const initialState = {stringProp: 'value', numberProp: 0};\n  let state = {...initialState};\n  const stringObserver = jasmine.createSpy('stringObserver');\n  const numberObserver = jasmine.createSpy('numberObserver');\n\n  beforeEach(() => {\n    instance = new TestMDCObserverFoundation({});\n    state = {...initialState};\n    stringObserver.and.stub();\n    stringObserver.calls.reset();\n    numberObserver.and.stub();\n    numberObserver.calls.reset();\n  });\n\n  it('#observe() should listen to multiple properties', () => {\n    instance.observe(state, {\n      stringProp: stringObserver,\n      numberProp: numberObserver,\n    });\n\n    state.stringProp = 'newValue';\n    state.numberProp = 1;\n    // TODO(b/183749291): replace when jasmine typings issue resolved\n    // expect(stringObserver)\n    //     .toHaveBeenCalledOnceWith(state.stringProp, initialState.stringProp);\n    expect(stringObserver).toHaveBeenCalledTimes(1);\n    expect(stringObserver)\n        .toHaveBeenCalledWith(state.stringProp, initialState.stringProp);\n    // expect(numberObserver)\n    //     .toHaveBeenCalledOnceWith(state.numberProp, initialState.numberProp);\n    expect(numberObserver).toHaveBeenCalledTimes(1);\n    expect(numberObserver)\n        .toHaveBeenCalledWith(state.numberProp, initialState.numberProp);\n  });\n\n  it('#observe() should call Observers with instance as `this`', () => {\n    let observerThis: unknown;\n    stringObserver.and.callFake(function(this: unknown) {\n      observerThis = this;\n    });\n\n    instance.observe(state, {\n      stringProp: stringObserver,\n    });\n\n    state.stringProp = 'newValue';\n    expect(observerThis).toBe(instance, 'observer `this` should be instance');\n  });\n\n  it('#observe() cleanup function stops Observers', () => {\n    const unobserve = instance.observe(\n        state, {stringProp: stringObserver, numberProp: numberObserver});\n\n    state.stringProp = 'newValue';\n    state.numberProp = 1;\n    stringObserver.calls.reset();\n    numberObserver.calls.reset();\n    unobserve();\n    state.stringProp = 'anotherValue';\n    state.numberProp = 2;\n    expect(stringObserver).not.toHaveBeenCalled();\n    expect(numberObserver).not.toHaveBeenCalled();\n  });\n\n  it('#observe() cleanup function does not stop Observers from other invocations',\n     () => {\n       const otherStringObserver = jasmine.createSpy('otherStringObserver');\n       const unobserve = instance.observe(\n           state, {stringProp: stringObserver, numberProp: numberObserver});\n\n       instance.observe(state, {stringProp: otherStringObserver});\n\n       state.stringProp = 'newValue';\n       state.numberProp = 1;\n       unobserve();\n       state.stringProp = 'anotherValue';\n       state.numberProp = 2;\n       expect(otherStringObserver).toHaveBeenCalledTimes(2);\n     });\n\n  it('#unobserve() stops Observers from all invocations', () => {\n    const otherStringObserver = jasmine.createSpy('otherStringObserver');\n    instance.observe(\n        state, {stringProp: stringObserver, numberProp: numberObserver});\n    instance.observe(state, {stringProp: otherStringObserver});\n    state.stringProp = 'newValue';\n    state.numberProp = 1;\n    stringObserver.calls.reset();\n    numberObserver.calls.reset();\n    otherStringObserver.calls.reset();\n    instance.unobserve();\n    state.stringProp = 'anotherValue';\n    state.numberProp = 2;\n    expect(stringObserver).not.toHaveBeenCalled();\n    expect(numberObserver).not.toHaveBeenCalled();\n    expect(otherStringObserver).not.toHaveBeenCalled();\n  });\n\n  it('#setObserversEnabled() can disable and enable all Observers', () => {\n    const otherStringObserver = jasmine.createSpy('otherStringObserver');\n    instance.observe(\n        state, {stringProp: stringObserver, numberProp: numberObserver});\n    instance.observe(state, {stringProp: otherStringObserver});\n    state.stringProp = 'newValue';\n    state.numberProp = 1;\n    stringObserver.calls.reset();\n    numberObserver.calls.reset();\n    otherStringObserver.calls.reset();\n    // Test disabled\n    instance.setObserversEnabled(state, false);\n    state.stringProp = 'anotherValue';\n    state.numberProp = 2;\n    expect(stringObserver).not.toHaveBeenCalled();\n    expect(numberObserver).not.toHaveBeenCalled();\n    expect(otherStringObserver).not.toHaveBeenCalled();\n    // Test enabled\n    instance.setObserversEnabled(state, true);\n    state.stringProp = 'thirdValue';\n    state.numberProp = 3;\n    // TODO(b/183749291): replace when jasmine typings issue resolved\n    // expect(stringObserver)\n    //     .toHaveBeenCalledOnceWith('thirdValue', 'anotherValue');\n    expect(stringObserver).toHaveBeenCalledTimes(1);\n    expect(stringObserver).toHaveBeenCalledWith('thirdValue', 'anotherValue');\n    // expect(otherStringObserver)\n    //     .toHaveBeenCalledOnceWith('thirdValue', 'anotherValue');\n    expect(otherStringObserver).toHaveBeenCalledTimes(1);\n    expect(otherStringObserver)\n        .toHaveBeenCalledWith('thirdValue', 'anotherValue');\n    // expect(numberObserver).toHaveBeenCalledOnceWith(3, 2);\n    expect(numberObserver).toHaveBeenCalledTimes(1);\n    expect(numberObserver).toHaveBeenCalledWith(3, 2);\n  });\n\n  it('#destroy() removes state observers', () => {\n    spyOn(instance, 'unobserve').and.callThrough();\n    instance.destroy();\n    expect(instance.unobserve).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-base/test/observer-proxy.test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport {mdcObserver, observeProperty, setObserversEnabled} from '../observer-proxy';\n\nimport {createObserverTests} from './observer-tests';\n\nif (typeof Proxy === 'function') {\n  // When IE11 support is dropped, observer-proxy can directly replace observer\n  createObserverTests(\n      mdcObserver, observeProperty, setObserversEnabled, 'Proxy ');\n}\n"
  },
  {
    "path": "packages/mdc-base/test/observer-tests.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport {mdcObserver as mdcObserverFn, observeProperty as observePropertyFn, setObserversEnabled as setObserversEnabledFn} from '../observer';\n\n/**\n * Shared tests between observer and observer-proxy to ensure identical\n * functionality.\n */\nexport function createObserverTests(\n    mdcObserver: typeof mdcObserverFn,\n    observeProperty: typeof observePropertyFn,\n    setObserversEnabled: typeof setObserversEnabledFn, testPrefix = '') {\n  describe(`${testPrefix}mdcObserver()`, () => {\n    let baseClass!: ReturnType<typeof mdcObserver>;\n    let instance!: InstanceType<typeof baseClass>;\n    const initialState = {string: 'value', number: 0};\n    let state = {...initialState};\n    const stringObserver = jasmine.createSpy('stringObserver');\n    const numberObserver = jasmine.createSpy('numberObserver');\n\n    beforeEach(() => {\n      baseClass = mdcObserver();\n      instance = new baseClass();\n      state = {...initialState};\n      stringObserver.and.stub();\n      stringObserver.calls.reset();\n      numberObserver.and.stub();\n      numberObserver.calls.reset();\n    });\n\n    it('should return MDCObserver class to extend from', () => {\n      expect(instance.observe).toEqual(jasmine.any(Function));\n      expect(instance.unobserve).toEqual(jasmine.any(Function));\n      expect(instance.setObserversEnabled).toEqual(jasmine.any(Function));\n    });\n\n    it('should extend from provided base class', () => {\n      class SuperClass {}\n      baseClass = mdcObserver(SuperClass);\n      instance = new baseClass();\n      expect(instance).toBeInstanceOf(SuperClass);\n    });\n\n    it('#observe() should listen to multiple properties', () => {\n      instance.observe(state, {\n        string: stringObserver,\n        number: numberObserver,\n      });\n\n      state.string = 'newValue';\n      state.number = 1;\n      // TODO(b/183749291): replace when jasmine typings issue resolved\n      // expect(stringObserver)\n      //     .toHaveBeenCalledOnceWith(state.string, initialState.string);\n      expect(stringObserver).toHaveBeenCalledTimes(1);\n      expect(stringObserver)\n          .toHaveBeenCalledWith(state.string, initialState.string);\n      // expect(numberObserver)\n      //     .toHaveBeenCalledOnceWith(state.number, initialState.number);\n      expect(numberObserver).toHaveBeenCalledTimes(1);\n      expect(numberObserver)\n          .toHaveBeenCalledWith(state.number, initialState.number);\n    });\n\n    it('#observe() should call Observers with instance as `this`', () => {\n      let observerThis: unknown;\n      stringObserver.and.callFake(function(this: unknown) {\n        observerThis = this;\n      });\n\n      instance.observe(state, {\n        string: stringObserver,\n      });\n\n      state.string = 'newValue';\n      expect(observerThis).toBe(instance, 'observer `this` should be instance');\n    });\n\n    it('#observe() cleanup function stops Observers', () => {\n      const unobserve = instance.observe(\n          state, {string: stringObserver, number: numberObserver});\n\n      state.string = 'newValue';\n      state.number = 1;\n      stringObserver.calls.reset();\n      numberObserver.calls.reset();\n      unobserve();\n      state.string = 'anotherValue';\n      state.number = 2;\n      expect(stringObserver).not.toHaveBeenCalled();\n      expect(numberObserver).not.toHaveBeenCalled();\n    });\n\n    it('#observe() cleanup function does not stop Observers from other invocations',\n       () => {\n         const otherStringObserver = jasmine.createSpy('otherStringObserver');\n         const unobserve = instance.observe(\n             state, {string: stringObserver, number: numberObserver});\n\n         instance.observe(state, {string: otherStringObserver});\n\n         state.string = 'newValue';\n         state.number = 1;\n         unobserve();\n         state.string = 'anotherValue';\n         state.number = 2;\n         expect(otherStringObserver).toHaveBeenCalledTimes(2);\n       });\n\n    it('#unobserve() stops Observers from all invocations', () => {\n      const otherStringObserver = jasmine.createSpy('otherStringObserver');\n      instance.observe(state, {string: stringObserver, number: numberObserver});\n      instance.observe(state, {string: otherStringObserver});\n      state.string = 'newValue';\n      state.number = 1;\n      stringObserver.calls.reset();\n      numberObserver.calls.reset();\n      otherStringObserver.calls.reset();\n      instance.unobserve();\n      state.string = 'anotherValue';\n      state.number = 2;\n      expect(stringObserver).not.toHaveBeenCalled();\n      expect(numberObserver).not.toHaveBeenCalled();\n      expect(otherStringObserver).not.toHaveBeenCalled();\n    });\n\n    it('#setObserversEnabled() can disable and enable all Observers', () => {\n      const otherStringObserver = jasmine.createSpy('otherStringObserver');\n      instance.observe(state, {string: stringObserver, number: numberObserver});\n      instance.observe(state, {string: otherStringObserver});\n      state.string = 'newValue';\n      state.number = 1;\n      stringObserver.calls.reset();\n      numberObserver.calls.reset();\n      otherStringObserver.calls.reset();\n      // Test disabled\n      instance.setObserversEnabled(state, false);\n      state.string = 'anotherValue';\n      state.number = 2;\n      expect(stringObserver).not.toHaveBeenCalled();\n      expect(numberObserver).not.toHaveBeenCalled();\n      expect(otherStringObserver).not.toHaveBeenCalled();\n      // Test enabled\n      instance.setObserversEnabled(state, true);\n      state.string = 'thirdValue';\n      state.number = 3;\n      // TODO(b/183749291): replace when jasmine typings issue resolved\n      // expect(stringObserver)\n      //     .toHaveBeenCalledOnceWith('thirdValue', 'anotherValue');\n      expect(stringObserver).toHaveBeenCalledTimes(1);\n      expect(stringObserver).toHaveBeenCalledWith('thirdValue', 'anotherValue');\n      // expect(otherStringObserver)\n      //     .toHaveBeenCalledOnceWith('thirdValue', 'anotherValue');\n      expect(otherStringObserver).toHaveBeenCalledTimes(1);\n      expect(otherStringObserver)\n          .toHaveBeenCalledWith('thirdValue', 'anotherValue');\n      // expect(numberObserver).toHaveBeenCalledOnceWith(3, 2);\n      expect(numberObserver).toHaveBeenCalledTimes(1);\n      expect(numberObserver).toHaveBeenCalledWith(3, 2);\n    });\n  });\n\n  describe(`${testPrefix}observeProperty()`, () => {\n    it('should call Observer when property value changes', () => {\n      const state = {foo: 'value'};\n      const observer = jasmine.createSpy('observer');\n      observeProperty(state, 'foo', observer);\n      // observer should not be called before property changes\n      expect(observer).not.toHaveBeenCalled();\n      state.foo = 'newValue';\n      // TODO(b/183749291): replace when jasmine typings issue resolved\n      // expect(observer).toHaveBeenCalledOnceWith('newValue', 'value');\n      expect(observer).toHaveBeenCalledTimes(1);\n      expect(observer).toHaveBeenCalledWith('newValue', 'value');\n      observer.calls.reset();\n      state.foo = 'newValue';\n      // observer should not be called if property is set to a value that\n      // does not change\n      expect(observer).not.toHaveBeenCalled();\n    });\n\n    it('should stop observing when returned function is called', () => {\n      const state = {foo: 'value'};\n      const observer = jasmine.createSpy('observer');\n      const unobserve = observeProperty(state, 'foo', observer);\n      unobserve();\n      state.foo = 'newValue';\n      // observer should not be called after cleaning up\n      expect(observer).not.toHaveBeenCalled();\n    });\n\n    it('should handle multiple Observers on the same property', () => {\n      const state = {foo: 'value'};\n      const observerOne = jasmine.createSpy('observerOne');\n      const observerTwo = jasmine.createSpy('observerTwo');\n      const unobserveOne = observeProperty(state, 'foo', observerOne);\n      observeProperty(state, 'foo', observerTwo);\n      state.foo = 'newValue';\n      // TODO(b/183749291): replace when jasmine typings issue resolved\n      // expect(observerOne).toHaveBeenCalledOnceWith('newValue', 'value');\n      expect(observerOne).toHaveBeenCalledTimes(1);\n      expect(observerOne).toHaveBeenCalledWith('newValue', 'value');\n      // expect(observerTwo).toHaveBeenCalledOnceWith('newValue', 'value');\n      expect(observerTwo).toHaveBeenCalledTimes(1);\n      expect(observerTwo).toHaveBeenCalledWith('newValue', 'value');\n      unobserveOne();\n      state.foo = 'anotherValue';\n      // First observer should stop listening\n      expect(observerOne).toHaveBeenCalledTimes(1);\n      // Second observer should continue listening\n      expect(observerTwo).toHaveBeenCalledTimes(2);\n      expect(observerTwo).toHaveBeenCalledWith('anotherValue', 'newValue');\n    });\n\n    it('should observe superclass properties', () => {\n      const superClassGetter = jasmine.createSpy('superClassGetter');\n      const superClassSetter = jasmine.createSpy('superClassSetter');\n      class SuperClass {\n        privateProp = false;\n        get prop() {\n          superClassGetter();\n          return this.privateProp;\n        }\n        set prop(prop: boolean) {\n          this.privateProp = prop;\n          superClassSetter();\n        }\n      }\n\n      class SubClass extends SuperClass {}\n\n      const state = new SubClass();\n      const observer = jasmine.createSpy('observer');\n      observeProperty(state, 'prop', observer);\n      state.prop = true;\n      expect(observer).toHaveBeenCalledTimes(1);\n      expect(observer).toHaveBeenCalledWith(true, false);\n      // SuperClass getter/setter functionality should be preserved\n      expect(superClassSetter).toHaveBeenCalledTimes(1);\n      superClassGetter.calls.reset();\n      expect(state.prop).toBe(true);\n      expect(superClassGetter).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe(`${testPrefix}setObserversEnabled()`, () => {\n    it('should disable or enable all observers for a target', () => {\n      const state = {string: 'value', number: 0};\n      const stringObserver = jasmine.createSpy('stringObserver');\n      const numberObserver = jasmine.createSpy('numberObserver');\n      observeProperty(state, 'string', stringObserver);\n      observeProperty(state, 'number', numberObserver);\n      state.string = 'newValue';\n      state.number = 1;\n      stringObserver.calls.reset();\n      numberObserver.calls.reset();\n      // Test disabled\n      setObserversEnabled(state, false);\n      state.string = 'anotherValue';\n      state.number = 2;\n      expect(stringObserver).not.toHaveBeenCalled();\n      expect(numberObserver).not.toHaveBeenCalled();\n      // Test disabled\n      setObserversEnabled(state, true);\n      state.string = 'thirdValue';\n      state.number = 3;\n      // TODO(b/183749291): replace when jasmine typings issue resolved\n      // expect(stringObserver)\n      //     .toHaveBeenCalledOnceWith('thirdValue', 'anotherValue');\n      expect(stringObserver).toHaveBeenCalledTimes(1);\n      expect(stringObserver).toHaveBeenCalledWith('thirdValue', 'anotherValue');\n      // expect(numberObserver).toHaveBeenCalledOnceWith(3, 2);\n      expect(numberObserver).toHaveBeenCalledTimes(1);\n      expect(numberObserver).toHaveBeenCalledWith(3, 2);\n    });\n  });\n}\n"
  },
  {
    "path": "packages/mdc-base/test/observer.test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport {mdcObserver, observeProperty, setObserversEnabled} from '../observer';\n\nimport {createObserverTests} from './observer-tests';\n\ncreateObserverTests(mdcObserver, observeProperty, setObserversEnabled);\n"
  },
  {
    "path": "packages/mdc-base/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport type EventType = keyof GlobalEventHandlersEventMap;\nexport type SpecificEventListener<K extends EventType> =\n    (event: GlobalEventHandlersEventMap[K]) => void;\nexport type CustomEventListener<E extends Event> = (event: E) => void;\nexport type WindowEventType = keyof WindowEventMap;\nexport type SpecificWindowEventListener<K extends WindowEventType> =\n    (event: WindowEventMap[K]) => void;\n\n// `any` is required for mixin constructors\n// tslint:disable:no-any\n/**\n * A generic type for the constructor of an instance type. Note that this type\n * does not preserve accurate constructor parameters.\n *\n * @template T The instance type.\n */\nexport type Constructor<T = any> = {\n  new (...args: any[]): T;\n};\n// tslint:enable:no-any\n"
  },
  {
    "path": "packages/mdc-button/README.md",
    "content": "<!--docs:\ntitle: \"Buttons\"\nlayout: detail\nsection: components\nexcerpt: \"Web Buttons\"\niconId: button\npath: /catalog/buttons/\n-->\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button/styles\";\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-button mdc-button--touch\">\n    <span class=\"mdc-button__ripple\"></span>\n    <span class=\"mdc-button__touch\"></span>\n    <span class=\"mdc-button__focus-ring\"></span>\n    <span class=\"mdc-button__label\">My Accessible Button</span>\n  </button>\n</div>\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused button.\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n<img src=\"images/text-button.png\" alt=\"Text button example\">\n\n```html\n <button class=\"mdc-button\">\n   <span class=\"mdc-button__ripple\"></span>\n   <span class=\"mdc-button__focus-ring\"></span>\n   <span class=\"mdc-button__label\">Text Button</span>\n</button>\n```\n\n<b>Text button with icon example</b>\n\n<img src=\"images/text-icon-button.png\" alt=\"Text button with bookmark icon example\">\n\n```html\n<button class=\"mdc-button mdc-button--icon-leading\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\"\n    >bookmark</i\n  >\n  <span class=\"mdc-button__label\">Text Button plus icon</span>\n</button>\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n<img src=\"images/outlined-button.png\" alt=\"Outlined button example\">\n\n```html\n<button class=\"mdc-button mdc-button--outlined\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <span class=\"mdc-button__label\">Outlined Button</span>\n</button>\n```\n\n<b>Outlined button with icon example</b>\n\n<img src=\"images/outlined-icon-button.png\" alt=\"Outlined button with bookmark icon\">\n\n```html\n<button class=\"mdc-button mdc-button--outlined mdc-button--icon-leading\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">bookmark</i>\n  <span class=\"mdc-button__label\">Outlined Button plus Icon</span>\n</button>\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n### Contained button example\n\n<img src=\"images/contained-button.png\" alt=\"Contained button example\">\n\n```html\n<button class=\"mdc-button mdc-button--raised\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <span class=\"mdc-button__label\">Contained Button</span>\n</button>\n```\n\n**Note: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.**\n\n<b>Contained button with icon example</b>\n\n<img src=\"images/contained-icon-button.png\" alt=\"Contained button with a bookmark icon\">\n\n```html\n<button class=\"mdc-button mdc-button--raised mdc-button--icon-leading\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\"\n    >bookmark</i\n  >\n  <span class=\"mdc-button__label\">Contained Button plus Icon</span>\n</button>\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n<img src=\"images/toggle-bar.png\" alt=\"toggle button group\">\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n<button class=\"mdc-button\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n<button class=\"mdc-button\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <svg class=\"mdc-button__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"...\">\n  ...\n  </svg>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n<button class=\"mdc-button mdc-button--icon-trailing\">\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <span class=\"mdc-button__label\">Button</span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n</button>\n```\n\n**Note: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.**\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `<button>`, or set the `disabled` attribute on the `<fieldset>` containing the button.\nDisabled buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n<button class=\"mdc-button\" disabled>\n  <span class=\"mdc-button__ripple\"></span>\n  <span class=\"mdc-button__focus-ring\"></span>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n<img src=\"images/button-theming.png\" width=\"400\" alt=\"Button theming with three buttons - text, contained, and outlined - with Shrine theming.\">\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #FEDBD0,\n  $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n  @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n.custom-text-button,\n.custom-outlined-button {\n  --mdc-theme-primary: #FEDBD0;\n  --mdc-theme-on-primary: #442C2E;\n\n  @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button--icon-leading` | Optional. Styles a button with a leading icon.\n`mdc-button--icon-trailing` | Optional. Styles a button with a trailing icon.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n`mdc-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n**Note: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.<br>\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommend always including it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.\n"
  },
  {
    "path": "packages/mdc-button/_button-base.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/elevation';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n@use '@material/touch-target/touch-target';\n@use '@material/focus-ring/focus-ring';\n@use '@material/typography/typography';\n@use './button-shared-theme';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include _static-styles-base($query: $query);\n  @include _typography-styles($query: $query);\n}\n\n@mixin _static-styles-base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include touch-target.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n  // prettier-ignore\n  @include elevation.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // postcss-bem-linter: define button\n  .mdc-button {\n    @include _root-structure($query);\n    // The icon CSS class overrides styles defined in the .material-icons CSS\n    // class, which is loaded separately so the order of CSS definitions is not\n    // guaranteed. Therefore, increase specifity by nesting this class to ensure\n    // overrides apply.\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include _icon-structure;\n      }\n    }\n\n    .mdc-button__progress-indicator {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 0;\n        position: absolute;\n        @include rtl.ignore-next-line();\n        transform: translate(-50%, -50%);\n        top: 50%;\n        @include rtl.ignore-next-line();\n        left: 50%;\n        line-height: initial;\n      }\n    }\n\n    .mdc-button__label {\n      @include feature-targeting.targets($feat-structure) {\n        // Necessary such that label is stacked on top of ripple\n        // (since ripple is a positioned element, non-positioned elements\n        // appear under it).\n        position: relative;\n      }\n    }\n\n    .mdc-button__focus-ring {\n      @include focus-ring.focus-ring($query: $query);\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n\n    @include ripple-theme.focus {\n      .mdc-button__focus-ring {\n        @include dom.forced-colors-mode($exclude-ie11: true) {\n          @include feature-targeting.targets($feat-structure) {\n            display: block;\n          }\n        }\n      }\n    }\n\n    .mdc-button__touch {\n      @include touch-target.touch-target($query: $query);\n    }\n  }\n\n  .mdc-button__label + .mdc-button__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include icon-trailing;\n    }\n  }\n\n  svg.mdc-button__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include icon-svg;\n    }\n  }\n\n  .mdc-button--touch {\n    // Touch target doesn't change with height. It simply gets removed if\n    // density (height) changes. Therefore, it is a static style.\n    @include touch-target.margin(\n      $component-height: button-shared-theme.$height,\n      $query: $query\n    );\n  }\n  // postcss-bem-linter: end\n}\n\n@mixin _typography-styles($query) {\n  .mdc-button {\n    // Exclude properties declared in theme styles.\n    @include typography.typography(\n      button,\n      $exclude-props: (\n        font-size,\n        line-height,\n        font-weight,\n        letter-spacing,\n        text-transform\n      ),\n      $query: $query\n    );\n  }\n}\n\n/// @deprecated Contains typography declarations now part of theme-styles.\n@mixin deprecated-static-styles-without-ripple(\n  $query: feature-targeting.all()\n) {\n  @include _deprecated-typography-styles($query: $query);\n  @include _static-styles-base($query: $query);\n}\n\n@mixin _deprecated-typography-styles($query) {\n  .mdc-button {\n    @include typography.typography(button, $query);\n  }\n}\n\n@mixin deprecated-base($query) {\n  @include base($query);\n}\n\n@mixin base($query) {\n  @include typography.typography(button, $query);\n  @include _root-structure($query: $query);\n}\n\n@mixin _root-structure($query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include elevation-theme.overlay-surface-position($query: $query);\n  @include elevation-theme.overlay-dimensions(100%, $query: $query);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: inline-flex;\n    // position: relative; already set in mdc-elevation-overlay-surface-position\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    min-width: 64px;\n    border: none;\n    outline: none;\n    /* @alternate */\n    line-height: inherit;\n    user-select: none;\n    -webkit-appearance: none;\n    // Even though `visible` is the default, IE 11 computes the property as\n    // `hidden` in some cases, unless it's explicitly defined here.\n    overflow: visible;\n    vertical-align: middle;\n    background: transparent;\n  }\n\n  &::-moz-focus-inner {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n      border: 0;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  &:active {\n    @include feature-targeting.targets($feat-structure) {\n      outline: none;\n    }\n  }\n\n  &:hover {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  &:disabled {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  &[hidden] {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n    }\n  }\n}\n\n@mixin icon {\n  @include _icon-structure;\n  @include _icon-size(18px);\n}\n\n@mixin _icon-structure {\n  @include rtl.reflexive-box(margin, right, 8px);\n\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n}\n\n@mixin _icon-size($size-px) {\n  $icon-size: typography.px-to-rem($size-px);\n\n  font-size: $icon-size;\n  height: $icon-size;\n  width: $icon-size;\n}\n\n@mixin icon-trailing {\n  @include rtl.reflexive-box(margin, left, 8px);\n}\n\n@mixin icon-svg {\n  fill: currentColor;\n}\n\n@mixin icon-contained {\n  @include rtl.reflexive-property(margin, -4px, 8px);\n}\n\n@mixin icon-contained-trailing {\n  @include rtl.reflexive-property(margin, 8px, -4px);\n}\n\n@mixin raised-transition($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: elevation-theme.transition-value();\n  }\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon {\n  @include icon;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-trailing {\n  @include icon-trailing;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-svg {\n  @include icon-svg;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-contained {\n  @include icon-contained;\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-icon-contained-trailing {\n  @include icon-contained-trailing;\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-filled-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/tokens/resolvers';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use './button-shared-theme';\n\n$custom-property-prefix: 'filled-button';\n\n$light-theme: (\n  container-color: primary,\n  container-elevation: 0,\n  container-height: button-shared-theme.$height,\n  container-shadow-color: null,\n  container-shape: button-shared-theme.$shape-radius,\n  disabled-container-color: button-shared-theme.$disabled-container-color,\n  disabled-container-elevation: 0,\n  disabled-label-text-color: button-shared-theme.$disabled-ink-color,\n  focus-container-elevation: 0,\n  focus-label-text-color: null,\n  focus-state-layer-color: on-primary,\n  focus-state-layer-opacity: 0.24,\n  hover-container-elevation: 0,\n  hover-label-text-color: null,\n  hover-state-layer-color: on-primary,\n  hover-state-layer-opacity: 0.08,\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  keep-touch-target: false,\n  label-text-color: on-primary,\n  label-text-font: button-font-family,\n  label-text-size: button-font-size,\n  label-text-tracking: button-letter-spacing,\n  label-text-transform: button-text-transform,\n  label-text-weight: button-font-weight,\n  pressed-container-elevation: 0,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: on-primary,\n  pressed-state-layer-opacity: 0.24,\n  with-icon-disabled-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-icon-color: null,\n  with-icon-icon-size: 18px,\n  with-icon-pressed-icon-color: null,\n  focus-ring-color: null,\n  focus-ring-offset: 0,\n);\n\n/// Sets theme based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use.\n@mixin theme($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: button-shared-theme.resolve-theme-elevation-keys(\n    $theme,\n    $resolver: $resolver\n  );\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);\n}\n\n@mixin deprecated-theme-styles($query: feature-targeting.all()) {\n  .mdc-button--raised,\n  .mdc-button--unelevated {\n    $theme: map.merge(\n      $light-theme,\n      (\n        focus-state-layer-color: null,\n        focus-state-layer-opacity: null,\n        hover-state-layer-color: null,\n        hover-state-layer-opacity: null,\n        pressed-state-layer-color: null,\n        pressed-state-layer-opacity: null,\n        label-text-font: null,\n        label-text-size: null,\n        label-text-tracking: null,\n        label-text-transform: null,\n        label-text-weight: null,\n      )\n    );\n    @include button-shared-theme.theme-styles(\n      $theme,\n      resolvers.$material,\n      $query: $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-filled.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/tokens/resolvers';\n@use './button-base';\n@use './button-filled-theme';\n@use './button-ripple';\n@use './button-shared-theme';\n\n@mixin styles(\n  $theme: button-filled-theme.$light-theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include button-base.static-styles($query: $query);\n  @include static-styles($query: $query);\n  .mdc-button--unelevated {\n    @include button-filled-theme.theme-styles(\n      $theme,\n      $resolver,\n      $query: $query\n    );\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include static-styles-without-ripple($query: $query);\n  @include button-ripple.static-styles($query: $query);\n}\n\n@mixin static-styles-without-ripple($query: feature-targeting.all()) {\n  .mdc-button--unelevated {\n    @include button-base.raised-transition($query: $query);\n    // TODO(b/179402677): move into theme config\n    @include button-shared-theme.horizontal-padding(\n      $padding: button-shared-theme.$contained-horizontal-padding,\n      $padding-icon: button-shared-theme.$contained-horizontal-padding-icon,\n      $query: $query\n    );\n  }\n}\n\n// Legacy mixins\n\n@mixin filled($query: feature-targeting.all()) {\n  // TODO(b/179402677): move into theme config\n  @include button-shared-theme.horizontal-padding(\n    $padding: button-shared-theme.$contained-horizontal-padding,\n    $padding-icon: button-shared-theme.$contained-horizontal-padding-icon,\n    $query: $query\n  );\n  @include button-filled-theme.theme-styles(\n    button-filled-theme.$light-theme,\n    $query: $query\n  );\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-filled($query) {\n  @include filled($query);\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-outlined-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use '@material/ripple/ripple-theme';\n@use './button-base';\n@use './button-shared-theme';\n@use './button-ripple';\n\n$outlined-border-width: 1px !default;\n$outline-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;\n\n$custom-property-prefix: 'outlined-button';\n\n$light-theme: (\n  container-height: button-shared-theme.$height,\n  container-shape: button-shared-theme.$shape-radius,\n  disabled-label-text-color: button-shared-theme.$disabled-ink-color,\n  disabled-outline-color: button-shared-theme.$disabled-container-color,\n  focus-label-text-color: null,\n  focus-outline-color: null,\n  focus-state-layer-color: primary,\n  focus-state-layer-opacity: 0.12,\n  hover-label-text-color: null,\n  hover-outline-color: null,\n  hover-state-layer-color: primary,\n  hover-state-layer-opacity: 0.04,\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  keep-touch-target: false,\n  label-text-color: primary,\n  label-text-font: button-font-family,\n  label-text-size: button-font-size,\n  label-text-tracking: button-letter-spacing,\n  label-text-transform: button-text-transform,\n  label-text-weight: button-font-weight,\n  outline-color: $outline-color,\n  outline-width: $outlined-border-width,\n  pressed-label-text-color: null,\n  pressed-outline-color: null,\n  pressed-state-layer-color: primary,\n  pressed-state-layer-opacity: 0.12,\n  with-icon-icon-color: null,\n  with-icon-icon-size: 18px,\n  with-icon-hover-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-pressed-icon-color: null,\n  with-icon-disabled-icon-color: null,\n  focus-ring-color: null,\n  focus-ring-offset: 0,\n);\n\n/// Sets theme based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use.\n@mixin theme($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: button-shared-theme.resolve-theme-elevation-keys(\n    $theme,\n    $resolver: $resolver\n  );\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include _theme($theme, $resolver, $query: $query);\n}\n\n@mixin _theme($theme, $resolver, $query) {\n  @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);\n  @include outline-color(\n    (\n      default: map.get($theme, outline-color),\n      disabled: map.get($theme, disabled-outline-color),\n      focus: map.get($theme, focus-outline-color),\n      hover: map.get($theme, hover-outline-color),\n      pressed: map.get($theme, pressed-outline-color),\n    ),\n    $query: $query\n  );\n  @include outline-width(map.get($theme, outline-width), $query: $query);\n}\n\n@mixin deprecated-theme-styles($query: feature-targeting.all()) {\n  .mdc-button--outlined {\n    $theme: map.merge(\n      $light-theme,\n      (\n        focus-state-layer-color: null,\n        focus-state-layer-opacity: null,\n        hover-state-layer-color: null,\n        hover-state-layer-opacity: null,\n        pressed-state-layer-color: null,\n        pressed-state-layer-opacity: null,\n        label-text-font: null,\n        label-text-size: null,\n        label-text-tracking: null,\n        label-text-transform: null,\n        label-text-weight: null,\n      )\n    );\n    @include _theme($theme, resolvers.$material, $query: $query);\n  }\n}\n\n///\n/// Sets the outline color to the given color for an enabled button.\n/// @param {Color} $color-or-map - The desired outline color, specified either\n///     as a flat value or a map of colors with states\n///     {default, hover, focused, pressed, disabled} as keys.\n///\n@mixin outline-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(:disabled) {\n    @include _outline-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:hover {\n      @include _outline-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus() {\n      @include _outline-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    // Increase active state specificity due to ripple-theme.focus().\n    &:active,\n    &:focus:active {\n      @include _outline-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _outline-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the outline color to the given color for a disabled button.\n/// @param {Color} $color - The desired outline color.\n/// @deprecated - call `outline-color` instead with `disabled` as a map key.\n///\n@mixin disabled-outline-color($color, $query: feature-targeting.all()) {\n  @include outline-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n@mixin outline-width(\n  $outline-width,\n  $padding: button-shared-theme.$contained-horizontal-padding,\n  // For a button with an icon, the padding on the side of the button with the\n  // icon.\n  $padding-icon: button-shared-theme.$contained-horizontal-padding-icon,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if $outline-width != null {\n    $outline-width-value: if(\n      custom-properties.is-custom-prop($outline-width),\n      custom-properties.get-fallback($outline-width),\n      $outline-width\n    );\n    // TODO(b/194792044): uncouple padding from outline-width\n    // Note: Adjust padding to maintain consistent width with non-outlined buttons\n    $padding-value: math.max($padding - $outline-width-value, 0);\n    $padding-icon-value: math.max($padding-icon - $outline-width-value, 0);\n\n    @include button-shared-theme.horizontal-padding(\n      $padding: $padding-value,\n      $padding-icon: $padding-icon-value,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-width, $outline-width);\n    }\n\n    #{button-ripple.$ripple-target} {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(top, -1 * $outline-width-value);\n        @include theme.property(left, -1 * $outline-width-value);\n        @include theme.property(bottom, -1 * $outline-width-value);\n        @include theme.property(right, -1 * $outline-width-value);\n        @include theme.property(border-width, $outline-width);\n      }\n    }\n    .mdc-button__touch {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(\n          left,\n          'calc(-1 * outline-width)',\n          $replace: (outline-width: $outline-width)\n        );\n        @include theme.property(\n          width,\n          'calc(100% + 2 * outline-width)',\n          $replace: (outline-width: $outline-width)\n        );\n      }\n    }\n  }\n}\n\n///\n/// Sets the outline color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-outlined.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use './button-base';\n@use './button-outlined-theme';\n@use './button-ripple';\n@use './button-shared-theme';\n\n@mixin styles(\n  $theme: button-outlined-theme.$light-theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include button-base.static-styles($query: $query);\n  @include static-styles($query: $query);\n  .mdc-button--outlined {\n    @include theme-styles($theme, $resolver, $query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include static-styles-without-ripple($query: $query);\n  @include button-ripple.static-styles($query: $query);\n}\n\n@mixin static-styles-without-ripple($query: feature-targeting.all()) {\n  .mdc-button--outlined {\n    @include _static-styles($query: $query);\n  }\n}\n\n@mixin _static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    border-style: solid;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    $duration: elevation-theme.$transition-duration;\n    $easing: elevation-theme.$transition-timing-function;\n    transition: border #{$duration} #{$easing};\n  }\n\n  #{button-ripple.$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      border-style: solid;\n      border-color: transparent;\n    }\n  }\n}\n\n@mixin outlined($query: feature-targeting.all()) {\n  @include _static-styles($query: $query);\n  @include button-outlined-theme.theme-styles(\n    button-outlined-theme.$light-theme,\n    $query: $query\n  );\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-outlined($query) {\n  @include outlined($query);\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-protected-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use './button-shared-theme';\n\n$custom-property-prefix: 'protected-button';\n\n$light-theme: (\n  container-color: primary,\n  container-elevation: 2,\n  container-height: button-shared-theme.$height,\n  container-shadow-color: black,\n  container-shape: button-shared-theme.$shape-radius,\n  disabled-container-color: button-shared-theme.$disabled-container-color,\n  disabled-container-elevation: 0,\n  disabled-label-text-color: button-shared-theme.$disabled-ink-color,\n  focus-container-elevation: 4,\n  focus-label-text-color: null,\n  focus-state-layer-color: on-primary,\n  focus-state-layer-opacity: 0.24,\n  hover-container-elevation: 4,\n  hover-label-text-color: null,\n  hover-state-layer-color: on-primary,\n  hover-state-layer-opacity: 0.08,\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  keep-touch-target: false,\n  label-text-color: on-primary,\n  label-text-font: button-font-family,\n  label-text-size: button-font-size,\n  label-text-tracking: button-letter-spacing,\n  label-text-transform: button-text-transform,\n  label-text-weight: button-font-weight,\n  pressed-container-elevation: 8,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: on-primary,\n  pressed-state-layer-opacity: 0.24,\n  with-icon-disabled-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-icon-color: null,\n  with-icon-icon-size: 18px,\n  with-icon-pressed-icon-color: null,\n  focus-ring-color: null,\n  focus-ring-offset: 0,\n);\n\n/// Sets theme based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use.\n@mixin theme($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: button-shared-theme.resolve-theme-elevation-keys(\n    $theme,\n    $resolver: $resolver\n  );\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-protected.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use './button-base';\n@use './button-protected-theme';\n@use './button-ripple';\n@use './button-shared-theme';\n\n@mixin styles(\n  $theme: button-protected-theme.$light-theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include button-base.static-styles($query: $query);\n  @include static-styles($query: $query);\n  .mdc-button--raised {\n    @include button-protected-theme.theme-styles(\n      $theme,\n      $resolver: $resolver,\n      $query: $query\n    );\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include static-styles-without-ripple($query: $query);\n  @include button-ripple.static-styles($query: $query);\n}\n\n@mixin static-styles-without-ripple($query: feature-targeting.all()) {\n  .mdc-button--raised {\n    @include button-base.raised-transition($query);\n    // TODO(b/179402677): move into theme config\n    @include button-shared-theme.horizontal-padding(\n      $padding: button-shared-theme.$contained-horizontal-padding,\n      $padding-icon: button-shared-theme.$contained-horizontal-padding-icon,\n      $query: $query\n    );\n  }\n}\n\n/// @deprecated Private style mixin for partners; not available for public use.\n@mixin deprecated-raised($query) {\n  @include raised($query);\n}\n\n@mixin raised($query) {\n  @include elevation-theme.elevation(2, $query: $query);\n\n  &:hover,\n  &:focus {\n    @include elevation-theme.elevation(4, $query: $query);\n  }\n\n  &:active {\n    @include elevation-theme.elevation(8, $query: $query);\n  }\n\n  &:disabled {\n    @include elevation-theme.elevation(0, $query: $query);\n  }\n\n  @include button-base.raised-transition($query);\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-ripple.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n\n$ripple-target: '.mdc-button__ripple';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-button {\n    @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n\n  #{$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      // Ripple needs content-box as the box sizing and box-sizing: border-box\n      // is often set as a default, so we override that here.\n      box-sizing: content-box;\n      overflow: hidden;\n      z-index: 0;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-shared-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './button-ripple';\n\n$height: 36px !default;\n$horizontal-padding: 8px !default;\n$contained-horizontal-padding: 16px !default;\n// For a contained button with an icon, the padding on the side of the\n// button with the icon.\n$contained-horizontal-padding-icon: 12px !default;\n\n$minimum-height: 24px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n\n$shape-radius: small !default;\n\n$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-container-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.12\n) !default;\n\n@mixin theme-styles($theme, $resolver, $query: feature-targeting.all()) {\n  @include _label-text-typography(\n    (\n      family: map.get($theme, label-text-font),\n      size: map.get($theme, label-text-size),\n      tracking: map.get($theme, label-text-tracking),\n      weight: map.get($theme, label-text-weight),\n      transform: map.get($theme, label-text-transform),\n    ),\n    $query: $query\n  );\n\n  @include container-fill-color(\n    (\n      default: map.get($theme, container-color),\n      disabled: map.get($theme, disabled-container-color),\n    ),\n    $query: $query\n  );\n\n  @include ink-color(\n    (\n      default: map.get($theme, label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n      disabled: map.get($theme, disabled-label-text-color),\n    ),\n    $query: $query\n  );\n\n  @include icon-color(\n    (\n      default: map.get($theme, with-icon-icon-color),\n      hover: map.get($theme, with-icon-hover-icon-color),\n      focus: map.get($theme, with-icon-focus-icon-color),\n      pressed: map.get($theme, with-icon-pressed-icon-color),\n      disabled: map.get($theme, with-icon-disabled-icon-color),\n    ),\n    $query: $query\n  );\n\n  $icon-size: map.get($theme, with-icon-icon-size);\n  @include _icon-size($icon-size, $query: $query);\n\n  @include ripple-theme.states-colors(\n    $color-map: (\n      hover: map.get($theme, hover-state-layer-color),\n      press: map.get($theme, pressed-state-layer-color),\n    ),\n    $ripple-target: button-ripple.$ripple-target,\n    $query: $query\n  );\n\n  $hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity);\n  $focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity);\n  $pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity);\n  @include ripple-theme.states-opacities(\n    $opacity-map: (\n      focus: $focus-state-layer-opacity,\n      hover: $hover-state-layer-opacity,\n      press: $pressed-state-layer-opacity,\n    ),\n    $ripple-target: button-ripple.$ripple-target,\n    $query: $query\n  );\n\n  $container-height: map.get($theme, container-height);\n  @include height($container-height, $query: $query);\n\n  $container-height-value: if(\n    custom-properties.is-custom-prop($container-height),\n    custom-properties.get-fallback($container-height),\n    $container-height\n  );\n\n  /// Token \"keep-touch-target\":\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  $keep-touch-target: map.get($theme, keep-touch-target);\n  @if (not $keep-touch-target) and\n    ($container-height-value != null) and\n    ($container-height-value != $height)\n  {\n    @include _touch-target-reset($query: $query);\n  }\n\n  $shape: map.get($theme, container-shape);\n  @if $shape {\n    $container-height: if(\n      $container-height != null,\n      $container-height,\n      $height\n    );\n    @include _shape-radius-with-height(\n      $shape,\n      $height: $container-height,\n      $query: $query\n    );\n  }\n\n  @include _elevation(\n    $resolver,\n    $elevation-map: (\n      default: map.get($theme, container-elevation),\n      disabled: map.get($theme, disabled-container-elevation),\n      focus: map.get($theme, focus-container-elevation),\n      hover: map.get($theme, hover-container-elevation),\n      pressed: map.get($theme, pressed-container-elevation)\n    ),\n    $shadow-color: map.get($theme, container-shadow-color),\n    $query: $query\n  );\n\n  @include _focus-ring-color(map.get($theme, focus-ring-color), $query);\n  @include _focus-ring-offset(map.get($theme, focus-ring-offset), $query);\n}\n\n@function resolve-theme-elevation-keys($theme, $resolver) {\n  $elevation-resolver: map.get($resolver, elevation);\n  $shadow-color: map.get($theme, container-shadow-color);\n  @if $elevation-resolver == null or $shadow-color == null {\n    @return $theme;\n  }\n\n  $elevation-keys: (\n    container-elevation,\n    hover-container-elevation,\n    focus-container-elevation,\n    pressed-container-elevation,\n    disabled-container-elevation\n  );\n\n  @each $key in $elevation-keys {\n    $elevation: map.get($theme, $key);\n    @if $elevation != null {\n      $resolved-value: meta.call(\n        $elevation-resolver,\n        $elevation: $elevation,\n        $shadow-color: $shadow-color\n      );\n      // Update the key with the resolved value.\n      $theme: map.set($theme, $key, $resolved-value);\n    }\n  }\n  @return $theme;\n}\n\n///\n/// Sets ripple color for button.\n///\n@mixin ripple-states(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  @include ripple-theme.states(\n    $color: $color,\n    $opacity-map: $opacity-map,\n    $query: $query,\n    $ripple-target: button-ripple.$ripple-target\n  );\n}\n\n@mixin filled-accessible(\n  $container-fill-color,\n  $query: feature-targeting.all()\n) {\n  $fill-tone: theme-color.tone($container-fill-color);\n\n  @include container-fill-color($container-fill-color, $query);\n\n  @if ($fill-tone == 'dark') {\n    @include ink-color(text-primary-on-dark, $query);\n    @include ripple-states($color: text-primary-on-dark, $query: $query);\n  } @else {\n    @include ink-color(text-primary-on-light, $query);\n    @include ripple-states($color: text-primary-on-light, $query: $query);\n  }\n}\n\n///\n/// Sets the container fill color to the given color for an enabled button.\n/// @param {Color|map} $color-or-map - The desired container fill color,\n///     specified either as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {\n  // :not(:disabled) is used to support link styled as button\n  // as link does not support :enabled style\n  &:not(:disabled) {\n    @include _container-fill-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:hover {\n      @include _container-fill-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus() {\n      @include _container-fill-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.active {\n      @include _container-fill-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _container-fill-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the container fill color to the given color for a disabled button.\n/// @param {Color} $color - The desired container fill color.\n/// @deprecated - call `container-fill-color` instead with `disabled` as a map\n///     key.\n///\n@mixin disabled-container-fill-color($color, $query: feature-targeting.all()) {\n  @include container-fill-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets the icon color to the given color for an enabled button.\n/// @param {Color} $color-or-map - The desired icon color, specified either\n///     as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(:disabled) {\n    @include _icon-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:hover {\n      @include _icon-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus() {\n      @include _icon-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.active {\n      @include _icon-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _icon-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the icon color to the given color for a disabled button.\n/// @param {Color} $color - The desired icon color.\n/// @deprecated - call `icon-color` instead with `disabled` as a map key.\n///\n@mixin disabled-icon-color($color, $query: feature-targeting.all()) {\n  @include icon-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets the ink color to the given color for an enabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color-or-map - The desired ink color, specified either\n///     as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin ink-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(:disabled) {\n    @include _ink-color(state.get-default-state($color-or-map), $query: $query);\n\n    &:hover {\n      @include _ink-color(state.get-hover-state($color-or-map), $query: $query);\n    }\n\n    @include ripple-theme.focus() {\n      @include _ink-color(state.get-focus-state($color-or-map), $query: $query);\n    }\n\n    @include ripple-theme.active {\n      @include _ink-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _ink-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the ink color to the given color for a disabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color - The desired ink color.\n/// @deprecated - call `ink-color` instead with `disabled` as a map key.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include ink-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets density scale for button.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-3`,\n///     `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height($height, $query: $query);\n\n  @if $density-scale != 0 {\n    @include _touch-target-reset($query: $query);\n  }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin _touch-target-reset($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .mdc-button__touch {\n    @include feature-targeting.targets($feat-structure) {\n      // Do not set display: none in case the touch target is <a> element.\n      height: 100%;\n    }\n  }\n}\n\n///\n/// Sets custom height for button.\n/// @param {Number} $height - Height of button in `px`.\n///\n@mixin height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include _shape-radius-with-height($radius, $rtl-reflexive, $height, $query);\n}\n\n@mixin _shape-radius-with-height(\n  $radius,\n  $rtl-reflexive: false,\n  $height: $height,\n  $query: feature-targeting.all()\n) {\n  @include shape-mixins.radius(\n    $radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n\n  #{button-ripple.$ripple-target} {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  @include _focus-ring-shape($radius, $query);\n}\n\n///\n/// Sets horizontal padding to the given number.\n/// @param {Number} $padding\n/// @param {Number} $padding-icon [null] For buttons with an icon, the\n///     horizontal padding on the side with the icon, if different from\n///     $padding.\n///\n@mixin horizontal-padding(\n  $padding,\n  $padding-icon: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // $padding should be a single value; enforce it by specifying all 4 sides in the output\n    padding: 0 $padding 0 $padding;\n  }\n\n  @if $padding-icon != null {\n    &.mdc-button--icon-trailing {\n      @include feature-targeting.targets($feat-structure) {\n        // $padding should be a single value; enforce it by specifying all 4\n        // sides in the output.\n        padding: 0 $padding-icon 0 $padding;\n      }\n    }\n\n    &.mdc-button--icon-leading {\n      @include feature-targeting.targets($feat-structure) {\n        // $padding should be a single value; enforce it by specifying all 4\n        // sides in the output.\n        padding: 0 $padding 0 $padding-icon;\n      }\n    }\n  }\n}\n\n///\n/// Sets the button label to overflow as ellipsis\n///\n@mixin label-overflow-ellipsis($query: feature-targeting.all()) {\n  .mdc-button__label {\n    @include typography.overflow-ellipsis($query: $query);\n  }\n}\n\n///\n/// Add a visible outline to the button in high contrast mode.\n///\n@mixin outline-hcm-shim($query: feature-targeting.all()) {\n  &::before {\n    @include dom-mixins.transparent-border($query: $query);\n  }\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n/// @deprecated Use `outline-hcm-shim` for the outline button. The focus ring\n///     is provided by default.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n  @include outline-hcm-shim($query: $query);\n\n  // Link buttons apply focus to the contained link. Focus is indicated via the\n  // link since focus-within isn't supported by IE.\n  & .mdc-button__link:focus,\n  &:focus {\n    &::before {\n      @include focus-ring.focus-ring($query: $query);\n    }\n  }\n}\n\n///\n/// Sets the container fill color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _container-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Sets the icon color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin _icon-size($size-px, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if $size-px != null {\n    $size-rem: typography.px-to-rem($size-px);\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(font-size, $size-rem);\n        @include theme.property(width, $size-rem);\n        @include theme.property(height, $size-rem);\n      }\n    }\n  }\n}\n\n///\n/// Sets the ink color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _label-text-typography(\n  $typography-map,\n  $query: feature-targeting.all()\n) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $family: map.get($typography-map, family);\n  $size: map.get($typography-map, size);\n  $tracking: map.get($typography-map, tracking);\n  $weight: map.get($typography-map, weight);\n  $transform: map.get($typography-map, transform);\n\n  @include feature-targeting.targets($feat-typography) {\n    @include theme.property(font-family, $family);\n    @include theme.property(font-size, $size);\n    @include theme.property(letter-spacing, $tracking);\n    @include theme.property(font-weight, $weight);\n    @include theme.property(text-transform, $transform);\n  }\n}\n\n@mixin _elevation(\n  $resolver,\n  $elevation-map,\n  $shadow-color,\n  $query: feature-targeting.all()\n) {\n  $elevation-resolver: map.get($resolver, elevation);\n\n  @if $shadow-color {\n    $default: state.get-default-state($elevation-map);\n    @if $default != null {\n      @include elevation-theme.with-resolver(\n        $elevation-resolver,\n        $elevation: $default,\n        $shadow-color: $shadow-color,\n        $query: $query\n      );\n    }\n\n    $focus: state.get-focus-state($elevation-map);\n    @if $focus != null {\n      @include ripple-theme.focus {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $focus,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $hover: state.get-hover-state($elevation-map);\n    @if $hover != null {\n      &:hover {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $hover,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $pressed: state.get-pressed-state($elevation-map);\n    @if $pressed != null {\n      @include ripple-theme.active {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $pressed,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $disabled: state.get-disabled-state($elevation-map);\n    @if $disabled != null {\n      &:disabled {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $disabled,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin _focus-ring-shape($radius, $query: feature-targeting.all()) {\n  $radius-value: if(\n    custom-properties.is-custom-prop($radius),\n    custom-properties.get-declaration-value($radius),\n    $radius\n  );\n\n  .mdc-button__focus-ring {\n    @if $radius-value != 0 and type-of($radius-value) == 'number' {\n      @include focus-ring.focus-ring-radius(\n        $ring-radius: $radius-value,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _focus-ring-color($color, $query: feature-targeting.all()) {\n  $color-value: if(\n    custom-properties.is-custom-prop($color),\n    custom-properties.get-declaration-value($color),\n    $color\n  );\n\n  .mdc-button__focus-ring {\n    @if $color != null {\n      @include focus-ring.focus-ring-color(\n        $inner-ring-color: $color-value,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _focus-ring-offset($offset, $query: feature-targeting.all()) {\n  $offset-value: if(\n    custom-properties.is-custom-prop($offset),\n    custom-properties.get-declaration-value($offset),\n    $offset\n  );\n\n  .mdc-button__focus-ring {\n    @if $offset-value != 0 and meta.type-of($offset-value) == 'number' {\n      @include focus-ring.focus-ring-offset(\n        $offset: $offset-value,\n        $query: $query\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-text-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use './button-shared-theme';\n\n$custom-property-prefix: 'text-button';\n\n$light-theme: (\n  container-height: button-shared-theme.$height,\n  container-shape: button-shared-theme.$shape-radius,\n  disabled-label-text-color: button-shared-theme.$disabled-ink-color,\n  focus-label-text-color: null,\n  focus-state-layer-color: primary,\n  focus-state-layer-opacity: 0.12,\n  hover-label-text-color: null,\n  hover-state-layer-color: primary,\n  hover-state-layer-opacity: 0.04,\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  keep-touch-target: false,\n  label-text-color: primary,\n  label-text-font: button-font-family,\n  label-text-size: button-font-size,\n  label-text-tracking: button-letter-spacing,\n  label-text-transform: button-text-transform,\n  label-text-weight: button-font-weight,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: primary,\n  pressed-state-layer-opacity: 0.12,\n  with-icon-disabled-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-icon-color: null,\n  with-icon-icon-size: 18px,\n  with-icon-pressed-icon-color: null,\n  focus-ring-color: null,\n  focus-ring-offset: 0,\n);\n\n/// Sets theme based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use.\n@mixin theme($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: button-shared-theme.resolve-theme-elevation-keys(\n    $theme,\n    $resolver: $resolver\n  );\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include theme-styles-internal($theme, $resolver: $resolver, $query: $query);\n}\n\n@mixin theme-styles-internal(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  @include button-shared-theme.theme-styles($theme, $resolver, $query: $query);\n}\n\n@mixin deprecated-theme-styles($query: feature-targeting.all()) {\n  $theme: map.merge(\n    $light-theme,\n    (\n      focus-state-layer-color: null,\n      focus-state-layer-opacity: null,\n      hover-state-layer-color: null,\n      hover-state-layer-opacity: null,\n      pressed-state-layer-color: null,\n      pressed-state-layer-opacity: null,\n      label-text-font: null,\n      label-text-size: null,\n      label-text-tracking: null,\n      label-text-transform: null,\n      label-text-weight: null,\n    )\n  );\n\n  .mdc-button {\n    @include button-shared-theme.theme-styles(\n      $theme,\n      resolvers.$material,\n      $query: $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-text.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/tokens/resolvers';\n@use './button-ripple';\n@use './button-shared-theme';\n@use './button-text-theme';\n\n@mixin styles(\n  $theme: button-text-theme.$light-theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include button-base.static-styles($query: $query);\n  @include static-styles($query: $query);\n  .mdc-button {\n    @include button-text-theme.theme-styles($theme, $query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include static-styles-without-ripple($query: $query);\n  @include button-ripple.static-styles($query: $query);\n}\n\n@mixin static-styles-without-ripple($query: feature-targeting.all()) {\n  .mdc-button {\n    // TODO(b/179402677): move this into theme config\n    @include button-shared-theme.horizontal-padding(\n      button-shared-theme.$horizontal-padding,\n      $query: $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_button-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './button-base' show horizontal-padding;\n@forward './button-outlined-theme' hide theme;\n@forward './button-ripple' show $ripple-target;\n@forward './button-shared-theme' hide theme-styles;\n\n// TODO(b/175614964): add theme mixin for all variants\n"
  },
  {
    "path": "packages/mdc-button/_button.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/typography/typography';\n@use './button-base';\n@use './button-filled';\n@use './button-filled-theme';\n@use './button-outlined';\n@use './button-outlined-theme';\n@use './button-protected';\n@use './button-protected-theme';\n@use './button-ripple';\n@use './button-text';\n@use './button-text-theme';\n@use './button-theme';\n@use './button-shared-theme';\n\n// For backwards compatibility.\n@forward './button-base' show deprecated-base, base, icon, icon-trailing, icon-svg, icon-contained, icon-contained-trailing, deprecated-icon, deprecated-icon-trailing, deprecated-icon-svg, deprecated-icon-contained, deprecated-icon-contained-trailing;\n\n@mixin styles($query: feature-targeting.all()) {\n  @include static-styles($query: $query);\n  @include theme-styles($query: $query);\n}\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  .mdc-button {\n    @include button-text-theme.theme-styles(\n      button-text-theme.$light-theme,\n      $query: $query\n    );\n  }\n  .mdc-button--unelevated {\n    @include button-filled-theme.theme-styles(\n      button-filled-theme.$light-theme,\n      $query: $query\n    );\n  }\n  .mdc-button--raised {\n    @include button-protected-theme.theme-styles(\n      button-protected-theme.$light-theme,\n      $query: $query\n    );\n  }\n  .mdc-button--outlined {\n    @include button-outlined-theme.theme-styles(\n      button-outlined-theme.$light-theme,\n      $query: $query\n    );\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include static-styles-without-ripple($query: $query);\n  @include button-ripple.static-styles($query: $query);\n}\n\n@mixin static-styles-without-ripple($query: feature-targeting.all()) {\n  @include button-base.static-styles($query: $query);\n  @include button-text.static-styles-without-ripple($query: $query);\n  @include button-filled.static-styles-without-ripple($query: $query);\n  @include button-protected.static-styles-without-ripple($query: $query);\n  @include button-outlined.static-styles-without-ripple($query: $query);\n}\n\n// Legacy mixins\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  @include button-base.deprecated-static-styles-without-ripple($query: $query);\n  @include button-text.static-styles-without-ripple($query: $query);\n  @include button-filled.static-styles-without-ripple($query: $query);\n  @include button-protected.static-styles-without-ripple($query: $query);\n  @include button-outlined.static-styles-without-ripple($query: $query);\n  @include _theme-styles-without-ripple($query: $query);\n}\n\n@mixin _theme-styles-without-ripple($query: feature-targeting.all()) {\n  @include button-text-theme.deprecated-theme-styles($query: $query);\n  @include button-filled-theme.deprecated-theme-styles($query: $query);\n  @include button-outlined-theme.deprecated-theme-styles($query: $query);\n  // Elevation has been recategorized into theme styles. Keeping old elevation\n  // styles here for backwards compatibility.\n  .mdc-button--raised {\n    @include button-protected.raised($query: $query);\n  }\n}\n\n// @deprecated - use styles() instead.\n@mixin core-styles($query: feature-targeting.all()) {\n  @include styles($query: $query);\n  // TODO: remove this rule since padding now takes care of icon margins.\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-button--raised,\n  .mdc-button--unelevated,\n  .mdc-button--outlined {\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        // Icons inside contained buttons have different styles due to increased button padding\n        @include button-base.icon-contained;\n      }\n    }\n\n    .mdc-button__label + .mdc-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include button-base.icon-contained-trailing;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './button-theme';\n"
  },
  {
    "path": "packages/mdc-button/_mixins.import.scss",
    "content": "@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"./mixins\" as mdc-button-*;\n@forward \"./variables\" as mdc-button-*;\n"
  },
  {
    "path": "packages/mdc-button/_mixins.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_button.scss' (partners) or '_button-theme.scss' (clients) instead.\n@forward './button' show core-styles, without-ripple, deprecated-base, deprecated-icon;\n@forward './button-outlined' show deprecated-outlined;\n@forward './button-theme' show ripple-states, filled-accessible, container-fill-color, disabled-container-fill-color, outline-color, disabled-outline-color, icon-color, disabled-icon-color, ink-color, disabled-ink-color, density, height, shape-radius, horizontal-padding, outline-width, label-overflow-ellipsis, outline-hcm-shim, high-contrast-mode-shim, $ripple-target, $horizontal-padding;\n"
  },
  {
    "path": "packages/mdc-button/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-button-* hide $mdc-button-ripple-target, mdc-button-core-styles, mdc-button-theme-baseline, mdc-button-without-ripple, mdc-button-ripple, mdc-button-filled-accessible, mdc-button-container-fill-color, mdc-button-disabled-container-fill-color, mdc-button-outline-color, mdc-button-disabled-outline-color, mdc-button-icon-color, mdc-button-disabled-icon-color, mdc-button-ink-color, mdc-button-disabled-ink-color, mdc-button-density, mdc-button-touch-target-reset-, mdc-button-height, mdc-button-shape-radius, mdc-button-horizontal-padding, mdc-button-outline-width, mdc-button-label-overflow-ellipsis, mdc-button-base-, mdc-button-icon-, mdc-button-icon-trailing-, mdc-button-icon-svg-, mdc-button-icon-contained-, mdc-button-icon-contained-trailing-, mdc-button-outlined-, mdc-button-filled-, mdc-button-raised-, mdc-button-container-fill-color-, mdc-button-outline-color-, mdc-button-icon-color-, mdc-button-ink-color-;\n"
  },
  {
    "path": "packages/mdc-button/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './button-theme' show $height, $horizontal-padding, $contained-horizontal-padding, $minimum-height, $maximum-height, $density-scale, $density-config, $outlined-border-width, $outline-color, $shape-radius, $disabled-container-color, $disabled-ink-color;\n"
  },
  {
    "path": "packages/mdc-button/mdc-button.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"variables\" as mdc-button-*;\n@forward \"mixins\" as mdc-button-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"mdc-button\";\n"
  },
  {
    "path": "packages/mdc-button/mdc-button.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-button/package.json",
    "content": "{\n  \"name\": \"@material/button\",\n  \"description\": \"The Material Components for the web button component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"button\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-button\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-button/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './button';\n\n@include button.core-styles;\n"
  },
  {
    "path": "packages/mdc-button/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as button;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include button.core-styles($query: $query);\n    @include button.filled-accessible(red, $query: $query);\n    @include button.container-fill-color(red, $query: $query);\n    @include button.outline-color(red, $query: $query);\n    @include button.icon-color(red, $query: $query);\n    @include button.ink-color(red, $query: $query);\n    @include button.shape-radius(0, $query: $query);\n    @include button.horizontal-padding(0, $query: $query);\n    @include button.outline-width(0, $query: $query);\n    @include button.without-ripple($query: $query);\n    @include button.density(-1, $query: $query);\n    @include button.height(0, $query: $query);\n    @include button.label-overflow-ellipsis($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-button/test/mdc-button.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-button.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-card/README.md",
    "content": "<!--docs:\ntitle: \"Cards\"\nlayout: detail\nsection: components\nexcerpt: \"Cards contain content and actions about a single subject.\"\niconId: card\npath: /catalog/cards/\n-->\n\n# Cards\n\n[Cards](https://material.io/components/cards/) contain content and actions about a single subject.\n\nFor additional information, see the [API](#api).\n\n![Elevated card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-elevated.png)\n\n## Using cards\n\n### Installation\n\n```\nnpm install @material/card\n```\n\n### Styles\n\n```css\n@use \"@material/card\";\n\n@include card.core-styles;\n```\n\nIn order to remain general-purpose and support e.g. images spanning the full width of the card, MDC Card does not\ninclude padding styles on the root element. When adding free-form text content to cards, padding should be set to\n`16px`:\n\n```css\n.my-card-content {\n  padding: 16px;\n}\n```\n\n**Note: MDC Card's predefined classes for content areas (e.g. `mdc-card__actions`) take care of their own padding.**\n\nBy default, cards expand horizontally to fill all available space, and vertically to fit their contents.\nIf you'd like to maintain a consistent width and height across cards, you'll need to set it in your styles:\n\n```css\n.my-card {\n  height: 350px;\n  width: 350px;\n}\n```\n\nYou can also place cards within layout containers, such as [MDC Layout Grid](../mdc-layout-grid)\nor CSS Flexbox or Grid.\n\n### JavaScript\n\nMDC Card itself does not require JavaScript. However, if you place interactive components inside your cards,\nyou may want to instantiate ripples or other components. For example:\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';\nconst ripples = [].map.call(document.querySelectorAll(selector), function(el) {\n  return new MDCRipple(el);\n});\n```\n\n**Note: If your card includes any [icon button toggles](../mdc-icon-button#icon-button-toggle), you will want to\ninstantiate `MDCIconButtonToggle` instead of `MDCRipple`.**\n\n## Card\n\n### Card example\n\n```html\n<div class=\"mdc-card\">\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: MDC Card is designed to accommodate a wide variety of use cases. See the [Card Contents](#card-contents) section for information on helpers for specific types of content within cards.**\n\n## Other variants\n\n### Outlined card\n\n![Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple](images/card-outlined.png)\n\nBy default, cards are elevated with no outline. You can render unelevated, outlined cards instead by adding the\n`mdc-card--outlined` modifier class.\n\n```html\n<div class=\"mdc-card mdc-card--outlined\">\n  <!-- ... content ... -->\n</div>\n```\n\n### Card contents\n\nMDC Card can be used for a wide variety of use cases, but it includes styles for a few common ones.\n\n#### Primary action\n\nIf a majority of the card (or even the entire card) should be actionable, you can add the `mdc-card__primary-action`\nclass to the region to give it MDC Ripple styles. You should also assign `tabindex=\"0\"` to ensure it can also be\ninteracted with via keyboard.\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\" tabindex=\"0\">\n    <!-- content within actionable area -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <!-- ... content ... -->\n</div>\n```\n\n**Note: We recommend avoiding adding other actionable items within `mdc-card__primary-action`, due to the overlapping\neffect of multiple nested elements with ripple and states applied at once.**\n\n#### Rich media\n\nThis area is used for showing rich media in cards, and optionally as a container. Use the `mdc-card__media` CSS class\nand the [optional modifier classes](#css-classes).\n\n```html\n<div class=\"my-card__media mdc-card__media mdc-card__media--16-9\">\n  <div class=\"mdc-card__media-content\">Title</div>\n</div>\n```\n\n```css\n.my-card__media {\n  background-image: url(\"pretty.jpg\");\n}\n```\n\n#### Actions\n\nThis area is used to show different actions the user can take, typically at the bottom of a card.\nIt's often used with [buttons](../mdc-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 1</span>\n  </button>\n  <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Action 2</span>\n  </button>\n</div>\n```\n\nIt can also be used with [icon buttons](../mdc-icon-button):\n\n```html\n<div class=\"mdc-card__actions\">\n  <button class=\"mdc-icon-button mdc-card__action mdc-card__action--icon\"\n     aria-pressed=\"false\"\n     aria-label=\"Add to favorites\"\n     title=\"Add to favorites\">\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n  </button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n  <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n</div>\n```\n\nBe sure to include the `mdc-card__action` class on every action for correct positioning. In addition, _button_ icons\nshould use the `mdc-card__action--button` class, and _icon_ actions should use the `mdc-card__action--icon` class.\n\nTo have a single action button take up the entire width of the action row, use the `--full-bleed` modifier on the row:\n\n```html\n<div class=\"mdc-card__actions mdc-card__actions--full-bleed\">\n  <a class=\"mdc-button mdc-card__action mdc-card__action--button\" href=\"#\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">All Business Headlines</span>\n    <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">arrow_forward</i>\n  </a>\n</div>\n```\n\nTo display buttons _and_ icons in the same row, wrap them in `mdc-card__action-buttons` and `mdc-card__action-icons`\nelements:\n\n```html\n<div class=\"mdc-card__actions\">\n  <div class=\"mdc-card__action-buttons\">\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Read</span>\n    </button>\n    <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n      <div class=\"mdc-button__ripple\"></div>\n      <span class=\"mdc-button__label\">Bookmark</span>\n    </button>\n  </div>\n  <div class=\"mdc-card__action-icons\">\n   <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n    <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n  </div>\n</div>\n```\n\n##### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n#### Combined example\n\nThe following is an example incorporating all of the above elements:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__primary-action\">\n    <div class=\"mdc-card__media mdc-card__media--square\">\n      <div class=\"mdc-card__media-content\">Title</div>\n    </div>\n    <!-- ... additional primary action content ... -->\n    <div class=\"mdc-card__ripple\"></div>\n  </div>\n  <div class=\"mdc-card__actions\">\n    <div class=\"mdc-card__action-buttons\">\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 1</span>\n      </button>\n      <button class=\"mdc-button mdc-card__action mdc-card__action--button\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Action 2</span>\n      </button>\n    </div>\n    <div class=\"mdc-card__action-icons\">\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"Share\">share</button>\n      <button class=\"material-icons mdc-icon-button mdc-card__action mdc-card__action--icon\" title=\"More options\">more_vert</button>\n    </div>\n  </div>\n</div>\n```\n\n#### Non-semantic content\n\nIt can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.\n\nIn this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an `mdc-card__content` element. The non-semantic content can remain at the card's top level:\n\n```html\n<div class=\"mdc-card\">\n  <div class=\"mdc-card__content\">\n    <!-- ... semantic content ... -->\n  </div>\n  <!-- ... non-semantic content ... -->\n</div>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-card` | Mandatory. The main card element.\n`mdc-card--outlined` | Optional. Removes the shadow and displays a hairline outline instead.\n`mdc-card__primary-action` | Optional. The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`. Only applicable to cards that have a primary action that the main surface should trigger.\n`mdc-card__ripple` | Optional. The element that shows the ripple styling. This is mandatory if `mdc-card__primary-action` is used. Only applicable to cards that have a primary action that the main surface should trigger.\n`mdc-card__media` | Optional. Media area that displays a custom `background-image` with `background-size: cover`.\n`mdc-card__media--square` | Optional. Automatically scales the media area's height to equal its width.\n`mdc-card__media--16-9` | Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.\n`mdc-card__media-content` | Optional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the `background-image`.\n`mdc-card__actions` | Optional. Row containing action buttons and/or icons.\n`mdc-card__actions--full-bleed` | Optional. Removes the action area's padding and causes its only child (an `mdc-card__action` element) to consume 100% of the action area's width.\n`mdc-card__action-buttons` | Optional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to `mdc-card__action-icons`.\n`mdc-card__action-icons` | Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to `__action-buttons`.\n`mdc-card__action` | Optional. An individual action button or icon.\n`mdc-card__action--button` | Optional. An action button with text.\n`mdc-card__action--icon` | Optional. An action icon with no text. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-card__content` | Optional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of a card.\n`outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow).\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to card with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width.\n"
  },
  {
    "path": "packages/mdc-card/_card-shared-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use './mixins' as card;\n@use '@material/elevation/elevation-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/state';\n@use 'sass:map';\n\n$ripple-target: '.mdc-card__ripple';\n\n@mixin theme($theme, $resolver) {\n  @include card.shape-radius(map.get($theme, container-shape));\n  @include card.fill-color(map.get($theme, container-color));\n  .mdc-card {\n    &::after {\n      // Adjust shape-radius for transparent card border for high-contrast mode;\n      @include card.shape-radius(map.get($theme, container-shape));\n    }\n  }\n\n  @include elevation-theme.overlay-container-color(\n    map.get($theme, container-surface-tint-layer-color)\n  );\n\n  @include _container-elevation(\n    $resolver,\n    $shadow-color: map.get($theme, container-shadow-color),\n    $map: (\n      default: map.get($theme, container-elevation),\n      hover: map.get($theme, hover-container-elevation),\n      focus: map.get($theme, focus-container-elevation),\n      pressed: map.get($theme, pressed-container-elevation)\n    )\n  );\n\n  .mdc-card__primary-action {\n    // States styles\n    // TODO(b/191298796): Unique state layer colors for each interactive state is not supported. Ripple mixin currently only uses the hover state layer color and ignores focus and pressed colors.\n    @include ripple-theme.theme-styles(\n      (\n        focus-state-layer-color: map.get($theme, focus-state-layer-color),\n        focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),\n        hover-state-layer-color: map.get($theme, hover-state-layer-color),\n        hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),\n        pressed-state-layer-color: map.get($theme, pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, pressed-state-layer-opacity),\n      ),\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin _container-elevation($resolver, $shadow-color, $map) {\n  $elevation-resolver: map.get($resolver, elevation);\n  .mdc-card {\n    @if state.get-default-state($map) {\n      @include elevation-theme.with-resolver(\n        $elevation-resolver,\n        $elevation: state.get-default-state($map),\n        $shadow-color: $shadow-color\n      );\n    }\n\n    @include ripple-theme.hover() {\n      @if state.get-hover-state($map) {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: state.get-hover-state($map),\n          $shadow-color: $shadow-color\n        );\n      }\n    }\n\n    @include ripple-theme.focus() {\n      @if state.get-focus-state($map) {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: state.get-focus-state($map),\n          $shadow-color: $shadow-color\n        );\n      }\n    }\n\n    @include ripple-theme.pressed() {\n      @if state.get-pressed-state($map) {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: state.get-pressed-state($map),\n          $shadow-color: $shadow-color\n        );\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-card/_elevated-card-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use './card-shared-theme';\n@use './mixins' as card;\n@use 'sass:map';\n\n$custom-property-prefix: 'elevated-card';\n\n$light-theme: (\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  disabled-container-color: null,\n  disabled-container-elevation: null,\n  disabled-container-opacity: null,\n  dragged-container-elevation: null,\n  dragged-state-layer-color: null,\n  dragged-state-layer-opacity: null,\n  focus-container-elevation: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  icon-color: null,\n  icon-size: null,\n  pressed-container-elevation: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include card-shared-theme.theme($theme, $resolver);\n  @include card.outline(\n    $color: map.get($theme, container-color),\n    $thickness: 0\n  );\n}\n"
  },
  {
    "path": "packages/mdc-card/_filled-card-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use './card-shared-theme';\n@use './mixins' as card;\n@use 'sass:map';\n\n$custom-property-prefix: 'filled-card';\n\n$light-theme: (\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  disabled-container-color: null,\n  disabled-container-elevation: null,\n  disabled-container-opacity: null,\n  dragged-container-elevation: null,\n  dragged-state-layer-color: null,\n  dragged-state-layer-opacity: null,\n  focus-container-elevation: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  icon-color: null,\n  icon-size: null,\n  pressed-container-elevation: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include card-shared-theme.theme($theme, $resolver);\n  @include card.outline(\n    $color: map.get($theme, container-color),\n    $thickness: 0\n  );\n}\n"
  },
  {
    "path": "packages/mdc-card/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-card/_mixins.import.scss",
    "content": "@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"./index\" as mdc-card-*;\n"
  },
  {
    "path": "packages/mdc-card/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/theme';\n@use './variables';\n@use '@material/theme/theme-color';\n@use '@material/dom/mixins' as dom-mixins;\n\n//\n// Public\n//\n\n$ripple-target: '.mdc-card__ripple';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-card {\n    @include feature-targeting.targets($feat-structure) {\n      @include container-layout_;\n      position: relative;\n    }\n\n    // Transparent card border for high-contrast mode.\n    &::after {\n      @include dom-mixins.transparent-border($query: $query);\n      @include feature-targeting.targets($feat-structure) {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .mdc-card--outlined {\n    // Outlined card already displays border in high-contrast mode.\n    // Overwriting styles set above to remove a duplicate border.\n    &::after {\n      @include feature-targeting.targets($feat-structure) {\n        border: none;\n      }\n    }\n  }\n\n  .mdc-card__content {\n    @include feature-targeting.targets($feat-structure) {\n      border-radius: inherit;\n      height: 100%;\n    }\n  }\n\n  .mdc-card__focus-ring {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n    }\n  }\n\n  //\n  // Media\n  //\n\n  .mdc-card__media {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative; // Child element `__media-content` has `position: absolute`\n      box-sizing: border-box;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: cover;\n    }\n\n    &::before {\n      @include feature-targeting.targets($feat-structure) {\n        display: block;\n        content: '';\n      }\n    }\n  }\n\n  .mdc-card__media:first-child {\n    @include feature-targeting.targets($feat-structure) {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n  }\n\n  .mdc-card__media:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n  }\n\n  .mdc-card__media--square {\n    @include media-aspect-ratio(1, 1, $query);\n  }\n\n  .mdc-card__media--16-9 {\n    @include media-aspect-ratio(16, 9, $query);\n  }\n\n  .mdc-card__media-content {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      box-sizing: border-box;\n    }\n  }\n\n  //\n  // Primary action\n  //\n\n  .mdc-card__primary-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include container-layout_;\n\n      position: relative; // Needed to prevent the ripple wash from overflowing the container in IE and Edge\n      outline: none;\n      color: inherit;\n      text-decoration: none;\n      cursor: pointer;\n      overflow: hidden;\n    }\n  }\n\n  .mdc-card__primary-action:first-child {\n    @include feature-targeting.targets($feat-structure) {\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    }\n  }\n\n  .mdc-card__primary-action:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n  }\n\n  //\n  // Action row\n  //\n\n  .mdc-card__actions {\n    @include feature-targeting.targets($feat-structure) {\n      @include actions-layout_;\n\n      min-height: 52px;\n      padding: 8px;\n    }\n  }\n\n  .mdc-card__actions--full-bleed {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n    }\n  }\n\n  .mdc-card__action-buttons,\n  .mdc-card__action-icons {\n    @include feature-targeting.targets($feat-structure) {\n      @include actions-layout_;\n    }\n  }\n\n  .mdc-card__action-icons {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, variables.$action-icon-color);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      flex-grow: 1;\n      justify-content: flex-end;\n    }\n  }\n\n  .mdc-card__action-buttons + .mdc-card__action-icons {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, 16px);\n    }\n  }\n\n  //\n  // Action items\n  //\n\n  .mdc-card__action {\n    @include feature-targeting.targets($feat-structure) {\n      @include actions-layout_(inline-flex);\n\n      justify-content: center;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    &:focus {\n      @include feature-targeting.targets($feat-structure) {\n        outline: none;\n      }\n    }\n  }\n\n  //\n  // Action buttons\n  //\n\n  .mdc-card__action--button {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, right, 8px);\n\n      padding: 0 8px;\n    }\n\n    &:last-child {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(margin, right, 0);\n      }\n    }\n  }\n\n  .mdc-card__actions--full-bleed .mdc-card__action--button {\n    @include feature-targeting.targets($feat-structure) {\n      justify-content: space-between;\n      width: 100%;\n      height: auto;\n      max-height: none;\n      margin: 0;\n      padding: 8px 16px;\n      @include rtl.ignore-next-line();\n      text-align: left;\n    }\n\n    @include rtl.rtl {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  //\n  // Action icons\n  //\n\n  .mdc-card__action--icon {\n    @include feature-targeting.targets($feat-structure) {\n      // Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from\n      // expanding.\n      margin: -6px 0;\n\n      // Same padding as mdc-icon-button.\n      padding: 12px;\n    }\n  }\n\n  .mdc-card__action--icon:not(:disabled) {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, variables.$action-icon-color);\n    }\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// card styles. It is recommended that most users use `mdc-card-core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  // postcss-bem-linter: define card\n\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // prettier-ignore\n  @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-card {\n    @include shape-radius(variables.$shape-radius, $query: $query);\n    @include fill-color(surface, $query);\n    @include elevation-mixins.overlay-surface-position($query: $query);\n    @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n    @include elevation-mixins.elevation(1, $query: $query);\n\n    // Transparent card border for high-contrast mode.\n    &::after {\n      @include shape-radius(variables.$shape-radius, $query: $query);\n    }\n  }\n\n  .mdc-card--outlined {\n    @include elevation-mixins.elevation(0, $query: $query);\n    @include outline(variables.$outline-color, $query: $query);\n  }\n\n  @include static-styles($query: $query);\n  // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// card styles. It is recommended that most users use `mdc-card-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-card__primary-action {\n    @include ripple.surface($query, $ripple-target: $ripple-target);\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include ripple-theme.states(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n\n    #{$ripple-target} {\n      @include feature-targeting.targets($feat-structure) {\n        box-sizing: content-box;\n        height: 100%;\n        overflow: hidden;\n        left: 0;\n        pointer-events: none;\n        position: absolute;\n        top: 0;\n        width: 100%;\n      }\n    }\n\n    @include ripple-theme.focus {\n      &::after {\n        @include dom-mixins.transparent-border(\n          $border-width: 5px,\n          $border-style: double,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin outline(\n  $color,\n  $thickness: variables.$outline-width,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(border-width, $thickness);\n    border-style: solid;\n  }\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(border-color, $color);\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n\n@mixin media-aspect-ratio($x, $y, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::before {\n    @include feature-targeting.targets($feat-structure) {\n      // This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html\n      margin-top: math.percentage(math.div($y, $x));\n    }\n  }\n}\n\n//\n// Private\n//\n\n@mixin container-layout_ {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n@mixin actions-layout_($display: flex) {\n  display: $display;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "packages/mdc-card/_outlined-card-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use './mixins' as card;\n@use 'sass:map';\n@use '@material/elevation/elevation-theme';\n@use '@material/tokens/resolvers';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/ripple/ripple-theme';\n@use './card-shared-theme';\n\n$custom-property-prefix: 'outlined-card';\n\n$light-theme: (\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  disabled-container-elevation: null,\n  disabled-outline-color: null,\n  disabled-outline-opacity: null,\n  dragged-container-elevation: null,\n  dragged-outline-color: null,\n  dragged-state-layer-color: null,\n  dragged-state-layer-opacity: null,\n  focus-container-elevation: null,\n  focus-outline-color: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-outline-color: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  icon-color: null,\n  icon-size: null,\n  outline-color: null,\n  outline-width: null,\n  pressed-container-elevation: null,\n  pressed-outline-color: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include _outline(\n    $outline-width: map.get($theme, outline-width),\n    $map: (\n      default: map.get($theme, outline-color),\n      hover: map.get($theme, hover-outline-color),\n      focus: map.get($theme, focus-outline-color),\n      pressed: map.get($theme, pressed-outline-color),\n    )\n  );\n  @include card-shared-theme.theme($theme, $resolver);\n}\n\n@mixin _outline($outline-width, $map) {\n  @if state.get-default-state($map) {\n    @include card.outline(\n      $color: state.get-default-state($map),\n      $thickness: $outline-width\n    );\n  }\n\n  @include ripple-theme.hover() {\n    @if state.get-hover-state($map) {\n      @include card.outline(\n        $color: state.get-hover-state($map),\n        $thickness: $outline-width\n      );\n    }\n  }\n\n  @include ripple-theme.focus() {\n    @if state.get-focus-state($map) {\n      @include card.outline(\n        $color: state.get-focus-state($map),\n        $thickness: $outline-width\n      );\n    }\n  }\n\n  @include ripple-theme.pressed() {\n    @if state.get-pressed-state($map) {\n      @include card.outline(\n        $color: state.get-pressed-state($map),\n        $thickness: $outline-width\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-card/_variables.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-card-* hide mdc-card-core-styles, mdc-card-without-ripple, mdc-card-ripple, mdc-card-fill-color, mdc-card-outline, mdc-card-shape-radius, mdc-card-media-aspect-ratio, mdc-card-container-layout-, mdc-card-actions-layout-;\n"
  },
  {
    "path": "packages/mdc-card/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:color';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n\n$action-icon-color: rgba(\n  theme-color.prop-value(on-surface),\n  theme-color.text-emphasis(medium)\n) !default;\n$outline-color: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  12%\n) !default;\n$outline-width: 1px !default;\n$shape-radius: medium !default;\n"
  },
  {
    "path": "packages/mdc-card/mdc-card.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"variables\" as mdc-card-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"mixins\" as mdc-card-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"mdc-card\";\n"
  },
  {
    "path": "packages/mdc-card/mdc-card.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-card/package.json",
    "content": "{\n  \"name\": \"@material/card\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web card component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"card\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-card\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-card/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as card;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include card.core-styles($query: $query);\n    @include card.fill-color(red, $query: $query);\n    @include card.outline(red, $query: $query);\n    @include card.shape-radius(0, $query: $query);\n    @include card.media-aspect-ratio(1, 1, $query: $query);\n    @include card.ripple($query: $query);\n    @include card.without-ripple($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-card/test/mdc-card.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-card.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-checkbox/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-checkbox/README.md",
    "content": "<!--docs:\ntitle: \"Checkboxes\"\nlayout: detail\nsection: components\nexcerpt: \"Checkboxes allow the user to select multiple options from a set.\"\niconId: selection_control\npath: /catalog/input-controls/checkboxes/\n-->\n\n# Selection controls: checkboxes\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse checkboxes to:\n\n* Select one or more options from a list\n* Present a list containing sub-selections\n* Turn an item on or off in a desktop environment\n\n![Checkbox hero example for menu options](images/checkbox-hero.png)\n\n**Contents**\n\n* [Using checkboxes](#using-checkboxes)\n* [Checkboxes](#checkboxes)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using checkboxes\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.\n\n### Installing checkboxes\n\n```\nnpm install @material/checkbox\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\";\n@use \"@material/form-field\";\n\n@include checkbox.core-styles;\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the checkbox is used with the form field.**\n\n### JavaScript instantiation\n\nThe checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCCheckbox` on the `mdc-checkbox` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCCheckbox` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making checkboxes accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-checkbox--touch` class to your checkbox as follows:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <div class=\"mdc-checkbox mdc-checkbox--touch\">\n    <input type=\"checkbox\"\n           class=\"mdc-checkbox__native-control\"\n           id=\"checkbox-1\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n    <div class=\"mdc-checkbox__ripple\"></div>\n    <div class=\"mdc-checkbox__focus-ring\"></div>\n  </div>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-checkbox__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused checkbox.\n\n## Checkboxes\n\nWe recommend using MDC Checkbox with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Checkbox example\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\"\n           class=\"mdc-checkbox__native-control\"\n           id=\"checkbox-1\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n    <div class=\"mdc-checkbox__ripple\"></div>\n    <div class=\"mdc-checkbox__focus-ring\"></div>\n  </div>\n  <label for=\"checkbox-1\">Checkbox 1</label>\n</div>\n```\n\n**Note: If you are using IE, you need to include a closing `</path>` tag if you wish to avoid console warnings.**\n\n### Checkbox states\n\nCheckboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.\n\n![Checkbox states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite](images/checkbox-states.png)\n\n## Other variants\n\n### Disabled checkboxes\n\nNote that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `<input>` element is sufficient.\n\n```html\n<div class=\"mdc-checkbox mdc-checkbox--disabled\">\n  <input type=\"checkbox\"\n         id=\"basic-disabled-checkbox\"\n         class=\"mdc-checkbox__native-control\"\n         disabled />\n  <div class=\"mdc-checkbox__background\">\n    <svg class=\"mdc-checkbox__checkmark\"\n         viewBox=\"0 0 24 24\">\n      <path class=\"mdc-checkbox__checkmark-path\"\n            fill=\"none\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n    <div class=\"mdc-checkbox__mixedmark\"></div>\n  </div>\n  <div class=\"mdc-checkbox__ripple\"></div>\n  <div class=\"mdc-checkbox__focus-ring\"></div>\n</div>\n<label for=\"basic-disabled-checkbox\" id=\"basic-disabled-checkbox-label\">This is my disabled checkbox</label>\n```\n\n### Indeterminate checkboxes\n\nNote that `data-indeterminate=\"true\"` is necessary on the input element for initial render, or in a CSS-only mode. Checkboxes that use the Javascript component can modify the `indeterminate` property at runtime.\n\n```html\n<div class=\"mdc-checkbox\">\n  <input type=\"checkbox\"\n         id=\"basic-indeterminate-checkbox\"\n         class=\"mdc-checkbox__native-control\"\n         data-indeterminate=\"true\"/>\n  <div class=\"mdc-checkbox__background\">\n    <svg class=\"mdc-checkbox__checkmark\"\n         viewBox=\"0 0 24 24\">\n      <path class=\"mdc-checkbox__checkmark-path\"\n            fill=\"none\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n    <div class=\"mdc-checkbox__mixedmark\"></div>\n  </div>\n  <div class=\"mdc-checkbox__ripple\"></div>\n  <div class=\"mdc-checkbox__focus-ring\"></div>\n</div>\n<label for=\"basic-indeterminate-checkbox\" id=\"basic-indeterminate-checkbox-label\">This is my indeterminate checkbox</label>\n```\n\n## API\n\n### Sass mixins\n\nMDC Checkbox uses [MDC Theme](../mdc-theme)'s `secondary` color by default for \"marked\" states (i.e., checked or indeterminate).\n\nMixin | Description\n--- | ---\n`container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Sets stroke & fill colors for both marked and unmarked state of enabled checkbox. Set $generate-keyframes to false to prevent the mixin from generating @keyframes.\n`disabled-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color)` | Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n`ink-color($color)` | Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n`disabled-ink-color($color)` | Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n`focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.\n`ripple-size($ripple-size)` | Sets the ripple size of the checkbox.\n`density($density-scale)` | Sets density scale for checkbox, Supported density scales are `-3`, `-2`, `-1`, and `0` (default).\n\nThe ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.\n\n### `MDCCheckbox` properties and methods\n\nProperty Name | Type | Description\n--- | --- | ---\n`checked` | `boolean` | Setter/getter for the checkbox's checked state\n`indeterminate` | `boolean` | Setter/getter for the checkbox's indeterminate state\n`disabled` | `boolean` | Setter/getter for the checkbox's disabled state\n`value` | `string` | Setter/getter for the checkbox's\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCCheckboxAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op.\n`isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise.\n`isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state.\n`isChecked() => boolean` | Returns true if the component is checked.\n`hasNativeControl() => boolean` | Returns true if the input is present in the component.\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled.\n`setNativeControlAttr(attr: string, value: string) => void` | Sets an HTML attribute to the given value on the native input element.\n`removeNativeControlAttr(attr: string) => void` | Removes an attribute from the native input element.\n\n### `MDCCheckboxFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.\n`handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.\n`handleChange() => void` | `change` event handler that should be applied to the checkbox element.\n"
  },
  {
    "path": "packages/mdc-checkbox/_checkbox-custom-properties.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$checked-color: --mdc-checkbox-checked-color;\n$disabled-color: --mdc-checkbox-disabled-color;\n$ink-color: --mdc-checkbox-ink-color;\n$ripple-size: --mdc-checkbox-ripple-size;\n$touch-target-size: --mdc-checkbox-touch-target-size;\n$unchecked-color: --mdc-checkbox-unchecked-color;\n"
  },
  {
    "path": "packages/mdc-checkbox/_checkbox-theme.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as functions2;\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/color-custom-properties';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/shadow-dom';\n@use '@material/touch-target/touch-target';\n@use './checkbox-custom-properties';\n\n$baseline-theme-color: secondary !default;\n$mark-color: theme-color.prop-value(on-secondary) !default;\n$border-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$disabled-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n\n$ripple-size: 40px !default;\n$icon-size: 18px !default;\n$mark-stroke-size: math.div(2, 15) * $icon-size !default;\n$border-width: 2px !default;\n$transition-duration: 90ms !default;\n$item-spacing: 4px !default;\n$focus-indicator-opacity: map.get(\n  ripple-theme.$dark-ink-opacities,\n  focus\n) !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  size: (\n    minimum: $minimum-size,\n    default: $ripple-size,\n    maximum: $maximum-size,\n  ),\n) !default;\n\n$ripple-target: '.mdc-checkbox__ripple';\n$custom-property-prefix: 'checkbox';\n\n// TODO(b/188417756): State layer (ripple) size token is missing including\n//     `state-layer-size`.\n// TODO(b/188529841): `selected-checkmark-color` and `disabled-selected-checkmark-color` does not exist in tokens.\n$light-theme: (\n  disabled-selected-checkmark-color: $mark-color,\n  disabled-selected-icon-color: $disabled-color,\n  disabled-selected-icon-opacity: null,\n  disabled-unselected-icon-color: $disabled-color,\n  disabled-unselected-icon-opacity: null,\n  selected-checkmark-color: $mark-color,\n  selected-focus-icon-color: $baseline-theme-color,\n  selected-focus-state-layer-color: theme-color.$on-surface,\n  selected-focus-state-layer-opacity: 0.12,\n  selected-hover-icon-color: $baseline-theme-color,\n  selected-hover-state-layer-color: $baseline-theme-color,\n  selected-hover-state-layer-opacity:\n    map.get(ripple-theme.$dark-ink-opacities, hover),\n  selected-icon-color: $baseline-theme-color,\n  selected-pressed-icon-color: $baseline-theme-color,\n  selected-pressed-state-layer-color: theme-color.$on-surface,\n  selected-pressed-state-layer-opacity:\n    map.get(ripple-theme.$dark-ink-opacities, pressed),\n  state-layer-size: $ripple-size,\n  unselected-focus-icon-color: $baseline-theme-color,\n  unselected-focus-state-layer-color: theme-color.$on-surface,\n  unselected-focus-state-layer-opacity:\n    map.get(ripple-theme.$dark-ink-opacities, focus),\n  unselected-hover-icon-color: $baseline-theme-color,\n  unselected-hover-state-layer-color: theme-color.$on-surface,\n  unselected-hover-state-layer-opacity:\n    map.get(ripple-theme.$dark-ink-opacities, hover),\n  unselected-icon-color: $border-color,\n  unselected-pressed-icon-color: $border-color,\n  unselected-pressed-state-layer-color: theme-color.$on-surface,\n  unselected-pressed-state-layer-opacity:\n    map.get(ripple-theme.$dark-ink-opacities, pressed),\n);\n\n$forced-colors-theme: (\n  disabled-selected-checkmark-color: ButtonFace,\n  disabled-selected-icon-color: GrayText,\n  disabled-selected-icon-opacity: 1,\n  disabled-unselected-icon-color: GrayText,\n  disabled-unselected-icon-opacity: 1,\n  selected-checkmark-color: ButtonText,\n);\n\n@mixin theme($theme) {\n  // TODO(b/251881053): Replace with `validate-theme`.\n  @include theme.validate-theme-styles($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include disabled-container-colors(\n    $unmarked-stroke-color: map.get($theme, disabled-unselected-icon-color),\n    $marked-fill-color: map.get($theme, disabled-selected-icon-color)\n  );\n\n  @include ink-color(map.get($theme, selected-checkmark-color));\n  @include disabled-ink-color(\n    map.get($theme, disabled-selected-checkmark-color)\n  );\n\n  @include _icon-color(\n    map.get($theme, unselected-icon-color),\n    map.get($theme, selected-icon-color)\n  );\n\n  &:hover {\n    @include _icon-color(\n      map.get($theme, unselected-hover-icon-color),\n      map.get($theme, selected-hover-icon-color)\n    );\n  }\n\n  @include ripple-theme.focus() {\n    @include _icon-color(\n      map.get($theme, unselected-focus-icon-color),\n      map.get($theme, selected-focus-icon-color)\n    );\n  }\n\n  @include ripple-theme.active() {\n    @include _icon-color(\n      map.get($theme, unselected-pressed-icon-color),\n      map.get($theme, selected-pressed-icon-color)\n    );\n  }\n\n  @include ripple-color(\n    $color-map: (\n      hover: map.get($theme, unselected-hover-state-layer-color),\n      press: map.get($theme, unselected-pressed-state-layer-color),\n    ),\n    $opacity-map: (\n      hover: map.get($theme, unselected-hover-state-layer-opacity),\n      focus: map.get($theme, unselected-focus-state-layer-opacity),\n      press: map.get($theme, unselected-pressed-state-layer-opacity),\n    )\n  );\n\n  @include focus-indicator-color(\n    $color: map.get($theme, selected-hover-state-layer-color),\n    $opacity-map: (\n      hover: map.get($theme, selected-hover-state-layer-opacity),\n      focus: map.get($theme, selected-focus-state-layer-opacity),\n      press: map.get($theme, selected-pressed-state-layer-opacity),\n    )\n  );\n\n  @include ripple-size(map.get($theme, state-layer-size));\n  // Set touch target to ripple size.\n  @include touch-target(\n    map.get($theme, state-layer-size),\n    map.get($theme, state-layer-size)\n  );\n}\n\n$light-theme-deprecated: (\n  density-scale: 0,\n  checkmark-color: $mark-color,\n  container-checked-color: $baseline-theme-color,\n  container-checked-hover-color: null,\n  container-disabled-color: $disabled-color,\n  outline-color: $border-color,\n  outline-hover-color: null,\n  ripple-color: theme-color.$on-surface,\n  ripple-opacity: ripple-theme.$dark-ink-opacities,\n  ripple-checked-color: $baseline-theme-color,\n  ripple-checked-opacity: ripple-theme.$dark-ink-opacities,\n);\n\n/// Sets theme to checkbox based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use for theming checkbox.\n@mixin theme-deprecated($theme, $query: feature-targeting.all()) {\n  @include theme.validate-theme($light-theme-deprecated, $theme);\n\n  $ripple-color: map.get($theme, ripple-color);\n  $ripple-opacity: map.get($theme, ripple-opacity);\n  @if $ripple-opacity == null {\n    $ripple-opacity: ();\n  }\n  @if $ripple-color {\n    @include ripple-color(\n      $color: $ripple-color,\n      $opacity-map: $ripple-opacity,\n      $query: $query\n    );\n  }\n\n  $ripple-checked-color: map.get($theme, ripple-checked-color);\n  $ripple-checked-opacity: map.get($theme, ripple-checked-opacity);\n  @if $ripple-checked-opacity == null {\n    $ripple-checked-opacity: ();\n  }\n  @if $ripple-checked-color {\n    @include focus-indicator-color(\n      $color: $ripple-checked-color,\n      $opacity-map: $ripple-checked-opacity,\n      $query: $query\n    );\n  }\n\n  $density-scale: map.get($theme, density-scale);\n  @if $density-scale != null {\n    @include density($density-scale: $density-scale, $query: $query);\n  }\n\n  $outline-color: map.get($theme, outline-color);\n  $container-checked-color: map.get($theme, container-checked-color);\n  @if (\n    ($outline-color and not $container-checked-color) or\n      (not $outline-color and $container-checked-color)\n  ) {\n    @error 'Both `outline-color` and `container-checked-color` keys should be provided.';\n  }\n  @if ($outline-color and $container-checked-color) {\n    @include container-colors(\n      $unmarked-stroke-color: $outline-color,\n      $marked-stroke-color: $container-checked-color,\n      $marked-fill-color: $container-checked-color,\n      $query: $query\n    );\n  }\n\n  $outline-hover-color: map.get($theme, outline-hover-color);\n  $container-checked-hover-color: map.get(\n    $theme,\n    container-checked-hover-color\n  );\n  @if (\n    ($outline-hover-color and not $container-checked-hover-color) or\n      (not $outline-hover-color and $container-checked-hover-color)\n  ) {\n    @error 'Both `outline-hover-color` and `container-checked-hover-color` keys should be provided.';\n  }\n  @if ($outline-hover-color and $container-checked-hover-color) {\n    @include ripple-theme.states-selector() {\n      @include container-colors(\n        $unmarked-stroke-color: $outline-hover-color,\n        $marked-stroke-color: $container-checked-hover-color,\n        $marked-fill-color: $container-checked-hover-color,\n        $query: $query\n      );\n    }\n  }\n\n  $container-disabled-color: map.get($theme, container-disabled-color);\n  @if $container-disabled-color {\n    @include disabled-container-colors(\n      $unmarked-stroke-color: $container-disabled-color,\n      $marked-fill-color: $container-disabled-color,\n      $query: $query\n    );\n  }\n\n  $checkmark-color: map.get($theme, checkmark-color);\n  @if $checkmark-color {\n    @include ink-color($checkmark-color, $query: $query);\n    @include disabled-ink-color($checkmark-color, $query: $query);\n  }\n}\n\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n///     Supported density scale values `-3`, `-2`, `-1`, `0`.\n/// @return Returns ripple size of checkbox for given density scale.\n///\n@function get-ripple-size($density-scale) {\n  @return density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: size\n  );\n}\n\n///\n/// Sets density scale for checkbox.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values\n///     `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $size: get-ripple-size($density-scale);\n\n  @include ripple-size($size, $query: $query);\n  @include touch-target($size, $ripple-size: $size, $query: $query);\n}\n\n/// Sets ripple size of checkbox and optionally set touch target size which can\n/// be more than the size of ripple.\n/// @param {Number} $ripple-size - Visual ripple size of checkbox.\n@mixin ripple-size($ripple-size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if $ripple-size and not custom-properties.is-custom-prop($ripple-size) {\n    $ripple-size: custom-properties.create(\n      checkbox-custom-properties.$ripple-size,\n      $ripple-size\n    );\n  }\n  $checkbox-padding: 'calc((_ripple-size - _icon-size) / 2)';\n  $replace: (\n    _ripple-size: $ripple-size,\n    _icon-size: $icon-size,\n  );\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(padding, $checkbox-padding, $replace: $replace);\n  }\n\n  .mdc-checkbox__background {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(top, $checkbox-padding, $replace: $replace);\n      @include theme.property(left, $checkbox-padding, $replace: $replace);\n    }\n  }\n}\n\n/// Sets the touch target size and appropriate margin to accommodate the\n/// touch target.\n/// @param {Number} $touch-target-size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`.\n@mixin touch-target(\n  $touch-target-size,\n  $ripple-size,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if $touch-target-size {\n    @if not custom-properties.is-custom-prop($touch-target-size) {\n      $touch-target-size: custom-properties.create(\n        checkbox-custom-properties.$touch-target-size,\n        $touch-target-size\n      );\n    }\n\n    $margin: 'calc((_touch-target-size - _ripple-size) / 2)';\n    $replace: (\n      _touch-target-size: $touch-target-size,\n      _ripple-size: $ripple-size,\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(margin, $margin, $replace: $replace);\n    }\n\n    $offset: 'calc((_ripple-size - _touch-target-size) / 2)';\n\n    @include feature-targeting.targets($feat-structure) {\n      .mdc-checkbox__native-control {\n        @include theme.property(top, $offset, $replace: $replace);\n        @include theme.property(right, $offset, $replace: $replace);\n        @include theme.property(left, $offset, $replace: $replace);\n        @include theme.property(width, $touch-target-size);\n        @include theme.property(height, $touch-target-size);\n      }\n    }\n  }\n}\n\n@mixin _icon-color($unselected-color, $selected-color) {\n  @if $unselected-color and $selected-color {\n    @include container-colors(\n      $unmarked-stroke-color: $unselected-color,\n      $marked-stroke-color: $selected-color,\n      $marked-fill-color: $selected-color\n    );\n  } @else if $unselected-color or $selected-color {\n    @error 'Both unselected and selected icon colors should be provided.';\n  }\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of enabled checkbox.\n/// Set $generate-keyframes to false to prevent the mixin from generating @keyframes\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n/// @param {Boolean} $generate-keyframes [true] - Whether animation keyframes should be generated\n///\n@mixin container-colors(\n  $unmarked-stroke-color: $border-color,\n  $unmarked-fill-color: transparent,\n  $marked-stroke-color: $baseline-theme-color,\n  $marked-fill-color: $baseline-theme-color,\n  $generate-keyframes: true,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Unchecked colors\n  @if (\n    $unmarked-stroke-color and not\n      custom-properties.is-custom-prop($unmarked-stroke-color)\n  ) {\n    $unmarked-stroke-color: custom-properties.create(\n      checkbox-custom-properties.$unchecked-color,\n      theme-color.prop-value($unmarked-stroke-color)\n    );\n  }\n\n  @include if-unmarked-enabled_ {\n    @include container-colors_(\n      $unmarked-stroke-color,\n      $unmarked-fill-color,\n      $query: $query\n    );\n  }\n\n  // Checked colors\n  @if (\n    $marked-stroke-color and not\n      custom-properties.is-custom-prop($marked-stroke-color)\n  ) {\n    $marked-stroke-color: custom-properties.create(\n      checkbox-custom-properties.$checked-color,\n      custom-properties.create(\n        color-custom-properties.$secondary,\n        theme-color.prop-value($marked-stroke-color)\n      )\n    );\n  }\n  @if (\n    $marked-fill-color and not\n      custom-properties.is-custom-prop($marked-fill-color)\n  ) {\n    $marked-fill-color: custom-properties.create(\n      checkbox-custom-properties.$checked-color,\n      custom-properties.create(\n        color-custom-properties.$secondary,\n        theme-color.prop-value($marked-fill-color)\n      )\n    );\n  }\n\n  @include if-marked-enabled_ {\n    @include container-colors_(\n      $marked-stroke-color,\n      $marked-fill-color,\n      $query: $query\n    );\n  }\n\n  @if $generate-keyframes and\n    $unmarked-stroke-color and\n    $marked-stroke-color and\n    $unmarked-fill-color and\n    $marked-fill-color\n  {\n    $uid: theme-color.color-hash($unmarked-stroke-color) +\n      theme-color.color-hash($marked-stroke-color) +\n      theme-color.color-hash($unmarked-fill-color) +\n      theme-color.color-hash($marked-fill-color);\n\n    $anim-selector: if(&, '&.mdc-checkbox--anim', '.mdc-checkbox--anim');\n\n    @include feature-targeting.targets($feat-animation, $feat-color) {\n      @include container-keyframes_(\n        $from-stroke-color: $unmarked-stroke-color,\n        $to-stroke-color: $marked-stroke-color,\n        $from-fill-color: $unmarked-fill-color,\n        $to-fill-color: $marked-fill-color,\n        $uid: #{$uid}\n      );\n    }\n\n    #{$anim-selector} {\n      &-unchecked-checked,\n      &-unchecked-indeterminate {\n        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n          @include feature-targeting.targets($feat-animation) {\n            animation-name: mdc-checkbox-fade-in-background-#{$uid};\n          }\n        }\n      }\n\n      &-checked-unchecked,\n      &-indeterminate-unchecked {\n        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n          @include feature-targeting.targets($feat-animation) {\n            animation-name: mdc-checkbox-fade-out-background-#{$uid};\n          }\n        }\n      }\n    }\n  }\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n///\n@mixin disabled-container-colors(\n  $unmarked-stroke-color: $disabled-color,\n  $unmarked-fill-color: transparent,\n  $marked-stroke-color: transparent,\n  $marked-fill-color: $disabled-color,\n  $query: feature-targeting.all()\n) {\n  @if (\n    $unmarked-stroke-color and not\n      custom-properties.is-custom-prop($unmarked-stroke-color)\n  ) {\n    $unmarked-stroke-color: custom-properties.create(\n      checkbox-custom-properties.$disabled-color,\n      theme-color.prop-value($unmarked-stroke-color)\n    );\n  }\n\n  @if $unmarked-stroke-color == null {\n    $unmarked-fill-color: null;\n  }\n\n  @include if-unmarked-disabled_ {\n    @include container-colors_(\n      $unmarked-stroke-color,\n      $unmarked-fill-color,\n      $query: $query\n    );\n  }\n\n  @if (\n    $marked-fill-color and not\n      custom-properties.is-custom-prop($marked-fill-color)\n  ) {\n    $marked-fill-color: custom-properties.create(\n      checkbox-custom-properties.$disabled-color,\n      theme-color.prop-value($marked-fill-color)\n    );\n  }\n\n  @if $marked-fill-color and\n    custom-properties.get-fallback($marked-fill-color) ==\n    GrayText\n  {\n    // Transparent appears white in HCM\n    $marked-stroke-color: GrayText;\n  }\n\n  @if $marked-fill-color == null {\n    $marked-stroke-color: null;\n  }\n\n  @include if-marked-disabled_ {\n    @include container-colors_(\n      $marked-stroke-color,\n      $marked-fill-color,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n/// @param {Color} $color - The desired ink color in enabled state\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @if ($color and not custom-properties.is-custom-prop($color)) {\n    $color: custom-properties.create(\n      checkbox-custom-properties.$ink-color,\n      $color\n    );\n  }\n\n  @include if-enabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n/// @param {Color} $color - The desired ink color in disabled state\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @if ($color and not custom-properties.is-custom-prop($color)) {\n    $color: custom-properties.create(\n      checkbox-custom-properties.$ink-color,\n      $color\n    );\n  }\n\n  @include if-disabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n/// Sets ripple color when checkbox is not in checked state.\n@mixin ripple-color(\n  $color: null,\n  $color-map: null,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  @if $color == null {\n    // deprecated approach - always use 'hover' color.\n    $color: map.get($color-map, hover);\n  }\n\n  @include ripple-theme.states(\n    $color: $color,\n    $opacity-map: $opacity-map,\n    $query: $query,\n    $ripple-target: $ripple-target\n  );\n\n  @if $color-map {\n    @include ripple-theme.states-colors(\n      $color-map: $color-map,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n/// Sets focus indicator color when checkbox is in checked state.\n@mixin focus-indicator-color(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-checkbox--selected {\n    @include ripple-theme.states(\n      $color: $color,\n      $opacity-map: $opacity-map,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n\n  &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {\n    @include ripple-theme.states-base-color(\n      $color: $color,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n//\n// Private\n//\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// enabled state.\n/// @access private\n///\n@mixin if-enabled_ {\n  .mdc-checkbox__native-control:enabled ~ {\n    @content;\n  }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n  .mdc-checkbox__native-control:disabled ~ {\n    @content;\n  }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & enabled state.\n/// @access private\n///\n@mixin if-unmarked-enabled_ {\n  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not(\n      [data-indeterminate='true']\n    )\n    ~ {\n    @content;\n  }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & disabled state.\n/// @access private\n///\n@mixin if-unmarked-disabled_ {\n  // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n  // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n  .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not(\n      [data-indeterminate='true']\n    )\n    ~ {\n    @content;\n  }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & enabled state.\n/// @access private\n///\n@mixin if-marked-enabled_ {\n  .mdc-checkbox__native-control:enabled:checked,\n  .mdc-checkbox__native-control:enabled:indeterminate,\n  .mdc-checkbox__native-control[data-indeterminate='true']:enabled {\n    ~ {\n      @content;\n    }\n  }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & disabled state.\n/// @access private\n///\n@mixin if-marked-disabled_ {\n  // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n  // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n  .mdc-checkbox__native-control[disabled]:checked,\n  .mdc-checkbox__native-control[disabled]:indeterminate,\n  .mdc-checkbox__native-control[data-indeterminate='true'][disabled] {\n    ~ {\n      @content;\n    }\n  }\n}\n\n///\n/// Sets the stroke & fill colors for the checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked-enabled_`.\n/// @access private\n///\n@mixin container-colors_(\n  $stroke-color,\n  $fill-color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-checkbox__background {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $stroke-color);\n      @include theme.property(background-color, $fill-color);\n    }\n  }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked_`.\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-checkbox__background {\n    .mdc-checkbox__checkmark {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n\n    .mdc-checkbox__mixedmark {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(border-color, $color);\n      }\n    }\n  }\n}\n\n@mixin container-keyframes_(\n  $from-stroke-color,\n  $to-stroke-color,\n  $from-fill-color,\n  $to-fill-color,\n  $uid\n) {\n  @keyframes mdc-checkbox-fade-in-background-#{$uid} {\n    0% {\n      @include theme.property(border-color, $from-stroke-color);\n      @include theme.property(background-color, $from-fill-color);\n    }\n\n    50% {\n      @include theme.property(border-color, $to-stroke-color);\n      @include theme.property(background-color, $to-fill-color);\n    }\n  }\n\n  @keyframes mdc-checkbox-fade-out-background-#{$uid} {\n    0%,\n    80% {\n      @include theme.property(border-color, $to-stroke-color);\n      @include theme.property(background-color, $to-fill-color);\n    }\n\n    100% {\n      @include theme.property(border-color, $from-stroke-color);\n      @include theme.property(background-color, $from-fill-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/_checkbox.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/rtl/rtl';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/theme/theme-color';\n@use './checkbox-custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/color-custom-properties';\n@use '@material/theme/custom-properties';\n@use '@material/touch-target/variables' as touch-target-variables;\n@use './checkbox-theme';\n\n///\n/// Checkbox and ripple styles.\n///\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple-styles($query);\n}\n\n/// Checkbox styles (Excluding ripple styles).\n///\n/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n// TODO(b/162887560): Rename to `checkbox-without-ripple-styles()`\n@mixin without-ripple($query: feature-targeting.all()) {\n  // TODO(b/165005345): Include theme-styles() after static-styles().\n  @include theme-styles($query: $query);\n  @include static-styles($query: $query);\n}\n\n/// Checkbox static styles.\n/// Checkbox styles that are not customizable should go here.\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n  @include feature-targeting.targets($feat-animation) {\n    @include mark-keyframes_;\n  }\n\n  .mdc-checkbox {\n    @include feature-targeting.targets($feat-structure) {\n      @include base_;\n    }\n\n    @include ripple-theme.focus {\n      .mdc-checkbox__focus-ring {\n        @include focus-ring.focus-ring(\n          $query: $query,\n          $container-outer-padding-vertical: 0,\n          $container-outer-padding-horizontal: 0\n        );\n      }\n    }\n\n    // Turn off focus ring for IE when HCM is turn off. For some reason this\n    // adds space to the bottom on the focused checkbox inside a dialog.\n    @media all and (-ms-high-contrast: none) {\n      .mdc-checkbox__focus-ring {\n        display: none;\n      }\n    }\n  }\n\n  @include dom.forced-colors-mode {\n    .mdc-checkbox__mixedmark {\n      @include feature-targeting.targets($feat-structure) {\n        margin: 0 1px; // Extra horizontal space around mixedmark symbol.\n      }\n    }\n  }\n\n  // Needed to disable hover effects on CSS-only (non-JS) checkboxes\n  .mdc-checkbox--disabled {\n    @include feature-targeting.targets($feat-structure) {\n      @include disabled_;\n    }\n  }\n\n  .mdc-checkbox__background {\n    @include background_($query);\n  }\n\n  .mdc-checkbox__checkmark {\n    @include checkmark_($query);\n  }\n\n  .mdc-checkbox__checkmark-path {\n    @include checkmark-path_($query);\n  }\n\n  .mdc-checkbox__mixedmark {\n    @include mixedmark_($query);\n  }\n\n  .mdc-checkbox--anim {\n    @include feature-targeting.targets($feat-animation) {\n      @include anim_;\n    }\n  }\n\n  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control[data-indeterminate='true']\n    ~ .mdc-checkbox__background {\n    @include feature-targeting.targets($feat-animation) {\n      @include background--marked_;\n    }\n\n    .mdc-checkbox__checkmark-path {\n      @include feature-targeting.targets($feat-structure) {\n        @include checkmark-path--marked_;\n      }\n    }\n  }\n\n  .mdc-checkbox__native-control {\n    @include feature-targeting.targets($feat-structure) {\n      @include native-control_;\n    }\n\n    &:disabled {\n      @include feature-targeting.targets($feat-structure) {\n        @include disabled_;\n      }\n    }\n  }\n\n  .mdc-checkbox--touch {\n    @include checkbox-theme.touch-target(\n      custom-properties.create(\n        checkbox-state-layer-size,\n        touch-target-variables.$height\n      ),\n      custom-properties.create(\n        checkbox-state-layer-size,\n        checkbox-theme.$ripple-size\n      ),\n      $query: $query\n    );\n  }\n\n  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {\n    .mdc-checkbox__checkmark {\n      @include checkmark--checked_($query);\n    }\n\n    .mdc-checkbox__mixedmark {\n      @include feature-targeting.targets($feat-structure) {\n        @include mixedmark--checked_;\n      }\n    }\n  }\n  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control[data-indeterminate='true']\n    ~ .mdc-checkbox__background {\n    .mdc-checkbox__checkmark {\n      @include checkmark--indeterminate_($query);\n    }\n\n    .mdc-checkbox__mixedmark {\n      @include feature-targeting.targets($feat-structure) {\n        @include mixedmark--indeterminate_;\n      }\n    }\n  }\n\n  // JS checkbox\n  .mdc-checkbox.mdc-checkbox--upgraded {\n    .mdc-checkbox__background,\n    .mdc-checkbox__checkmark,\n    .mdc-checkbox__checkmark-path,\n    .mdc-checkbox__mixedmark {\n      @include feature-targeting.targets($feat-animation) {\n        @include child--upgraded_;\n      }\n    }\n  }\n}\n\n/// Checkbox theme styles.\n/// Checkbox styles that are customizable should go here.\n@mixin theme-styles($query: feature-targeting.all()) {\n  .mdc-checkbox {\n    @include checkbox-theme.theme-deprecated(\n      checkbox-theme.$light-theme-deprecated,\n      $query: $query\n    );\n  }\n}\n\n/// Checkbox's ripple styles.\n///\n/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n@mixin ripple-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-checkbox {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: checkbox-theme.$ripple-target\n    );\n    @include ripple.radius-unbounded(\n      $query: $query,\n      $ripple-target: checkbox-theme.$ripple-target\n    );\n    @include ripple-theme.behind-content(\n      checkbox-theme.$ripple-target,\n      $query: $query\n    );\n  }\n\n  #{checkbox-theme.$ripple-target} {\n    @include ripple.target-common($query: $query);\n  }\n}\n\n@mixin base_ {\n  display: inline-block;\n  &[hidden] {\n    display: none;\n  }\n  position: relative;\n  flex: 0 0 checkbox-theme.$icon-size;\n  box-sizing: content-box;\n  width: checkbox-theme.$icon-size;\n  height: checkbox-theme.$icon-size;\n  line-height: 0;\n  white-space: nowrap;\n  cursor: pointer;\n  vertical-align: bottom;\n}\n\n@mixin disabled_ {\n  cursor: default;\n  pointer-events: none;\n}\n\n@mixin child--upgraded_ {\n  transition: none;\n}\n\n// Animation\n\n@mixin anim_ {\n  $mdc-checkbox-indeterminate-change-duration_: 500ms;\n\n  // stylelint-disable no-unknown-animations -- allow unknown animations\n\n  &-unchecked-checked,\n  &-unchecked-indeterminate,\n  &-checked-unchecked,\n  &-indeterminate-unchecked {\n    .mdc-checkbox__background {\n      animation-duration: checkbox-theme.$transition-duration * 2;\n      animation-timing-function: linear;\n    }\n  }\n\n  &-unchecked-checked {\n    .mdc-checkbox__checkmark-path {\n      // Instead of delaying the animation, we simply multiply its length by 2 and begin the\n      // animation at 50% in order to prevent a flash of styles applied to a checked checkmark\n      // as the background is fading in before the animation begins.\n      animation: mdc-checkbox-unchecked-checked-checkmark-path\n        checkbox-theme.$transition-duration * 2 linear 0s;\n      transition: none;\n    }\n  }\n\n  &-unchecked-indeterminate {\n    .mdc-checkbox__mixedmark {\n      animation: mdc-checkbox-unchecked-indeterminate-mixedmark\n        checkbox-theme.$transition-duration linear 0s;\n      transition: none;\n    }\n  }\n\n  &-checked-unchecked {\n    .mdc-checkbox__checkmark-path {\n      animation: mdc-checkbox-checked-unchecked-checkmark-path\n        checkbox-theme.$transition-duration linear 0s;\n      transition: none;\n    }\n  }\n\n  &-checked-indeterminate {\n    .mdc-checkbox__checkmark {\n      animation: mdc-checkbox-checked-indeterminate-checkmark\n        checkbox-theme.$transition-duration linear 0s;\n      transition: none;\n    }\n\n    .mdc-checkbox__mixedmark {\n      animation: mdc-checkbox-checked-indeterminate-mixedmark\n        checkbox-theme.$transition-duration linear 0s;\n      transition: none;\n    }\n  }\n\n  &-indeterminate-checked {\n    .mdc-checkbox__checkmark {\n      animation: mdc-checkbox-indeterminate-checked-checkmark\n        $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n      transition: none;\n    }\n\n    .mdc-checkbox__mixedmark {\n      animation: mdc-checkbox-indeterminate-checked-mixedmark\n        $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n      transition: none;\n    }\n  }\n\n  &-indeterminate-unchecked {\n    .mdc-checkbox__mixedmark {\n      animation: mdc-checkbox-indeterminate-unchecked-mixedmark\n        $mdc-checkbox-indeterminate-change-duration_ * 0.6 linear 0s;\n      transition: none;\n    }\n  }\n\n  // stylelint-enable no-unknown-animations\n}\n\n@mixin background_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: inline-flex;\n    position: absolute;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: checkbox-theme.$icon-size;\n    height: checkbox-theme.$icon-size;\n    // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin\n    border: checkbox-theme.$border-width solid currentColor;\n    border-radius: 2px;\n    background-color: transparent;\n    pointer-events: none;\n    will-change: background-color, border-color;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-exit(background-color), transition-exit(border-color);\n  }\n}\n\n@mixin background--marked_ {\n  transition: transition-enter(border-color), transition-enter(background-color);\n}\n\n// stylelint-disable block-no-empty -- For backward compatibility.\n@mixin focus-indicator_($query: feature-targeting.all()) {\n}\n@mixin focus-indicator--focused_($query: feature-targeting.all()) {\n}\n// stylelint-enable block-no-empty\n\n// Native input\n\n@mixin native-control_ {\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: inherit;\n}\n\n// Check mark\n\n@mixin checkmark_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    opacity: 0;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-exit(\n      opacity,\n      0ms,\n      checkbox-theme.$transition-duration * 2\n    );\n  }\n\n  .mdc-checkbox--upgraded & {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin checkmark--checked_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-enter(\n        opacity,\n        0ms,\n        checkbox-theme.$transition-duration * 2\n      ),\n      transition-enter(transform, 0ms, checkbox-theme.$transition-duration * 2);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin checkmark--indeterminate_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    transform: rotate(45deg);\n    opacity: 0;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-exit(\n        opacity,\n        0ms,\n        checkbox-theme.$transition-duration\n      ),\n      transition-exit(transform, 0ms, checkbox-theme.$transition-duration);\n  }\n}\n\n// Check mark path\n\n@mixin checkmark-path_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-exit(\n      stroke-dashoffset,\n      0ms,\n      checkbox-theme.$transition-duration * 2\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    stroke: currentColor;\n    stroke-width: checkbox-theme.$mark-stroke-size * 1.3;\n    stroke-dashoffset: $mark-path-length_;\n    stroke-dasharray: $mark-path-length_;\n  }\n}\n\n@mixin checkmark-path--marked_ {\n  stroke-dashoffset: 0;\n}\n\n// Mixed mark\n\n@mixin mixedmark_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: 100%;\n    height: 0;\n    @include rtl.ignore-next-line();\n    transform: scaleX(0) rotate(0deg);\n    border-width: math.div(math.floor(checkbox-theme.$mark-stroke-size), 2);\n    border-style: solid;\n    opacity: 0;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: transition-exit(opacity), transition-exit(transform);\n  }\n}\n\n@mixin mixedmark--checked_ {\n  @include rtl.ignore-next-line();\n  transform: scaleX(1) rotate(-45deg);\n}\n\n@mixin mixedmark--indeterminate_ {\n  @include rtl.ignore-next-line();\n  transform: scaleX(1) rotate(0deg);\n  opacity: 1;\n}\n\n@function transition-enter(\n  $property,\n  $delay: 0ms,\n  $duration: checkbox-theme.$transition-duration\n) {\n  @return functions2.enter($property, $duration, $delay);\n}\n\n@function transition-exit(\n  $property,\n  $delay: 0ms,\n  $duration: checkbox-theme.$transition-duration\n) {\n  @return functions2.exit-temporary($property, $duration, $delay);\n}\n\n// Manual calculation done on SVG\n$mark-path-length_: 29.7833385 !default;\n$indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;\n\n@mixin mark-keyframes_ {\n  @keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n    0%,\n    50% {\n      stroke-dashoffset: $mark-path-length_;\n    }\n\n    50% {\n      animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {\n    0%,\n    68.2% {\n      transform: scaleX(0);\n    }\n\n    68.2% {\n      animation-timing-function: cubic-bezier(0, 0, 0, 1);\n    }\n\n    100% {\n      transform: scaleX(1);\n    }\n  }\n\n  @keyframes mdc-checkbox-checked-unchecked-checkmark-path {\n    from {\n      animation-timing-function: animation-variables.$acceleration-curve-timing-function;\n      opacity: 1;\n      stroke-dashoffset: 0;\n    }\n\n    to {\n      opacity: 0;\n      stroke-dashoffset: $mark-path-length_ * -1;\n    }\n  }\n\n  @keyframes mdc-checkbox-checked-indeterminate-checkmark {\n    from {\n      animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n      @include rtl.ignore-next-line();\n      transform: rotate(0deg);\n      opacity: 1;\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n  }\n\n  @keyframes mdc-checkbox-indeterminate-checked-checkmark {\n    from {\n      animation-timing-function: $indeterminate-checked-easing-function_;\n      @include rtl.ignore-next-line();\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(360deg);\n      opacity: 1;\n    }\n  }\n\n  @keyframes mdc-checkbox-checked-indeterminate-mixedmark {\n    from {\n      animation-timing-function: mdc-animation-deceleration-curve-timing-function;\n      @include rtl.ignore-next-line();\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(0deg);\n      opacity: 1;\n    }\n  }\n\n  @keyframes mdc-checkbox-indeterminate-checked-mixedmark {\n    from {\n      animation-timing-function: $indeterminate-checked-easing-function_;\n      @include rtl.ignore-next-line();\n      transform: rotate(0deg);\n      opacity: 1;\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(315deg);\n      opacity: 0;\n    }\n  }\n\n  @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {\n    0% {\n      animation-timing-function: linear;\n      transform: scaleX(1);\n      opacity: 1;\n    }\n\n    32.8%,\n    100% {\n      transform: scaleX(0);\n      opacity: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/_functions.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-, mdc-states-opacity, mdc-states-opacities-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-keyframes-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"./index\" as mdc-checkbox-* hide $mdc-checkbox-ripple-target, mdc-checkbox-core-styles, mdc-checkbox-without-ripple, mdc-checkbox-ripple, mdc-checkbox-density, mdc-checkbox-ripple-size, mdc-checkbox-container-colors, mdc-checkbox-disabled-container-colors, mdc-checkbox-ink-color, mdc-checkbox-disabled-ink-color, mdc-checkbox-focus-indicator-color, mdc-checkbox-touch-target, mdc-checkbox-base-, mdc-checkbox-disabled-, mdc-checkbox-child--upgraded-, mdc-checkbox-anim-, mdc-checkbox-if-enabled-, mdc-checkbox-if-disabled-, mdc-checkbox-if-unmarked-enabled-, mdc-checkbox-if-unmarked-disabled-, mdc-checkbox-if-marked-enabled-, mdc-checkbox-if-marked-disabled-, mdc-checkbox-background-, mdc-checkbox-background--marked-, mdc-checkbox-container-colors-, mdc-checkbox-focus-indicator-, mdc-checkbox-focus-indicator--focused-, mdc-checkbox-native-control-, mdc-checkbox-checkmark-, mdc-checkbox-checkmark--checked-, mdc-checkbox-checkmark--indeterminate-, mdc-checkbox-ink-color-, mdc-checkbox-checkmark-path-, mdc-checkbox-checkmark-path--marked-, mdc-checkbox-mixedmark-, mdc-checkbox-mixedmark--checked-, mdc-checkbox-mixedmark--indeterminate-, mdc-checkbox-touch-target-reset-, mdc-checkbox-container-keyframes-, mdc-checkbox-mark-keyframes-;\n"
  },
  {
    "path": "packages/mdc-checkbox/_functions.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_checkbox.scss' instead.\n@forward './checkbox' show transition-enter, transition-exit;\n"
  },
  {
    "path": "packages/mdc-checkbox/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./keyframes\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-checkbox/_keyframes.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-, mdc-states-opacity, mdc-states-opacities-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-keyframes-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"./index\" as mdc-checkbox-* hide $mdc-checkbox-ripple-target, mdc-checkbox-core-styles, mdc-checkbox-without-ripple, mdc-checkbox-ripple, mdc-checkbox-density, mdc-checkbox-ripple-size, mdc-checkbox-container-colors, mdc-checkbox-disabled-container-colors, mdc-checkbox-ink-color, mdc-checkbox-disabled-ink-color, mdc-checkbox-focus-indicator-color, mdc-checkbox-touch-target, mdc-checkbox-base-, mdc-checkbox-disabled-, mdc-checkbox-child--upgraded-, mdc-checkbox-anim-, mdc-checkbox-if-enabled-, mdc-checkbox-if-disabled-, mdc-checkbox-if-unmarked-enabled-, mdc-checkbox-if-unmarked-disabled-, mdc-checkbox-if-marked-enabled-, mdc-checkbox-if-marked-disabled-, mdc-checkbox-background-, mdc-checkbox-background--marked-, mdc-checkbox-container-colors-, mdc-checkbox-focus-indicator-, mdc-checkbox-focus-indicator--focused-, mdc-checkbox-native-control-, mdc-checkbox-checkmark-, mdc-checkbox-checkmark--checked-, mdc-checkbox-checkmark--indeterminate-, mdc-checkbox-ink-color-, mdc-checkbox-checkmark-path-, mdc-checkbox-checkmark-path--marked-, mdc-checkbox-mixedmark-, mdc-checkbox-mixedmark--checked-, mdc-checkbox-mixedmark--indeterminate-, mdc-checkbox-touch-target-reset-, mdc-checkbox-transition-enter, mdc-checkbox-transition-exit;\n"
  },
  {
    "path": "packages/mdc-checkbox/_keyframes.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_checkbox.scss' or '_checkbox-theme.scss' instead.\n@forward './checkbox' show mark-keyframes_;\n@forward './checkbox-theme' show container-keyframes_;\n"
  },
  {
    "path": "packages/mdc-checkbox/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"./index\" as mdc-checkbox-*;\n"
  },
  {
    "path": "packages/mdc-checkbox/_mixins.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_checkbox.scss' or '_checkbox-theme.scss' instead.\n@forward './checkbox' show core-styles, without-ripple, ripple-styles, base_, disabled_, child--upgraded_, anim_, background_, background--marked_, focus-indicator_, focus-indicator--focused_, native-control_, checkmark_, checkmark--checked_, checkmark--indeterminate_, checkmark-path_, checkmark-path--marked_, mixedmark_, mixedmark--checked_, mixedmark--indeterminate_;\n@forward './checkbox-theme' show $ripple-target, density, ripple-size, container-colors, disabled-container-colors, ink-color, disabled-ink-color, focus-indicator-color, touch-target, if-enabled_, if-disabled_, if-unmarked-enabled_, if-unmarked-disabled_, if-marked-enabled_, if-marked-disabled_, container-colors_, ink-color_, touch-target-reset_;\n"
  },
  {
    "path": "packages/mdc-checkbox/_variables.import.scss",
    "content": "@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-, mdc-states-opacity, mdc-states-opacities-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-keyframes-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"./index\" as mdc-checkbox-* hide $mdc-checkbox-ripple-target, mdc-checkbox-core-styles, mdc-checkbox-without-ripple, mdc-checkbox-ripple, mdc-checkbox-density, mdc-checkbox-ripple-size, mdc-checkbox-container-colors, mdc-checkbox-disabled-container-colors, mdc-checkbox-ink-color, mdc-checkbox-disabled-ink-color, mdc-checkbox-focus-indicator-color, mdc-checkbox-touch-target, mdc-checkbox-base-, mdc-checkbox-disabled-, mdc-checkbox-child--upgraded-, mdc-checkbox-anim-, mdc-checkbox-if-enabled-, mdc-checkbox-if-disabled-, mdc-checkbox-if-unmarked-enabled-, mdc-checkbox-if-unmarked-disabled-, mdc-checkbox-if-marked-enabled-, mdc-checkbox-if-marked-disabled-, mdc-checkbox-background-, mdc-checkbox-background--marked-, mdc-checkbox-container-colors-, mdc-checkbox-focus-indicator-, mdc-checkbox-focus-indicator--focused-, mdc-checkbox-native-control-, mdc-checkbox-checkmark-, mdc-checkbox-checkmark--checked-, mdc-checkbox-checkmark--indeterminate-, mdc-checkbox-ink-color-, mdc-checkbox-checkmark-path-, mdc-checkbox-checkmark-path--marked-, mdc-checkbox-mixedmark-, mdc-checkbox-mixedmark--checked-, mdc-checkbox-mixedmark--indeterminate-, mdc-checkbox-touch-target-reset-, mdc-checkbox-container-keyframes-, mdc-checkbox-mark-keyframes-, mdc-checkbox-transition-enter, mdc-checkbox-transition-exit;\n"
  },
  {
    "path": "packages/mdc-checkbox/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_checkbox.scss' or '_checkbox-theme.scss' instead.\n@forward './checkbox' show $mark-path-length_, $indeterminate-checked-easing-function_;\n@forward './checkbox-theme' show $baseline-theme-color, $mark-color, $border-color, $disabled-color, $ripple-size, $icon-size, $mark-stroke-size, $border-width, $transition-duration, $item-spacing, $focus-indicator-opacity, $minimum-size, $maximum-size, $density-scale, $density-config;\n"
  },
  {
    "path": "packages/mdc-checkbox/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCCheckboxAdapter {\n  addClass(className: string): void;\n  forceLayout(): void;\n  hasNativeControl(): boolean;\n  isAttachedToDOM(): boolean;\n  isChecked(): boolean;\n  isIndeterminate(): boolean;\n  removeClass(className: string): void;\n  removeNativeControlAttr(attr: string): void;\n  setNativeControlAttr(attr: string, value: string): void;\n  setNativeControlDisabled(disabled: boolean): void;\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {getCorrectEventName} from '@material/animation/util';\nimport {MDCComponent} from '@material/base/component';\nimport {applyPassive} from '@material/dom/events';\nimport {matches} from '@material/dom/ponyfill';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCCheckboxAdapter} from './adapter';\nimport {strings} from './constants';\nimport {MDCCheckboxFoundation} from './foundation';\n\nconst CB_PROTO_PROPS = ['checked', 'indeterminate'];\n\n/** MDC Checkbox Factory */\nexport type MDCCheckboxFactory =\n    (el: HTMLElement, foundation?: MDCCheckboxFoundation) => MDCCheckbox;\n\n/** MDC Checkbox */\nexport class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements\n    MDCRippleCapableSurface {\n  static override attachTo(root: HTMLElement) {\n    return new MDCCheckbox(root);\n  }\n\n  get ripple(): MDCRipple {\n    return this.rippleSurface;\n  }\n\n  get checked(): boolean {\n    return this.getNativeControl().checked;\n  }\n\n  set checked(checked: boolean) {\n    this.getNativeControl().checked = checked;\n  }\n\n  get indeterminate(): boolean {\n    return this.getNativeControl().indeterminate;\n  }\n\n  set indeterminate(indeterminate: boolean) {\n    this.getNativeControl().indeterminate = indeterminate;\n  }\n\n  get disabled(): boolean {\n    return this.getNativeControl().disabled;\n  }\n\n  set disabled(disabled: boolean) {\n    this.foundation.setDisabled(disabled);\n  }\n\n  get value(): string {\n    return this.getNativeControl().value;\n  }\n\n  set value(value: string) {\n    this.getNativeControl().value = value;\n  }\n\n  private readonly rippleSurface: MDCRipple = this.createRipple();\n  private handleChange!: EventListener;  // assigned in initialSyncWithDOM()\n  private handleAnimationEnd!:\n      EventListener;  // assigned in initialSyncWithDOM()\n\n  override initialize() {\n    const {DATA_INDETERMINATE_ATTR} = strings;\n    this.getNativeControl().indeterminate =\n        this.getNativeControl().getAttribute(DATA_INDETERMINATE_ATTR) ===\n        'true';\n    this.getNativeControl().removeAttribute(DATA_INDETERMINATE_ATTR);\n  }\n\n  override initialSyncWithDOM() {\n    this.handleChange = () => {\n      this.foundation.handleChange();\n    };\n    this.handleAnimationEnd = () => {\n      this.foundation.handleAnimationEnd();\n    };\n    this.getNativeControl().addEventListener('change', this.handleChange);\n    this.listen(\n        getCorrectEventName(window, 'animationend'), this.handleAnimationEnd);\n    this.installPropertyChangeHooks();\n  }\n\n  override destroy() {\n    this.rippleSurface.destroy();\n    this.getNativeControl().removeEventListener('change', this.handleChange);\n    this.unlisten(\n        getCorrectEventName(window, 'animationend'), this.handleAnimationEnd);\n    this.uninstallPropertyChangeHooks();\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCCheckboxAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      forceLayout: () => this.root.offsetWidth,\n      hasNativeControl: () => !!this.getNativeControl(),\n      isAttachedToDOM: () => Boolean(this.root.parentNode),\n      isChecked: () => this.checked,\n      isIndeterminate: () => this.indeterminate,\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      removeNativeControlAttr: (attr) => {\n        this.getNativeControl().removeAttribute(attr);\n      },\n      setNativeControlAttr: (attr, value) => {\n        this.safeSetAttribute(this.getNativeControl(), attr, value);\n      },\n      setNativeControlDisabled: (disabled) => {\n        this.getNativeControl().disabled = disabled;\n      },\n    };\n    return new MDCCheckboxFoundation(adapter);\n  }\n\n  private createRipple(): MDCRipple {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.getNativeControl().removeEventListener(\n            eventType, handler, applyPassive());\n      },\n      isSurfaceActive: () => matches(this.getNativeControl(), ':active'),\n      isUnbounded: () => true,\n      registerInteractionHandler: (eventType, handler) => {\n        this.getNativeControl().addEventListener(\n            eventType, handler, applyPassive());\n      },\n    };\n    return new MDCRipple(this.root, new MDCRippleFoundation(adapter));\n  }\n\n  private installPropertyChangeHooks() {\n    const nativeCb = this.getNativeControl();\n    const cbProto = Object.getPrototypeOf(nativeCb);\n\n    for (const controlState of CB_PROTO_PROPS) {\n      const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);\n      // We have to check for this descriptor, since some browsers (Safari)\n      // don't support its return. See:\n      // https://bugs.webkit.org/show_bug.cgi?id=49739\n      if (!validDescriptor(desc)) {\n        return;\n      }\n\n      const nativeGetter = desc.get;\n\n      const nativeCbDesc = {\n        configurable: desc.configurable,\n        enumerable: desc.enumerable,\n        get: nativeGetter,\n        set: (state: boolean) => {\n          desc.set!.call(nativeCb, state);\n          this.foundation.handleChange();\n        },\n      };\n      Object.defineProperty(nativeCb, controlState, nativeCbDesc);\n    }\n  }\n\n  private uninstallPropertyChangeHooks() {\n    const nativeCb = this.getNativeControl();\n    const cbProto = Object.getPrototypeOf(nativeCb);\n\n    for (const controlState of CB_PROTO_PROPS) {\n      const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);\n      if (!validDescriptor(desc)) {\n        return;\n      }\n      Object.defineProperty(nativeCb, controlState, desc);\n    }\n  }\n\n  private getNativeControl(): HTMLInputElement {\n    const {NATIVE_CONTROL_SELECTOR} = strings;\n    const el =\n        this.root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR);\n    if (!el) {\n      throw new Error(\n          `Checkbox component requires a ${NATIVE_CONTROL_SELECTOR} element`);\n    }\n    return el;\n  }\n}\n\nfunction validDescriptor(inputPropDesc: PropertyDescriptor|\n                         undefined): inputPropDesc is PropertyDescriptor {\n  return !!inputPropDesc && typeof inputPropDesc.set === 'function';\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  ANIM_CHECKED_INDETERMINATE: 'mdc-checkbox--anim-checked-indeterminate',\n  ANIM_CHECKED_UNCHECKED: 'mdc-checkbox--anim-checked-unchecked',\n  ANIM_INDETERMINATE_CHECKED: 'mdc-checkbox--anim-indeterminate-checked',\n  ANIM_INDETERMINATE_UNCHECKED: 'mdc-checkbox--anim-indeterminate-unchecked',\n  ANIM_UNCHECKED_CHECKED: 'mdc-checkbox--anim-unchecked-checked',\n  ANIM_UNCHECKED_INDETERMINATE: 'mdc-checkbox--anim-unchecked-indeterminate',\n  BACKGROUND: 'mdc-checkbox__background',\n  CHECKED: 'mdc-checkbox--checked',\n  CHECKMARK: 'mdc-checkbox__checkmark',\n  CHECKMARK_PATH: 'mdc-checkbox__checkmark-path',\n  DISABLED: 'mdc-checkbox--disabled',\n  INDETERMINATE: 'mdc-checkbox--indeterminate',\n  MIXEDMARK: 'mdc-checkbox__mixedmark',\n  NATIVE_CONTROL: 'mdc-checkbox__native-control',\n  ROOT: 'mdc-checkbox',\n  SELECTED: 'mdc-checkbox--selected',\n  UPGRADED: 'mdc-checkbox--upgraded',\n};\n\nexport const strings = {\n  ARIA_CHECKED_ATTR: 'aria-checked',\n  ARIA_CHECKED_INDETERMINATE_VALUE: 'mixed',\n  DATA_INDETERMINATE_ATTR: 'data-indeterminate',\n  NATIVE_CONTROL_SELECTOR: '.mdc-checkbox__native-control',\n  TRANSITION_STATE_CHECKED: 'checked',\n  TRANSITION_STATE_INDETERMINATE: 'indeterminate',\n  TRANSITION_STATE_INIT: 'init',\n  TRANSITION_STATE_UNCHECKED: 'unchecked',\n};\n\nexport const numbers = {\n  ANIM_END_LATCH_MS: 250,\n};\n"
  },
  {
    "path": "packages/mdc-checkbox/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCCheckboxAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\n\n/** MDC Checkbox Foundation */\nexport class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCCheckboxAdapter {\n    return {\n      addClass: () => undefined,\n      forceLayout: () => undefined,\n      hasNativeControl: () => false,\n      isAttachedToDOM: () => false,\n      isChecked: () => false,\n      isIndeterminate: () => false,\n      removeClass: () => undefined,\n      removeNativeControlAttr: () => undefined,\n      setNativeControlAttr: () => undefined,\n      setNativeControlDisabled: () => undefined,\n    };\n  }\n\n  private currentCheckState = strings.TRANSITION_STATE_INIT;\n  private currentAnimationClass = '';\n  private animEndLatchTimer = 0;\n  private enableAnimationEndHandler = false;\n\n  constructor(adapter?: Partial<MDCCheckboxAdapter>) {\n    super({...MDCCheckboxFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    this.currentCheckState = this.determineCheckState();\n    this.updateAriaChecked();\n    this.adapter.addClass(cssClasses.UPGRADED);\n  }\n\n  override destroy() {\n    clearTimeout(this.animEndLatchTimer);\n  }\n\n  setDisabled(disabled: boolean) {\n    this.adapter.setNativeControlDisabled(disabled);\n    if (disabled) {\n      this.adapter.addClass(cssClasses.DISABLED);\n    } else {\n      this.adapter.removeClass(cssClasses.DISABLED);\n    }\n  }\n\n  /**\n   * Handles the animationend event for the checkbox\n   */\n  handleAnimationEnd() {\n    if (!this.enableAnimationEndHandler) {\n      return;\n    }\n\n    clearTimeout(this.animEndLatchTimer);\n\n    this.animEndLatchTimer = setTimeout(() => {\n      this.adapter.removeClass(this.currentAnimationClass);\n      this.enableAnimationEndHandler = false;\n    }, numbers.ANIM_END_LATCH_MS);\n  }\n\n  /**\n   * Handles the change event for the checkbox\n   */\n  handleChange() {\n    this.transitionCheckState();\n  }\n\n  private transitionCheckState() {\n    if (!this.adapter.hasNativeControl()) {\n      return;\n    }\n    const oldState = this.currentCheckState;\n    const newState = this.determineCheckState();\n\n    if (oldState === newState) {\n      return;\n    }\n\n    this.updateAriaChecked();\n\n    const {TRANSITION_STATE_UNCHECKED} = strings;\n    const {SELECTED} = cssClasses;\n    if (newState === TRANSITION_STATE_UNCHECKED) {\n      this.adapter.removeClass(SELECTED);\n    } else {\n      this.adapter.addClass(SELECTED);\n    }\n\n    // Check to ensure that there isn't a previously existing animation class,\n    // in case for example the user interacted with the checkbox before the\n    // animation was finished.\n    if (this.currentAnimationClass.length > 0) {\n      clearTimeout(this.animEndLatchTimer);\n      this.adapter.forceLayout();\n      this.adapter.removeClass(this.currentAnimationClass);\n    }\n\n    this.currentAnimationClass =\n        this.getTransitionAnimationClass(oldState, newState);\n    this.currentCheckState = newState;\n\n    // Check for parentNode so that animations are only run when the element is\n    // attached to the DOM.\n    if (this.adapter.isAttachedToDOM() &&\n        this.currentAnimationClass.length > 0) {\n      this.adapter.addClass(this.currentAnimationClass);\n      this.enableAnimationEndHandler = true;\n    }\n  }\n\n  private determineCheckState(): string {\n    const {\n      TRANSITION_STATE_INDETERMINATE,\n      TRANSITION_STATE_CHECKED,\n      TRANSITION_STATE_UNCHECKED,\n    } = strings;\n\n    if (this.adapter.isIndeterminate()) {\n      return TRANSITION_STATE_INDETERMINATE;\n    }\n    return this.adapter.isChecked() ? TRANSITION_STATE_CHECKED :\n                                      TRANSITION_STATE_UNCHECKED;\n  }\n\n  private getTransitionAnimationClass(oldState: string, newState: string):\n      string {\n    const {\n      TRANSITION_STATE_INIT,\n      TRANSITION_STATE_CHECKED,\n      TRANSITION_STATE_UNCHECKED,\n    } = strings;\n\n    const {\n      ANIM_UNCHECKED_CHECKED,\n      ANIM_UNCHECKED_INDETERMINATE,\n      ANIM_CHECKED_UNCHECKED,\n      ANIM_CHECKED_INDETERMINATE,\n      ANIM_INDETERMINATE_CHECKED,\n      ANIM_INDETERMINATE_UNCHECKED,\n    } = MDCCheckboxFoundation.cssClasses;\n\n    switch (oldState) {\n      case TRANSITION_STATE_INIT:\n        if (newState === TRANSITION_STATE_UNCHECKED) {\n          return '';\n        }\n        return newState === TRANSITION_STATE_CHECKED ?\n            ANIM_INDETERMINATE_CHECKED :\n            ANIM_INDETERMINATE_UNCHECKED;\n      case TRANSITION_STATE_UNCHECKED:\n        return newState === TRANSITION_STATE_CHECKED ?\n            ANIM_UNCHECKED_CHECKED :\n            ANIM_UNCHECKED_INDETERMINATE;\n      case TRANSITION_STATE_CHECKED:\n        return newState === TRANSITION_STATE_UNCHECKED ?\n            ANIM_CHECKED_UNCHECKED :\n            ANIM_CHECKED_INDETERMINATE;\n      default:  // TRANSITION_STATE_INDETERMINATE\n        return newState === TRANSITION_STATE_CHECKED ?\n            ANIM_INDETERMINATE_CHECKED :\n            ANIM_INDETERMINATE_UNCHECKED;\n    }\n  }\n\n  private updateAriaChecked() {\n    // Ensure aria-checked is set to mixed if checkbox is in indeterminate\n    // state.\n    if (this.adapter.isIndeterminate()) {\n      this.adapter.setNativeControlAttr(\n          strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);\n    } else {\n      // The on/off state does not need to keep track of aria-checked, since\n      // the screenreader uses the checked property on the checkbox element.\n      this.adapter.removeNativeControlAttr(strings.ARIA_CHECKED_ATTR);\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCCheckboxFoundation;\n"
  },
  {
    "path": "packages/mdc-checkbox/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-checkbox/mdc-checkbox.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"variables\" as mdc-checkbox-*;\n@forward \"mixins\" as mdc-checkbox-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"keyframes\" as mdc-checkbox-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"functions\" as mdc-checkbox-*;\n@forward \"mdc-checkbox\";\n"
  },
  {
    "path": "packages/mdc-checkbox/mdc-checkbox.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/dom/dom';\n@use './checkbox-theme';\n@use './checkbox';\n\n@include checkbox.core-styles;\n\n.mdc-checkbox {\n  @include dom.forced-colors-mode {\n    @include checkbox-theme.theme-styles(checkbox-theme.$forced-colors-theme);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/package.json",
    "content": "{\n  \"name\": \"@material/checkbox\",\n  \"description\": \"The Material Components for the web checkbox component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"checkbox\"\n  ],\n  \"main\": \"dist/mdc.checkbox.js\",\n  \"module\": \"./index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-checkbox\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-checkbox/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipple} from '../../mdc-ripple/index';\nimport {supportsCssVariables} from '../../mdc-ripple/util';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {strings} from '../constants';\nimport {MDCCheckbox, MDCCheckboxFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-checkbox\">\n      <input type=\"checkbox\"\n             class=\"mdc-checkbox__native-control\"\n             id=\"my-checkbox\"\n             aria-labelledby=\"my-checkbox-label\"/>\n      <div class=\"mdc-checkbox__frame\"></div>\n      <div class=\"mdc-checkbox__background\">\n        <svg class=\"mdc-checkbox__checkmark\"\n             viewBox=\"0 0 24 24\">\n          <path class=\"mdc-checkbox__checkmark-path\"\n                fill=\"none\"\n                d=\"M4.1,12.7 9,17.6 20.3,6.3\"/>\n        </svg>\n        <div class=\"mdc-checkbox__mixedmark\"></div>\n      </div>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const cb =\n      root.querySelector<HTMLInputElement>(strings.NATIVE_CONTROL_SELECTOR)!;\n  const component = new MDCCheckbox(root);\n  return {root, cb, component};\n}\n\nfunction setupMockFoundationTest() {\n  const root = getFixture();\n  const cb =\n      root.querySelector<HTMLInputElement>(strings.NATIVE_CONTROL_SELECTOR)!;\n  const mockFoundation = createMockFoundation(MDCCheckboxFoundation);\n  const component = new MDCCheckbox(root, mockFoundation);\n  return {root, cb, component, mockFoundation};\n}\n\ndescribe('MDCCheckbox', () => {\n  setUpMdcTestEnvironment();\n\n  if (supportsCssVariables(window)) {\n    it('#constructor initializes the root element with a ripple', () => {\n      const {root} = setupTest();\n      jasmine.clock().tick(1);\n      expect(root).toHaveClass('mdc-ripple-upgraded');\n    });\n\n    it('#destroy removes the ripple', () => {\n      const {root, component} = setupTest();\n      jasmine.clock().tick(1);\n      component.destroy();\n      jasmine.clock().tick(1);\n      expect(root).not.toHaveClass('mdc-ripple-upgraded');\n    });\n\n    it('(regression) activates ripple on keydown when the input element surface is active',\n       () => {\n         const {root} = setupTest();\n         const input = root.querySelector('input')!;\n         jasmine.clock().tick(1);\n\n         const fakeMatches = jasmine.createSpy('.matches');\n         fakeMatches.and.returnValue(true);\n         input.matches = fakeMatches;\n\n         expect(root).toHaveClass('mdc-ripple-upgraded');\n         emitEvent(input, 'keydown');\n         jasmine.clock().tick(1);\n\n         expect(root).toHaveClass('mdc-ripple-upgraded--foreground-activation');\n       });\n  }\n\n  it('attachTo initializes and returns a MDCCheckbox instance', () => {\n    expect(MDCCheckbox.attachTo(getFixture()) instanceof MDCCheckbox)\n        .toBeTruthy();\n  });\n\n  it('get/set checked updates the checked property on the native checkbox element',\n     () => {\n       const {cb, component} = setupTest();\n       component.checked = true;\n       expect(cb.checked).toBeTruthy();\n       expect(component.checked).toEqual(cb.checked);\n     });\n\n  it('get/set indeterminate updates the indeterminate property on the native checkbox element',\n     () => {\n       const {cb, component} = setupTest();\n       component.indeterminate = true;\n       expect(cb.indeterminate).toBeTruthy();\n       expect(component.indeterminate).toEqual(cb.indeterminate);\n     });\n\n  it('get/set disabled updates the indeterminate property on the native checkbox element',\n     () => {\n       const {cb, component} = setupTest();\n       component.disabled = true;\n       expect(cb.disabled).toBeTruthy();\n       expect(component.disabled).toEqual(cb.disabled);\n     });\n\n  it('get/set value updates the value of the native checkbox element', () => {\n    const {cb, component} = setupTest();\n    component.value = 'new value';\n    expect(cb.value).toEqual('new value');\n    expect(component.value).toEqual(cb.value);\n  });\n\n  it('get ripple returns a MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBeTruthy();\n  });\n\n  it('checkbox change event calls #foundation.handleChange', () => {\n    const {cb, component} = setupTest();\n    (component as any).foundation.handleChange = jasmine.createSpy();\n    emitEvent(cb, 'change');\n    expect((component as any).foundation.handleChange).toHaveBeenCalled();\n  });\n\n  it('root animationend event calls #foundation.handleAnimationEnd', () => {\n    const {root, component} = setupTest();\n    (component as any).foundation.handleAnimationEnd = jasmine.createSpy();\n    emitEvent(root, 'animationend');\n    expect((component as any).foundation.handleAnimationEnd).toHaveBeenCalled();\n  });\n\n  it('\"checked\" property change hook calls foundation#handleChange', () => {\n    const {cb, mockFoundation} = setupMockFoundationTest();\n    cb.checked = true;\n    expect(mockFoundation.handleChange).toHaveBeenCalled();\n  });\n\n  it('\"indeterminate\" property change hook calls foundation#handleChange',\n     () => {\n       const {cb, mockFoundation} = setupMockFoundationTest();\n       cb.indeterminate = true;\n       expect(mockFoundation.handleChange).toHaveBeenCalled();\n     });\n\n  it('checkbox change event handler is destroyed on #destroy', () => {\n    const {cb, component} = setupTest();\n    (component as any).foundation.handleChange = jasmine.createSpy();\n    component.destroy();\n    emitEvent(cb, 'change');\n    expect((component as any).foundation.handleChange).not.toHaveBeenCalled();\n  });\n\n  it('root animationend event handler is destroyed on #destroy', () => {\n    const {root, component} = setupTest();\n    (component as any).foundation.handleAnimationEnd = jasmine.createSpy();\n    component.destroy();\n    emitEvent(root, 'animationend');\n    expect((component as any).foundation.handleAnimationEnd)\n        .not.toHaveBeenCalled();\n  });\n\n  it('\"checked\" property change hook is removed on #destroy', () => {\n    const {component, cb, mockFoundation} = setupMockFoundationTest();\n    component.destroy();\n    cb.checked = true;\n    expect(mockFoundation.handleChange).not.toHaveBeenCalled();\n  });\n\n  it('\"indeterminate\" property change hook is removed on #destroy', () => {\n    const {component, cb, mockFoundation} = setupMockFoundationTest();\n    component.destroy();\n    cb.indeterminate = true;\n    expect(mockFoundation.handleChange).not.toHaveBeenCalled();\n  });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#setNativeControlAttr sets an attribute on the input element',\n     () => {\n       const {cb, component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setNativeControlAttr('aria-checked', 'mixed');\n       expect(cb.getAttribute('aria-checked')).toEqual('mixed');\n     });\n\n  it('adapter#removeNativeControlAttr removes an attribute from the input element',\n     () => {\n       const {cb, component} = setupTest();\n       cb.setAttribute('aria-checked', 'mixed');\n       (component.getDefaultFoundation() as any)\n           .adapter.removeNativeControlAttr('aria-checked');\n       expect(cb.hasAttribute('aria-checked')).toBe(false);\n     });\n\n  it('adapter#forceLayout touches \"offsetWidth\" on the root in order to force layout',\n     () => {\n       const {root, component} = setupTest();\n       const mockGetter = jasmine.createSpy('.offsetWidth');\n       Object.defineProperty(root, 'offsetWidth', {\n         get: mockGetter,\n         set() {},\n         enumerable: false,\n         configurable: true,\n       });\n\n       (component.getDefaultFoundation() as any).adapter.forceLayout();\n       expect(mockGetter).toHaveBeenCalled();\n     });\n\n  it('adapter#isAttachedToDOM returns true when root is attached to DOM',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect(\n           (component.getDefaultFoundation() as any).adapter.isAttachedToDOM())\n           .toBeTruthy();\n       document.body.removeChild(root);\n     });\n\n  it('adapter#isAttachedToDOM returns false when root is not attached to DOM',\n     () => {\n       const {component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any).adapter.isAttachedToDOM())\n           .toBeFalsy();\n     });\n\n  it('#adapter.isIndeterminate returns true when checkbox is indeterminate',\n     () => {\n       const {cb, component} = setupTest();\n       cb.indeterminate = true;\n       expect(\n           (component.getDefaultFoundation() as any).adapter.isIndeterminate())\n           .toBe(true);\n     });\n\n  it('#adapter.isIndeterminate returns false when checkbox is not indeterminate',\n     () => {\n       const {cb, component} = setupTest();\n       cb.indeterminate = false;\n       expect(\n           (component.getDefaultFoundation() as any).adapter.isIndeterminate())\n           .toBe(false);\n     });\n\n  it('#adapter.isChecked returns true when checkbox is checked', () => {\n    const {cb, component} = setupTest();\n    cb.checked = true;\n    expect((component.getDefaultFoundation() as any).adapter.isChecked())\n        .toBe(true);\n  });\n\n  it('#adapter.isChecked returns false when checkbox is not checked', () => {\n    const {cb, component} = setupTest();\n    cb.checked = false;\n    expect((component.getDefaultFoundation() as any).adapter.isChecked())\n        .toBe(false);\n  });\n\n  it('#adapter.hasNativeControl returns true when checkbox exists', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.hasNativeControl())\n        .toBe(true);\n  });\n\n  it('#adapter.setNativeControlDisabled returns true when checkbox is disabled',\n     () => {\n       const {cb, component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setNativeControlDisabled(true);\n       expect(cb.disabled).toBe(true);\n     });\n\n  it('#adapter.setNativeControlDisabled returns false when checkbox is not disabled',\n     () => {\n       const {cb, component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setNativeControlDisabled(false);\n       expect(cb.disabled).toBe(false);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-checkbox/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as checkbox;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include checkbox.container-colors($query: $query);\n    @include checkbox.ink-color(red, $query: $query);\n    @include checkbox.focus-indicator-color(red, $query: $query);\n    @include checkbox.ripple-styles($query: $query);\n    @include checkbox.ripple-size(0, $query: $query);\n    @include checkbox.touch-target(0, 0, $query: $query);\n    @include checkbox.density(0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-checkbox/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport MDCCheckboxFoundation from '../foundation';\n\nconst DESC_UNDEFINED = {\n  configurable: true,\n  enumerable: false,\n  get: undefined,\n  set: undefined,\n};\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCCheckboxFoundation);\n  const nativeControl = document.createElement('input');\n  nativeControl.setAttribute('type', 'checkbox');\n  return {foundation, mockAdapter, nativeControl};\n}\n\ninterface CheckboxState {\n  checked: boolean;\n  indeterminate: boolean;\n}\n\n/**\n * Sets up tests which execute change events through the change handler which\n * the foundation registers. Returns an object containing the following\n * properties:\n * - foundation - The MDCCheckboxFoundation instance\n * - mockAdapter - The adapter given to the foundation. The adapter is\n *   pre-configured to capture the changeHandler registered as well as respond\n *   with different mock objects for native controls based on the state given\n *   to the change() function.\n * - change - A function that's passed an object containing two \"checked\" and\n *   \"boolean\" properties, representing the state of the native control after\n *   it was changed. E.g. `change({checked: true, indeterminate: false})`\n *   simulates a change event as the result of a checkbox being checked.\n */\nfunction setupChangeHandlerTest() {\n  const {foundation, mockAdapter} = setupTest();\n  mockAdapter.isAttachedToDOM.and.returnValue(true);\n  mockAdapter.isIndeterminate.and.returnValue(false);\n  mockAdapter.isChecked.and.returnValue(false);\n\n  foundation.init();\n\n  const change = (newState: CheckboxState) => {\n    mockAdapter.hasNativeControl.and.returnValue(true);\n    mockAdapter.isChecked.and.returnValue(newState.checked);\n    mockAdapter.isIndeterminate.and.returnValue(newState.indeterminate);\n    foundation.handleChange();\n  };\n\n  return {foundation, mockAdapter, change};\n}\n\nfunction testChangeHandler(\n    desc: string, changes: CheckboxState|CheckboxState[],\n    expectedClass: string) {\n  changes = Array.isArray(changes) ? changes : [changes];\n  it(`changeHandler: ${desc}`, () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n\n    (changes as any).forEach(change);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(expectedClass);\n  });\n}\n\ndescribe('MDCCheckboxFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports constants', () => {\n    expect(cssClasses).toEqual(MDCCheckboxFoundation.cssClasses);\n    expect(numbers).toEqual(MDCCheckboxFoundation.numbers);\n    expect(strings).toEqual(MDCCheckboxFoundation.strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCCheckboxFoundation, [\n      'addClass',\n      'removeClass',\n      'setNativeControlAttr',\n      'removeNativeControlAttr',\n      'forceLayout',\n      'isAttachedToDOM',\n      'isIndeterminate',\n      'isChecked',\n      'hasNativeControl',\n      'setNativeControlDisabled',\n    ]);\n  });\n\n  it('#init adds the upgraded class to the root element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.UPGRADED);\n  });\n\n  it('#init adds aria-checked=\"mixed\" if checkbox is initially indeterminate',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.isIndeterminate.and.returnValue(true);\n\n       foundation.init();\n       expect(mockAdapter.setNativeControlAttr)\n           .toHaveBeenCalledWith(\n               'aria-checked', strings.ARIA_CHECKED_INDETERMINATE_VALUE);\n     });\n\n  /*\n   * Shims Object.getOwnPropertyDescriptor for the checkbox's WebIDL attributes.\n   * Used to test the behavior of overriding WebIDL properties in different\n   * browser environments. For example, in Safari WebIDL attributes don't\n   * return get/set in descriptors.\n   */\n  function withMockCheckboxDescriptorReturning(\n      descriptor: undefined|typeof DESC_UNDEFINED, runTests: () => void) {\n    const mockGetOwnPropertyDescriptor =\n        jasmine.createSpy('mockGetOwnPropertyDescriptor');\n    mockGetOwnPropertyDescriptor\n        .withArgs(\n            HTMLInputElement.prototype,\n            jasmine.stringMatching('/checked|indeterminate/'))\n        .and.returnValue(descriptor);\n\n    const originalDesc =\n        Object.getOwnPropertyDescriptor(Object, 'getOwnPropertyDescriptor');\n    Object.defineProperty(Object, 'getOwnPropertyDescriptor', {\n      ...originalDesc,\n      value: mockGetOwnPropertyDescriptor,\n    });\n    runTests();\n\n    // After running tests, restore original property.\n    Object.defineProperty(\n        Object, 'getOwnPropertyDescriptor', originalDesc as PropertyDescriptor);\n  }\n\n  it('#init handles case when WebIDL attrs cannot be overridden (Safari)',\n     () => {\n       const {foundation, nativeControl} = setupTest();\n       withMockCheckboxDescriptorReturning(DESC_UNDEFINED, () => {\n         expect(() => {\n           foundation.init();\n           nativeControl.checked = !nativeControl.checked;\n         }).not.toThrow();\n       });\n     });\n\n  it('#init handles case when property descriptors are not returned at all (Android Browser)',\n     () => {\n       const {foundation} = setupTest();\n       withMockCheckboxDescriptorReturning(undefined, () => {\n         expect(() => foundation.init).not.toThrow();\n       });\n     });\n\n  it('#destroy handles case when WebIDL attrs cannot be overridden (Safari)',\n     () => {\n       const {foundation} = setupTest();\n       withMockCheckboxDescriptorReturning(DESC_UNDEFINED, () => {\n         expect(() => foundation.init).not.toThrow('init sanity check');\n         expect(() => foundation.destroy).not.toThrow();\n       });\n     });\n\n  it('#setDisabled updates the value of nativeControl.disabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.setNativeControlDisabled).toHaveBeenCalledWith(true);\n    expect(mockAdapter.setNativeControlDisabled).toHaveBeenCalledTimes(1);\n  });\n\n  it('#setDisabled adds mdc-checkbox--disabled class to the root element when set to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(true);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n     });\n\n  it('#setDisabled removes mdc-checkbox--disabled class from the root element when set to false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.DISABLED);\n     });\n\n  testChangeHandler(\n      'unchecked -> checked animation class', {\n        checked: true,\n        indeterminate: false,\n      },\n      cssClasses.ANIM_UNCHECKED_CHECKED);\n\n  testChangeHandler(\n      'unchecked -> indeterminate animation class', {\n        checked: false,\n        indeterminate: true,\n      },\n      cssClasses.ANIM_UNCHECKED_INDETERMINATE);\n\n  testChangeHandler(\n      'checked -> unchecked animation class',\n      [\n        {\n          checked: true,\n          indeterminate: false,\n        },\n        {\n          checked: false,\n          indeterminate: false,\n        },\n      ],\n      cssClasses.ANIM_CHECKED_UNCHECKED);\n\n  testChangeHandler(\n      'checked -> indeterminate animation class',\n      [\n        {\n          checked: true,\n          indeterminate: false,\n        },\n        {\n          checked: true,\n          indeterminate: true,\n        },\n      ],\n      cssClasses.ANIM_CHECKED_INDETERMINATE);\n\n  testChangeHandler(\n      'indeterminate -> checked animation class',\n      [\n        {\n          checked: false,\n          indeterminate: true,\n        },\n        {\n          checked: true,\n          indeterminate: false,\n        },\n      ],\n      cssClasses.ANIM_INDETERMINATE_CHECKED);\n\n  testChangeHandler(\n      'indeterminate -> unchecked animation class',\n      [\n        {\n          checked: true,\n          indeterminate: true,\n        },\n        {\n          checked: false,\n          indeterminate: false,\n        },\n      ],\n      cssClasses.ANIM_INDETERMINATE_UNCHECKED);\n\n  testChangeHandler(\n      'no transition classes applied when no state change',\n      [\n        {\n          checked: true,\n          indeterminate: false,\n        },\n        {\n          checked: true,\n          indeterminate: false,\n        },\n      ],\n      cssClasses.ANIM_UNCHECKED_CHECKED);\n\n  it('changing from unchecked to checked adds selected class', () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n    change({\n      checked: false,\n      indeterminate: false,\n    });\n    change({\n      checked: true,\n      indeterminate: false,\n    });\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('changing from unchecked to indeterminate adds selected class', () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n    change({\n      checked: false,\n      indeterminate: false,\n    });\n    change({\n      checked: false,\n      indeterminate: true,\n    });\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('changing from checked to unchecked removes selected class', () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n    change({\n      checked: true,\n      indeterminate: false,\n    });\n    change({\n      checked: false,\n      indeterminate: false,\n    });\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('changing from indeterminate to unchecked removes selected class', () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n    change({\n      checked: false,\n      indeterminate: true,\n    });\n    change({\n      checked: false,\n      indeterminate: false,\n    });\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('animation end handler removes animation class after short delay', () => {\n    const {ANIM_UNCHECKED_CHECKED} = cssClasses;\n    const {mockAdapter, foundation} = setupTest();\n\n    (foundation as any).enableAnimationEndHandler = true;\n    (foundation as any).currentAnimationClass = ANIM_UNCHECKED_CHECKED;\n    expect(mockAdapter.removeClass).not.toHaveBeenCalled();\n\n    foundation.handleAnimationEnd();\n\n    jasmine.clock().tick(numbers.ANIM_END_LATCH_MS);\n    expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n    expect((foundation as any).enableAnimationEndHandler).toBe(false);\n  });\n\n  it('animation end is debounced if event is called twice', () => {\n    const {ANIM_UNCHECKED_CHECKED} = cssClasses;\n    const {mockAdapter, foundation} = setupChangeHandlerTest();\n    (foundation as any).enableAnimationEndHandler = true;\n    (foundation as any).currentAnimationClass = ANIM_UNCHECKED_CHECKED;\n\n    foundation.handleAnimationEnd();\n\n    expect(mockAdapter.removeClass).not.toHaveBeenCalled();\n\n    foundation.handleAnimationEnd();\n\n    jasmine.clock().tick(numbers.ANIM_END_LATCH_MS);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(ANIM_UNCHECKED_CHECKED);\n  });\n\n  it('change handler triggers layout for changes within the same frame to correctly restart anims',\n     () => {\n       const {mockAdapter, change} = setupChangeHandlerTest();\n\n       change({checked: true, indeterminate: false});\n       expect(mockAdapter.forceLayout).not.toHaveBeenCalled();\n\n       change({checked: true, indeterminate: true});\n       expect(mockAdapter.forceLayout).toHaveBeenCalled();\n     });\n\n  it('change handler updates aria-checked attribute correctly.', () => {\n    const {mockAdapter, change} = setupChangeHandlerTest();\n\n    change({checked: true, indeterminate: true});\n    expect(mockAdapter.setNativeControlAttr)\n        .toHaveBeenCalledWith('aria-checked', 'mixed');\n\n    change({checked: true, indeterminate: false});\n    expect(mockAdapter.removeNativeControlAttr)\n        .toHaveBeenCalledWith('aria-checked');\n  });\n\n  it('change handler does not add animation classes when isAttachedToDOM() is falsy',\n     () => {\n       const {mockAdapter, change} = setupChangeHandlerTest();\n       mockAdapter.isAttachedToDOM.and.returnValue(false);\n\n       change({checked: true, indeterminate: false});\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(\n               jasmine.stringMatching('mdc-checkbox--anim'));\n     });\n\n  it('change handler does not add animation classes for bogus changes (init -> unchecked)',\n     () => {\n       const {mockAdapter, change} = setupChangeHandlerTest();\n\n       change({checked: false, indeterminate: false});\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(\n               jasmine.stringMatching('mdc-checkbox--anim'));\n     });\n\n  it('change handler does not do anything if checkbox element is not found',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasNativeControl.and.returnValue(false);\n       expect(() => foundation.handleChange).not.toThrow();\n       expect(mockAdapter.setNativeControlAttr).not.toHaveBeenCalled();\n       expect(mockAdapter.removeNativeControlAttr).not.toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-checkbox/test/mdc-checkbox.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-checkbox.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-chips/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-chips/README.md",
    "content": "<!--docs:\ntitle: \"Chips\"\nlayout: detail\nsection: components\nexcerpt: \"Chips are compact elements that represent an attribute, text, entity, or action.\"\niconId: chip\npath: /catalog/chips/\n-->\n\n# Chips\n\n**Contents**\n\n* [Using chip](#using-chips)\n* [Chips](#chips)\n* [API](#api)\n\n>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).\n\n## Using chips\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.\n\n### Installing chips\n\n```\nnpm install @material/chips\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/styles\";\n```\n\n### JavaScript instantiation\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));\n```\n\n## Chips\n\nChips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.\n\n### Basic action chip set example\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip one</span>\n        </button>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip\" role=\"row\" id=\"c1\">\n      <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n        <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\">\n          <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n          <span class=\"mdc-evolution-chip__text-label\">Chip two</span>\n        </button>\n      </span>\n    </span>\n  </span>\n</span>\n```\n\n## API\n\nSee the readme of each subcomponent for more detail.\n\n- [Chip set API](./chip-set#api)\n- [Chip API](./chip#api)\n- [Action API](./action#api)\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n"
  },
  {
    "path": "packages/mdc-chips/_assist-chip-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './chip-theme';\n\n$_light-theme: (\n  container-shape: null,\n  container-height: null,\n  flat-container-elevation: null,\n  flat-outline-color: null,\n  flat-outline-width: null,\n  elevated-container-elevation: null,\n  elevated-container-color: null,\n  elevated-container-shadow-color: null,\n  container-surface-tint-layer-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-size: null,\n  label-text-weight: null,\n  label-text-tracking: null,\n  label-text-color: null,\n  with-icon-icon-size: null,\n  with-icon-icon-color: null,\n  flat-disabled-outline-color: null,\n  flat-disabled-outline-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  with-icon-disabled-icon-color: null,\n  with-icon-disabled-icon-opacity: null,\n  elevated-disabled-container-elevation: null,\n  elevated-disabled-container-color: null,\n  elevated-disabled-container-opacity: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  hover-label-text-color: null,\n  with-icon-hover-icon-color: null,\n  elevated-hover-container-elevation: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  focus-label-text-color: null,\n  flat-focus-outline-color: null,\n  with-icon-focus-icon-color: null,\n  elevated-focus-container-elevation: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  pressed-label-text-color: null,\n  with-icon-pressed-icon-color: null,\n  elevated-pressed-container-elevation: null,\n);\n\n$_custom-property-prefix: 'assist-chip';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: chip-theme.resolve-theme($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);\n}\n"
  },
  {
    "path": "packages/mdc-chips/_chip-set-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n// stylelint-disable selector-class-pattern -- MDC internal usage.\n\n$space-between-chips: 8px;\n\n///\n/// Sets the horiontal space between the chips in the chip set.\n/// @param {Number} $space - The horizontal space between the chips.\n///\n@mixin horizontal-space-between-chips($space, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  ///\n  /// We should use the column-gap property when our browser matrix allows.\n  ///\n\n  .mdc-evolution-chip-set__chips {\n    @include feature-targeting.targets($feat-structure) {\n      // Set the margin to the negative horizontal space to account for chips\n      // being inset on the leading edge.\n      @include rtl.reflexive-property(margin, -$space, 0);\n    }\n  }\n\n  .mdc-evolution-chip {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, $space, 0);\n    }\n  }\n}\n\n///\n/// Sets the vertical space between the chips in the chip set.\n/// @param {Number} $space - The vertical space between the chips.\n///\n@mixin vertical-space-between-chips($space, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  ///\n  /// We should use the row-gap property when our browser matrix allows.\n  ///\n\n  .mdc-evolution-chip {\n    @include feature-targeting.targets($feat-structure) {\n      // Set top and bottom to half the vertical space since there's no\n      // well supported method for vertical wrapping gaps.\n      margin-top: math.div($space, 2);\n      margin-bottom: math.div($space, 2);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/_chip-set.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/animation/animation';\n@use '@material/feature-targeting/feature-targeting';\n@use './chip-set-theme';\n\n// stylelint-disable selector-class-pattern -- MDC internal usage.\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include _static-styles($query);\n  @include _theme-styles($query);\n}\n\n@mixin _static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-evolution-chip-set {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n    }\n  }\n\n  .mdc-evolution-chip-set:focus {\n    @include feature-targeting.targets($feat-structure) {\n      outline: none;\n    }\n  }\n\n  .mdc-evolution-chip-set__chips {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-flow: wrap;\n      min-width: 0;\n    }\n  }\n\n  .mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips {\n    @include feature-targeting.targets($feat-structure) {\n      flex-flow: nowrap;\n    }\n  }\n}\n\n@mixin _theme-styles($query: feature-targeting.all()) {\n  .mdc-evolution-chip-set {\n    @include chip-set-theme.horizontal-space-between-chips(\n      chip-set-theme.$space-between-chips,\n      $query\n    );\n\n    @include chip-set-theme.vertical-space-between-chips(\n      chip-set-theme.$space-between-chips,\n      $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/_chip-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Chip MDC component.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use 'sass:color';\n@use '@material/dom/dom';\n@use '@material/density/density';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/shape/shape';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/elevation/elevation-theme';\n@use '@material/tokens/resolvers';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n\n$height: 32px;\n$minimum-height: 24px;\n$maximum-height: $height;\n$density-scale: density.$default-scale;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n);\n$radius: math.div($height, 2);\n$type-scale: body2;\n$container-color: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  12%\n);\n$text-label-color: rgba(theme-color.prop-value(on-surface), 0.87);\n$icon-color: rgba(theme-color.prop-value(on-surface), 0.87);\n$checkmark-color: rgba(theme-color.prop-value(on-surface), 0.87);\n$trailing-action-color: rgba(theme-color.prop-value(on-surface), 0.87);\n$ripple-color: on-surface;\n$checkmark-size: 20px;\n$leading-icon-size: 20px;\n$trailing-action-size: 18px;\n$leading-padding: 12px;\n$trailing-padding: 12px;\n$avatar-size: 24px;\n$avatar-leading-padding: 4px;\n$avatar-trailing-padding: 8px;\n$graphic-leading-padding: 6px;\n$graphic-trailing-padding: 6px;\n$trailing-action-leading-padding: 8px;\n$trailing-action-trailing-padding: 8px;\n$ripple-target: '.mdc-evolution-chip__ripple';\n$ripple-target-primary: '.mdc-evolution-chip__ripple--primary';\n$ripple-target-trailing: '.mdc-evolution-chip__ripple--trailing';\n\n// Filter chip colors\n$filter-selected-container-color: color.mix(\n  theme-color.prop-value(on-surface),\n  $container-color,\n  8%\n);\n\n$light-theme: (\n  container-elevation: null,\n  container-height: null,\n  container-shadow-color: null,\n  container-shape: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  disabled-outline-color: null,\n  disabled-outline-opacity: null,\n  elevated-container-color: null,\n  elevated-container-elevation: null,\n  elevated-container-shadow-color: null,\n  container-surface-tint-layer-color: null,\n  elevated-disabled-container-color: null,\n  elevated-disabled-container-elevation: null,\n  elevated-disabled-container-opacity: null,\n  elevated-focus-container-elevation: null,\n  elevated-hover-container-elevation: null,\n  elevated-pressed-container-elevation: null,\n  elevated-selected-container-color: null,\n  elevated-selected-container-elevation: null,\n  elevated-unselected-container-color: null,\n  flat-container-elevation: null,\n  flat-disabled-outline-color: null,\n  flat-disabled-outline-opacity: null,\n  flat-disabled-selected-container-color: null,\n  flat-disabled-selected-container-opacity: null,\n  flat-disabled-selected-outline-color: null,\n  flat-disabled-selected-outline-opacity: null,\n  flat-disabled-unselected-outline-color: null,\n  flat-disabled-unselected-outline-opacity: null,\n  flat-focus-outline-color: null,\n  flat-outline-color: null,\n  flat-outline-width: null,\n  flat-selected-container-color: null,\n  flat-selected-focus-container-elevation: null,\n  flat-selected-hover-container-elevation: null,\n  flat-selected-outline-color: null,\n  flat-selected-outline-width: null,\n  flat-selected-pressed-container-elevation: null,\n  flat-unselected-focus-container-elevation: null,\n  flat-unselected-focus-outline-color: null,\n  flat-unselected-hover-container-elevation: null,\n  flat-unselected-outline-color: null,\n  flat-unselected-outline-width: null,\n  flat-unselected-pressed-container-elevation: null,\n  focus-label-text-color: null,\n  focus-outline-color: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-label-text-color: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  label-text-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-size: null,\n  label-text-tracking: null,\n  label-text-weight: null,\n  outline-color: null,\n  outline-width: null,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  selected-focus-label-text-color: null,\n  selected-focus-state-layer-color: null,\n  selected-focus-state-layer-opacity: null,\n  selected-hover-label-text-color: null,\n  selected-hover-state-layer-color: null,\n  selected-hover-state-layer-opacity: null,\n  selected-label-text-color: null,\n  selected-pressed-label-text-color: null,\n  selected-pressed-state-layer-color: null,\n  selected-pressed-state-layer-opacity: null,\n  unselected-focus-label-text-color: null,\n  unselected-focus-state-layer-color: null,\n  unselected-focus-state-layer-opacity: null,\n  unselected-hover-label-text-color: null,\n  unselected-hover-state-layer-color: null,\n  unselected-hover-state-layer-opacity: null,\n  unselected-label-text-color: null,\n  unselected-pressed-label-text-color: null,\n  unselected-pressed-state-layer-color: null,\n  unselected-pressed-state-layer-opacity: null,\n  with-avatar-avatar-shape: null,\n  with-avatar-avatar-size: null,\n  with-avatar-disabled-avatar-opacity: null,\n  with-icon-disabled-icon-color: null,\n  with-icon-disabled-icon-opacity: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-icon-color: null,\n  with-icon-icon-size: null,\n  with-icon-pressed-icon-color: null,\n  with-icon-selected-focus-icon-color: null,\n  with-icon-selected-hover-icon-color: null,\n  with-icon-selected-icon-color: null,\n  with-icon-selected-pressed-icon-color: null,\n  with-icon-unselected-focus-icon-color: null,\n  with-icon-unselected-hover-icon-color: null,\n  with-icon-unselected-icon-color: null,\n  with-icon-unselected-pressed-icon-color: null,\n  with-leading-icon-disabled-leading-icon-color: null,\n  with-leading-icon-disabled-leading-icon-opacity: null,\n  with-leading-icon-focus-leading-icon-color: null,\n  with-leading-icon-hover-leading-icon-color: null,\n  with-leading-icon-leading-icon-color: null,\n  with-leading-icon-leading-icon-size: null,\n  with-leading-icon-pressed-leading-icon-color: null,\n  with-trailing-icon-disabled-trailing-icon-color: null,\n  with-trailing-icon-disabled-trailing-icon-opacity: null,\n  with-trailing-icon-focus-trailing-icon-color: null,\n  with-trailing-icon-hover-trailing-icon-color: null,\n  with-trailing-icon-pressed-trailing-icon-color: null,\n  with-trailing-icon-trailing-icon-color: null,\n  with-trailing-icon-trailing-icon-size: null,\n);\n$_custom-property-prefix: 'chip';\n\n// TODO(b/259513131): Move theme resolution to variant theme\n// and remove custom property declaration when all customers are ready to be migrated\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: resolve-theme($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n// TODO(b/259513131): Move theme resolution to variant theme\n// and remove custom property declaration when all customers are ready to be migrated\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: resolve-theme($theme, $resolvers: $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n\n  @include _container-shape(map.get($theme, container-shape));\n  .mdc-evolution-chip__icon--primary {\n    @include shape.radius(map.get($theme, with-avatar-avatar-shape));\n  }\n  @include graphic-size(map.get($theme, with-avatar-avatar-size));\n  @include height(map.get($theme, container-height));\n  @include elevation-theme.overlay-container-color(\n    map.get($theme, container-surface-tint-layer-color)\n  );\n  @include _container-elevation(\n    $map: (\n      default: map.get($theme, container-elevation),\n    )\n  );\n  @include _container-elevation(\n    $map: (\n      enabled: map.get($theme, flat-container-elevation),\n    )\n  );\n  @include _container-elevation(\n    $map: (\n      enabled: map.get($theme, elevated-container-elevation),\n      disabled: map.get($theme, elevated-disabled-container-elevation),\n      hover: map.get($theme, elevated-hover-container-elevation),\n      focus: map.get($theme, elevated-focus-container-elevation),\n      pressed: map.get($theme, elevated-pressed-container-elevation),\n    )\n  );\n  &.mdc-evolution-chip--selected {\n    @include _container-elevation(\n      (\n        enabled: map.get($theme, elevated-selected-container-elevation),\n        disabled:\n          map.get($theme, elevated-selected-disabled-container-elevation),\n        hover: map.get($theme, elevated-selected-hover-container-elevation),\n        focus: map.get($theme, elevated-selected-focus-container-elevation),\n        pressed: map.get($theme, elevated-selected-pressed-container-elevation),\n      )\n    );\n    @include _container-elevation(\n      (\n        enabled: map.get($theme, flat-selected-container-elevation),\n        disabled: map.get($theme, flat-selected-disabled-container-elevation),\n        hover: map.get($theme, flat-selected-hover-container-elevation),\n        focus: map.get($theme, flat-selected-focus-container-elevation),\n        pressed: map.get($theme, flat-selected-pressed-container-elevation),\n      )\n    );\n  }\n  &:not(.mdc-evolution-chip--selected) {\n    @include _container-elevation(\n      (\n        enabled: map.get($theme, flat-unselected-container-elevation),\n        disabled: map.get($theme, flat-unselected-disabled-container-elevation),\n        hover: map.get($theme, flat-unselected-hover-container-elevation),\n        focus: map.get($theme, flat-unselected-focus-container-elevation),\n        pressed: map.get($theme, flat-unselected-pressed-container-elevation),\n      )\n    );\n  }\n  @include outline-color(\n    (\n      enabled: map.get($theme, outline-color),\n      focus: map.get($theme, focus-outline-color),\n      disabled: map.get($theme, disabled-outline-color),\n    )\n  );\n  @include outline-color(\n    (\n      enabled: map.get($theme, flat-outline-color),\n      focus: map.get($theme, flat-focus-outline-color),\n      disabled: map.get($theme, flat-disabled-outline-color),\n    )\n  );\n  @include selected-outline-color(\n    (\n      enabled: map.get($theme, flat-selected-outline-color),\n      disabled: map.get($theme, flat-disabled-selected-outline-color),\n    )\n  );\n  &:not(.mdc-evolution-chip--selected) {\n    @include outline-color(\n      (\n        disabled: map.get($theme, flat-disabled-unselected-outline-color),\n        focus: map.get($theme, flat-unselected-focus-outline-color),\n        enabled: map.get($theme, flat-unselected-outline-color),\n      )\n    );\n  }\n  @include outline-width(map.get($theme, outline-width));\n  @include outline-width(map.get($theme, flat-outline-width));\n  &.mdc-evolution-chip--selected {\n    @include outline-width(map.get($theme, flat-selected-outline-width));\n  }\n  &:not(.mdc-evolution-chip--selected) {\n    @include outline-width(map.get($theme, flat-unselected-outline-width));\n  }\n  @include container-color(\n    (\n      enabled: map.get($theme, elevated-container-color),\n      disabled: map.get($theme, elevated-disabled-container-color),\n    )\n  );\n  @include selected-container-color(\n    (\n      enabled: map.get($theme, elevated-selected-container-color),\n      disabled: map.get($theme, elevated-disabled-container-color),\n    )\n  );\n  // TODO(b/255716167) Separate theme-styles mixin for hairline and elevated chip variants.\n  @include selected-container-color(\n    (\n      enabled: map.get($theme, flat-selected-container-color),\n      disabled: map.get($theme, flat-disabled-selected-container-color),\n    )\n  );\n  &:not(.mdc-evolution-chip--selected) {\n    @include container-color(\n      (\n        enabled: map.get($theme, elevated-unselected-container-color),\n      )\n    );\n  }\n  .mdc-evolution-chip__text-label {\n    @include typography.theme-styles(\n      (\n        font: map.get($theme, label-text-font),\n        line-height: map.get($theme, label-text-line-height),\n        size: map.get($theme, label-text-size),\n        weight: map.get($theme, label-text-weight),\n        tracking: map.get($theme, label-text-tracking),\n      )\n    );\n  }\n  @include text-label-color(\n    (\n      enabled: map.get($theme, label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n      disabled: map.get($theme, disabled-label-text-color),\n    )\n  );\n  @include selected-text-label-color(\n    (\n      enabled: map.get($theme, selected-label-text-color),\n      hover: map.get($theme, selected-hover-label-text-color),\n      focus: map.get($theme, selected-focus-label-text-color),\n      pressed: map.get($theme, selected-pressed-label-text-color),\n      disabled: map.get($theme, disabled-label-text-color),\n    )\n  );\n  &:not(.mdc-evolution-chip--selected) {\n    @include text-label-color(\n      (\n        enabled: map.get($theme, unselected-label-text-color),\n        hover: map.get($theme, unselected-hover-label-text-color),\n        focus: map.get($theme, unselected-focus-label-text-color),\n        pressed: map.get($theme, unselected-pressed-label-text-color),\n        disabled: map.get($theme, unselected-disabled-label-text-color),\n      )\n    );\n  }\n\n  @include icon-size(map.get($theme, with-icon-icon-size));\n  @include icon-color(\n    (\n      enabled: map.get($theme, with-icon-icon-color),\n      disabled: map.get($theme, with-icon-disabled-icon-color),\n      hover: map.get($theme, with-icon-hover-icon-color),\n      focus: map.get($theme, with-icon-focus-icon-color),\n      pressed: map.get($theme, with-icon-pressed-icon-color),\n    )\n  );\n  @include checkmark-color(\n    (\n      enabled: map.get($theme, with-icon-selected-icon-color),\n      disabled: map.get($theme, with-icon-disabled-icon-color),\n      hover: map.get($theme, with-icon-selected-hover-icon-color),\n      focus: map.get($theme, with-icon-selected-focus-icon-color),\n      pressed: map.get($theme, with-icon-selected-pressed-icon-color),\n    )\n  );\n  &:not(.mdc-evolution-chip--selected) {\n    @include icon-color(\n      (\n        enabled: map.get($theme, with-icon-unselected-icon-color),\n        disabled: map.get($theme, with-icon-unselected-disabled-icon-color),\n        hover: map.get($theme, with-icon-unselected-hover-icon-color),\n        focus: map.get($theme, with-icon-unselected-focus-icon-color),\n        pressed: map.get($theme, with-icon-unselected-pressed-icon-color),\n      )\n    );\n  }\n  @include icon-color(\n    (\n      disabled: map.get($theme, with-leading-icon-disabled-leading-icon-color),\n      focus: map.get($theme, with-leading-icon-focus-leading-icon-color),\n      hover: map.get($theme, with-leading-icon-hover-leading-icon-color),\n      enabled: map.get($theme, with-leading-icon-leading-icon-color),\n      pressed: map.get($theme, with-leading-icon-pressed-leading-icon-color),\n    )\n  );\n  @include trailing-action-color(\n    (\n      disabled: map.get($theme, with-trailing-icon-disabled-trailing-icon-color),\n      focus: map.get($theme, with-trailing-icon-focus-trailing-icon-color),\n      hover: map.get($theme, with-trailing-icon-hover-trailing-icon-color),\n      enabled: map.get($theme, with-trailing-icon-trailing-icon-color),\n      pressed: map.get($theme, with-trailing-icon-pressed-trailing-icon-color),\n    )\n  );\n  @include _ripple-theme(\n    (\n      focus-state-layer-color: map.get($theme, focus-state-layer-color),\n      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),\n      hover-state-layer-color: map.get($theme, hover-state-layer-color),\n      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),\n      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),\n      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),\n    )\n  );\n  &.mdc-evolution-chip--selected {\n    @include _ripple-theme(\n      (\n        focus-state-layer-color:\n          map.get($theme, selected-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, selected-focus-state-layer-opacity),\n        hover-state-layer-color:\n          map.get($theme, selected-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, selected-hover-state-layer-opacity),\n        pressed-state-layer-color:\n          map.get($theme, selected-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, selected-pressed-state-layer-opacity),\n      )\n    );\n  }\n  &:not(.mdc-evolution-chip--selected) {\n    @include _ripple-theme(\n      (\n        focus-state-layer-color:\n          map.get($theme, unselected-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, unselected-focus-state-layer-opacity),\n        hover-state-layer-color:\n          map.get($theme, unselected-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, unselected-hover-state-layer-opacity),\n        pressed-state-layer-color:\n          map.get($theme, unselected-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, unselected-pressed-state-layer-opacity),\n      )\n    );\n  }\n}\n\n@function resolve-theme($theme, $resolvers) {\n  $elevation-resolver: map.get($resolvers, elevation);\n  @if $elevation-resolver == null {\n    @return $theme;\n  }\n\n  $elevation-pairs: (\n    container-shadow-color: (\n      container-elevation,\n    ),\n    flat-container-shadow-color: (\n      flat-container-elevation,\n    ),\n    elevated-container-shadow-color: (\n      elevated-container-elevation,\n      elevated-disabled-container-elevation,\n      elevated-focus-container-elevation,\n      elevated-hover-container-elevation,\n      elevated-pressed-container-elevation,\n      elevated-selected-container-elevation,\n      elevated-selected-disabled-container-elevation,\n      elevated-selected-focus-container-elevation,\n      elevated-selected-hover-container-elevation,\n      elevated-selected-pressed-container-elevation,\n      flat-selected-focus-container-elevation,\n      flat-selected-hover-container-elevation,\n      flat-selected-pressed-container-elevation,\n      flat-unselected-focus-container-elevation,\n      flat-unselected-hover-container-elevation,\n      flat-unselected-pressed-container-elevation,\n    ),\n  );\n\n  @each $shadow-color-key, $elevation-keys in $elevation-pairs {\n    $shadow-color: map.get($theme, $shadow-color-key);\n    @if $shadow-color != null {\n      @each $key in $elevation-keys {\n        $elevation: map.get($theme, $key);\n        @if $elevation != null {\n          $resolved-value: meta.call(\n            $elevation-resolver,\n            $elevation: $elevation,\n            $shadow-color: $shadow-color\n          );\n          // Update the key with the resolved value.\n          $theme: map.set($theme, $key, $resolved-value);\n        }\n      }\n    }\n  }\n  @return $theme;\n}\n\n@mixin _ripple-theme($ripple-theme) {\n  .mdc-evolution-chip__action--primary {\n    @include ripple-theme.internal-theme-styles(\n      (\n        focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($ripple-theme, focus-state-layer-opacity),\n        hover-state-layer-color: map.get($ripple-theme, hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($ripple-theme, hover-state-layer-opacity),\n        pressed-state-layer-color:\n          map.get($ripple-theme, pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($ripple-theme, pressed-state-layer-opacity),\n      ),\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n///\n/// Sets the ripple color of the chip.\n/// @param {Color} $color - The color of the ripple.\n/// @param {Map} $opacity-map [null] - The optional opacity map for the states.\n///\n@mixin ripple-color(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  @include _ripple-color($color, $opacity-map, $query);\n}\n\n///\n/// Sets the selected ripple color of the chip.\n/// @param {Color} $color - The color of the ripple.\n/// @param {Map} $opacity-map [null] - The optional opacity map for the states.\n///\n@mixin selected-ripple-color(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  &.mdc-evolution-chip--selected {\n    @include ripple-color($color, $opacity-map, $query: $query);\n  }\n}\n\n@mixin _ripple-color($color, $opacity-map, $query) {\n  .mdc-evolution-chip__action--primary {\n    @include ripple-theme.states(\n      $color: $color,\n      $opacity-map: $opacity-map,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n///\n/// Sets the ripple color of the chip's trailing action.\n/// @param {Color} $color - The color of the ripple.\n/// @param {Map} $opacity-map [null] - The optional opacity map for the states.\n///\n@mixin trailing-action-ripple-color(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  .mdc-evolution-chip__action--trailing {\n    @include ripple-theme.states(\n      $color: $color,\n      $opacity-map: $opacity-map,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n///\n/// Sets the size of the trailing action's ripple.\n/// @param {Number} $size - The size of the ripple.\n///\n@mixin trailing-action-ripple-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-evolution-chip__ripple--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n    }\n  }\n}\n\n///\n/// Sets the density scale for the chip.\n/// @param {Number | String} $density-scale - Density scale value for component.\n///     Supported density scale values are `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $height: density.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height($height, $query: $query);\n\n  @if $density-scale != 0 {\n    @include _reset-touch-target($query: $query);\n  }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin _reset-touch-target($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__action-touch {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n    }\n  }\n}\n\n///\n/// Sets custom height for the chip.\n/// @param {Number} $height - The height of the chip.\n///\n@mixin height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin _container-shape($radius) {\n  @include shape.radius($radius);\n\n  #{$ripple-target} {\n    @include shape.radius($radius);\n  }\n\n  .mdc-evolution-chip__action--primary:before {\n    @include shape.radius($radius);\n  }\n}\n\n///\n/// Sets the shape radius of the chip.\n/// @param {Number|List} $radius - Shape radius in `border-radius` CSS format.\n/// @param {Boolean} $rtl-reflexive - True flips radius corners in RTL.\n///\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include shape.radius(\n    $radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n\n  #{$ripple-target} {\n    @include shape.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  .mdc-evolution-chip__action--primary:before {\n    @include shape.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  .mdc-evolution-chip__icon--primary {\n    @include shape.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the width of the chip outline.\n/// @param {Number} $width - The width of the chip outline.\n///\n@mixin outline-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__action--primary:before {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-width, $width);\n    }\n  }\n}\n\n///\n/// Customizes the outline color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.\n///\n/// @example\n///   @include outline-color(blue);\n///   @include outline-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The outline's color or a state Map\n///\n@mixin outline-color($color-or-map, $query: feature-targeting.all()) {\n  @include _outline-color(state.get-default-state($color-or-map), $query);\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _outline-color(state.get-enabled-state($color-or-map), $query);\n  }\n  @include _focus-outline-color(state.get-focus-state($color-or-map), $query);\n  &.mdc-evolution-chip--disabled {\n    @include _outline-color(state.get-disabled-state($color-or-map), $query);\n  }\n}\n\n///\n/// Customizes the selected outline color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.\n///\n/// @example\n///   @include selected-outline-color(blue);\n///   @include selected-outline-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The outline's color or a state Map\n///\n@mixin selected-outline-color($color-or-map, $query: feature-targeting.all()) {\n  &.mdc-evolution-chip--selected {\n    @include outline-color($color-or-map, $query: $query);\n  }\n}\n\n@mixin _outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__action--primary:before {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(border-color, $color);\n      }\n\n      // TODO(b/206694742): Find a better solution.\n      @if $color == transparent {\n        @include dom.forced-colors-mode($exclude-ie11: true) {\n          @include theme.property(border-color, CanvasText);\n        }\n      }\n    }\n  }\n}\n\n@mixin _focus-outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      &:before {\n        @include feature-targeting.targets($feat-color) {\n          @if $color {\n            @include theme.property(border-color, $color);\n          }\n        }\n      }\n    }\n  }\n}\n\n///\n/// Sets the style of the chip outline.\n/// @param {String} $style - The style of the chip outline.\n///\n@mixin outline-style($style, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__action--primary:before {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-style, $style);\n    }\n  }\n}\n\n///\n/// Customizes the container color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `disabled`.\n///\n/// @example\n///   @include container-color(blue);\n///   @include container-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The container's color or a state Map\n///\n@mixin container-color($color-or-map, $query: feature-targeting.all()) {\n  @include _container-color(state.get-default-state($color-or-map), $query);\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _container-color(state.get-enabled-state($color-or-map), $query);\n  }\n  &.mdc-evolution-chip--disabled {\n    @include _container-color(state.get-disabled-state($color-or-map), $query);\n  }\n}\n\n///\n/// Customizes the selected container color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `disabled`.\n///\n/// @example\n///   @include selected-container-color(blue);\n///   @include selected-container-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The container's color or a state Map\n///\n@mixin selected-container-color(\n  $color-or-map,\n  $query: feature-targeting.all()\n) {\n  &.mdc-evolution-chip--selected {\n    @include container-color($color-or-map, $query: $query);\n  }\n}\n\n@mixin _container-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @if $color {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the text label color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include text-label-color(blue);\n///   @include text-label-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n///\n@mixin text-label-color($color-or-map, $query: feature-targeting.all()) {\n  @include _text-label-color(state.get-default-state($color-or-map), $query);\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _text-label-color(state.get-enabled-state($color-or-map), $query);\n  }\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {\n    @include _text-label-color(state.get-hover-state($color-or-map), $query);\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      @include _text-label-color(state.get-focus-state($color-or-map), $query);\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    @include _text-label-color(state.get-disabled-state($color-or-map), $query);\n  }\n}\n\n///\n/// Customizes the selected text label color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include selected-text-label-color(blue);\n///   @include selected-text-label-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n///\n@mixin selected-text-label-color(\n  $color-or-map,\n  $query: feature-targeting.all()\n) {\n  &.mdc-evolution-chip--selected {\n    @include text-label-color($color-or-map, $query: $query);\n  }\n}\n\n@mixin _text-label-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__text-label {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Sets the type scale of the text label.\n/// @param {String} $type-scale - The type scale of the text label.\n///\n@mixin text-label-type-scale($type-scale, $query: feature-targeting.all()) {\n  .mdc-evolution-chip__text-label {\n    @include typography.typography($type-scale, $query: $query);\n  }\n}\n\n///\n/// Sets the size of the graphic.\n/// @param {Number} $size - The size of the graphic.\n///\n@mixin graphic-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Expose the width as a readable custom property that can be used when\n  // computing the chip bounding client rect as an additive value for the chip\n  // width. This solves for selectable chips without icons growing/shrinking as\n  // they toggle their selected state. The ripple dimensions will have been\n  // computed based on the unselected bounding client react which will not have\n  // enough horizontal space to account for the growth in width.\n  &.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon) {\n    @if $size {\n      @include theme.property(--mdc-chip-graphic-selected-width, $size);\n    }\n  }\n\n  .mdc-evolution-chip__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n      @include theme.property(font-size, $size);\n    }\n  }\n}\n\n///\n/// Customizes the icon color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.\n///\n/// @example\n///   @include icon-color(blue);\n///   @include icon-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The icon's color or a state Map\n///\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n  @include _icon-color(state.get-default-state($color-or-map), $query);\n\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _icon-color(state.get-enabled-state($color-or-map), $query);\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {\n    @include _icon-color(state.get-hover-state($color-or-map), $query);\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      @include _icon-color(state.get-focus-state($color-or-map), $query);\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    @include _icon-color(state.get-disabled-state($color-or-map), $query);\n  }\n}\n\n@mixin _icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__icon--primary {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes the icon container color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include icon-container-color(blue);\n///   @include icon-container-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The icon's container color or a state Map\n///\n@mixin icon-container-color($color-or-map, $query: feature-targeting.all()) {\n  @include _icon-container-color(\n    state.get-default-state($color-or-map),\n    $query\n  );\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {\n    @include _icon-container-color(\n      state.get-hover-state($color-or-map),\n      $query\n    );\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      @include _icon-container-color(\n        state.get-focus-state($color-or-map),\n        $query\n      );\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    @include _icon-container-color(\n      state.get-disabled-state($color-or-map),\n      $query\n    );\n  }\n}\n\n@mixin _icon-container-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__icon--primary {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Sets the size of the icon.\n/// @param {Number} $size - The size of the icon.\n///\n@mixin icon-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__icon--primary {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n      @include theme.property(font-size, $size);\n    }\n  }\n}\n\n///\n/// Sets the size of the trailing action.\n/// @param {Number} $size - The size of the trailing action.\n///\n@mixin trailing-action-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__icon--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n      @include theme.property(font-size, $size);\n    }\n  }\n}\n\n///\n/// Customizes the trailing action color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include trailing-action-color(blue);\n///   @include trailing-action-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The trailing action's color or a state Map\n///\n@mixin trailing-action-color($color-or-map, $query: feature-targeting.all()) {\n  @include _trailing-action-color(\n    state.get-default-state($color-or-map),\n    $query\n  );\n\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _trailing-action-color(\n      state.get-enabled-state($color-or-map),\n      $query\n    );\n  }\n\n  .mdc-evolution-chip__action--trailing:hover {\n    @include _trailing-action-color(\n      state.get-hover-state($color-or-map),\n      $query\n    );\n  }\n\n  .mdc-evolution-chip__action--trailing {\n    @include ripple-theme.focus() {\n      @include _trailing-action-color(\n        state.get-focus-state($color-or-map),\n        $query\n      );\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    @include _trailing-action-color(\n      state.get-disabled-state($color-or-map),\n      $query\n    );\n  }\n}\n\n@mixin _trailing-action-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__icon--trailing {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Sets the size of the checkmark.\n/// @param {Number} $size - The size of the checkmark.\n///\n@mixin checkmark-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__checkmark {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n    }\n  }\n}\n\n///\n/// Customizes the checkmark color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include checkmark-color(blue);\n///   @include checkmark-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The checkmark's color or a state Map\n///\n@mixin checkmark-color($color-or-map, $query: feature-targeting.all()) {\n  @include _checkmark-color(state.get-default-state($color-or-map), $query);\n\n  &:not(.mdc-evolution-chip--disabled) {\n    @include _checkmark-color(state.get-enabled-state($color-or-map), $query);\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {\n    @include _checkmark-color(state.get-hover-state($color-or-map), $query);\n  }\n\n  .mdc-evolution-chip__action--primary {\n    @include ripple-theme.focus() {\n      @include _checkmark-color(state.get-focus-state($color-or-map), $query);\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    @include _checkmark-color(state.get-disabled-state($color-or-map), $query);\n  }\n}\n\n@mixin _checkmark-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__checkmark {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes the checkmark container color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.\n///\n/// @example\n///   @include checkmark-container-color(blue);\n///   @include checkmark-container-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The checkmark container's color or a state Map\n///\n@mixin checkmark-container-color(\n  $color-or-map,\n  $query: feature-targeting.all()\n) {\n  @include _checkmark-container-color(\n    state.get-default-state($color-or-map),\n    $query\n  );\n\n  &.mdc-evolution-chip--disabled {\n    @include _checkmark-container-color(\n      state.get-disabled-state($color-or-map),\n      $query\n    );\n  }\n}\n\n@mixin _checkmark-container-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-evolution-chip__checkmark-background {\n    @include feature-targeting.targets($feat-color) {\n      @if $color {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Sets the horizontal padding for the chip.\n/// @param {Number} $leading - The leading padding for the chip.\n/// @param {Number} $trailing [$leading] - The trailing padding for the chip.\n///\n@mixin horizontal-padding(\n  $leading,\n  $trailing: $leading,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip__action--primary {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, $leading, $trailing);\n    }\n  }\n}\n\n///\n/// Sets the horizontal padding for chips with a graphic.\n/// @param {Number} $graphic-leading - The leading padding for the graphic.\n/// @param {Number} $graphic-trailing - The trailing padding for the graphic.\n/// @param {Number} $primary-trailing - The trailing padding for the primary action.\n///\n@mixin with-graphic-horizontal-padding(\n  $graphic-leading,\n  $graphic-trailing,\n  $primary-trailing,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &.mdc-evolution-chip--with-primary-graphic {\n    .mdc-evolution-chip__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          $graphic-leading,\n          $graphic-trailing\n        );\n      }\n    }\n\n    .mdc-evolution-chip__action--primary {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(padding, 0, $primary-trailing);\n      }\n    }\n  }\n}\n\n///\n/// Sets the horizontal padding for chips with a trailing action.\n/// @param {Number} $primary-leading - The leading padding for the primary action.\n/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.\n/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.\n///\n@mixin with-trailing-action-horizontal-padding(\n  $primary-leading,\n  $trailing-action-leading,\n  $trailing-action-trailing,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &.mdc-evolution-chip--with-trailing-action {\n    .mdc-evolution-chip__action--trailing {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          $trailing-action-leading,\n          $trailing-action-trailing\n        );\n      }\n    }\n\n    #{$ripple-target-trailing} {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-position(left, $trailing-action-leading);\n      }\n    }\n\n    .mdc-evolution-chip__action--primary {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(padding, $primary-leading, 0);\n      }\n    }\n  }\n}\n\n///\n/// Sets the horizontal padding for chips with a graphic and trailing action.\n/// @param {Number} $graphic-leading - The leading padding for the graphic.\n/// @param {Number} $graphic-trailing - The trailing padding for the graphic.\n/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.\n/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.\n///\n@mixin with-graphic-and-trailing-action-horizontal-padding(\n  $graphic-leading,\n  $graphic-trailing,\n  $trailing-action-leading,\n  $trailing-action-trailing,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {\n    .mdc-evolution-chip__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          $graphic-leading,\n          $graphic-trailing\n        );\n      }\n    }\n\n    .mdc-evolution-chip__action--trailing {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          $trailing-action-leading,\n          $trailing-action-trailing\n        );\n      }\n    }\n\n    #{$ripple-target-trailing} {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-position(left, $trailing-action-leading);\n      }\n    }\n\n    .mdc-evolution-chip__action--primary {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(padding, 0, 0);\n      }\n    }\n  }\n}\n\n@mixin _container-elevation-theme($theme) {\n  @if map.get($theme, shadow) {\n    @include elevation-theme.shadow(map.get($theme, shadow));\n  }\n  @if map.get($theme, overlay-opacity) {\n    @include elevation-theme.overlay-opacity(map.get($theme, overlay-opacity));\n  }\n  // TODO(b/260053182): Remove setting overlay color after migration of customers\n  @if map.get($theme, overlay-color) {\n    @include elevation-theme.overlay-container-color(\n      map.get($theme, overlay-color)\n    );\n  }\n}\n\n// TODO(b/259913622): Use elevation's theme-style() mixin.\n@mixin _container-elevation($map) {\n  $default-state: state.get-default-state($map);\n  @if $default-state {\n    @include _container-elevation-theme($default-state);\n  }\n\n  &:not(.mdc-evolution-chip--disabled) {\n    $enabled-state: state.get-enabled-state($map);\n    @if $enabled-state {\n      @include _container-elevation-theme($enabled-state);\n    }\n  }\n\n  @include ripple-theme.hover() {\n    $hover-state: state.get-hover-state($map);\n    @if $hover-state {\n      @include _container-elevation-theme($hover-state);\n    }\n  }\n\n  @include ripple-theme.focus() {\n    $focus-state: state.get-focus-state($map);\n    @if $focus-state {\n      @include _container-elevation-theme($focus-state);\n    }\n  }\n\n  @include ripple-theme.pressed() {\n    $pressed-state: state.get-pressed-state($map);\n    @if $pressed-state {\n      @include _container-elevation-theme($pressed-state);\n    }\n  }\n\n  &.mdc-evolution-chip--disabled {\n    $disabled-state: state.get-disabled-state($map);\n    @if $disabled-state {\n      @include _container-elevation-theme($disabled-state);\n    }\n  }\n}\n\n@mixin button-cursor($cursor) {\n  .mdc-evolution-chip__action {\n    cursor: $cursor;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/_chip.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Chip MDC component.\n\n@use '@material/animation/animation';\n@use '@material/dom/dom';\n@use '@material/elevation/elevation-theme';\n@use '@material/focus-ring/focus-ring';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme-color';\n@use '@material/touch-target/touch-target';\n@use './chip-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple-styles($query);\n  @include ripple-styles($query);\n}\n\n@mixin without-ripple-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include _theme-styles($query);\n}\n\n@mixin ripple-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include chip-theme.ripple-color(chip-theme.$ripple-color, $query: $query);\n  @include chip-theme.trailing-action-ripple-color(\n    chip-theme.$ripple-color,\n    $query: $query\n  );\n  @include chip-theme.trailing-action-ripple-size(\n    chip-theme.$trailing-action-size,\n    $query: $query\n  );\n\n  .mdc-evolution-chip__action {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: chip-theme.$ripple-target,\n      $include-will-change: false\n    );\n\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: chip-theme.$ripple-target\n    );\n  }\n\n  #{chip-theme.$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      // Ripple needs content-box as the box sizing and box-sizing: border-box\n      // is often set as a default, so we override that here.\n      box-sizing: content-box;\n      overflow: hidden;\n      pointer-events: none;\n    }\n  }\n\n  #{chip-theme.$ripple-target-primary} {\n    @include feature-targeting.targets($feat-structure) {\n      height: 100%;\n      width: 100%;\n      top: 0;\n      @include rtl.ignore-next-line();\n      left: 0;\n    }\n  }\n\n  #{chip-theme.$ripple-target-trailing} {\n    @include feature-targeting.targets($feat-structure) {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-evolution-chip,\n  .mdc-evolution-chip__cell,\n  .mdc-evolution-chip__action {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  .mdc-evolution-chip {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      max-width: 100%;\n    }\n    @include elevation-theme.overlay-dimensions(100%, $query: $query);\n  }\n\n  .mdc-evolution-chip__cell,\n  .mdc-evolution-chip__action {\n    @include feature-targeting.targets($feat-structure) {\n      height: 100%;\n    }\n  }\n\n  .mdc-evolution-chip__cell--primary {\n    @include feature-targeting.targets($feat-structure) {\n      overflow-x: hidden;\n    }\n  }\n\n  .mdc-evolution-chip__cell--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      flex: 1 0 auto;\n    }\n  }\n\n  .mdc-evolution-chip__action {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      background: none;\n      border: none;\n      box-sizing: content-box;\n      cursor: pointer;\n      display: inline-flex;\n      justify-content: center;\n      outline: none;\n      padding: 0;\n      text-decoration: none;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      color: inherit;\n    }\n  }\n\n  .mdc-evolution-chip__action--presentational {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: auto;\n    }\n  }\n\n  .mdc-evolution-chip--disabled,\n  .mdc-evolution-chip__action:disabled {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n\n  .mdc-evolution-chip__action--primary {\n    @include feature-targeting.targets($feat-structure) {\n      overflow-x: hidden;\n    }\n  }\n\n  .mdc-evolution-chip__action--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      overflow: visible;\n    }\n  }\n\n  .mdc-evolution-chip__action--primary:before {\n    @include feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      content: '';\n      height: 100%;\n      left: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 0;\n      width: 100%;\n      z-index: 1; // Position above touch target\n    }\n  }\n\n  .mdc-evolution-chip--touch {\n    @include touch-target.margin(\n      $component-height: chip-theme.$height,\n      $query: $query\n    );\n  }\n\n  .mdc-evolution-chip__action-touch {\n    @include touch-target.touch-target($query: $query);\n  }\n\n  .mdc-evolution-chip__text-label {\n    @include feature-targeting.targets($feat-structure) {\n      white-space: nowrap;\n      user-select: none;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  }\n\n  .mdc-evolution-chip__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      overflow: hidden;\n      pointer-events: none;\n      position: relative;\n      flex: 1 0 auto;\n    }\n  }\n\n  .mdc-evolution-chip__checkmark {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      opacity: 0;\n      top: 50%;\n      @include rtl.ignore-next-line();\n      left: 50%;\n    }\n  }\n\n  .mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected) {\n    &:not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        width: 0;\n      }\n    }\n  }\n\n  .mdc-evolution-chip__checkmark-background {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n  }\n\n  .mdc-evolution-chip__checkmark-svg {\n    @include feature-targeting.targets($feat-structure) {\n      display: block;\n    }\n  }\n\n  .mdc-evolution-chip__checkmark-path {\n    @include feature-targeting.targets($feat-structure) {\n      stroke-width: 2px;\n      stroke-dasharray: 29.7833385;\n      stroke-dashoffset: 29.7833385;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      stroke: currentColor;\n    }\n  }\n\n  .mdc-evolution-chip--selecting {\n    .mdc-evolution-chip__graphic {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(width, 150ms);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(transform, 150ms);\n        @include rtl.ignore-next-line();\n        transform: translate(-75%, -50%);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark-path {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(stroke-dashoffset, 150ms, $delay: 45ms);\n      }\n    }\n  }\n\n  .mdc-evolution-chip--deselecting {\n    .mdc-evolution-chip__graphic {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(width, 100ms);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.linear(opacity, 50ms),\n          animation.standard(transform, 100ms);\n        @include rtl.ignore-next-line();\n        transform: translate(-75%, -50%);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark-path {\n      @include feature-targeting.targets($feat-animation) {\n        // Ensure the checkmark path stays visible\n        stroke-dashoffset: 0;\n      }\n    }\n  }\n\n  .mdc-evolution-chip--selecting-with-primary-icon {\n    .mdc-evolution-chip__icon--primary {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(opacity, 75ms);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark-path {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(stroke-dashoffset, 150ms, $delay: 75ms);\n      }\n    }\n  }\n\n  .mdc-evolution-chip--deselecting-with-primary-icon {\n    .mdc-evolution-chip__icon--primary {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(opacity, 150ms, $delay: 75ms);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.standard(opacity, 75ms);\n        // Ensure the checkmark stays statically positioned\n        @include rtl.ignore-next-line();\n        transform: translate(-50%, -50%);\n      }\n    }\n\n    .mdc-evolution-chip__checkmark-path {\n      @include feature-targeting.targets($feat-animation) {\n        // Ensure the checkmark path stays visible\n        stroke-dashoffset: 0;\n      }\n    }\n  }\n\n  .mdc-evolution-chip--selected {\n    .mdc-evolution-chip__icon--primary {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n\n    .mdc-evolution-chip__checkmark {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        transform: translate(-50%, -50%);\n        opacity: 1;\n      }\n    }\n\n    .mdc-evolution-chip__checkmark-path {\n      @include feature-targeting.targets($feat-structure) {\n        stroke-dashoffset: 0;\n      }\n    }\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-evolution-chip-enter {\n      from {\n        transform: scale(0.8);\n        opacity: 0.4;\n      }\n\n      to {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  }\n\n  .mdc-evolution-chip--enter {\n    @include feature-targeting.targets($feat-animation) {\n      animation: animation.enter(mdc-evolution-chip-enter, 100ms);\n    }\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-evolution-chip-exit {\n      from {\n        opacity: 1;\n      }\n\n      to {\n        opacity: 0;\n      }\n    }\n  }\n\n  .mdc-evolution-chip--exit {\n    @include feature-targeting.targets($feat-animation) {\n      animation: animation.exit-permanent(mdc-evolution-chip-exit, 75ms);\n    }\n  }\n\n  .mdc-evolution-chip--hidden {\n    @include feature-targeting.targets($feat-animation) {\n      opacity: 0;\n      pointer-events: none;\n      transition: animation.exit-permanent(width, 150ms);\n    }\n  }\n}\n\n@mixin _high-contrast-mode($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include dom.forced-colors-mode {\n    &.mdc-evolution-chip {\n      @include chip-theme.outline-color(\n        (\n          default: CanvasText,\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.selected-outline-color(\n        (\n          default: CanvasText,\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.text-label-color(\n        (\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.selected-text-label-color(\n        (\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.icon-color(\n        (\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.checkmark-color(\n        (\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.trailing-action-color(\n        (\n          disabled: GrayText,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.container-color(\n        (\n          disabled: Canvas,\n        ),\n        $query: $query\n      );\n\n      @include chip-theme.selected-container-color(\n        (\n          disabled: Canvas,\n        ),\n        $query: $query\n      );\n    }\n  }\n\n  ///\n  /// Renders a transparent border on focus in Windows high-contrast mode.\n  ///\n\n  .mdc-evolution-chip__focus-ring {\n    display: none;\n  }\n\n  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      .mdc-evolution-chip__focus-ring {\n        z-index: 1;\n        display: block;\n        @include focus-ring.focus-ring($query: $query);\n      }\n    }\n  }\n\n  .mdc-evolution-chip__action--trailing:not(.mdc-evolution-chip__action--presentational) {\n    @include ripple-theme.focus() {\n      .mdc-evolution-chip__focus-ring {\n        z-index: 1;\n        display: block;\n        @include focus-ring.focus-ring(\n          $container-outer-padding-vertical: 2px,\n          $container-outer-padding-horizontal: -2px,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin _theme-styles($query: feature-targeting.all()) {\n  .mdc-evolution-chip {\n    @include chip-theme.height(chip-theme.$height, $query);\n    @include chip-theme.shape-radius(chip-theme.$radius, $query);\n    @include chip-theme.horizontal-padding(\n      chip-theme.$leading-padding,\n      chip-theme.$trailing-padding,\n      $query\n    );\n    @include chip-theme.with-graphic-horizontal-padding(\n      chip-theme.$graphic-leading-padding,\n      chip-theme.$graphic-trailing-padding,\n      chip-theme.$trailing-padding\n    );\n    @include chip-theme.with-trailing-action-horizontal-padding(\n      chip-theme.$leading-padding,\n      chip-theme.$trailing-action-leading-padding,\n      chip-theme.$trailing-action-trailing-padding,\n      $query\n    );\n    @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(\n      chip-theme.$graphic-leading-padding,\n      chip-theme.$graphic-trailing-padding,\n      chip-theme.$trailing-action-leading-padding,\n      chip-theme.$trailing-action-trailing-padding,\n      $query\n    );\n    @include chip-theme.container-color(chip-theme.$container-color, $query);\n    @include chip-theme.text-label-color(chip-theme.$text-label-color, $query);\n    @include chip-theme.icon-color(chip-theme.$icon-color, $query);\n    @include chip-theme.checkmark-color(chip-theme.$checkmark-color, $query);\n    @include chip-theme.trailing-action-color(\n      chip-theme.$trailing-action-color,\n      $query\n    );\n    @include chip-theme.text-label-type-scale(chip-theme.$type-scale, $query);\n    @include chip-theme.graphic-size(chip-theme.$leading-icon-size, $query);\n    @include chip-theme.icon-size(chip-theme.$leading-icon-size, $query);\n    @include chip-theme.checkmark-size(chip-theme.$checkmark-size, $query);\n    @include chip-theme.trailing-action-size(\n      chip-theme.$trailing-action-size,\n      $query\n    );\n\n    @include _high-contrast-mode($query);\n  }\n\n  .mdc-evolution-chip--filter {\n    @include chip-theme.selected-container-color(\n      chip-theme.$filter-selected-container-color,\n      $query\n    );\n  }\n\n  .mdc-evolution-chip--with-avatar {\n    @include chip-theme.with-graphic-horizontal-padding(\n      chip-theme.$avatar-leading-padding,\n      chip-theme.$avatar-trailing-padding,\n      chip-theme.$trailing-padding\n    );\n    @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(\n      chip-theme.$avatar-leading-padding,\n      chip-theme.$avatar-trailing-padding,\n      chip-theme.$trailing-action-leading-padding,\n      chip-theme.$trailing-action-trailing-padding\n    );\n    @include chip-theme.graphic-size(chip-theme.$avatar-size, $query);\n    @include chip-theme.icon-size(chip-theme.$avatar-size, $query);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/_filter-chip-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './chip-theme';\n\n$_light-theme: (\n  container-shape: null,\n  container-height: null,\n  elevated-container-shadow-color: null,\n  flat-container-elevation: null,\n  flat-unselected-outline-color: null,\n  flat-unselected-outline-width: null,\n  flat-selected-container-color: null,\n  flat-selected-outline-color: null,\n  flat-selected-outline-width: null,\n  elevated-container-elevation: null,\n  elevated-unselected-container-color: null,\n  elevated-selected-container-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-size: null,\n  label-text-weight: null,\n  label-text-tracking: null,\n  unselected-label-text-color: null,\n  selected-label-text-color: null,\n  with-icon-icon-size: null,\n  with-icon-unselected-icon-color: null,\n  with-icon-selected-icon-color: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  flat-disabled-unselected-outline-color: null,\n  flat-disabled-unselected-outline-opacity: null,\n  flat-disabled-selected-outline-color: null,\n  flat-disabled-selected-container-color: null,\n  flat-disabled-selected-container-opacity: null,\n  flat-disabled-selected-outline-opacity: null,\n  with-icon-disabled-icon-color: null,\n  with-icon-disabled-icon-opacity: null,\n  elevated-disabled-container-elevation: null,\n  elevated-disabled-container-color: null,\n  elevated-disabled-container-opacity: null,\n  unselected-hover-state-layer-color: null,\n  unselected-hover-state-layer-opacity: null,\n  unselected-hover-label-text-color: null,\n  selected-hover-state-layer-color: null,\n  selected-hover-state-layer-opacity: null,\n  selected-hover-label-text-color: null,\n  with-icon-unselected-hover-icon-color: null,\n  with-icon-selected-hover-icon-color: null,\n  elevated-hover-container-elevation: null,\n  flat-selected-hover-container-elevation: null,\n  flat-unselected-hover-container-elevation: null,\n  unselected-focus-state-layer-color: null,\n  unselected-focus-state-layer-opacity: null,\n  unselected-focus-label-text-color: null,\n  selected-focus-state-layer-color: null,\n  selected-focus-state-layer-opacity: null,\n  selected-focus-label-text-color: null,\n  flat-unselected-focus-outline-color: null,\n  with-icon-unselected-focus-icon-color: null,\n  with-icon-selected-focus-icon-color: null,\n  elevated-focus-container-elevation: null,\n  elevated-pressed-container-elevation: null,\n  flat-selected-focus-container-elevation: null,\n  flat-unselected-focus-container-elevation: null,\n  unselected-pressed-state-layer-color: null,\n  unselected-pressed-state-layer-opacity: null,\n  unselected-pressed-label-text-color: null,\n  selected-pressed-state-layer-color: null,\n  selected-pressed-state-layer-opacity: null,\n  selected-pressed-label-text-color: null,\n  with-icon-unselected-pressed-icon-color: null,\n  with-icon-selected-pressed-icon-color: null,\n  elevated-selected-container-elevation: null,\n  flat-selected-pressed-container-elevation: null,\n  flat-unselected-pressed-container-elevation: null,\n  container-surface-tint-layer-color: null,\n);\n\n$_custom-property-prefix: 'filter-chip';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: chip-theme.resolve-theme($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);\n}\n"
  },
  {
    "path": "packages/mdc-chips/_index.scss",
    "content": "@forward './chip-theme';\n@forward './chip-set-theme';\n"
  },
  {
    "path": "packages/mdc-chips/_input-chip-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './chip-theme';\n\n$_light-theme: (\n  container-shape: null,\n  container-height: null,\n  container-elevation: null,\n  outline-color: null,\n  outline-width: null,\n  container-shadow-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-size: null,\n  label-text-weight: null,\n  label-text-tracking: null,\n  label-text-color: null,\n  with-trailing-icon-trailing-icon-size: null,\n  with-trailing-icon-trailing-icon-color: null,\n  with-leading-icon-leading-icon-size: null,\n  with-leading-icon-leading-icon-color: null,\n  with-avatar-avatar-size: null,\n  with-avatar-avatar-shape: null,\n  disabled-outline-color: null,\n  disabled-outline-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  with-trailing-icon-disabled-trailing-icon-color: null,\n  with-trailing-icon-disabled-trailing-icon-opacity: null,\n  with-leading-icon-disabled-leading-icon-color: null,\n  with-leading-icon-disabled-leading-icon-opacity: null,\n  with-avatar-disabled-avatar-opacity: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  hover-label-text-color: null,\n  with-trailing-icon-hover-trailing-icon-color: null,\n  with-leading-icon-hover-leading-icon-color: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  focus-label-text-color: null,\n  focus-outline-color: null,\n  with-trailing-icon-focus-trailing-icon-color: null,\n  with-leading-icon-focus-leading-icon-color: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  pressed-label-text-color: null,\n  with-trailing-icon-pressed-trailing-icon-color: null,\n  with-leading-icon-pressed-leading-icon-color: null,\n  container-surface-tint-layer-color: null,\n);\n\n$_custom-property-prefix: 'input-chip';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: chip-theme.resolve-theme($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);\n}\n"
  },
  {
    "path": "packages/mdc-chips/_suggestion-chip-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './chip-theme';\n\n$_light-theme: (\n  container-shape: null,\n  container-height: null,\n  flat-container-elevation: null,\n  flat-outline-color: null,\n  flat-outline-width: null,\n  elevated-container-elevation: null,\n  elevated-container-color: null,\n  elevated-container-shadow-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-size: null,\n  label-text-weight: null,\n  label-text-tracking: null,\n  label-text-type: null,\n  label-text-color: null,\n  flat-disabled-outline-color: null,\n  flat-disabled-outline-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  elevated-disabled-container-elevation: null,\n  elevated-disabled-container-color: null,\n  elevated-disabled-container-opacity: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  hover-label-text-color: null,\n  elevated-hover-container-elevation: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  focus-label-text-color: null,\n  flat-focus-outline-color: null,\n  elevated-focus-container-elevation: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  pressed-label-text-color: null,\n  elevated-pressed-container-elevation: null,\n  container-surface-tint-layer-color: null,\n  with-leading-icon-disabled-leading-icon-color: null,\n  with-leading-icon-disabled-leading-icon-opacity: null,\n  with-leading-icon-focus-leading-icon-color: null,\n  with-leading-icon-hover-leading-icon-color: null,\n  with-leading-icon-leading-icon-color: null,\n  with-leading-icon-leading-icon-size: null,\n  with-leading-icon-pressed-leading-icon-color: null,\n);\n\n$_custom-property-prefix: 'suggestion-chip';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: chip-theme.resolve-theme($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);\n}\n"
  },
  {
    "path": "packages/mdc-chips/action/README.md",
    "content": "<!--docs:\ntitle: \"Chip action\"\nlayout: detail\nsection: components\nexcerpt: \"Chip actions represent interactions regions of a chip.\"\niconId: chip\npath: /catalog/chips/action/\n-->\n\n# Action\n\nActions represent discrete interactive regions of a [chip](../chip). They are only ever used inside of chips.\n\n## Basic usage\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n### HTML structure\n\nActions have two varieties: primary and trailing. All chips must have a primary action. Chips may have an optional trailing action.\n\n#### Primary action\n\nPrimary actions often use a `<button>` as the root.\n\n```html\n<button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n  <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n</button>\n```\n\nPrimary actions may also be deletable.\n\n```html\n<button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\" data-mdc-deletable=\"true\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n  <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n</button>\n```\n\nPrimary actions may also be links.\n\n```html\n<a class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" href=\"https://google.com\" tabindex=\"0\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n  <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n</a>\n```\n\nPrimary actions accept an optional leading graphic.\n\n```html\n<button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n  <span class=\"mdc-evolution-chip__graphic\">\n    <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons\">favorite</span>\n  </span>\n  <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n</button>\n```\n\nPrimary actions can also be selectable, implementing the [`option` role](https://www.w3.org/TR/wai-aria-1.1/#option). Selectable primary actions require the graphic element with the included checkmark and may also include a leading graphic.\n\n```html\n<span class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" role=\"option\" aria-selected=\"false\" tabindex=\"0\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n  <span class=\"mdc-evolution-chip__graphic\">\n    <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons\">favorite</span> <!-- optional -->\n    <span class=\"mdc-evolution-chip__checkmark\">\n      <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n        <path class=\"mdc-evolution-chip__checkmark-path\"\n              fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n      </svg>\n    </span>\n  </span>\n  <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n</span>\n```\n\n#### Trailing action\n\nTrailing actions always use a `<button> ` as the root.\n\n```html\n<button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--trailing\" type=\"button\" tabindex=\"-1\" data-mdc-deletable=\"true\">\n  <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing\"></span>\n  <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing\">close</span>\n</button>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-evolution-chip__action` | Mandatory, for the action root.\n`mdc-evolution-chip__action--primary` | Mandatory, mutually exclusive with the `*--trailing` root class.\n`mdc-evolution-chip__action--trailing` | Mandatory, mutually exclusive with the `*--primary` root class.\n`mdc-evolution-chip__action--presentational` | Optional, used to indicate the action is presentational (not interactive).\n`mdc-evolution-chip__ripple` | Mandatory, used for the ripple.\n`mdc-evolution-chip__ripple--primary` | Mandatory for the ripple, mutually exclusive with the `*--trailing` ripple class.\n`mdc-evolution-chip__ripple--trailing` | Mandatory for the ripple, mutually exclusive with the `*--primary` ripple class.\n`mdc-evolution-chip__text-label` | Mandatory for primary actions.\n`mdc-evolution-chip__graphic` | Used for optionally selectable primary actions or primary actions with a leading graphic.\n`mdc-evolution-chip__icon` | Mandatory for trailing actions, also used for optional leading graphic.\n`mdc-evolution-chip__icon--primary` | Used for optional leading graphic.\n`mdc-evolution-chip__checkmark` | Used for optionally selectable primary actions.\n`mdc-evolution-chip__checkmark-svg` | Used for optionally selectable primary actions.\n`mdc-evolution-chip__checkmark-path` | Used for optionally selectable primary actions.\n\n### Sass mixins\n\nAll Sass mixins for actions are provided by the chip Sass.\n\n### `MDCChipAction` methods\n\nThe `MDCChipAction` is exposed only to be called by the parent [`MDCChip`](../chip). Users should not interact with the `MDCChipAction` component nor rely on any exposed APIs or events.\n\n### `MDCChipActionEvents`\n\nThese events are only emitted for consumption by the parent [`MDCChip`](../chip). Non-wrapping clients **should not** listen to these events.\n\nEvent name | Detail | Description\n--- | --- | ---\n`MDCChipAction:interaction` | `MDCChipActionInteractionEventDetail` | Consumed in the parent chip `handleActionInteraction` method.\n`MDCChipAction:navigation` | `MDCChipActionNavigationEventDetail` | Consumed in the parent chip `handleActionNavigation` method.\n\n### `MDCChipActionAdapter`\n\nMethod Signature | Description\n--- | ---\n`emitEvent<D extends object>(eventName: MDCChipActionEvents, eventDetail: D): void` | Emits the given `eventName` with the given `eventDetail`.\n`focus(): void` | Focuses the action root.\n`getAttribute(attr: MDCChipActionAttributes): string\\|null` | Returns the attribute on the action root or `null` if none exists.\n`getElementID(): string` | Returns the `[id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)` of the action root.\n`removeAttribute(attr: MDCChipActionAttributes): void` | Removes the attribute from the action root.\n`setAttribute(attr: MDCChipActionAttributes, value: string): void` | Sets the action root attribute to the given `value`\n\n### `MDCChipActionFoundation`\n\n`MDCChipActionFoundation` is abstract with concrete subclasses.\n\nMethod Signature | Description\n--- | ---\n`handleClick(): void` | Handles the [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) event.\n`handleKeydown(event: KeyboardEvent): void` | Handles the [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) event.\n`setDisabled(isDisabled: boolean): void` | Sets the disabled state.\n`isDisabled(): boolean` | Returns the disabled state.\n`setFocus(behavior: MDCChipActionFocusBehavior): void` | Set the focus behavior.\n`isFocusable(): boolean` | Returns whether the action if focusable.\n`setSelected(isSelected: boolean): void` | Sets the selected state.\n`isSelected(): boolean` | Returns the selected state.\n`abstract actionType(): MDCChipActionType` | Returns the type of the action.\n`abstract isSelectable(): boolean` | Returns whether the action is selectable.\n\n#### Subclasses\n\n`MDCChipActionFoundation` is subclassed by `MDCChipPrimaryActionFoundation` and `MDCChipTrailingActionFoundation` which encapsulate the behavioral differences between primary and trailing actions. Clients **should not** subclass `MDCChipActionFoundation` themselves. Wrapping clients should provide the correct `MDCChipActionFoundation` subclass for their DOM. The following logic is pulled from the `MDCChipAction` component and should serve as an example of determing which subclass to use.\n\n```ts\nfunction init(root: HTMLElement, adapter: MDCChipTrailingActionAdapter): MDCChipTrailingActionFoundation {\n  if (root.classList.contains(CssClasses.TRAILING_ACTION)) {\n    return new MDCChipTrailingActionFoundation(adapter);\n  }\n\n  // Default to the primary foundation\n  return new MDCChipPrimaryActionFoundation(adapter);\n}\n```\n\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a chip action for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n"
  },
  {
    "path": "packages/mdc-chips/action/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionAttributes, MDCChipActionEvents} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipActionAdapter {\n  emitEvent<D extends object>(name: MDCChipActionEvents, detail: D): void;\n\n  focus(): void;\n\n  getAttribute(attr: MDCChipActionAttributes): string|null;\n\n  getElementID(): string;\n\n  removeAttribute(attr: MDCChipActionAttributes): void;\n\n  setAttribute(attr: MDCChipActionAttributes, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-chips/action/component-ripple.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Computes the ripple client rect for the primary action given the raw client\n * rect and the selected width graphic style property.\n */\nexport function computePrimaryActionRippleClientRect(\n    clientRect: DOMRect, graphicSelectedWidthStyleValue: string): DOMRect {\n  // parseInt is banned so we need to manually format and parse the string.\n  const graphicWidth = Number(graphicSelectedWidthStyleValue.replace('px', ''));\n  if (Number.isNaN(graphicWidth)) {\n    return clientRect;\n  }\n  // Can't use the spread operator because it has internal problems\n  return {\n    width: clientRect.width + graphicWidth,\n    height: clientRect.height,\n    top: clientRect.top,\n    right: clientRect.right,\n    bottom: clientRect.bottom,\n    left: clientRect.left\n  } as any;\n}\n\n/**\n * Provides the CSS custom property whose value is read by\n * computePrimaryRippleClientRect. The CSS custom property provides the width\n * of the chip graphic when selected. It is only set for the unselected chip\n * variant without a leadinc icon. In all other cases, it will have no value.\n */\nexport const GRAPHIC_SELECTED_WIDTH_STYLE_PROP =\n    '--mdc-chip-graphic-selected-width';\n"
  },
  {
    "path": "packages/mdc-chips/action/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {closest} from '@material/dom/ponyfill';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\nimport {safeAttrPrefix} from 'safevalues';\nimport {setElementPrefixedAttribute} from 'safevalues/dom';\n\nimport {MDCChipActionAdapter} from './adapter';\nimport {\n  computePrimaryActionRippleClientRect,\n  GRAPHIC_SELECTED_WIDTH_STYLE_PROP,\n} from './component-ripple';\nimport {\n  MDCChipActionCssClasses,\n  MDCChipActionFocusBehavior,\n  MDCChipActionType,\n} from './constants';\nimport {MDCChipActionFoundation} from './foundation';\nimport {MDCChipPrimaryActionFoundation} from './primary-foundation';\nimport {MDCChipTrailingActionFoundation} from './trailing-foundation';\n\n/**\n * MDCChipActionFactory is used by the parent MDCChip component to initialize\n * chip actions.\n */\nexport type MDCChipActionFactory = (\n  el: HTMLElement,\n  foundation?: MDCChipActionFoundation,\n) => MDCChipAction;\n\nconst ALLOWED_ATTR_PREFIXES = [\n  safeAttrPrefix`aria-`,\n  safeAttrPrefix`data-`,\n  safeAttrPrefix`disabled`,\n  safeAttrPrefix`role`,\n  safeAttrPrefix`tabindex`,\n];\n\n/**\n * MDCChipAction provides component encapsulation of the different foundation\n * implementations.\n */\nexport class MDCChipAction\n  extends MDCComponent<MDCChipActionFoundation>\n  implements MDCRippleCapableSurface\n{\n  static override attachTo(root: HTMLElement): MDCChipAction {\n    return new MDCChipAction(root);\n  }\n\n  private readonly rootHTML = this.root;\n\n  // Assigned in #initialize()\n  private rippleInstance!: MDCRipple;\n  // Assigned in #initialSyncWithDOM()\n  private handleClick!: SpecificEventListener<'click'>;\n  private handleKeydown!: SpecificEventListener<'keydown'>;\n\n  get ripple(): MDCRipple {\n    return this.rippleInstance;\n  }\n\n  override initialize(\n    rippleFactory: MDCRippleFactory = (el, foundation) =>\n      new MDCRipple(el, foundation),\n  ) {\n    const rippleAdapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      computeBoundingRect: () => this.computeRippleClientRect(),\n    };\n    this.rippleInstance = rippleFactory(\n      this.root,\n      new MDCRippleFoundation(rippleAdapter),\n    );\n  }\n\n  override initialSyncWithDOM() {\n    this.handleClick = () => {\n      this.foundation.handleClick();\n    };\n\n    this.handleKeydown = (event: KeyboardEvent) => {\n      this.foundation.handleKeydown(event);\n    };\n\n    this.listen('click', this.handleClick);\n    this.listen('keydown', this.handleKeydown);\n  }\n\n  override destroy() {\n    this.ripple.destroy();\n    this.unlisten('click', this.handleClick);\n    this.unlisten('keydown', this.handleKeydown);\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipActionAdapter = {\n      emitEvent: (eventName, eventDetail) => {\n        this.emit(eventName, eventDetail, true /* shouldBubble */);\n      },\n      focus: () => {\n        this.rootHTML.focus();\n      },\n      getAttribute: (attrName) => this.root.getAttribute(attrName),\n      getElementID: () => this.root.id,\n      removeAttribute: (name) => {\n        this.root.removeAttribute(name);\n      },\n      setAttribute: (name, value) => {\n        setElementPrefixedAttribute(\n          ALLOWED_ATTR_PREFIXES,\n          this.root,\n          name,\n          value,\n        );\n      },\n    };\n\n    if (this.root.classList.contains(MDCChipActionCssClasses.TRAILING_ACTION)) {\n      return new MDCChipTrailingActionFoundation(adapter);\n    }\n\n    // Default to the primary foundation\n    return new MDCChipPrimaryActionFoundation(adapter);\n  }\n\n  setDisabled(isDisabled: boolean) {\n    this.foundation.setDisabled(isDisabled);\n  }\n\n  isDisabled(): boolean {\n    return this.foundation.isDisabled();\n  }\n\n  setFocus(behavior: MDCChipActionFocusBehavior) {\n    this.foundation.setFocus(behavior);\n  }\n\n  isFocusable() {\n    return this.foundation.isFocusable();\n  }\n\n  setSelected(isSelected: boolean) {\n    this.foundation.setSelected(isSelected);\n  }\n\n  isSelected(): boolean {\n    return this.foundation.isSelected();\n  }\n\n  isSelectable(): boolean {\n    return this.foundation.isSelectable();\n  }\n\n  actionType(): MDCChipActionType {\n    return this.foundation.actionType();\n  }\n\n  private computeRippleClientRect(): DOMRect {\n    if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {\n      const chipRoot = closest(\n        this.root,\n        `.${MDCChipActionCssClasses.CHIP_ROOT}`,\n      );\n      // Return the root client rect since it's better than nothing\n      if (!chipRoot) return this.root.getBoundingClientRect();\n      const graphicWidth = window\n        .getComputedStyle(chipRoot)\n        .getPropertyValue(GRAPHIC_SELECTED_WIDTH_STYLE_PROP);\n      return computePrimaryActionRippleClientRect(\n        chipRoot.getBoundingClientRect(),\n        graphicWidth,\n      );\n    }\n\n    return this.root.getBoundingClientRect();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/action/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * MDCChipActionCssClasses provides the classes to be queried and manipulated on\n * the root.\n */\nexport enum MDCChipActionCssClasses {\n  PRIMARY_ACTION = 'mdc-evolution-chip__action--primary',\n  TRAILING_ACTION = 'mdc-evolution-chip__action--trailing',\n  CHIP_ROOT = 'mdc-evolution-chip',\n}\n\n/**\n * MDCChipActionInteractionTrigger provides detail of the different triggers for\n * action interactions.\n */\nexport enum MDCChipActionInteractionTrigger {\n  UNSPECIFIED,  // Default type\n  CLICK,\n  BACKSPACE_KEY,\n  DELETE_KEY,\n  SPACEBAR_KEY,\n  ENTER_KEY,\n}\n\n/**\n * MDCChipActionType provides the different types of available actions.\n */\nexport enum MDCChipActionType {\n  UNSPECIFIED,  // Default type\n  PRIMARY,\n  TRAILING,\n}\n\n/**\n * MDCChipActionEvents provides the different events emitted by the action.\n */\nexport enum MDCChipActionEvents {\n  INTERACTION = 'MDCChipAction:interaction',\n  NAVIGATION = 'MDCChipAction:navigation',\n}\n\n/**\n * MDCChipActionFocusBehavior provides configurations for focusing or unfocusing\n * an action.\n */\nexport enum MDCChipActionFocusBehavior {\n  FOCUSABLE,\n  FOCUSABLE_AND_FOCUSED,\n  NOT_FOCUSABLE,\n}\n\n/**\n * MDCChipActionAttributes provides the HTML attributes used by the foundation.\n */\nexport enum MDCChipActionAttributes {\n  ARIA_DISABLED = 'aria-disabled',\n  ARIA_HIDDEN = 'aria-hidden',\n  ARIA_SELECTED = 'aria-selected',\n  DATA_DELETABLE = 'data-mdc-deletable',\n  DISABLED = 'disabled',\n  ROLE = 'role',\n  TAB_INDEX = 'tabindex',\n}\n"
  },
  {
    "path": "packages/mdc-chips/action/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {isNavigationEvent, KEY, normalizeKey} from '@material/dom/keyboard';\n\nimport {MDCChipActionAdapter} from './adapter';\nimport {MDCChipActionAttributes, MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from './constants';\nimport {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from './types';\n\nconst triggerMap = new Map<string, MDCChipActionInteractionTrigger>();\ntriggerMap.set(KEY.SPACEBAR, MDCChipActionInteractionTrigger.SPACEBAR_KEY);\ntriggerMap.set(KEY.ENTER, MDCChipActionInteractionTrigger.ENTER_KEY);\ntriggerMap.set(KEY.DELETE, MDCChipActionInteractionTrigger.DELETE_KEY);\ntriggerMap.set(KEY.BACKSPACE, MDCChipActionInteractionTrigger.BACKSPACE_KEY);\n\n\n/**\n * MDCChipActionFoundation provides a base abstract foundation for all chip\n * actions.\n */\nexport abstract class MDCChipActionFoundation extends\n    MDCFoundation<MDCChipActionAdapter> {\n  static override get defaultAdapter(): MDCChipActionAdapter {\n    return {\n      emitEvent: () => undefined,\n      focus: () => undefined,\n      getAttribute: () => null,\n      getElementID: () => '',\n      removeAttribute: () => undefined,\n      setAttribute: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCChipActionAdapter>) {\n    super({...MDCChipActionFoundation.defaultAdapter, ...adapter});\n  }\n\n  handleClick() {\n    // Early exit for cases where the click comes from a source other than the\n    // user's pointer (i.e. programmatic click from AT).\n    if (this.isDisabled()) return;\n    this.emitInteraction(MDCChipActionInteractionTrigger.CLICK);\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    const key = normalizeKey(event);\n    if (this.shouldNotifyInteractionFromKey(key)) {\n      event.preventDefault();\n      this.emitInteraction(this.getTriggerFromKey(key));\n      return;\n    }\n\n    if (isNavigationEvent(event)) {\n      event.preventDefault();\n      this.emitNavigation(key);\n      return;\n    }\n\n    // signal to propagate the event since this Key isn't handled by chip\n    return true;\n  }\n\n  setDisabled(isDisabled: boolean) {\n    // Use `aria-disabled` for the selectable (listbox) disabled state\n    if (this.isSelectable()) {\n      this.adapter.setAttribute(\n          MDCChipActionAttributes.ARIA_DISABLED, `${isDisabled}`);\n      return;\n    }\n\n    if (isDisabled) {\n      this.adapter.setAttribute(MDCChipActionAttributes.DISABLED, 'true');\n    } else {\n      this.adapter.removeAttribute(MDCChipActionAttributes.DISABLED);\n    }\n  }\n\n  isDisabled(): boolean {\n    if (this.adapter.getAttribute(MDCChipActionAttributes.ARIA_DISABLED) ===\n        'true') {\n      return true;\n    }\n\n    if (this.adapter.getAttribute(MDCChipActionAttributes.DISABLED) !== null) {\n      return true;\n    }\n\n    return false;\n  }\n\n  setFocus(behavior: MDCChipActionFocusBehavior) {\n    // Early exit if not focusable\n    if (!this.isFocusable()) {\n      return;\n    }\n\n    // Add it to the tab order and give focus\n    if (behavior === MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED) {\n      this.adapter.setAttribute(MDCChipActionAttributes.TAB_INDEX, '0');\n      this.adapter.focus();\n      return;\n    }\n\n    // Add to the tab order\n    if (behavior === MDCChipActionFocusBehavior.FOCUSABLE) {\n      this.adapter.setAttribute(MDCChipActionAttributes.TAB_INDEX, '0');\n      return;\n    }\n\n    // Remove it from the tab order\n    if (behavior === MDCChipActionFocusBehavior.NOT_FOCUSABLE) {\n      this.adapter.setAttribute(MDCChipActionAttributes.TAB_INDEX, '-1');\n      return;\n    }\n  }\n\n  isFocusable() {\n    if (this.isDisabled()) {\n      return false;\n    }\n\n    if (this.adapter.getAttribute(MDCChipActionAttributes.ARIA_HIDDEN) ===\n        'true') {\n      return false;\n    }\n\n    return true;\n  }\n\n  setSelected(isSelected: boolean) {\n    // Early exit if not selectable\n    if (!this.isSelectable()) {\n      return;\n    }\n\n    this.adapter.setAttribute(\n        MDCChipActionAttributes.ARIA_SELECTED, `${isSelected}`);\n  }\n\n  isSelected(): boolean {\n    return this.adapter.getAttribute(MDCChipActionAttributes.ARIA_SELECTED) ===\n        'true';\n  }\n\n  private emitInteraction(trigger: MDCChipActionInteractionTrigger) {\n    this.adapter.emitEvent<MDCChipActionInteractionEventDetail>(\n        MDCChipActionEvents.INTERACTION, {\n          actionID: this.adapter.getElementID(),\n          source: this.actionType(),\n          trigger,\n        });\n  }\n\n  private emitNavigation(key: string) {\n    this.adapter.emitEvent<MDCChipActionNavigationEventDetail>(\n        MDCChipActionEvents.NAVIGATION, {\n          source: this.actionType(),\n          key,\n        });\n  }\n\n  private shouldNotifyInteractionFromKey(key: string): boolean {\n    const isFromActionKey = key === KEY.ENTER || key === KEY.SPACEBAR;\n    const isFromRemoveKey = key === KEY.BACKSPACE || key === KEY.DELETE;\n\n    if (isFromActionKey) {\n      return true;\n    }\n\n    if (isFromRemoveKey && this.shouldEmitInteractionOnRemoveKey()) {\n      return true;\n    }\n\n    return false;\n  }\n\n  private getTriggerFromKey(key: string): MDCChipActionInteractionTrigger {\n    const trigger = triggerMap.get(key);\n    if (trigger) {\n      return trigger;\n    }\n\n    // Default case, should ideally never be returned\n    return MDCChipActionInteractionTrigger.UNSPECIFIED;\n  }\n\n  abstract actionType(): MDCChipActionType;\n\n  abstract isSelectable(): boolean;\n\n  protected abstract shouldEmitInteractionOnRemoveKey(): boolean;\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipActionFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/action/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './primary-foundation';\nexport * from './trailing-foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-chips/action/primary-foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionAttributes, MDCChipActionType} from './constants';\nimport {MDCChipActionFoundation} from './foundation';\n\n/**\n * MDCChipPrimaryActionFoundation provides the business logic for the primary\n * chip action.\n */\nexport class MDCChipPrimaryActionFoundation extends MDCChipActionFoundation {\n  isSelectable() {\n    return this.adapter.getAttribute(MDCChipActionAttributes.ROLE) === 'option';\n  }\n\n  actionType() {\n    return MDCChipActionType.PRIMARY;\n  }\n\n  protected shouldEmitInteractionOnRemoveKey() {\n    return this.adapter.getAttribute(MDCChipActionAttributes.DATA_DELETABLE) ===\n        'true';\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipPrimaryActionFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/action/test/component-ripple.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {computePrimaryActionRippleClientRect} from '../component-ripple';\n\ndescribe('ripple', () => {\n  describe('computePrimaryActionRippleClientRect', () => {\n    it('returns the base dimensions when given an empty style prop', () => {\n      const rect = {\n        width: 100,\n        height: 32,\n        top: 10,\n        left: 10,\n        bottom: 42,\n        right: 110,\n      } as any;\n\n      expect(computePrimaryActionRippleClientRect(rect, '')).toEqual(rect);\n    });\n\n    it('returns the base dimensions when given a non-numeric style prop',\n       () => {\n         const rect = {\n           width: 100,\n           height: 32,\n           top: 10,\n           left: 10,\n           bottom: 42,\n           right: 110,\n         } as any;\n\n         expect(computePrimaryActionRippleClientRect(rect, 'xyz'))\n             .toEqual(rect);\n       });\n\n    it('returns the base dimensions when given a non-pixel style prop', () => {\n      const rect = {\n        width: 100,\n        height: 32,\n        top: 10,\n        left: 10,\n        bottom: 42,\n        right: 110,\n      } as any;\n\n      expect(computePrimaryActionRippleClientRect(rect, '20YYpx'))\n          .toEqual(rect);\n    });\n\n    it('adds a valid style prop to the width property', () => {\n      const rect = {\n        width: 100,\n        height: 32,\n        top: 10,\n        left: 10,\n        bottom: 42,\n        right: 110,\n      } as any;\n\n      expect(computePrimaryActionRippleClientRect(rect, '20px')).toEqual({\n        ...rect,\n        width: rect.width + 20,\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/action/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {createKeyboardEvent, emitEvent} from '../../../../testing/dom/events';\nimport {MDCChipAction, MDCChipActionAttributes, MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionType} from '../index';\n\ninterface TestOptions {\n  readonly isDisabled?: boolean;\n  readonly isFocusable?: boolean;\n  readonly isSelectable?: boolean;\n  readonly isTrailing?: boolean;\n}\n\nfunction getFixture({\n  isDisabled,\n  isTrailing,\n  isFocusable,\n  isSelectable,\n}: TestOptions): HTMLButtonElement {\n  return createFixture<HTMLButtonElement>(html`\n  <button class=\"mdc-evolution-chip-action\n      ${isTrailing ? 'mdc-evolution-chip__action--trailing' : ''}\"\n      ${isFocusable ? '' : 'aria-hidden=\"true\"'}\n      ${isSelectable ? 'role=\"option\"' : ''}\n      ${isDisabled ? 'disabled' : ''}>Label</button> `);\n}\n\nfunction setupTest(options: TestOptions = {\n  isDisabled: false,\n  isTrailing: false,\n  isFocusable: false,\n  isSelectable: false\n}) {\n  const root = getFixture(options);\n  const component = new MDCChipAction(root);\n  return {root, component};\n}\n\ndescribe('MDCChipAction', () => {\n  it('attachTo initializes and returns a MDCChipAction instance', () => {\n    expect(\n        MDCChipAction.attachTo(getFixture({\n          isFocusable: true,\n        })) instanceof\n        MDCChipAction)\n        .toBeTruthy();\n  });\n\n  it('#setDisabled(true) disables the root', () => {\n    const {component, root} = setupTest({\n      isFocusable: true,\n    });\n\n    document.body.appendChild(root);\n    component.setDisabled(true);\n    expect(root.disabled).toBeTrue();\n  });\n\n  it('#setDisabled(false) enables the root', () => {\n    const {component, root} = setupTest({\n      isFocusable: true,\n      isDisabled: true,\n    });\n\n    document.body.appendChild(root);\n    component.setDisabled(false);\n    expect(root.disabled).toBeFalse();\n  });\n\n  it('#isDisabled() returns true when configured', () => {\n    const {component} = setupTest({\n      isDisabled: true,\n    });\n\n    expect(component.isDisabled()).toBeTrue();\n  });\n\n  it('#isDisabled() returns false when configured', () => {\n    const {component} = setupTest({\n      isDisabled: false,\n    });\n\n    expect(component.isDisabled()).toBeFalse();\n  });\n\n  it(`#setFocus(${MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED}) gives` +\n         ` focus to the root`,\n     () => {\n       const {component, root} = setupTest({\n         isFocusable: true,\n       });\n\n       document.body.appendChild(root);\n       component.setFocus(MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n       expect(root.getAttribute('tabindex')).toBe('0');\n       expect(document.activeElement).toBe(root);\n       document.body.removeChild(root);\n     });\n\n  it(`#setFocus(${MDCChipActionFocusBehavior.FOCUSABLE}) makes the` +\n         ` root focusable`,\n     () => {\n       const {component, root} = setupTest({\n         isFocusable: true,\n       });\n\n       component.setFocus(MDCChipActionFocusBehavior.FOCUSABLE);\n       expect(root.getAttribute('tabindex')).toBe('0');\n     });\n\n  it(`#setFocus(${MDCChipActionFocusBehavior.NOT_FOCUSABLE}) makes the` +\n         ` root unfocusable`,\n     () => {\n       const {component, root} = setupTest({\n         isFocusable: true,\n       });\n\n       component.setFocus(MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(root.getAttribute('tabindex')).toBe('-1');\n     });\n\n  it('#isFocusable() returns true when configured', () => {\n    const {component} = setupTest({\n      isFocusable: true,\n    });\n\n    expect(component.isFocusable()).toBe(true);\n  });\n\n  it('#isFocusable() returns false when configured', () => {\n    const {component} = setupTest();\n\n    expect(component.isFocusable()).toBe(false);\n  });\n\n  it('#setSelected(true) updates the selected state when selectable', () => {\n    const {root, component} = setupTest({\n      isSelectable: true,\n      isFocusable: true,\n    });\n\n    component.setSelected(true);\n    expect(root.getAttribute(MDCChipActionAttributes.ARIA_SELECTED))\n        .toBe('true');\n  });\n\n  it('#setSelected(false) updates the selected state when selectable', () => {\n    const {root, component} = setupTest({\n      isSelectable: true,\n      isFocusable: true,\n    });\n\n    component.setSelected(false);\n    expect(root.getAttribute(MDCChipActionAttributes.ARIA_SELECTED))\n        .toBe('false');\n  });\n\n  it('#isSelected() returns true when selected', () => {\n    const {component} = setupTest({\n      isSelectable: true,\n      isFocusable: true,\n    });\n\n    component.setSelected(true);\n    expect(component.isSelected()).toBe(true);\n  });\n\n  it('#isSelected() returns false when not selected', () => {\n    const {component} = setupTest({\n      isSelectable: true,\n      isFocusable: true,\n    });\n\n    component.setSelected(false);\n    expect(component.isSelected()).toBe(false);\n  });\n\n  it('#isSelectable() returns true when selectable', () => {\n    const {component} = setupTest({\n      isSelectable: true,\n      isFocusable: true,\n    });\n\n    expect(component.isSelectable()).toBe(true);\n  });\n\n  it('#isSelectable() returns false when not selectable', () => {\n    const {component} = setupTest({\n      isFocusable: true,\n    });\n\n    expect(component.isSelectable()).toBe(false);\n  });\n\n  it(`#actionType() returns ${MDCChipActionType.TRAILING} for trailing action`,\n     () => {\n       const {component} = setupTest({\n         isTrailing: true,\n         isFocusable: true,\n       });\n\n       expect(component.actionType()).toBe(MDCChipActionType.TRAILING);\n     });\n\n  it(`#actionType() returns ${MDCChipActionType.PRIMARY} for primary action`,\n     () => {\n       const {component} = setupTest({\n         isFocusable: true,\n       });\n\n       expect(component.actionType()).toBe(MDCChipActionType.PRIMARY);\n     });\n\n  it(`click on root emits ${MDCChipActionEvents.INTERACTION}`, () => {\n    const {root, component} = setupTest();\n\n    const handler = jasmine.createSpy('emitInteractionHandler');\n    component.listen(MDCChipActionEvents.INTERACTION, handler);\n    emitEvent(root, 'click', {bubbles: true});\n    component.unlisten(MDCChipActionEvents.INTERACTION, handler);\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it(`click on root does not emit ${\n         MDCChipActionEvents.INTERACTION} when disabled`,\n     () => {\n       const {root, component} = setupTest({\n         isDisabled: true,\n       });\n\n       const handler = jasmine.createSpy('emitInteractionHandler');\n       component.listen(MDCChipActionEvents.INTERACTION, handler);\n       emitEvent(root, 'click', {bubbles: true});\n       component.unlisten(MDCChipActionEvents.INTERACTION, handler);\n       expect(handler).not.toHaveBeenCalled();\n     });\n\n  it(`keydown on root emits ${MDCChipActionEvents.INTERACTION}`, () => {\n    const {root, component} = setupTest();\n\n    const handler = jasmine.createSpy('emitInteractionHandler');\n    component.listen(MDCChipActionEvents.INTERACTION, handler);\n    root.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'Enter',\n    }));\n    component.unlisten(MDCChipActionEvents.INTERACTION, handler);\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it(`keydown on root emits ${MDCChipActionEvents.NAVIGATION}`, () => {\n    const {root, component} = setupTest();\n\n    const handler = jasmine.createSpy('emitInteractionHandler');\n    component.listen(MDCChipActionEvents.NAVIGATION, handler);\n    root.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    component.unlisten(MDCChipActionEvents.NAVIGATION, handler);\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component} = setupTest();\n    component.destroy();\n\n    const handler = jasmine.createSpy('handler');\n    component.listen(MDCChipActionEvents.INTERACTION, handler);\n    component.listen(MDCChipActionEvents.NAVIGATION, handler);\n    emitEvent(root, 'click', {bubbles: true});\n    root.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'Spacebar',\n    }));\n    root.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    expect(handler).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/action/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCChipActionAttributes, MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../constants';\nimport {MDCChipActionFoundation} from '../foundation';\n\nclass SelectableMDCChipActionFoundation extends MDCChipActionFoundation {\n  actionType() {\n    return MDCChipActionType.UNSPECIFIED;\n  }\n\n  isSelectable() {\n    return true;\n  }\n\n  shouldEmitInteractionOnRemoveKey() {\n    return false;\n  }\n}\n\nclass NonselectableMDCChipActionFoundation extends MDCChipActionFoundation {\n  actionType() {\n    return MDCChipActionType.UNSPECIFIED;\n  }\n\n  isSelectable() {\n    return false;\n  }\n\n  shouldEmitInteractionOnRemoveKey() {\n    return false;\n  }\n}\n\nclass SelectableDeletableMDCChipActionFoundation extends\n    MDCChipActionFoundation {\n  actionType() {\n    return MDCChipActionType.UNSPECIFIED;\n  }\n\n  isSelectable() {\n    return true;\n  }\n\n  shouldEmitInteractionOnRemoveKey() {\n    return true;\n  }\n}\n\ndescribe('MDCChipActionFoundation', () => {\n  describe('[shared behavior]', () => {\n    const setupTest = () => {\n      const {foundation, mockAdapter} =\n          setUpFoundationTest(SelectableMDCChipActionFoundation);\n      return {foundation, mockAdapter};\n    };\n\n    it(`#actionType returns \"${MDCChipActionType.UNSPECIFIED}\"`, () => {\n      const {foundation} = setupTest();\n      expect(foundation.actionType()).toBe(MDCChipActionType.UNSPECIFIED);\n    });\n\n    it('#setFocus() does nothing when aria-hidden == true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_HIDDEN)\n          .and.returnValue('true');\n      foundation.setFocus(MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n      foundation.setFocus(MDCChipActionFocusBehavior.FOCUSABLE);\n      foundation.setFocus(MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n      expect(mockAdapter.setAttribute).not.toHaveBeenCalled();\n      expect(mockAdapter.focus).not.toHaveBeenCalled();\n    });\n\n    it(`#setFocus(${\n           MDCChipActionFocusBehavior\n               .FOCUSABLE_AND_FOCUSED}) sets tabindex=\"0\"` +\n           ` and focuses the root`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setFocus(MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n         // TODO: Wait until b/208710526 is fixed, then remove this\n         // autogenerated error suppression.\n         //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n         //  '\"tabindex\"' is not assignable to parameter of type\n         //  'Expected<MDCChipActionAttributes>'.\n         expect(mockAdapter.setAttribute).toHaveBeenCalledWith('tabindex', '0');\n         expect(mockAdapter.focus).toHaveBeenCalled();\n       });\n\n    it(`#setFocus(${MDCChipActionFocusBehavior.FOCUSABLE}) sets tabindex=\"0\"`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setFocus(MDCChipActionFocusBehavior.FOCUSABLE);\n         // TODO: Wait until b/208710526 is fixed, then remove this\n         // autogenerated error suppression.\n         //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n         //  '\"tabindex\"' is not assignable to parameter of type\n         //  'Expected<MDCChipActionAttributes>'.\n         expect(mockAdapter.setAttribute).toHaveBeenCalledWith('tabindex', '0');\n         expect(mockAdapter.focus).not.toHaveBeenCalled();\n       });\n\n    it(`#setFocused(${\n           MDCChipActionFocusBehavior.NOT_FOCUSABLE}) sets tabindex=\"-1\"`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setFocus(MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n         expect(mockAdapter.setAttribute)\n             // TODO: Wait until b/208710526 is fixed, then remove this\n             // autogenerated error suppression.\n             //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n             //  '\"tabindex\"' is not assignable to parameter of type\n             //  'Expected<MDCChipActionAttributes>'.\n             .toHaveBeenCalledWith('tabindex', '-1');\n       });\n\n    it('#isFocusable returns true if aria-hidden != true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_HIDDEN)\n          .and.returnValue(null);\n      expect(foundation.isFocusable()).toBe(true);\n    });\n\n    it('#isFocusable returns false if aria-hidden == true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_HIDDEN)\n          .and.returnValue('true');\n      expect(foundation.isFocusable()).toBe(false);\n    });\n\n    it('#isFocusable returns true if aria-disabled != true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_DISABLED)\n          .and.returnValue('false');\n      expect(foundation.isFocusable()).toBe(true);\n    });\n\n    it('#isFocusable returns false if aria-disabled == true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_DISABLED)\n          .and.returnValue('true');\n      expect(foundation.isFocusable()).toBe(false);\n    });\n\n    it('#isSelected returns true if aria-checked == true', () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_SELECTED)\n          .and.returnValue('true');\n      expect(foundation.isSelected()).toBe(true);\n    });\n\n    it(`#isSelected returns false if ${\n           MDCChipActionAttributes.ARIA_SELECTED} != true`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttribute\n             .withArgs(MDCChipActionAttributes.ARIA_SELECTED)\n             .and.returnValue('false');\n         expect(foundation.isSelected()).toBe(false);\n       });\n\n    it(`#handleClick does not emit ${\n           MDCChipActionEvents.INTERACTION} when disabled`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttribute\n             .withArgs(MDCChipActionAttributes.ARIA_DISABLED)\n             .and.returnValue('true');\n         foundation.handleClick();\n         expect(mockAdapter.emitEvent).not.toHaveBeenCalled();\n       });\n\n    it(`#handleClick emits ${MDCChipActionEvents.INTERACTION} with detail`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getElementID.and.returnValue('foo');\n         foundation.handleClick();\n         expect(mockAdapter.emitEvent)\n             .toHaveBeenCalledWith(MDCChipActionEvents.INTERACTION, {\n               actionID: 'foo',\n               source: MDCChipActionType.UNSPECIFIED,\n               trigger: MDCChipActionInteractionTrigger.CLICK,\n             });\n       });\n  });\n\n  describe('[non-deletable]', () => {\n    const setupTest = () => {\n      const {foundation, mockAdapter} =\n          setUpFoundationTest(SelectableMDCChipActionFoundation);\n      return {foundation, mockAdapter};\n    };\n\n    const emittingKeys = [\n      {key: 'Enter', trigger: MDCChipActionInteractionTrigger.ENTER_KEY},\n      {key: 'Spacebar', trigger: MDCChipActionInteractionTrigger.SPACEBAR_KEY},\n    ];\n\n    for (const {key, trigger} of emittingKeys) {\n      it(`#handleKeydown(${key}) emits ${\n             MDCChipActionEvents.INTERACTION} with detail`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = {\n             preventDefault: jasmine.createSpy('preventDefault') as Function,\n             key,\n           } as KeyboardEvent;\n           foundation.handleKeydown(event);\n           expect(mockAdapter.emitEvent)\n               .toHaveBeenCalledWith(MDCChipActionEvents.INTERACTION, {\n                 actionID: '',\n                 source: MDCChipActionType.UNSPECIFIED,\n                 trigger,\n               });\n           expect(event.preventDefault).toHaveBeenCalled();\n         });\n    }\n\n    const nonemittingKeys = [\n      'Delete',\n      'Backspace',\n    ];\n\n    for (const key of nonemittingKeys) {\n      it(`#handleKeydown(${key}) does not emit ${\n             MDCChipActionEvents.INTERACTION}`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           foundation.handleKeydown({key} as KeyboardEvent);\n           expect(mockAdapter.emitEvent).not.toHaveBeenCalled();\n         });\n    }\n  });\n\n  describe('[deletable]', () => {\n    const setupTest = () => {\n      const {foundation, mockAdapter} =\n          setUpFoundationTest(SelectableDeletableMDCChipActionFoundation);\n      return {foundation, mockAdapter};\n    };\n\n    const emittingKeys = [\n      {key: 'Enter', trigger: MDCChipActionInteractionTrigger.ENTER_KEY},\n      {key: 'Spacebar', trigger: MDCChipActionInteractionTrigger.SPACEBAR_KEY},\n      {\n        key: 'Backspace',\n        trigger: MDCChipActionInteractionTrigger.BACKSPACE_KEY\n      },\n      {key: 'Delete', trigger: MDCChipActionInteractionTrigger.DELETE_KEY},\n    ];\n\n    for (const {key, trigger} of emittingKeys) {\n      it(`#handleKeydown(${key}) emits ${\n             MDCChipActionEvents.INTERACTION} with detail`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = {\n             preventDefault: jasmine.createSpy('preventDefault') as Function,\n             key,\n           } as KeyboardEvent;\n           foundation.handleKeydown(event);\n           expect(mockAdapter.emitEvent)\n               .toHaveBeenCalledWith(MDCChipActionEvents.INTERACTION, {\n                 actionID: '',\n                 source: MDCChipActionType.UNSPECIFIED,\n                 trigger,\n               });\n           expect(event.preventDefault).toHaveBeenCalled();\n         });\n    }\n  });\n\n  describe('[selectable]', () => {\n    const setupTest = () => {\n      const {foundation, mockAdapter} =\n          setUpFoundationTest(SelectableMDCChipActionFoundation);\n      return {foundation, mockAdapter};\n    };\n\n    it(`#setSelected(true) sets ${\n           MDCChipActionAttributes.ARIA_SELECTED} to true`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setSelected(true);\n         expect(mockAdapter.setAttribute)\n             .toHaveBeenCalledWith(\n                 MDCChipActionAttributes.ARIA_SELECTED, 'true');\n       });\n\n    it(`#setSelected(false) sets ${\n           MDCChipActionAttributes.ARIA_SELECTED} to false`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setSelected(false);\n         expect(mockAdapter.setAttribute)\n             .toHaveBeenCalledWith(\n                 MDCChipActionAttributes.ARIA_SELECTED, 'false');\n       });\n\n    it(`#setDisabled(true) sets ${\n           MDCChipActionAttributes.ARIA_DISABLED} to true`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setDisabled(true);\n         expect(mockAdapter.setAttribute)\n             .toHaveBeenCalledWith(\n                 MDCChipActionAttributes.ARIA_DISABLED, 'true');\n       });\n\n    it(`#setDisabled(false) sets aria-hidden=\"false\"`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      foundation.setDisabled(false);\n      expect(mockAdapter.setAttribute)\n          .toHaveBeenCalledWith(MDCChipActionAttributes.ARIA_DISABLED, 'false');\n    });\n\n    it(`#setDisabled(true) sets aria-hidden=\"true\"`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      foundation.setDisabled(true);\n      expect(mockAdapter.setAttribute)\n          .toHaveBeenCalledWith(MDCChipActionAttributes.ARIA_DISABLED, 'true');\n    });\n\n    it(`#isDisabled() return true when aria-hidden=\"true\"`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_DISABLED)\n          .and.returnValue('true');\n      expect(foundation.isDisabled()).toBeTrue();\n    });\n\n    it(`#isDisabled() return false when aria-hidden=\"false\"`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ARIA_DISABLED)\n          .and.returnValue('false');\n      expect(foundation.isDisabled()).toBeFalse();\n    });\n  });\n\n  describe('[non-selectable]', () => {\n    const setupTest = () => {\n      const {foundation, mockAdapter} =\n          setUpFoundationTest(NonselectableMDCChipActionFoundation);\n      return {foundation, mockAdapter};\n    };\n\n    it(`#setSelected(true|false) does not set ${\n           MDCChipActionAttributes.ARIA_SELECTED}`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setSelected(true);\n         foundation.setSelected(false);\n         expect(mockAdapter.setAttribute).not.toHaveBeenCalled();\n       });\n\n    it(`#setDisabled(false) remove the disabled attribute`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      foundation.setDisabled(false);\n      expect(mockAdapter.removeAttribute)\n          .toHaveBeenCalledWith(MDCChipActionAttributes.DISABLED);\n    });\n\n    it(`#setDisabled(true) sets disabled=\"true\"`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      foundation.setDisabled(true);\n      expect(mockAdapter.setAttribute)\n          .toHaveBeenCalledWith(MDCChipActionAttributes.DISABLED, 'true');\n    });\n\n    it(`#isDisabled() return true when the disabled attribute exists`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.DISABLED)\n          .and.returnValue('');\n      expect(foundation.isDisabled()).toBeTrue();\n    });\n\n    it(`#isDisabled() return false when the disabled attribute is absent`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.DISABLED)\n             .and.returnValue(null);\n         expect(foundation.isDisabled()).toBeFalse();\n       });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/action/test/primary-foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCChipActionAttributes, MDCChipActionType} from '../constants';\nimport {MDCChipPrimaryActionFoundation} from '../primary-foundation';\n\ndescribe('MDCChipPrimaryActionFoundation', () => {\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCChipPrimaryActionFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#actionType returns \"${MDCChipActionType.PRIMARY}\"`, () => {\n    const {foundation} = setupTest();\n    expect(foundation.actionType()).toBe(MDCChipActionType.PRIMARY);\n  });\n\n  it(`#isSelectable returns true when role=\"option\"`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ROLE)\n        .and.returnValue('option');\n    expect(foundation.isSelectable()).toBe(true);\n  });\n\n  it(`#isSelectable returns false when role != \"option\"`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.ROLE)\n        .and.returnValue('button');\n    expect(foundation.isSelectable()).toBe(false);\n  });\n\n  it(`#shouldEmitInteractionOnRemoveKey() returns true if ${\n         MDCChipActionAttributes.DATA_DELETABLE} == 'true'`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttribute.withArgs(MDCChipActionAttributes.DATA_DELETABLE)\n           .and.returnValue('true');\n       expect((foundation as any).shouldEmitInteractionOnRemoveKey())\n           .toBe(true);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-chips/action/test/trailing-foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCChipActionType} from '../constants';\nimport {MDCChipTrailingActionFoundation} from '../trailing-foundation';\n\ndescribe('MDCChipTrailingActionFoundation', () => {\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCChipTrailingActionFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#actionType returns \"${MDCChipActionType.TRAILING}\"`, () => {\n    const {foundation} = setupTest();\n    expect(foundation.actionType()).toBe(MDCChipActionType.TRAILING);\n  });\n\n  it(`#isSelectable returns false`, () => {\n    const {foundation} = setupTest();\n    expect(foundation.isSelectable()).toBe(false);\n  });\n\n  it('#shouldEmitInteractionOnDeleteKey() returns true', () => {\n    const {foundation} = setupTest();\n    expect((foundation as any).shouldEmitInteractionOnRemoveKey()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/action/trailing-foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionType} from './constants';\nimport {MDCChipActionFoundation} from './foundation';\n\n/**\n * MDCChipTrailingActionFoundation provides the business logic for the trailing\n * chip action.\n */\nexport class MDCChipTrailingActionFoundation extends MDCChipActionFoundation {\n  isSelectable() {\n    return false;\n  }\n\n  actionType() {\n    return MDCChipActionType.TRAILING;\n  }\n\n  protected shouldEmitInteractionOnRemoveKey() {\n    return true;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipTrailingActionFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/action/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionInteractionTrigger, MDCChipActionType} from './constants';\n\n/**\n * MDCChipActionInteractionEventDetail provides the details for the interaction\n * event.\n */\nexport interface MDCChipActionInteractionEventDetail {\n  actionID: string;\n  source: MDCChipActionType;\n  trigger: MDCChipActionInteractionTrigger;\n}\n\n/**\n * MDCChipActionNavigationEventDetail provides the details for the navigation\n * event.\n */\nexport interface MDCChipActionNavigationEventDetail {\n  source: MDCChipActionType;\n  key: string;\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip/README.md",
    "content": "<!--docs:\ntitle: \"Chip\"\nlayout: detail\nsection: components\nexcerpt: \"Chips represent logical groups of interactive actions inside a chip set.\"\niconId: chip\npath: /catalog/chips/chip/\n-->\n\n# Chip\n\nChips represent logical groups of [actions](../action) contained inside a [chip set](../chip-set).\n\n## Basic usage\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n### HTML structure\n\nChips must contain a [primary action](../action#primary-action) and may contain a [trailing action](../action#trailing-action).\n\nNote: all chips **must** have a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n\n#### Layout grid\n\nBoth action chips and input chips follow the [layout grid](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) interaction pattern. All navigable actions must be contained by a [`gridcell` role](https://www.w3.org/TR/wai-aria-1.1/#gridcell) and the chip root must have the [`row` role](https://www.w3.org/TR/wai-aria-1.1/#row).\n\n##### Action chips\n\nAction chips have a single mandatory primary action.\n\n```html\n<span class=\"mdc-evolution-chip\" role=\"row\" id=\"c0\">\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n      <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n    </button>\n  </span>\n</span>\n```\n\nAction chips with buttons can be disabled with the `mdc-evolution-chip--disabled` class and the [`disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) on the root. Action chips with links cannot be disabled.\n\n```html\n<span class=\"mdc-evolution-chip mdc-evolution-chip--disabled\" role=\"row\" id=\"c1\">\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\" disabled>\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n      <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n    </button>\n  </span>\n</span>\n```\n\n##### Input chips\n\nInput chips have a mandatory primary action and trailing action.\n\n```html\n<span class=\"mdc-evolution-chip\" role=\"row\" id=\"c2\">\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\">\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n      <span class=\"mdc-evolution-chip__text-label\">Chip foo</span>\n    </button>\n  </span>\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--trailing\" type=\"button\" tabindex=\"-1\" data-mdc-deletable=\"true\" aria-label=\"Remove chip foo\">\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing\"></span>\n      <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing\">close</span>\n    </button>\n  </span>\n</span>\n```\n\nIf it's desirable to have only the primary action be navigable, the trailing action `gridcell` role can be excluded and the trailing action can receive [`aria-hidden=\"true\"`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden). In this case, it's recommended to include `data-mdc-deletable=\"true\"` on the primary action, thus making it deletable via Backspace/Delete key press on focus, and an `aria-label` indicating the behavior.\n\n```html\n<span class=\"mdc-evolution-chip\" role=\"presentation\" id=\"c3\">\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"0\" data-mdc-deletable=\"true\" aria-label=\"Chip foo, press backspace or delete to remove\">\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n      <span class=\"mdc-evolution-chip__text-label\">Chip foo</span>\n    </button>\n  </span>\n  <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--trailing\" type=\"button\" tabindex=\"-1\" data-mdc-deletable=\"true\" aria-hidden=\"true\">\n    <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing\"></span>\n    <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing\">close</span>\n  </button>\n</span>\n```\n\nSimilar to action chips, input chips with buttons can be disabled by setting the [`disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) on the actions and adding the `mdc-evolution-chip--disabled` class to the root.\n\n```html\n<span class=\"mdc-evolution-chip mdc-evolution-chip--disabled\" role=\"row\" id=\"c4\">\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" type=\"button\" tabindex=\"-1\" disabled>\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n      <span class=\"mdc-evolution-chip__text-label\">Chip foo</span>\n    </button>\n  </span>\n  <span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\" role=\"gridcell\">\n    <button class=\"mdc-evolution-chip__action mdc-evolution-chip__action--trailing\" type=\"button\" tabindex=\"-1\" data-mdc-deletable=\"true\" aria-label=\"Remove chip foo\" disabled>\n      <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing\"></span>\n      <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing\">close</span>\n    </button>\n  </span>\n</span>\n```\n\n#### Listbox\n\nFilter chips follow the [listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox) interaction pattern.\n\n##### Filter chips\n\nFilter chips have a mandatory primary action while the chip root receives a [`presentation` role](https://www.w3.org/TR/wai-aria-1.1/#presentation).\n\n```html\n<span class=\"mdc-evolution-chip\" role=\"presentation\" id=\"c5\">\n  <span class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" role=\"option\" aria-selected=\"false\" tabindex=\"0\">\n    <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n    <span class=\"mdc-evolution-chip__graphic\">\n      <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons\">favorite</span> <!-- optional -->\n      <span class=\"mdc-evolution-chip__checkmark\">\n        <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n          <path class=\"mdc-evolution-chip__checkmark-path\"\n              fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n        </svg>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n  </span>\n</span>\n```\n\nTo disable a filter chip, set [`aria-disabled=\"true\"`](https://www.w3.org/TR/wai-aria-1.1/#aria-disabled) on the primary action and add the `mdc-evolution-chip--disabled` class on the chip root.\n\n```html\n<span class=\"mdc-evolution-chip mdc-evolution-chip--disabled\" role=\"presentation\" id=\"c6\">\n  <span class=\"mdc-evolution-chip__action mdc-evolution-chip__action--primary\" role=\"option\" aria-selected=\"false\" tabindex=\"0\">\n    <span class=\"mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary\"></span>\n    <span class=\"mdc-evolution-chip__graphic\">\n      <span class=\"mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons\">favorite</span> <!-- optional -->\n      <span class=\"mdc-evolution-chip__checkmark\">\n        <svg class=\"mdc-evolution-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n          <path class=\"mdc-evolution-chip__checkmark-path\"\n              fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n        </svg>\n      </span>\n    </span>\n    <span class=\"mdc-evolution-chip__text-label\">Chip label</span>\n  </span>\n</span>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-evolution-chip` | Mandatory, for the chip root.\n`mdc-evolution-chip--selectable` | Mandatory for selectable (i.e filter) chips.\n`mdc-evolution-chip--selected` | Mandatory for selectable chips that are selected. Used in conjunction with `*--selectable`.\n`mdc-evolution-chip--with-primary-graphic` | Mandatory for chips that have a primary graphic (i.e. the checkmark for filter chips and/or an icon)\n`mdc-evolution-chip--with-primary-icon` | Mandatory for chips that have an icon in the primary graphic slot (used in conjunction with `*--with-primary-graphic`). Not mandatory if the primary graphic only contains the filter chip checkmark.\n`mdc-evolution-chip--with-trailing-action` | Mandatory for chips with a trailing action.\n`mdc-evolution-chip--filter` | Optional for filter chips, making the selected treatment visually distinct.\n`mdc-evolution-chip--with-avatar` | Optinal, for chips with a primary graphic icon that should be receive the avatar treatment.\n`mdc-evolution-chip--disabled` | Optional, visually styles the chip as disabled.\n`mdc-evolution-chip__cell` | Optional, for [layout grid chips](#layout-grid). Applied to the grid cell.\n`mdc-evolution-chip__cell--primary` | Optional, for [layout grid chips](#layout-grid). Applied to the grid cell containing the primary action.\n`mdc-evolution-chip__cell--trailing` | Optional, for [layout grid chips](#layout-grid). Applied to the grid cell containing the trailing action **if** the trailing action is navigable.\n\n### Sass mixins\n\nAccess to theme mixins require importing the chips theme style module.\n\n```scss\n@use \"@material/chips\";\n```\n\nMixin | Description\n--- | ---\n`ripple-color($color)` | Sets the ripple color of a chip.\n`selected-ripple-color($color)` | Sets the ripple color of a selected chip.\n`trailing-action-ripple-color($color)` | Sets the ripple color of a chip trailing action.\n`trailing-action-ripple-size($size)` | Sets the ripple size of a chip trailing action.\n`density($density)` | Sets the density of a chip.\n`height($height)` | Sets the height of a chip.\n`shape-radius($radius)` | Sets the shape radius of a chip.\n`outline-width($width)` | Sets the outline width of a chip.\n`outline-color($color)` | Sets the outline color of a chip.\n`selected-outline-color($color)` | Sets the outline color of a selected chip.\n`outline-style($style)` | Sets the outline style of a chip.\n`container-color($color)` | Sets the container color of a chip.\n`selected-container-color($color)` | Sets the container color of a selected chip.\n`text-label-color($color)` | Sets the text label color of a chip.\n`selected-text-label-color($color)` | Sets the text label color of a selected chip.\n`text-label-type-scale($type-scale)` | Sets the text label type scale of a chip.\n`graphic-size($size)` | Sets the graphic size of a chip.\n`icon-color($color)` | Sets the icon color of a chip.\n`icon-container-color($color)` | Sets the icon container color of a chip.\n`icon-size($size)` | Sets the icon size of a chip.\n`trailing-action-size($size)` | Sets the trailing action size of a chip.\n`trailing-action-color($color)` | Sets the trailing action color of a chip.\n`checkmark-size($size)` | Sets the checkmark size of a chip.\n`checkmark-color($color)` | Sets the checkmark color of a chip.\n`checkmark-container-color($color)` | Sets the checkmark container color of a chip.\n`horizontal-padding($leading, $trailing)` | Sets the horizontal padding of a chip with no graphic or trailing action.\n`with-graphic-horizontal-padding($graphic-leading, $graphic-trailing, $primary-trailing)` | Sets the horizontal padding of a chip with a primary graphic.\n`with-trailing-action-horizontal-padding($primary-leading, $trailing-action-leading, $trailing-action-trailing)` | Sets the horizontal padding of a chip with a trailing action.\n`with-graphic-and-trailing-action-horizontal-padding($graphic-leading, $graphic-trailing, $trailing-action-leading, $trailing-action-trailing)` | Sets the horizontal padding of a chip with a primary graphic and trailing action.\n\n### `MDCChip` methods\n\nThe `MDCChip` is exposed only to be called by the parent [`MDCChipSet`](../chip-set). Users should not interact with the `MDCChip` component nor rely on any exposed APIs or events.\n\n### `MDCChipEvents`\n\nThese events are only emitted for consumption by the parent [`MDCChipSet`](../chip-set). Non-wrapping clients **should not** listen to these events.\n\nEvent name | Detail | Description\n--- | --- | ---\n`MDCChip:animation` | `MDCChipAnimationEventDetail` | Consumed in the parent chip set `handleChipAnimation` method.\n`MDCChip:interaction` | `MDCChipInteractionEventDetail` | Consumed in the parent chip set `handleChipInteraction` method.\n`MDCChip:navigation` | `MDCChipNavigationEventDetail` | Consumed in the parent chip set `handleChipNavigation` method.\n\n### `MDCChipAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: MDCChipClassNames): void` | Adds the class name to the chip root.\n`emitEvent<D extends object>(eventName: MDCChipEvents, eventDetail: D): void` | Emits the given `eventName` with the given `eventDetail`.\n`getActions(): MDCChipActionType[]` | Returns the actions of the chip in [DOM order](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters).\n`getAttribute(attrName: MDCChipAttributes): string\\|null` | Returns the value of the attribute or `null` if it does not exist.\n`getElementID(): string` | Returns the [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the root element.\n`getOffsetWidth(): number` | Returns the [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth) of the root element.\n`hasClass(className: MDCChipCssClasses): boolean` | Returns `true` if the class exists on the root element, otherwise returns `false`.\n`isActionSelectable(action: MDCChipActionType): boolean` | Returns the seletability of the action with the given type.\n`isActionSelected(action: MDCChipActionType): boolean` | Returns the selected state of the action with the given type.\n`isActionFocusable(action: MDCChipActionType): boolean` | Returns the focusability of the action with the given type.\n`isActionDisabled(action: MDCChipActionType): boolean` | Returns the disabled state of the action with the given type.\n`isRTL(): boolean` | Returns `true` if the chip is rendered in an RTL context, otherwise returns `false`.\n`removeClass(className: MDCChipCssClasses): void` | Remove the given class from the root.\n`setActionDisabled(action: MDCChipActionType, isDisabled: boolean): void` | Sets the disabled state of the action with the given type.\n`setActionFocus(action: MDCChipActionType, behavior: MDCChipActionFocusBehavior): void` | Sets the focus behavior of the action with the given type.\n`setActionSelected(action: MDCChipActionType, isSelected: boolean): void` | Sets the selected state of the action with the given type.\n`setStyleProperty(property: string, value: string): void` | Sets the style property on the root to the given value.\n\n### `MDCChipFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleAnimationEnd(event: AnimationEvent): void` | Handles the [`animationend` event](https://developer.mozilla.org/en-US/docs/Web/API/Document/animationend_event).\n`handleTransitionEnd(): void` | Handles the [`transitionend` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event).\n`handleActionInteraction(event: ActionInteractionEvent): void` | Handles the chip action's interaction event.\n`handleActionNavigation(event: ActionNavigationEvent): void` | Handles the chip action's navigation event.\n`getElementID(): string` | Returns the [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the chip.\n`setDisabled(isDisabled: boolean): void` | Sets the disabled state of the chip.\n`isDisabled(): boolean` | Returns the disabled state of the chip.\n`getActions(): ActionType[]` | Returns the actions of the chip.\n`isActionFocusable(action: MDCChipActionType): boolean` | Returns the focusability of the given action.\n`isActionSelectable(action: MDCChipActionType): boolean` | Returns the selectability of the given action.\n`isActionSelected(action: MDCChipActionType): boolean` | Returns the selected state of the given action.\n`setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior): void` | Sets the focus behavior of the given action.\n`setActionSelected(action: MDCChipActionType, isSelected: boolean): void` | Sets the selected state of the given action.\n`startAnimation(animation: Animation): void` | Starts the given animation on the chip.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a chip for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n"
  },
  {
    "path": "packages/mdc-chips/chip/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../action/constants';\n\nimport {MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipAdapter {\n  /** Adds the given class to the root element. */\n  addClass(className: MDCChipCssClasses): void;\n\n  /** Emits the given event with the given detail. */\n  emitEvent<D extends object>(eventName: MDCChipEvents, eventDetail: D): void;\n\n  /** Returns the child actions provided by the chip. */\n  getActions(): MDCChipActionType[];\n\n  /** Returns the value for the given attribute, if it exists. */\n  getAttribute(attrName: MDCChipAttributes): string|null;\n\n  /** Returns the ID of the root element. */\n  getElementID(): string;\n\n  /** Returns the offset width of the root element. */\n  getOffsetWidth(): number;\n\n  /** Returns true if the root element has the given class. */\n  hasClass(className: MDCChipCssClasses): boolean;\n\n  /** Proxies to the MDCChipAction#isSelectable method. */\n  isActionSelectable(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isSelected method. */\n  isActionSelected(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isFocusable method. */\n  isActionFocusable(action: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChipAction#isDisabled method. */\n  isActionDisabled(action: MDCChipActionType): boolean;\n\n  /** Returns true if the text direction is right-to-left. */\n  isRTL(): boolean;\n\n  /** Removes the given class from the root element. */\n  removeClass(className: MDCChipCssClasses): void;\n\n  /** Proxies to the MDCChipAction#setDisabled method. */\n  setActionDisabled(action: MDCChipActionType, isDisabled: boolean): void;\n\n  /** Proxies to the MDCChipAction#setFocus method. */\n  setActionFocus(\n      action: MDCChipActionType, behavior: MDCChipActionFocusBehavior): void;\n\n  /** Proxies to the MDCChipAction#setSelected method. */\n  setActionSelected(action: MDCChipActionType, isSelected: boolean): void;\n\n  /** Sets the style property to the given value. */\n  setStyleProperty(property: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener} from '@material/base/types';\n\nimport {MDCChipAction, MDCChipActionFactory} from '../action/component';\nimport {MDCChipActionEvents, MDCChipActionFocusBehavior, MDCChipActionType} from '../action/constants';\n\nimport {MDCChipAdapter} from './adapter';\nimport {MDCChipAnimation} from './constants';\nimport {MDCChipFoundation} from './foundation';\nimport {ActionInteractionEvent, ActionNavigationEvent} from './types';\n\n/**\n * MDCChipFactory is used by the parent MDCChipSet component to initialize\n * chips.\n */\nexport type MDCChipFactory =\n    (el: HTMLElement, foundation?: MDCChipFoundation) => MDCChip;\n\n/**\n * MDCChip provides component encapsulation of the foundation implementation.\n */\nexport class MDCChip extends MDCComponent<MDCChipFoundation> {\n  static override attachTo(root: HTMLElement): MDCChip {\n    return new MDCChip(root);\n  }\n\n  // Below properties are all assigned in #initialize()\n  private handleActionInteraction!: CustomEventListener<ActionInteractionEvent>;\n  private handleActionNavigation!: CustomEventListener<ActionNavigationEvent>;\n  private actions!: Map<MDCChipActionType, MDCChipAction>;\n\n  override initialize(\n      actionFactory:\n          MDCChipActionFactory = (el: HTMLElement) => new MDCChipAction(el)) {\n    this.actions = new Map();\n    const actionEls =\n        this.root.querySelectorAll<HTMLElement>('.mdc-evolution-chip__action');\n    for (let i = 0; i < actionEls.length; i++) {\n      const action = actionFactory(actionEls[i]);\n      this.actions.set(action.actionType(), action);\n    }\n  }\n\n  override initialSyncWithDOM() {\n    this.handleActionInteraction = (event) => {\n      this.foundation.handleActionInteraction(event);\n    };\n\n    this.handleActionNavigation = (event) => {\n      this.foundation.handleActionNavigation(event);\n    };\n\n    this.listen(MDCChipActionEvents.INTERACTION, this.handleActionInteraction);\n    this.listen(MDCChipActionEvents.NAVIGATION, this.handleActionNavigation);\n  }\n\n  override destroy() {\n    this.unlisten(\n        MDCChipActionEvents.INTERACTION, this.handleActionInteraction);\n    this.unlisten(MDCChipActionEvents.NAVIGATION, this.handleActionNavigation);\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      emitEvent: (eventName, eventDetail) => {\n        this.emit(eventName, eventDetail, true /* shouldBubble */);\n      },\n      getActions: () => {\n        const actions: MDCChipActionType[] = [];\n        for (const [key] of this.actions) {\n          actions.push(key);\n        }\n        return actions;\n      },\n      getAttribute: (attrName) => this.root.getAttribute(attrName),\n      getElementID: () => this.root.id,\n      getOffsetWidth: () => {\n        return this.root.offsetWidth;\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      isActionSelectable: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.isSelectable();\n        }\n        return false;\n      },\n      isActionSelected: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.isSelected();\n        }\n        return false;\n      },\n      isActionFocusable: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.isFocusable();\n        }\n        return false;\n      },\n      isActionDisabled: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.isDisabled();\n        }\n        return false;\n      },\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(\n                       'direction') === 'rtl',\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setActionDisabled:\n          (actionType: MDCChipActionType, isDisabled: boolean) => {\n            const action = this.actions.get(actionType);\n            if (action) {\n              action.setDisabled(isDisabled);\n            }\n          },\n      setActionFocus:\n          (actionType: MDCChipActionType,\n           behavior: MDCChipActionFocusBehavior) => {\n            const action = this.actions.get(actionType);\n            if (action) {\n              action.setFocus(behavior);\n            }\n          },\n      setActionSelected:\n          (actionType: MDCChipActionType, isSelected: boolean) => {\n            const action = this.actions.get(actionType);\n            if (action) {\n              action.setSelected(isSelected);\n            }\n          },\n      setStyleProperty: (prop: string, value: string) => {\n        this.root.style.setProperty(prop, value);\n      },\n    };\n\n    // Default to the primary foundation\n    return new MDCChipFoundation(adapter);\n  }\n\n  /** Exposed to be called by the parent chip set. */\n  remove() {\n    const parent = this.root.parentNode;\n    if (parent !== null) {\n      parent.removeChild(this.root);\n    }\n  }\n\n  /** Returns the MDCChipActionTypes for the encapsulated actions. */\n  getActions(): MDCChipActionType[] {\n    return this.foundation.getActions();\n  }\n\n  /** Returns the ID of the root element. */\n  getElementID(): string {\n    return this.foundation.getElementID();\n  }\n\n  isDisabled(): boolean {\n    return this.foundation.isDisabled();\n  }\n\n  setDisabled(isDisabled: boolean) {\n    this.foundation.setDisabled(isDisabled);\n  }\n\n  /** Returns the focusability of the action. */\n  isActionFocusable(action: MDCChipActionType): boolean {\n    return this.foundation.isActionFocusable(action);\n  }\n\n  /** Returns the selectability of the action. */\n  isActionSelectable(action: MDCChipActionType): boolean {\n    return this.foundation.isActionSelectable(action);\n  }\n\n  /** Returns the selected state of the action. */\n  isActionSelected(action: MDCChipActionType): boolean {\n    return this.foundation.isActionSelected(action);\n  }\n\n  /** Sets the focus behavior of the action. */\n  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {\n    this.foundation.setActionFocus(action, focus);\n  }\n\n  /** Sets the selected state of the action. */\n  setActionSelected(action: MDCChipActionType, isSelected: boolean) {\n    this.foundation.setActionSelected(action, isSelected);\n  }\n\n  /** Starts the animation on the chip. */\n  startAnimation(animation: MDCChipAnimation) {\n    this.foundation.startAnimation(animation);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * MDCChipCssClasses provides the named constants for class names.\n */\nexport enum MDCChipCssClasses {\n  SELECTING = 'mdc-evolution-chip--selecting',\n  DESELECTING = 'mdc-evolution-chip--deselecting',\n  SELECTING_WITH_PRIMARY_ICON =\n      'mdc-evolution-chip--selecting-with-primary-icon',\n  DESELECTING_WITH_PRIMARY_ICON =\n      'mdc-evolution-chip--deselecting-with-primary-icon',\n  DISABLED = 'mdc-evolution-chip--disabled',\n  ENTER = 'mdc-evolution-chip--enter',\n  EXIT = 'mdc-evolution-chip--exit',\n  SELECTED = 'mdc-evolution-chip--selected',\n  HIDDEN = 'mdc-evolution-chip--hidden',\n  WITH_PRIMARY_ICON = 'mdc-evolution-chip--with-primary-icon',\n}\n\n/**\n * MDCChipEvents provides the named constants for emitted events.\n */\nexport enum MDCChipEvents {\n  INTERACTION = 'MDCChip:interaction',\n  NAVIGATION = 'MDCChip:navigation',\n  ANIMATION = 'MDCChip:animation',\n}\n\n/**\n * MDCChipAttributes provides the named constants for strings used by the\n * foundation.\n */\nexport enum MDCChipAttributes {\n  DATA_REMOVED_ANNOUNCEMENT = 'data-mdc-removed-announcement',\n  DATA_ADDED_ANNOUNCEMENT = 'data-mdc-added-announcement',\n}\n\n/**\n * MDCChipAnimation provides the names of runnable animations.\n */\nexport enum MDCChipAnimation {\n  ENTER = 'mdc-evolution-chip-enter',\n  EXIT = 'mdc-evolution-chip-exit',\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {AnimationFrame} from '@material/animation/animationframe';\nimport {MDCFoundation} from '@material/base/foundation';\nimport {KEY} from '@material/dom/keyboard';\n\nimport {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../action/constants';\nimport {MDCChipActionInteractionEventDetail} from '../action/types';\n\nimport {MDCChipAdapter} from './adapter';\nimport {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from './constants';\nimport {ActionInteractionEvent, ActionNavigationEvent, MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from './types';\n\ninterface Navigation {\n  from: MDCChipActionType;\n  to: MDCChipActionType;\n}\n\nenum Direction {\n  UNSPECIFIED,  // Default\n  LEFT,\n  RIGHT,\n}\n\nenum AnimationKeys {\n  SELECTION = 'selection',\n  EXIT = 'exit',\n}\n\n/**\n * MDCChipFoundation provides a foundation for all chips.\n */\nexport class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {\n  static override get defaultAdapter(): MDCChipAdapter {\n    return {\n      addClass: () => undefined,\n      emitEvent: () => undefined,\n      getActions: () => [],\n      getAttribute: () => null,\n      getElementID: () => '',\n      getOffsetWidth: () => 0,\n      hasClass: () => false,\n      isActionDisabled: () => false,\n      isActionFocusable: () => false,\n      isActionSelectable: () => false,\n      isActionSelected: () => false,\n      isRTL: () => false,\n      removeClass: () => undefined,\n      setActionDisabled: () => undefined,\n      setActionFocus: () => undefined,\n      setActionSelected: () => undefined,\n      setStyleProperty: () => undefined,\n    };\n  }\n\n  private readonly animFrame: AnimationFrame;\n\n  constructor(adapter?: Partial<MDCChipAdapter>) {\n    super({...MDCChipFoundation.defaultAdapter, ...adapter});\n    this.animFrame = new AnimationFrame();\n  }\n\n  override destroy() {\n    this.animFrame.cancelAll();\n  }\n\n  getElementID() {\n    return this.adapter.getElementID();\n  }\n\n  setDisabled(isDisabled: boolean) {\n    const actions = this.getActions();\n    for (const action of actions) {\n      this.adapter.setActionDisabled(action, isDisabled);\n    }\n\n    if (isDisabled) {\n      this.adapter.addClass(MDCChipCssClasses.DISABLED);\n    } else {\n      this.adapter.removeClass(MDCChipCssClasses.DISABLED);\n    }\n  }\n\n  isDisabled(): boolean {\n    const actions = this.getActions();\n    for (const action of actions) {\n      if (this.adapter.isActionDisabled(action)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  getActions(): MDCChipActionType[] {\n    return this.adapter.getActions();\n  }\n\n  isActionFocusable(action: MDCChipActionType): boolean {\n    return this.adapter.isActionFocusable(action);\n  }\n\n  isActionSelectable(action: MDCChipActionType): boolean {\n    return this.adapter.isActionSelectable(action);\n  }\n\n  isActionSelected(action: MDCChipActionType): boolean {\n    return this.adapter.isActionSelected(action);\n  }\n\n  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {\n    this.adapter.setActionFocus(action, focus);\n  }\n\n  setActionSelected(action: MDCChipActionType, isSelected: boolean) {\n    this.adapter.setActionSelected(action, isSelected);\n    this.animateSelection(isSelected);\n  }\n\n  startAnimation(animation: MDCChipAnimation) {\n    if (animation === MDCChipAnimation.ENTER) {\n      this.adapter.addClass(MDCChipCssClasses.ENTER);\n      return;\n    }\n\n    if (animation === MDCChipAnimation.EXIT) {\n      this.adapter.addClass(MDCChipCssClasses.EXIT);\n      return;\n    }\n  }\n\n  handleAnimationEnd(event: AnimationEvent) {\n    const {animationName} = event;\n    if (animationName === MDCChipAnimation.ENTER) {\n      this.adapter.removeClass(MDCChipCssClasses.ENTER);\n      this.adapter.emitEvent<MDCChipAnimationEventDetail>(\n          MDCChipEvents.ANIMATION, {\n            chipID: this.getElementID(),\n            animation: MDCChipAnimation.ENTER,\n            addedAnnouncement: this.getAddedAnnouncement(),\n            isComplete: true,\n          });\n      return;\n    }\n\n    if (animationName === MDCChipAnimation.EXIT) {\n      this.adapter.removeClass(MDCChipCssClasses.EXIT);\n      this.adapter.addClass(MDCChipCssClasses.HIDDEN);\n      const width = this.adapter.getOffsetWidth();\n      this.adapter.setStyleProperty('width', `${width}px`);\n      // Wait two frames so the width gets applied correctly.\n      this.animFrame.request(AnimationKeys.EXIT, () => {\n        this.animFrame.request(AnimationKeys.EXIT, () => {\n          this.adapter.setStyleProperty('width', '0');\n        });\n      });\n    }\n  }\n\n  handleTransitionEnd() {\n    if (!this.adapter.hasClass(MDCChipCssClasses.HIDDEN)) return;\n\n    this.adapter.emitEvent<MDCChipAnimationEventDetail>(\n        MDCChipEvents.ANIMATION, {\n          chipID: this.getElementID(),\n          animation: MDCChipAnimation.EXIT,\n          removedAnnouncement: this.getRemovedAnnouncement(),\n          isComplete: true,\n        });\n  }\n\n  handleActionInteraction({detail}: ActionInteractionEvent) {\n    const {source, actionID} = detail;\n    const isSelectable = this.adapter.isActionSelectable(source);\n    const isSelected = this.adapter.isActionSelected(source);\n\n    this.adapter.emitEvent<MDCChipInteractionEventDetail>(\n        MDCChipEvents.INTERACTION, {\n          chipID: this.getElementID(),\n          shouldRemove: this.shouldRemove(detail),\n          actionID,\n          isSelectable,\n          isSelected,\n          source,\n        });\n  }\n\n  handleActionNavigation({detail}: ActionNavigationEvent) {\n    const {source, key} = detail;\n    const isRTL = this.adapter.isRTL();\n    const isTrailingActionFocusable =\n        this.adapter.isActionFocusable(MDCChipActionType.TRAILING);\n    const isPrimaryActionFocusable =\n        this.adapter.isActionFocusable(MDCChipActionType.PRIMARY);\n    const dir = this.directionFromKey(key, isRTL);\n\n    const shouldNavigateToTrailing = source === MDCChipActionType.PRIMARY &&\n        dir === Direction.RIGHT && isTrailingActionFocusable;\n\n    const shouldNavigateToPrimary = source === MDCChipActionType.TRAILING &&\n        dir === Direction.LEFT && isPrimaryActionFocusable;\n\n    if (shouldNavigateToTrailing) {\n      this.navigateActions({from: source, to: MDCChipActionType.TRAILING});\n      return;\n    }\n\n    if (shouldNavigateToPrimary) {\n      this.navigateActions({from: source, to: MDCChipActionType.PRIMARY});\n      return;\n    }\n\n    this.adapter.emitEvent<MDCChipNavigationEventDetail>(\n        MDCChipEvents.NAVIGATION, {\n          chipID: this.getElementID(),\n          isRTL,\n          source,\n          key,\n        });\n  }\n\n  private directionFromKey(key: string, isRTL: boolean): Direction {\n    const isLeftKey = key === KEY.ARROW_LEFT;\n    const isRightKey = key === KEY.ARROW_RIGHT;\n    if (!isRTL && isLeftKey || isRTL && isRightKey) {\n      return Direction.LEFT;\n    }\n\n    if (!isRTL && isRightKey || isRTL && isLeftKey) {\n      return Direction.RIGHT;\n    }\n\n    return Direction.UNSPECIFIED;\n  }\n\n  private navigateActions(nav: Navigation) {\n    this.adapter.setActionFocus(\n        nav.from, MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    this.adapter.setActionFocus(\n        nav.to, MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n  }\n\n  private shouldRemove({source, trigger}: MDCChipActionInteractionEventDetail):\n      boolean {\n    if (trigger === MDCChipActionInteractionTrigger.BACKSPACE_KEY ||\n        trigger === MDCChipActionInteractionTrigger.DELETE_KEY) {\n      return true;\n    }\n\n    return source === MDCChipActionType.TRAILING;\n  }\n\n  private getRemovedAnnouncement(): string|undefined {\n    const msg =\n        this.adapter.getAttribute(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT);\n    return msg || undefined;\n  }\n\n  private getAddedAnnouncement(): string|undefined {\n    const msg =\n        this.adapter.getAttribute(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT);\n    return msg || undefined;\n  }\n\n  private animateSelection(isSelected: boolean) {\n    this.resetAnimationStyles();\n    // Wait two frames to ensure the animation classes are unset\n    this.animFrame.request(AnimationKeys.SELECTION, () => {\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.updateSelectionStyles(isSelected);\n      });\n    });\n  }\n\n  private resetAnimationStyles() {\n    this.adapter.removeClass(MDCChipCssClasses.SELECTING);\n    this.adapter.removeClass(MDCChipCssClasses.DESELECTING);\n    this.adapter.removeClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n    this.adapter.removeClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n  }\n\n  private updateSelectionStyles(isSelected: boolean) {\n    const hasIcon = this.adapter.hasClass(MDCChipCssClasses.WITH_PRIMARY_ICON);\n    if (hasIcon && isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.addClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (hasIcon && !isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.removeClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.SELECTING);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.addClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n\n    if (!isSelected) {\n      this.adapter.addClass(MDCChipCssClasses.DESELECTING);\n      this.animFrame.request(AnimationKeys.SELECTION, () => {\n        this.adapter.removeClass(MDCChipCssClasses.SELECTED);\n      });\n      return;\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/chip/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-chips/chip/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {createKeyboardEvent, emitEvent} from '../../../../testing/dom/events';\nimport {setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/constants';\nimport {MDCChip, MDCChipAnimation, MDCChipCssClasses, MDCChipEvents} from '../index';\n\ninterface ActionOptions {\n  readonly isFocusable: boolean;\n  readonly isSelectable: boolean;\n  readonly isDisabled: boolean;\n}\n\ninterface TestOptions {\n  readonly primary: ActionOptions;\n  readonly trailing?: ActionOptions;\n  readonly id: string;\n}\n\nfunction actionFixture(\n    {isFocusable, isSelectable, isDisabled}: ActionOptions,\n    isTrailing: boolean = false): string {\n  return `<button class=\"mdc-evolution-chip__action ${\n      isTrailing ? 'mdc-evolution-chip__action--trailing' : ''}\"\n      ${isFocusable ? '' : 'aria-hidden=\"true\"'}\n      ${isSelectable ? 'role=\"option\"' : ''}\n      ${\n      isDisabled ? (isSelectable ? 'aria-disabled=\"true\"' : 'disabled') :\n                   ''}>Label</button>`;\n}\n\nfunction getFixture({primary, trailing, id}: TestOptions): HTMLElement {\n  return createFixture(html`\n  <div id=\"${id}\">\n    ${actionFixture(primary)}\n    ${trailing === undefined ? '' : actionFixture(trailing, true)}\n  </div>`);\n}\n\nfunction setupTest(options: TestOptions) {\n  const root = getFixture(options);\n  const component = new MDCChip(root);\n  return {root, component};\n}\n\ndescribe('MDCChipAction', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCChipAction instance', () => {\n    const chip = MDCChip.attachTo(getFixture({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    }));\n    expect(chip instanceof MDCChip).toBeTruthy();\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('.mdc-evolution-chip__action')!;\n    const interactionHandler = jasmine.createSpy('emitInteractionHandler');\n    component.listen(MDCChipEvents.INTERACTION, interactionHandler);\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n    component.unlisten(MDCChipEvents.INTERACTION, interactionHandler);\n    expect(interactionHandler).toHaveBeenCalled();\n\n    const navigationHandler = jasmine.createSpy('emitNavigationHandler');\n    component.listen(MDCChipEvents.NAVIGATION, navigationHandler);\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    component.unlisten(MDCChipEvents.NAVIGATION, navigationHandler);\n    expect(navigationHandler).toHaveBeenCalled();\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n    component.destroy();\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('.mdc-evolution-chip__action')!;\n    const interactionHandler = jasmine.createSpy('emitInteractionHandler');\n    component.listen(MDCChipEvents.INTERACTION, interactionHandler);\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n    component.unlisten(MDCChipEvents.INTERACTION, interactionHandler);\n    expect(interactionHandler).not.toHaveBeenCalled();\n\n    const navigationHandler = jasmine.createSpy('emitNavigationHandler');\n    component.listen(MDCChipEvents.NAVIGATION, navigationHandler);\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    component.unlisten(MDCChipEvents.NAVIGATION, navigationHandler);\n    expect(navigationHandler).not.toHaveBeenCalled();\n  });\n\n  it('#getActions() returns the included actions', () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    expect(component.getActions()).toEqual([\n      MDCChipActionType.PRIMARY, MDCChipActionType.TRAILING\n    ]);\n  });\n\n  it('#getElementID() returns the root ID', () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'foo',\n    });\n\n    expect(component.getElementID()).toBe('foo');\n  });\n\n  it(`#isActionFocusable() returns true when configured`, () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    expect(component.isActionFocusable(MDCChipActionType.PRIMARY)).toBe(true);\n  });\n\n  it(`#isActionSelectable() returns true when configured`, () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: true, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    expect(component.isActionSelectable(MDCChipActionType.PRIMARY)).toBe(true);\n  });\n\n  it(`#isActionSelected() returns true when configured`, () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: true, isDisabled: false},\n      trailing: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    component.setActionSelected(MDCChipActionType.PRIMARY, true);\n    expect(component.isActionSelected(MDCChipActionType.PRIMARY)).toBe(true);\n  });\n\n  it(`#setActionFocus() updates the focus when configured`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    component.setActionFocus(\n        MDCChipActionType.PRIMARY, MDCChipActionFocusBehavior.FOCUSABLE);\n    expect(root.querySelector<HTMLElement>(\n                   '.mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .toBe('0');\n  });\n\n  it(`#setActionSelected() updates selection when configured`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: true, isDisabled: false},\n      id: 'c0',\n    });\n\n    component.setActionSelected(MDCChipActionType.PRIMARY, true);\n    expect(\n        root.querySelector<HTMLElement>(\n                '.mdc-evolution-chip__action')!.getAttribute('aria-selected'))\n        .toBe('true');\n  });\n\n  it(`#setDisabled(true) updates the disabled state of all controls`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    component.setDisabled(true);\n    expect(root.querySelector<HTMLButtonElement>(\n                   '.mdc-evolution-chip__action')!.disabled)\n        .toBeTrue();\n  });\n\n  it(`#setDisabled(false) updates the disabled state of all controls`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: true},\n      id: 'c0',\n    });\n\n    component.setDisabled(false);\n    expect(root.querySelector<HTMLButtonElement>(\n                   '.mdc-evolution-chip__action')!.disabled)\n        .toBeFalse();\n  });\n\n  it(`#isDisabled() returns false when configured`, () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: false},\n      id: 'c0',\n    });\n\n    expect(component.isDisabled()).toBeFalse();\n  });\n\n  it(`#isDisabled() returns true when configured`, () => {\n    const {component} = setupTest({\n      primary: {isFocusable: true, isSelectable: false, isDisabled: true},\n      id: 'c0',\n    });\n\n    expect(component.isDisabled()).toBeTrue();\n  });\n\n  it(`#handleAnimationEnd() sets width on exit animation completion`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: true, isDisabled: false},\n      id: 'c0',\n    });\n\n    const width = root.offsetWidth;\n    // tslint:disable-next-line:no-any\n    (component as any).foundation.handleAnimationEnd({\n      animationName: MDCChipAnimation.EXIT,\n    });\n    expect(root.style.getPropertyValue('width')).toBe(`${width}px`);\n  });\n\n  it(`#startMDCChipAnimation() starts the animation`, () => {\n    const {component, root} = setupTest({\n      primary: {isFocusable: true, isSelectable: true, isDisabled: false},\n      id: 'c0',\n    });\n\n    component.startAnimation(MDCChipAnimation.ENTER);\n    expect(root).toHaveClass(MDCChipCssClasses.ENTER);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/chip/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {KEY} from '../../../mdc-dom/keyboard';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCChipActionFocusBehavior, MDCChipActionInteractionTrigger, MDCChipActionType} from '../../action/constants';\nimport {MDCChipAnimation, MDCChipAttributes, MDCChipCssClasses, MDCChipEvents} from '../constants';\nimport {MDCChipFoundation} from '../foundation';\nimport {ActionInteractionEvent, ActionNavigationEvent} from '../types';\n\ndescribe('MDCChipFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCChipFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#getElementID() returns the adapter's return value`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getElementID.and.returnValue('foo');\n    expect(foundation.getElementID()).toBe('foo');\n  });\n\n  it(`#getActions() returns the adapter's return value`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getActions.and.returnValue([MDCChipActionType.UNSPECIFIED]);\n    expect(foundation.getActions()).toEqual([MDCChipActionType.UNSPECIFIED]);\n  });\n\n  it(`#isActionFocusable() returns the adapter's return value`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isActionFocusable.and.returnValue(true);\n    expect(foundation.isActionFocusable(MDCChipActionType.UNSPECIFIED))\n        .toBe(true);\n  });\n\n  it(`#isActionSelectable() returns the adapter's return value`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isActionSelectable.and.returnValue(true);\n    expect(foundation.isActionSelectable(MDCChipActionType.UNSPECIFIED))\n        .toBe(true);\n  });\n\n  it(`#isActionSelected() returns the adapter's return value`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isActionSelected.and.returnValue(true);\n    expect(foundation.isActionSelected(MDCChipActionType.UNSPECIFIED))\n        .toBe(true);\n  });\n\n  it(`#setActionFocus(` +\n         `${MDCChipActionType.UNSPECIFIED}, ${\n             MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED})` +\n         ` updates the action focus`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionFocus(\n           MDCChipActionType.UNSPECIFIED,\n           MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n       expect(mockAdapter.setActionFocus)\n           .toHaveBeenCalledWith(\n               MDCChipActionType.UNSPECIFIED,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#setActionSelected(${MDCChipActionType.UNSPECIFIED}, true) updates` +\n         ` the action selection`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       expect(mockAdapter.setActionSelected)\n           .toHaveBeenCalledWith(MDCChipActionType.UNSPECIFIED, true);\n     });\n\n  it(`sequential calls to #setActionSelected() only modify the DOM once`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, false);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       jasmine.clock().tick(3);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTING);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTED);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(2);\n     });\n\n  it('#destroy() cancels selection animation frames', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n    foundation.destroy();\n    jasmine.clock().tick(3);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(MDCChipCssClasses.SELECTING);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(MDCChipCssClasses.SELECTED);\n  });\n\n  it(`#setActionSelected(${\n         MDCChipActionType.UNSPECIFIED}, true) adds the selected class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       jasmine.clock().tick(3);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTED);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType.UNSPECIFIED}, false) removes the selected class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, false);\n       jasmine.clock().tick(3);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTED);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType.UNSPECIFIED}, true) removes all animating classes`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.DESELECTING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(\n               MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType\n             .UNSPECIFIED}, true) adds the selecting class when no primary icon is present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.WITH_PRIMARY_ICON)\n           .and.returnValue(false);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       jasmine.clock().tick(2);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTING);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType\n             .UNSPECIFIED}, true) adds the selecting with icon class when the primary icon is present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.WITH_PRIMARY_ICON)\n           .and.returnValue(true);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, true);\n       jasmine.clock().tick(2);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.SELECTING_WITH_PRIMARY_ICON);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType\n             .UNSPECIFIED}, false) adds the deselecting class when no primary icon is present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.WITH_PRIMARY_ICON)\n           .and.returnValue(false);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, false);\n       jasmine.clock().tick(2);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCChipCssClasses.DESELECTING);\n     });\n\n  it(`#setActionSelected(${\n         MDCChipActionType\n             .UNSPECIFIED}, false) adds the deelecting with icon class when the primary icon is present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.WITH_PRIMARY_ICON)\n           .and.returnValue(true);\n       foundation.setActionSelected(MDCChipActionType.UNSPECIFIED, false);\n       jasmine.clock().tick(2);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               MDCChipCssClasses.DESELECTING_WITH_PRIMARY_ICON);\n     });\n\n  it('#setDisabled(true) makes each action disabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getActions.and.returnValue([MDCChipActionType.UNSPECIFIED]);\n    foundation.setDisabled(true);\n    expect(mockAdapter.setActionDisabled)\n        .toHaveBeenCalledWith(MDCChipActionType.UNSPECIFIED, true);\n  });\n\n  it('#setDisabled(true) adds the disabled class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getActions.and.returnValue([MDCChipActionType.UNSPECIFIED]);\n    foundation.setDisabled(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(MDCChipCssClasses.DISABLED);\n  });\n\n  it('#setDisabled(false) makes each action enabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getActions.and.returnValue([MDCChipActionType.UNSPECIFIED]);\n    foundation.setDisabled(false);\n    expect(mockAdapter.setActionDisabled)\n        .toHaveBeenCalledWith(MDCChipActionType.UNSPECIFIED, false);\n  });\n\n  it('#setDisabled(false) removes the disabled class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getActions.and.returnValue([MDCChipActionType.UNSPECIFIED]);\n    foundation.setDisabled(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(MDCChipCssClasses.DISABLED);\n  });\n\n  it(`#handleActionInteraction() emits ${MDCChipEvents.INTERACTION}`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getElementID.and.returnValue('foo');\n    mockAdapter.isActionSelected.withArgs(MDCChipActionType.UNSPECIFIED)\n        .and.returnValue(true);\n    mockAdapter.isActionSelectable.withArgs(MDCChipActionType.UNSPECIFIED)\n        .and.returnValue(true);\n\n    foundation.handleActionInteraction({\n      detail: {\n        actionID: 'bar',\n        source: MDCChipActionType.UNSPECIFIED,\n        trigger: MDCChipActionInteractionTrigger.CLICK,\n      },\n    } as ActionInteractionEvent);\n\n    expect(mockAdapter.emitEvent)\n        .toHaveBeenCalledWith(MDCChipEvents.INTERACTION, {\n          actionID: 'bar',\n          chipID: 'foo',\n          shouldRemove: false,\n          isSelectable: true,\n          isSelected: true,\n          source: MDCChipActionType.UNSPECIFIED,\n        });\n  });\n\n  it(`#handleActionInteraction() emits ${MDCChipEvents.INTERACTION} with` +\n         ` {shouldRemove: true} when from action \"${\n             MDCChipActionType.TRAILING}\"`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleActionInteraction({\n         detail: {\n           actionID: 'bar',\n           source: MDCChipActionType.TRAILING,\n           trigger: MDCChipActionInteractionTrigger.CLICK,\n         },\n       } as ActionInteractionEvent);\n\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipEvents.INTERACTION, {\n             actionID: 'bar',\n             chipID: '',\n             shouldRemove: true,\n             isSelectable: false,\n             isSelected: false,\n             source: MDCChipActionType.TRAILING,\n           });\n     });\n\n  it(`#handleActionInteraction() emits ${MDCChipEvents.INTERACTION} with` +\n         ` {shouldRemove: true} when from` +\n         ` trigger \"${MDCChipActionInteractionTrigger.BACKSPACE_KEY}\"`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleActionInteraction({\n         detail: {\n           actionID: 'bar',\n           source: MDCChipActionType.UNSPECIFIED,\n           trigger: MDCChipActionInteractionTrigger.BACKSPACE_KEY,\n         },\n       } as ActionInteractionEvent);\n\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipEvents.INTERACTION, {\n             actionID: 'bar',\n             chipID: '',\n             shouldRemove: true,\n             isSelectable: false,\n             isSelected: false,\n             source: MDCChipActionType.UNSPECIFIED,\n           });\n     });\n\n  describe('#handleActionNavigation', () => {\n    describe('ArrowRight', () => {\n      // Use the same key for all tests\n      const key = KEY.ARROW_RIGHT;\n\n      it(`from primary action focuses trailing action if focusable`, () => {\n        const {foundation, mockAdapter} = setupTest();\n        mockAdapter.isActionFocusable.withArgs(MDCChipActionType.TRAILING)\n            .and.returnValue(true);\n\n        foundation.handleActionNavigation({\n          detail: {\n            source: MDCChipActionType.PRIMARY,\n            key,\n          },\n        } as ActionNavigationEvent);\n\n        expect(mockAdapter.setActionFocus)\n            .toHaveBeenCalledWith(\n                MDCChipActionType.TRAILING,\n                MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n        expect(mockAdapter.setActionFocus)\n            .toHaveBeenCalledWith(\n                MDCChipActionType.PRIMARY,\n                MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n      });\n\n      it(`from primary action emits ${MDCChipEvents.NAVIGATION}` +\n             ` if trailing action is not focusable`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getElementID.and.returnValue('foo');\n           mockAdapter.isActionFocusable.withArgs(MDCChipActionType.TRAILING)\n               .and.returnValue(false);\n\n           foundation.handleActionNavigation({\n             detail: {\n               source: MDCChipActionType.PRIMARY,\n               key,\n             },\n           } as ActionNavigationEvent);\n\n           expect(mockAdapter.emitEvent)\n               .toHaveBeenCalledWith(MDCChipEvents.NAVIGATION, {\n                 chipID: 'foo',\n                 source: MDCChipActionType.PRIMARY,\n                 isRTL: false,\n                 key,\n               });\n         });\n\n      it(`from primary action in RTL emits ${MDCChipEvents.NAVIGATION}`, () => {\n        const {foundation, mockAdapter} = setupTest();\n        mockAdapter.isRTL.and.returnValue(true);\n        mockAdapter.getElementID.and.returnValue('foo');\n\n        foundation.handleActionNavigation({\n          detail: {\n            source: MDCChipActionType.PRIMARY,\n            key,\n          },\n        } as ActionNavigationEvent);\n\n        expect(mockAdapter.emitEvent)\n            .toHaveBeenCalledWith(MDCChipEvents.NAVIGATION, {\n              chipID: 'foo',\n              source: MDCChipActionType.PRIMARY,\n              isRTL: true,\n              key,\n            });\n      });\n    });\n\n    describe('ArrowLeft', () => {\n      // Use the same key for all tests\n      const key = KEY.ARROW_LEFT;\n\n      it(`from trailing action focuses primary action if focusable`, () => {\n        const {foundation, mockAdapter} = setupTest();\n        mockAdapter.isActionFocusable.withArgs(MDCChipActionType.PRIMARY)\n            .and.returnValue(true);\n\n        foundation.handleActionNavigation({\n          detail: {\n            source: MDCChipActionType.TRAILING,\n            key,\n          },\n        } as ActionNavigationEvent);\n\n        expect(mockAdapter.setActionFocus)\n            .toHaveBeenCalledWith(\n                MDCChipActionType.PRIMARY,\n                MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n        expect(mockAdapter.setActionFocus)\n            .toHaveBeenCalledWith(\n                MDCChipActionType.TRAILING,\n                MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n      });\n\n      it(`from trailing action emits ${MDCChipEvents.NAVIGATION}` +\n             ` if primary action is not focusable`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getElementID.and.returnValue('foo');\n           mockAdapter.isActionFocusable.withArgs(MDCChipActionType.PRIMARY)\n               .and.returnValue(false);\n\n           foundation.handleActionNavigation({\n             detail: {\n               source: MDCChipActionType.TRAILING,\n               key,\n             },\n           } as ActionNavigationEvent);\n\n           expect(mockAdapter.emitEvent)\n               .toHaveBeenCalledWith(MDCChipEvents.NAVIGATION, {\n                 chipID: 'foo',\n                 source: MDCChipActionType.TRAILING,\n                 isRTL: false,\n                 key,\n               });\n         });\n\n      it(`from trailing action in RTL emits ${MDCChipEvents.NAVIGATION}`,\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.isRTL.and.returnValue(true);\n           mockAdapter.getElementID.and.returnValue('foo');\n\n           foundation.handleActionNavigation({\n             detail: {\n               source: MDCChipActionType.TRAILING,\n               key,\n             },\n           } as ActionNavigationEvent);\n\n           expect(mockAdapter.emitEvent)\n               .toHaveBeenCalledWith(MDCChipEvents.NAVIGATION, {\n                 chipID: 'foo',\n                 source: MDCChipActionType.TRAILING,\n                 isRTL: true,\n                 key,\n               });\n         });\n    });\n\n    const emittingKeys = [\n      KEY.ARROW_UP,\n      KEY.ARROW_DOWN,\n      KEY.HOME,\n      KEY.END,\n    ];\n\n    for (const key of emittingKeys) {\n      it(`${key} emits ${MDCChipEvents.NAVIGATION}`, () => {\n        const {foundation, mockAdapter} = setupTest();\n        mockAdapter.getElementID.and.returnValue('foo');\n\n        foundation.handleActionNavigation({\n          detail: {\n            source: MDCChipActionType.UNSPECIFIED,\n            key,\n          },\n        } as ActionNavigationEvent);\n\n        expect(mockAdapter.emitEvent)\n            .toHaveBeenCalledWith(MDCChipEvents.NAVIGATION, {\n              chipID: 'foo',\n              source: MDCChipActionType.UNSPECIFIED,\n              isRTL: false,\n              key,\n            });\n      });\n    }\n  });\n\n  it(`#startAnimation(${MDCChipAnimation.ENTER}) adds the enter class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.startAnimation(MDCChipAnimation.ENTER);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(MDCChipCssClasses.ENTER);\n  });\n\n  it(`#startAnimation(${MDCChipAnimation.EXIT}) adds the exit class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.startAnimation(MDCChipAnimation.EXIT);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(MDCChipCssClasses.EXIT);\n  });\n\n  it(`#handleAnimationEnd() for enter removes the enter class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-enter'} as AnimationEvent);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(MDCChipCssClasses.ENTER);\n  });\n\n  it(`#handleAnimationEnd() for enter emits an event`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getElementID.and.returnValue('foo');\n    mockAdapter.getAttribute.withArgs(MDCChipAttributes.DATA_ADDED_ANNOUNCEMENT)\n        .and.returnValue('Added foo');\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-enter'} as AnimationEvent);\n    expect(mockAdapter.emitEvent)\n        .toHaveBeenCalledWith(MDCChipEvents.ANIMATION, {\n          chipID: 'foo',\n          addedAnnouncement: 'Added foo',\n          animation: MDCChipAnimation.ENTER,\n          isComplete: true,\n        });\n  });\n\n  it(`#handleAnimationEnd() for exit removes the exit class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-exit'} as AnimationEvent);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(MDCChipCssClasses.EXIT);\n  });\n\n  it(`#handleAnimationEnd() for exit adds the hidden class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-exit'} as AnimationEvent);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(MDCChipCssClasses.HIDDEN);\n  });\n\n  it(`#handleAnimationEnd() sets the computed width on the root`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getOffsetWidth.and.returnValue(123);\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-exit'} as AnimationEvent);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('width', '123px');\n  });\n\n  it(`#handleAnimationEnd() sets the width on the root to 0`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleAnimationEnd(\n        {animationName: 'mdc-evolution-chip-exit'} as AnimationEvent);\n    jasmine.clock().tick(2);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('width', '0');\n  });\n\n  it(`#handleTransitionEnd() emits an event when the root has the hidden class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getElementID.and.returnValue('foo');\n       mockAdapter.getAttribute\n           .withArgs(MDCChipAttributes.DATA_REMOVED_ANNOUNCEMENT)\n           .and.returnValue('Removed foo');\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.HIDDEN)\n           .and.returnValue(true);\n       foundation.handleTransitionEnd();\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipEvents.ANIMATION, {\n             chipID: 'foo',\n             removedAnnouncement: 'Removed foo',\n             animation: MDCChipAnimation.EXIT,\n             isComplete: true,\n           });\n     });\n\n  it(`#handleTransitionEnd() does not emit an event when the root does not have the hidden class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(MDCChipCssClasses.HIDDEN)\n           .and.returnValue(false);\n       foundation.handleTransitionEnd();\n       expect(mockAdapter.emitEvent).not.toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-chips/chip/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionType} from '../action/constants';\nimport {MDCChipActionInteractionEventDetail, MDCChipActionNavigationEventDetail} from '../action/types';\n\nimport {MDCChipAnimation} from './constants';\n\n/** MDCChipInteractionEventDetail provides details for the interaction event. */\nexport interface MDCChipInteractionEventDetail {\n  actionID: string;\n  chipID: string;\n  source: MDCChipActionType;\n  shouldRemove: boolean;\n  isSelectable: boolean;\n  isSelected: boolean;\n}\n\n/** MDCChipNavigationEventDetail provides details for the navigation event. */\nexport interface MDCChipNavigationEventDetail {\n  chipID: string;\n  source: MDCChipActionType;\n  key: string;\n  isRTL: boolean;\n}\n\n/**\n * MDCChipAnimationEventDetail provides details for the animation event.\n */\nexport interface MDCChipAnimationEventDetail {\n  chipID: string;\n  animation: MDCChipAnimation;\n  isComplete: boolean;\n  addedAnnouncement?: string;\n  removedAnnouncement?: string;\n}\n\n/**\n * MDCChipActionInteractionEvent is the custom event for the interaction event.\n */\nexport type ActionInteractionEvent =\n    CustomEvent<MDCChipActionInteractionEventDetail>;\n\n/**\n * MDCChipActionInteractionEvent is the custom event for the interaction event.\n */\nexport type ActionNavigationEvent =\n    CustomEvent<MDCChipActionNavigationEventDetail>;\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/README.md",
    "content": "<!--docs:\ntitle: \"Chip set\"\nlayout: detail\nsection: components\nexcerpt: \"Chip sets represent logical groups of chips.\"\niconId: chip\npath: /catalog/chips/chipset/\n-->\n\n# Chip set\n\nChip sets represent logical groups of [chips](../chip).\n\n## Basic usage\n\n**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.\n\n### HTML structure\n\nChip sets have two varieties: layout grid chip sets and listbox chip sets.\n\nNote: chip sets use the [roving `tabindex` pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex) for keyboard navigation. As a result, only one [chip action](../action) should be in the tab sequence with `tabindex=\"0\"`. **All** other chip actions, even other action(s) in the same chip, should have `tabindex=\"-1\"`.\n\n#### Layout grid chip sets\n\nLayout grid chip sets follow the [layout grid](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) interaction pattern. They contain either [action chips](../chip#action-chips) or [input chips](../chip#input-chips).\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"grid\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <!-- Contains either action chips or input chips -->\n  </span>\n</span>\n```\n\n#### Listbox chip sets\n\nListbox chip sets follow the follow the [listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox) interaction pattern They contain [filter chips chips](../chip#filter-chips).\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"listbox\" aria-orientation=\"horizontal\" aria-multiselectable=\"true\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <!-- Contains filter chips -->\n  </span>\n</span>\n```\n\nListbox chip sets support both multi-selection and single-selection. The [`aria-multiselectable` attribute](https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable) dictates which behavior is applied.\n\n```html\n<span class=\"mdc-evolution-chip-set\" role=\"listbox\" aria-orientation=\"horizontal\" aria-multiselectable=\"false\">\n  <span class=\"mdc-evolution-chip-set__chips\" role=\"presentation\">\n    <!-- Contains filter chips -->\n  </span>\n</span>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-evolution-chip-set` | Mandatory, for the chip set root.\n`mdc-evolution-chip-set__chips` | Mandatory, for the element containing the chips.\n`mdc-evolution-chip-set--overflow` | Optional, causes the chips to overflow instead of wrap (their default behavior).\n\n### Sass mixins\n\nAccess to theme mixins require importing the chips theme style module.\n\n```scss\n@use \"@material/chips\";\n```\n\nMixin | Description\n--- | ---\n`horizontal-space-between-chips($space)` | Sets the horizontal space between chips in the chip set.\n`vertical-space-between-chips($space)` | Sets the vertical space between chips in the chip set.\n\n### `MDCChipSet` methods\n\nMethod Signature | Description\n--- | ---\n`getChipIndexByID(chipID: string): number` | Returns the index of the chip with the given `id`.\n`getChipIdAtIndex(index: number): string` | Returns the `id` of the chip at the given index.\n`getSelectedChipIndexes(): ReadonlySet<number>` | Returns the indexes of the selcted chips (if any). Only supported for [listbox chip sets](#listbox-chip-sets).\n`setChipSelected(index: number, action: MDCChipActionType, isSelected: boolean): void` | Sets the chip to be selected at the given index. Only supported for [listbox chip sets](#listbox-chip-sets).\n`isChipSelected(index: number, action: MDCChipActionType): boolean` | Returns the selected state of the chip at the given index. Only supported for [listbox chip sets](#listbox-chip-sets).\n`removeChip(index: number): boolean` | Returns the selected state of the chip at the given index. Only supported for [listbox chip sets](#listbox-chip-sets).\n\n### `MDCChipSetEvents`\n\nEvent name | Detail | Description\n--- | --- | ---\n`MDCChipSet:interaction` | `MDCChipSetInteractionEventDetail` | Emitted when a chip is interacted with.\n`MDCChipSet:removal` | `MDCChipSetRemovalEventDetail` | Emitted when a chip is removed. Check the detail to know when the removal animation is complete.\n`MDCChipSet:selection` | `MDCChipSetSelectionEventDetail` | Emitted when a chip selected state changes.\n\n### `MDCChipSetAdapter`\n\nMethod Signature | Description\n--- | ---\n`announceMessage(message: string): void` | Announces the message to screen readers via an [`aria-live` region](https://www.w3.org/TR/wai-aria-1.1/#aria-live).\n`emitEvent<D extends object>(eventName: MDCChipSetEvents, eventDetail: D): void` | Emits the given `eventName` with the given `eventDetail`.\n`getAttribute(attrName: MDCChipSetAttributes): string\\|null` | Returns the value for the given if attribute or `null` if it does not exist.\n`getChipActionsAtIndex(index: number): MDCChipActionType[]` | Returns the actions provided by the child chip at the given index.\n`getChipCount(): number` | Returns the number of child chips.\n`getChipIdAtIndex(index: number): string` | Returns the ID of the chip at the given index.\n`getChipIndexById(chipID: string): number` | Returns the index of the child chip with the matching ID.\n`isChipFocusableAtIndex(index: number, actionType: MDCChipActionType): boolean` | Proxies to the `MDCChip#isActionFocusable` method.\n`isChipSelectableAtIndex(index: number, actionType: MDCChipActionType): boolean` | Proxies to the `MDCChip#isActionSelectable` method.\n`isChipSelectedAtIndex(index: number, actionType: MDCChipActionType): boolean` | Proxies to the `MDCChip#isActionSelected` method.\n`removeChipAtIndex(index: number): void` | Removes the chip at the given index.\n`setChipFocusAtIndex(index: number, action: MDCChipActionType, focus: FocusBehavior): void` | Proxies to the `MDCChip#setActionFocus` method.\n`setChipSelectedAtIndex(index: number, actionType: MDCChipActionType, isSelected: boolean): void` | Proxies to the `MDCChip#setActionSelected` method.\n`startChipAnimationAtIndex(index: number, animation: Animation): void` | Starts the chip animation at the given index.\n\n### `MDCChipSetFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleChipAnimation(event: ChipAnimationEvent): void` | Handles the chip animation event.\n`handleChipInteraction(event: ChipInteractionEvent): void` | Handles the chip interaction event.\n`handleChipNavigation(event: ChipNavigationEvent): void` | Handles the chip navigation event.\n`getSelectedChipIndexes(): ReadonlySet<number>` | Returns the unique selected indexes of the chips (if any).\n`setChipSelected(index: number, action: MDCChipActionType, isSelected: boolean): void` | Sets the selected state of the chip at the given index and action.\n`isChipSelected(index: number, action: MDCChipActionType): boolean` | Returns the selected state of the chip at the given index and action.\n`removeChip(index: number): void` | Removes the chip at the given index.\n`addChip(index: number): void` | Animates the addition of the chip at the given index.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a chip set for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../action/constants';\nimport {MDCChipAnimation} from '../chip/constants';\n\nimport {MDCChipSetAttributes, MDCChipSetEvents} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipSetAdapter {\n  /** Announces the message via an aria-live region */\n  announceMessage(message: string): void;\n\n  /** Emits the given event with the given detail. */\n  emitEvent<D extends object>(eventName: MDCChipSetEvents, eventDetail: D):\n      void;\n\n  /** Returns the value for the given attribute, if it exists. */\n  getAttribute(attrName: MDCChipSetAttributes): string|null;\n\n  /** Returns the actions provided by the child chip at the given index. */\n  getChipActionsAtIndex(index: number): MDCChipActionType[];\n\n  /** Returns the number of child chips. */\n  getChipCount(): number;\n\n  /** Returns the ID of the chip at the given index. */\n  getChipIdAtIndex(index: number): string;\n\n  /** Returns the index of the child chip with the matching ID. */\n  getChipIndexById(chipID: string): number;\n\n  /** Proxies to the MDCChip#isActionFocusable method. */\n  isChipFocusableAtIndex(index: number, actionType: MDCChipActionType): boolean;\n\n  /** Proxies to the MDCChip#isActionSelectable method. */\n  isChipSelectableAtIndex(index: number, actionType: MDCChipActionType):\n      boolean;\n\n  /** Proxies to the MDCChip#isActionSelected method. */\n  isChipSelectedAtIndex(index: number, actionType: MDCChipActionType): boolean;\n\n  /** Removes the chip at the given index. */\n  removeChipAtIndex(index: number): void;\n\n  /** Proxies to the MDCChip#setActionFocus method. */\n  setChipFocusAtIndex(\n      index: number, action: MDCChipActionType,\n      focus: MDCChipActionFocusBehavior): void;\n\n  /** Proxies to the MDCChip#setActionSelected method. */\n  setChipSelectedAtIndex(\n      index: number, actionType: MDCChipActionType, isSelected: boolean): void;\n\n  /** Starts the chip animation at the given index. */\n  startChipAnimationAtIndex(index: number, animation: MDCChipAnimation): void;\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener} from '@material/base/types';\nimport {announce} from '@material/dom/announce';\n\nimport {MDCChipActionType} from '../action/constants';\nimport {MDCChip, MDCChipFactory} from '../chip/component';\nimport {MDCChipEvents} from '../chip/constants';\n\nimport {MDCChipSetAdapter} from './adapter';\nimport {MDCChipSetCssClasses} from './constants';\nimport {MDCChipSetFoundation} from './foundation';\nimport {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent} from './types';\n\n/**\n * MDCChip provides component encapsulation of the foundation implementation.\n */\nexport class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {\n  static override attachTo(root: HTMLElement): MDCChipSet {\n    return new MDCChipSet(root);\n  }\n\n  // Below properties are all assigned in #initialize()\n  private handleChipAnimation!: CustomEventListener<ChipAnimationEvent>;\n  private handleChipInteraction!: CustomEventListener<ChipInteractionEvent>;\n  private handleChipNavigation!: CustomEventListener<ChipNavigationEvent>;\n  private chips!: MDCChip[];\n\n  override initialize(\n      chipFactory: MDCChipFactory = (el: HTMLElement) => new MDCChip(el)) {\n    this.chips = [];\n    const chipEls = this.root.querySelectorAll<HTMLElement>(\n        `.${MDCChipSetCssClasses.CHIP}`);\n    for (let i = 0; i < chipEls.length; i++) {\n      const chip = chipFactory(chipEls[i]);\n      this.chips.push(chip);\n    }\n  }\n\n  override initialSyncWithDOM() {\n    this.handleChipAnimation = (event) => {\n      this.foundation.handleChipAnimation(event);\n    };\n\n    this.handleChipInteraction = (event) => {\n      this.foundation.handleChipInteraction(event);\n    };\n\n    this.handleChipNavigation = (event) => {\n      this.foundation.handleChipNavigation(event);\n    };\n\n    this.listen(MDCChipEvents.ANIMATION, this.handleChipAnimation);\n    this.listen(MDCChipEvents.INTERACTION, this.handleChipInteraction);\n    this.listen(MDCChipEvents.NAVIGATION, this.handleChipNavigation);\n  }\n\n  override destroy() {\n    this.unlisten(MDCChipEvents.ANIMATION, this.handleChipAnimation);\n    this.unlisten(MDCChipEvents.INTERACTION, this.handleChipInteraction);\n    this.unlisten(MDCChipEvents.NAVIGATION, this.handleChipNavigation);\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipSetAdapter = {\n      announceMessage: (message) => {\n        announce(message);\n      },\n      emitEvent: (eventName, eventDetail) => {\n        this.emit(eventName, eventDetail, true /* shouldBubble */);\n      },\n      getAttribute: (attrName) => this.root.getAttribute(attrName),\n      getChipActionsAtIndex: (index) => {\n        if (!this.isIndexValid(index)) return [];\n        return this.chips[index].getActions();\n      },\n      getChipCount: () => this.chips.length,\n      getChipIdAtIndex: (index) => {\n        if (!this.isIndexValid(index)) return '';\n        return this.chips[index].getElementID();\n      },\n      getChipIndexById: (id) =>\n          this.chips.findIndex((chip) => chip.getElementID() === id),\n      isChipFocusableAtIndex: (index, action) => {\n        if (!this.isIndexValid(index)) return false;\n        return this.chips[index].isActionFocusable(action);\n      },\n      isChipSelectableAtIndex: (index, action) => {\n        if (!this.isIndexValid(index)) return false;\n        return this.chips[index].isActionSelectable(action);\n      },\n      isChipSelectedAtIndex: (index, action) => {\n        if (!this.isIndexValid(index)) return false;\n        return this.chips[index].isActionSelected(action);\n      },\n      removeChipAtIndex: (index) => {\n        if (!this.isIndexValid(index)) return;\n        this.chips[index].destroy();\n        this.chips[index].remove();\n        this.chips.splice(index, 1);\n      },\n      setChipFocusAtIndex: (index, action, focus) => {\n        if (!this.isIndexValid(index)) return;\n        this.chips[index].setActionFocus(action, focus);\n      },\n      setChipSelectedAtIndex: (index, action, selected) => {\n        if (!this.isIndexValid(index)) return;\n        this.chips[index].setActionSelected(action, selected);\n      },\n      startChipAnimationAtIndex: (index, animation) => {\n        if (!this.isIndexValid(index)) return;\n        this.chips[index].startAnimation(animation);\n      },\n    };\n\n    // Default to the primary foundation\n    return new MDCChipSetFoundation(adapter);\n  }\n\n  /** Returns the index of the chip with the given ID or -1 if none exists. */\n  getChipIndexByID(chipID: string): number {\n    return this.chips.findIndex((chip) => chip.getElementID() === chipID);\n  }\n\n  /**\n   * Returns the ID of the chip at the given index or an empty string if the\n   * index is out of bounds.\n   */\n  getChipIdAtIndex(index: number): string {\n    if (!this.isIndexValid(index)) return '';\n    return this.chips[index].getElementID();\n  }\n\n  /** Returns the unique indexes of the selected chips. */\n  getSelectedChipIndexes(): ReadonlySet<number> {\n    return this.foundation.getSelectedChipIndexes();\n  }\n\n  /** Sets the selection state of the chip. */\n  setChipSelected(\n      index: number, action: MDCChipActionType, isSelected: boolean) {\n    this.foundation.setChipSelected(index, action, isSelected);\n  }\n\n  /** Returns the selection state of the chip. */\n  isChipSelected(index: number, action: MDCChipActionType) {\n    return this.foundation.isChipSelected(index, action);\n  }\n\n  /** Animates the chip addition at the given index. */\n  addChip(index: number) {\n    this.foundation.addChip(index);\n  }\n\n  /** Removes the chip at the given index. */\n  removeChip(index: number) {\n    this.foundation.removeChip(index);\n  }\n\n  private isIndexValid(index: number): boolean {\n    return index > -1 && index < this.chips.length;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * MDCChipSetAttributes provides the named constants for attributes used by the\n * foundation.\n */\nexport enum MDCChipSetAttributes {\n  ARIA_MULTISELECTABLE = 'aria-multiselectable',\n}\n\n/**\n * MDCChipSetCssClasses provides the named constants for class names.\n */\nexport enum MDCChipSetCssClasses {\n  CHIP = 'mdc-evolution-chip',\n}\n\n/**\n * MDCChipSetEvents provides the constants for emitted events.\n */\nexport enum MDCChipSetEvents {\n  INTERACTION = 'MDCChipSet:interaction',\n  REMOVAL = 'MDCChipSet:removal',\n  SELECTION = 'MDCChipSet:selection',\n}\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {KEY} from '@material/dom/keyboard';\n\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../action/constants';\nimport {MDCChipAnimation} from '../chip/constants';\n\nimport {MDCChipSetAdapter} from './adapter';\nimport {MDCChipSetAttributes, MDCChipSetEvents} from './constants';\nimport {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent, MDCChipSetInteractionEventDetail, MDCChipSetRemovalEventDetail, MDCChipSetSelectionEventDetail} from './types';\n\ninterface FocusAction {\n  action: MDCChipActionType;\n  index: number;\n}\n\nenum Operator {\n  INCREMENT,\n  DECREMENT,\n}\n\n/**\n * MDCChipSetFoundation provides a foundation for all chips.\n */\nexport class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {\n  static override get defaultAdapter(): MDCChipSetAdapter {\n    return {\n      announceMessage: () => undefined,\n      emitEvent: () => undefined,\n      getAttribute: () => null,\n      getChipActionsAtIndex: () => [],\n      getChipCount: () => 0,\n      getChipIdAtIndex: () => '',\n      getChipIndexById: () => 0,\n      isChipFocusableAtIndex: () => false,\n      isChipSelectableAtIndex: () => false,\n      isChipSelectedAtIndex: () => false,\n      removeChipAtIndex: () => {},\n      setChipFocusAtIndex: () => undefined,\n      setChipSelectedAtIndex: () => undefined,\n      startChipAnimationAtIndex: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCChipSetAdapter>) {\n    super({...MDCChipSetFoundation.defaultAdapter, ...adapter});\n  }\n\n  handleChipAnimation({detail}: ChipAnimationEvent) {\n    const {\n      chipID,\n      animation,\n      isComplete,\n      addedAnnouncement,\n      removedAnnouncement\n    } = detail;\n    const index = this.adapter.getChipIndexById(chipID);\n\n    if (animation === MDCChipAnimation.EXIT && isComplete) {\n      if (removedAnnouncement) {\n        this.adapter.announceMessage(removedAnnouncement);\n      }\n      this.removeAfterAnimation(index, chipID);\n      return;\n    }\n\n    if (animation === MDCChipAnimation.ENTER && isComplete &&\n        addedAnnouncement) {\n      this.adapter.announceMessage(addedAnnouncement);\n      return;\n    }\n  }\n\n  handleChipInteraction({detail}: ChipInteractionEvent) {\n    const {source, chipID, isSelectable, isSelected, shouldRemove} = detail;\n    const index = this.adapter.getChipIndexById(chipID);\n\n    if (shouldRemove) {\n      this.removeChip(index);\n      return;\n    }\n\n    this.focusChip(index, source, MDCChipActionFocusBehavior.FOCUSABLE);\n    this.adapter.emitEvent<MDCChipSetInteractionEventDetail>(\n        MDCChipSetEvents.INTERACTION, {\n          chipIndex: index,\n          chipID,\n        });\n\n    if (isSelectable) {\n      this.setSelection(index, source, !isSelected);\n    }\n  }\n\n  handleChipNavigation({detail}: ChipNavigationEvent) {\n    const {chipID, key, isRTL, source} = detail;\n    const index = this.adapter.getChipIndexById(chipID);\n\n    const toNextChip = (key === KEY.ARROW_RIGHT && !isRTL) ||\n        (key === KEY.ARROW_LEFT && isRTL);\n    if (toNextChip) {\n      // Start from the next chip so we increment the index\n      this.focusNextChipFrom(index + 1);\n      return;\n    }\n\n    const toPreviousChip = (key === KEY.ARROW_LEFT && !isRTL) ||\n        (key === KEY.ARROW_RIGHT && isRTL);\n    if (toPreviousChip) {\n      // Start from the previous chip so we decrement the index\n      this.focusPrevChipFrom(index - 1);\n      return;\n    }\n\n    if (key === KEY.ARROW_DOWN) {\n      // Start from the next chip so we increment the index\n      this.focusNextChipFrom(index + 1, source);\n      return;\n    }\n\n    if (key === KEY.ARROW_UP) {\n      // Start from the previous chip so we decrement the index\n      this.focusPrevChipFrom(index - 1, source);\n      return;\n    }\n\n    if (key === KEY.HOME) {\n      this.focusNextChipFrom(0, source);\n      return;\n    }\n\n    if (key === KEY.END) {\n      this.focusPrevChipFrom(this.adapter.getChipCount() - 1, source);\n      return;\n    }\n  }\n\n  /** Returns the unique selected indexes of the chips. */\n  getSelectedChipIndexes(): ReadonlySet<number> {\n    const selectedIndexes = new Set<number>();\n    const chipCount = this.adapter.getChipCount();\n    for (let i = 0; i < chipCount; i++) {\n      const actions = this.adapter.getChipActionsAtIndex(i);\n      for (const action of actions) {\n        if (this.adapter.isChipSelectedAtIndex(i, action)) {\n          selectedIndexes.add(i);\n        }\n      }\n    }\n    return selectedIndexes;\n  }\n\n  /** Sets the selected state of the chip at the given index and action. */\n  setChipSelected(\n      index: number, action: MDCChipActionType, isSelected: boolean) {\n    if (this.adapter.isChipSelectableAtIndex(index, action)) {\n      this.setSelection(index, action, isSelected);\n    }\n  }\n\n  /** Returns the selected state of the chip at the given index and action. */\n  isChipSelected(index: number, action: MDCChipActionType): boolean {\n    return this.adapter.isChipSelectedAtIndex(index, action);\n  }\n\n  /** Removes the chip at the given index. */\n  removeChip(index: number) {\n    // Early exit if the index is out of bounds\n    if (index >= this.adapter.getChipCount() || index < 0) return;\n    this.adapter.startChipAnimationAtIndex(index, MDCChipAnimation.EXIT);\n    this.adapter.emitEvent<MDCChipSetRemovalEventDetail>(\n        MDCChipSetEvents.REMOVAL, {\n          chipID: this.adapter.getChipIdAtIndex(index),\n          chipIndex: index,\n          isComplete: false,\n        });\n  }\n\n  addChip(index: number) {\n    // Early exit if the index is out of bounds\n    if (index >= this.adapter.getChipCount() || index < 0) return;\n    this.adapter.startChipAnimationAtIndex(index, MDCChipAnimation.ENTER);\n  }\n\n  /**\n   * Increments to find the first focusable chip.\n   */\n  private focusNextChipFrom(\n      startIndex: number, targetAction?: MDCChipActionType) {\n    const chipCount = this.adapter.getChipCount();\n    for (let i = startIndex; i < chipCount; i++) {\n      const focusableAction =\n          this.getFocusableAction(i, Operator.INCREMENT, targetAction);\n      if (focusableAction) {\n        this.focusChip(\n            i, focusableAction,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n        return;\n      }\n    }\n  }\n\n  /**\n   * Decrements to find the first focusable chip. Takes an optional target\n   * action that can be used to focus the first matching focusable action.\n   */\n  private focusPrevChipFrom(\n      startIndex: number, targetAction?: MDCChipActionType) {\n    for (let i = startIndex; i > -1; i--) {\n      const focusableAction =\n          this.getFocusableAction(i, Operator.DECREMENT, targetAction);\n      if (focusableAction) {\n        this.focusChip(\n            i, focusableAction,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n        return;\n      }\n    }\n  }\n\n  /** Returns the appropriate focusable action, or null if none exist. */\n  private getFocusableAction(\n      index: number, op: Operator,\n      targetAction?: MDCChipActionType): MDCChipActionType|null {\n    const actions = this.adapter.getChipActionsAtIndex(index);\n    // Reverse the actions if decrementing\n    if (op === Operator.DECREMENT) actions.reverse();\n\n    if (targetAction) {\n      return this.getMatchingFocusableAction(index, actions, targetAction);\n    }\n\n    return this.getFirstFocusableAction(index, actions);\n  }\n\n  /**\n   * Returs the first focusable action, regardless of type, or null if no\n   * focusable actions exist.\n   */\n  private getFirstFocusableAction(index: number, actions: MDCChipActionType[]):\n      MDCChipActionType|null {\n    for (const action of actions) {\n      if (this.adapter.isChipFocusableAtIndex(index, action)) {\n        return action;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * If the actions contain a focusable action that matches the target action,\n   * return that. Otherwise, return the first focusable action, or null if no\n   * focusable action exists.\n   */\n  private getMatchingFocusableAction(\n      index: number, actions: MDCChipActionType[],\n      targetAction: MDCChipActionType): MDCChipActionType|null {\n    let focusableAction = null;\n    for (const action of actions) {\n      if (this.adapter.isChipFocusableAtIndex(index, action)) {\n        focusableAction = action;\n      }\n\n      // Exit and return the focusable action if it matches the target\n      if (focusableAction === targetAction) {\n        return focusableAction;\n      }\n    }\n    return focusableAction;\n  }\n\n  private focusChip(\n      index: number, action: MDCChipActionType,\n      focus: MDCChipActionFocusBehavior) {\n    this.adapter.setChipFocusAtIndex(index, action, focus);\n    const chipCount = this.adapter.getChipCount();\n    for (let i = 0; i < chipCount; i++) {\n      const actions = this.adapter.getChipActionsAtIndex(i);\n      for (const chipAction of actions) {\n        // Skip the action and index provided since we set it above\n        if (chipAction === action && i === index) continue;\n        this.adapter.setChipFocusAtIndex(\n            i, chipAction, MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n      }\n    }\n  }\n\n  private supportsMultiSelect(): boolean {\n    return this.adapter.getAttribute(\n               MDCChipSetAttributes.ARIA_MULTISELECTABLE) === 'true';\n  }\n\n  private setSelection(\n      index: number, action: MDCChipActionType, isSelected: boolean) {\n    this.adapter.setChipSelectedAtIndex(index, action, isSelected);\n    this.adapter.emitEvent<MDCChipSetSelectionEventDetail>(\n        MDCChipSetEvents.SELECTION, {\n          chipID: this.adapter.getChipIdAtIndex(index),\n          chipIndex: index,\n          isSelected,\n        });\n    // Early exit if we support multi-selection\n    if (this.supportsMultiSelect()) {\n      return;\n    }\n\n    // If we get here, we ony support single selection. This means we need to\n    // unselect all chips\n    const chipCount = this.adapter.getChipCount();\n    for (let i = 0; i < chipCount; i++) {\n      const actions = this.adapter.getChipActionsAtIndex(i);\n      for (const chipAction of actions) {\n        // Skip the action and index provided since we set it above\n        if (chipAction === action && i === index) continue;\n        this.adapter.setChipSelectedAtIndex(i, chipAction, false);\n      }\n    }\n  }\n\n  private removeAfterAnimation(index: number, chipID: string) {\n    this.adapter.removeChipAtIndex(index);\n    this.adapter.emitEvent<MDCChipSetRemovalEventDetail>(\n        MDCChipSetEvents.REMOVAL, {\n          chipIndex: index,\n          isComplete: true,\n          chipID,\n        });\n\n    const chipCount = this.adapter.getChipCount();\n    // Early exit if we have an empty chip set\n    if (chipCount <= 0) return;\n    this.focusNearestFocusableAction(index);\n  }\n\n  /**\n   * Find the first focusable action by moving bidirectionally horizontally\n   * from the start index.\n   *\n   * Given chip set [A, B, C, D, E, F, G]...\n   * Let's say we remove chip \"F\". We don't know where the nearest focusable\n   * action is since any of them could be disabled. The nearest focusable\n   * action could be E, it could be G, it could even be A. To find it, we\n   * start from the source index (5 for \"F\" in this case) and move out\n   * horizontally, checking each chip at each index.\n   *\n   */\n  private focusNearestFocusableAction(index: number) {\n    const chipCount = this.adapter.getChipCount();\n    let decrIndex = index;\n    let incrIndex = index;\n    while (decrIndex > -1 || incrIndex < chipCount) {\n      const focusAction = this.getNearestFocusableAction(\n          decrIndex, incrIndex, MDCChipActionType.TRAILING);\n      if (focusAction) {\n        this.focusChip(\n            focusAction.index, focusAction.action,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n        return;\n      }\n\n      decrIndex--;\n      incrIndex++;\n    }\n  }\n\n  private getNearestFocusableAction(\n      decrIndex: number, incrIndex: number,\n      actionType?: MDCChipActionType): FocusAction|null {\n    const decrAction =\n        this.getFocusableAction(decrIndex, Operator.DECREMENT, actionType);\n    if (decrAction) {\n      return {\n        index: decrIndex,\n        action: decrAction,\n      };\n    }\n\n    // Early exit if the incremented and decremented indices are identical\n    if (incrIndex === decrIndex) return null;\n\n    const incrAction =\n        this.getFocusableAction(incrIndex, Operator.INCREMENT, actionType);\n    if (incrAction) {\n      return {\n        index: incrIndex,\n        action: incrAction,\n      };\n    }\n\n    return null;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipSetFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {DATA_MDC_DOM_ANNOUNCE} from '../../../mdc-dom/announce';\nimport {createFixture, html} from '../../../../testing/dom';\nimport {createKeyboardEvent, emitEvent} from '../../../../testing/dom/events';\nimport {createMockFoundation} from '../../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCChipActionType} from '../../action/constants';\nimport {MDCChipAnimation, MDCChipCssClasses, MDCChipEvents} from '../../chip/constants';\nimport {MDCChipAnimationEventDetail} from '../../chip/types';\nimport {MDCChipSet, MDCChipSetFoundation} from '../index';\n\ninterface ActionOptions {\n  readonly isFocusable: boolean;\n  readonly isSelectable: boolean;\n  readonly isSelected: boolean;\n}\n\ninterface ChipOptions {\n  readonly primary: ActionOptions;\n  readonly trailing?: ActionOptions;\n  readonly id: string;\n}\n\ninterface TestOptions {\n  readonly isMultiselectable: boolean;\n  readonly chips: ChipOptions[];\n}\n\nfunction actionFixture(\n    {isFocusable, isSelectable, isSelected}: ActionOptions,\n    isTrailing: boolean = false): string {\n  return `<button class=\"mdc-evolution-chip__action ${\n      isTrailing ? 'mdc-evolution-chip__action--trailing' : ''}\"\n      ${isFocusable ? '' : 'aria-hidden=\"true\"'}\n      ${isSelectable ? 'role=\"option\"' : ''}\n      ${isSelected ? 'aria-selected=\"true\"' : ''}>Label</button>`;\n}\n\nfunction chipFixture({primary, trailing, id}: ChipOptions): string {\n  return `\n  <div class=\"mdc-evolution-chip\" id=\"${id}\">\n    ${actionFixture(primary)}\n    ${trailing === undefined ? '' : actionFixture(trailing, true)}\n  </div>`;\n}\n\nfunction getFixture({chips, isMultiselectable}: TestOptions): HTMLElement {\n  return createFixture(html`\n  <div ${isMultiselectable ? 'aria-multiselectable=\"true\"' : ''}>\n    ${chips.map((chip) => chipFixture(chip))}\n  </div>`);\n}\n\nfunction setupTest(options: TestOptions) {\n  const root = getFixture(options);\n  const component = new MDCChipSet(root);\n  return {root, component};\n}\n\nfunction setupTestWithMocks(options: TestOptions) {\n  const root = getFixture(options);\n  const mockFoundation = createMockFoundation(MDCChipSetFoundation);\n  const component = new MDCChipSet(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\nfunction actionChip(id: string): ChipOptions {\n  return {\n    primary: {isFocusable: true, isSelectable: false, isSelected: false},\n    id,\n  };\n}\n\nfunction disabledActionChip(id: string): ChipOptions {\n  return {\n    primary: {isFocusable: false, isSelectable: false, isSelected: false},\n    id,\n  };\n}\n\nfunction filterChip(id: string, isSelected: boolean): ChipOptions {\n  return {\n    primary: {isFocusable: true, isSelectable: true, isSelected},\n    id,\n  };\n}\n\nfunction multiActionInputChip(id: string): ChipOptions {\n  return {\n    primary: {isFocusable: true, isSelectable: false, isSelected: false},\n    trailing: {isFocusable: true, isSelectable: false, isSelected: false},\n    id,\n  };\n}\n\ndescribe('MDCChipSet', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns an MDCChipSet instance', () => {\n    const chipset = MDCChipSet.attachTo(getFixture({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    }));\n    expect(chipset instanceof MDCChipSet).toBeTruthy();\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, component, mockFoundation} = setupTestWithMocks({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('.mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n    expect(mockFoundation.handleChipInteraction).toHaveBeenCalled();\n\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    expect(mockFoundation.handleChipNavigation).toHaveBeenCalled();\n\n    emitEvent(\n        root.querySelector<HTMLElement>('#c0')!, MDCChipEvents.ANIMATION, {\n          bubbles: true,\n          cancelable: false,\n        });\n    expect(mockFoundation.handleChipAnimation).toHaveBeenCalled();\n    component.destroy();\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component, mockFoundation} = setupTestWithMocks({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n    component.destroy();\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('.mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n    expect(mockFoundation.handleChipInteraction).not.toHaveBeenCalled();\n\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n    expect(mockFoundation.handleChipNavigation).not.toHaveBeenCalled();\n\n    emitEvent(\n        root.querySelector<HTMLElement>('#c0')!, MDCChipEvents.ANIMATION, {\n          bubbles: true,\n          cancelable: false,\n        });\n    expect(mockFoundation.handleChipAnimation).not.toHaveBeenCalled();\n  });\n\n  it('#getChipIndexByID() returns the index of the chip when it exists', () => {\n    const {component} = setupTestWithMocks({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    expect(component.getChipIndexByID('c1')).toBe(1);\n  });\n\n  it('#getChipIndexByID() returns -1 when the chip does not exist', () => {\n    const {component} = setupTestWithMocks({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    expect(component.getChipIndexByID('foo')).toBe(-1);\n  });\n\n  it('#getChipIdAtIndex() the id when the index is in bounds', () => {\n    const {component} = setupTestWithMocks({\n      chips: [\n        actionChip('c0'),\n        actionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    expect(component.getChipIdAtIndex(1)).toBe('c1');\n  });\n\n  it('#getChipIdAtIndex() returns an empty string when the index is out of bounds',\n     () => {\n       const {component} = setupTestWithMocks({\n         chips: [\n           actionChip('c0'),\n           actionChip('c1'),\n         ],\n         isMultiselectable: false,\n       });\n\n       expect(component.getChipIdAtIndex(9)).toBe('');\n     });\n\n  it('#getSelectedChipIndexes() returns the indexs of selected chips', () => {\n    const {component} = setupTest({\n      chips: [\n        filterChip('c0', true),\n        filterChip('c1', false),\n        filterChip('c2', true),\n      ],\n      isMultiselectable: true,\n    });\n\n    const selectedIndexes = component.getSelectedChipIndexes();\n    expect(selectedIndexes.size).toBe(2);\n    expect(selectedIndexes.has(0)).toBe(true);\n    expect(selectedIndexes.has(1)).toBe(false);\n    expect(selectedIndexes.has(2)).toBe(true);\n  });\n\n  it('#setChipSelected() updates the selection state of the chip', () => {\n    const {component, root} = setupTest({\n      chips: [\n        filterChip('c0', true),\n        filterChip('c1', false),\n        filterChip('c2', true),\n      ],\n      isMultiselectable: true,\n    });\n\n    component.setChipSelected(1, MDCChipActionType.PRIMARY, true);\n\n    expect(root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!\n               .getAttribute('aria-selected'))\n        .toBe('true');\n  });\n\n  it('#isChipSelected() returns true if the chip is selected', () => {\n    const {component} = setupTest({\n      chips: [\n        filterChip('c0', true),\n        filterChip('c1', false),\n        filterChip('c2', true),\n      ],\n      isMultiselectable: true,\n    });\n\n    expect(component.isChipSelected(0, MDCChipActionType.PRIMARY)).toBe(true);\n  });\n\n  it('#isChipSelected() returns false if the chip is not selected', () => {\n    const {component} = setupTest({\n      chips: [\n        filterChip('c0', true),\n        filterChip('c1', false),\n        filterChip('c2', true),\n      ],\n      isMultiselectable: true,\n    });\n\n    expect(component.isChipSelected(1, MDCChipActionType.PRIMARY)).toBe(false);\n  });\n\n  it('#removeChip() proxies to the foundation', () => {\n    const {component, mockFoundation} = setupTestWithMocks({\n      chips: [\n        filterChip('c0', true),\n        filterChip('c1', false),\n        filterChip('c2', true),\n      ],\n      isMultiselectable: true,\n    });\n\n    component.removeChip(1);\n    expect(mockFoundation.removeChip).toHaveBeenCalledWith(1);\n  });\n\n  it('on click, focuses the source action if focusable', () => {\n    const {root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n\n    expect(root.querySelector<HTMLElement>(\n                   '#c1 .mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .toBe('0');\n  });\n\n  it('on click, unfocuses all other actions', () => {\n    const {root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n\n    expect(root.querySelector<HTMLElement>(\n                   '#c0 .mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .toBe('-1');\n    expect(root.querySelector<HTMLElement>(\n                   '#c0 .mdc-evolution-chip__action--trailing')!\n               .getAttribute('tabindex'))\n        .toBe('-1');\n    expect(root.querySelector<HTMLElement>(\n                   '#c1 .mdc-evolution-chip__action--trailing')!\n               .getAttribute('tabindex'))\n        .toBe('-1');\n  });\n\n  it('on click, does not focuses the source action if unfocusable', () => {\n    const {root} = setupTest({\n      chips: [\n        actionChip('c0'),\n        disabledActionChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n\n    expect(root.querySelector<HTMLElement>(\n                   '#c1 .mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .not.toBe('0');\n  });\n\n  it('on click, selects the newly selected chip if selectable', () => {\n    const {root} = setupTest({\n      chips: [\n        filterChip('c0', false),\n        filterChip('c1', false),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c0 .mdc-evolution-chip__action')!;\n    emitEvent(primaryActionEl, 'click', {\n      bubbles: true,\n    });\n\n    expect(root.querySelector<HTMLElement>('#c0 .mdc-evolution-chip__action')!\n               .getAttribute('aria-selected'))\n        .toBe('true');\n  });\n\n  it('on click, deselects the previously selected chip when not multiselectable',\n     () => {\n       const {root} = setupTest({\n         chips: [\n           filterChip('c0', true),\n           filterChip('c1', false),\n         ],\n         isMultiselectable: false,\n       });\n\n       const primaryActionEl =\n           root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n       emitEvent(primaryActionEl, 'click', {\n         bubbles: true,\n       });\n\n       expect(\n           root.querySelector<HTMLElement>('#c0 .mdc-evolution-chip__action')!\n               .getAttribute('aria-selected'))\n           .toBe('false');\n     });\n\n  it('on click, does not deselect the previously selected chip when multiselectable',\n     () => {\n       const {root} = setupTest({\n         chips: [\n           filterChip('c0', true),\n           filterChip('c1', false),\n         ],\n         isMultiselectable: true,\n       });\n\n       const primaryActionEl =\n           root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n       emitEvent(primaryActionEl, 'click', {\n         bubbles: true,\n       });\n\n       expect(\n           root.querySelector<HTMLElement>('#c0 .mdc-evolution-chip__action')!\n               .getAttribute('aria-selected'))\n           .toBe('true');\n     });\n\n  it('on keyboard navigation, focuses the next focusable action', () => {\n    const {root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n\n    expect(root.querySelector<HTMLElement>(\n                   '#c0 .mdc-evolution-chip__action--trailing')!\n               .getAttribute('tabindex'))\n        .toBe('0');\n  });\n\n  it('on keyboard navigation, unfocuses all other actions', () => {\n    const {root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const primaryActionEl =\n        root.querySelector<HTMLElement>('#c1 .mdc-evolution-chip__action')!;\n    primaryActionEl.dispatchEvent(createKeyboardEvent('keydown', {\n      key: 'ArrowLeft',\n    }));\n\n    expect(root.querySelector<HTMLElement>(\n                   '#c0 .mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .toBe('-1');\n    expect(root.querySelector<HTMLElement>(\n                   '#c1 .mdc-evolution-chip__action')!.getAttribute('tabindex'))\n        .toBe('-1');\n    expect(root.querySelector<HTMLElement>(\n                   '#c1 .mdc-evolution-chip__action--trailing')!\n               .getAttribute('tabindex'))\n        .toBe('-1');\n  });\n\n  it('announces chip addition when enter animation is complete' +\n         ' and addition announcement is present',\n     () => {\n       const {root} = setupTest({\n         chips: [\n           multiActionInputChip('c0'),\n           multiActionInputChip('c1'),\n         ],\n         isMultiselectable: false,\n       });\n\n       const detail: MDCChipAnimationEventDetail = {\n         isComplete: true,\n         addedAnnouncement: 'Added a chip',\n         animation: MDCChipAnimation.ENTER,\n         chipID: 'c0',\n       };\n\n       emitEvent(\n           root.querySelector<HTMLElement>('#c0')!, MDCChipEvents.ANIMATION, {\n             bubbles: true,\n             cancelable: false,\n             detail,\n           });\n\n       // Tick clock forward to account for setTimeout inside \"announce\".\n       jasmine.clock().tick(1);\n       const liveRegion = document.querySelector<HTMLElement>(\n           `[${DATA_MDC_DOM_ANNOUNCE}=\"true\"]`)!;\n       expect(liveRegion.textContent).toEqual('Added a chip');\n       // Clean up the live region.\n       liveRegion.parentNode!.removeChild(liveRegion);\n     });\n\n  it('removes the chip from the DOM when removal animation is complete', () => {\n    const {component, root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const detail: MDCChipAnimationEventDetail = {\n      isComplete: true,\n      removedAnnouncement: 'Removed a chip',\n      animation: MDCChipAnimation.EXIT,\n      chipID: 'c0',\n    };\n\n    emitEvent(\n        root.querySelector<HTMLElement>('#c0')!, MDCChipEvents.ANIMATION, {\n          bubbles: true,\n          cancelable: false,\n          detail,\n        });\n\n    expect(component.getChipIndexByID('c0')).toBe(-1);\n  });\n\n  it('animates chip addition', () => {\n    const {component, root} = setupTest({\n      chips: [\n        multiActionInputChip('c0'),\n        multiActionInputChip('c1'),\n      ],\n      isMultiselectable: false,\n    });\n\n    const chip0 = root.querySelector<HTMLElement>('#c0')!;\n    component.addChip(0);\n    expect(chip0).toHaveClass(MDCChipCssClasses.ENTER);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCChipActionFocusBehavior, MDCChipActionType} from '../../action/constants';\nimport {MDCChipAnimation} from '../../chip/constants';\nimport {MDCChipSetAttributes, MDCChipSetEvents} from '../constants';\nimport {MDCChipSetFoundation} from '../foundation';\nimport {ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent} from '../types';\n\ninterface FakeAction {\n  type: MDCChipActionType;\n  isSelectable: boolean;\n  isSelected: boolean;\n  isFocusable: boolean;\n}\n\ninterface FakeChip {\n  actions: FakeAction[];\n  id: string;\n}\n\nfunction fakeMultiActionChip(id: string): FakeChip {\n  return {\n    actions: [\n      {\n        type: MDCChipActionType.PRIMARY,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: true\n      },\n      {\n        type: MDCChipActionType.TRAILING,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: true\n      },\n    ],\n    id,\n  };\n}\n\nfunction fakeSingleActionChip(id: string): FakeChip {\n  return {\n    actions: [\n      {\n        type: MDCChipActionType.PRIMARY,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: true\n      },\n      {\n        type: MDCChipActionType.TRAILING,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: false\n      },\n    ],\n    id,\n  };\n}\n\nfunction fakeDisabledMultiActionChip(id: string): FakeChip {\n  return {\n    actions: [\n      {\n        type: MDCChipActionType.PRIMARY,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: false\n      },\n      {\n        type: MDCChipActionType.TRAILING,\n        isSelectable: false,\n        isSelected: false,\n        isFocusable: false\n      },\n    ],\n    id,\n  };\n}\n\nfunction fakeSelectableChip(id: string, isSelected: boolean = false): FakeChip {\n  return {\n    actions: [{\n      type: MDCChipActionType.PRIMARY,\n      isSelectable: true,\n      isFocusable: true,\n      isSelected\n    }],\n    id,\n  };\n}\n\ninterface TestOptions {\n  chips: FakeChip[];\n  supportsMultiSelection: boolean;\n}\n\ndescribe('MDCChipSetFoundation', () => {\n  const setupTest = () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCChipSetFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  function setupChipSetTest(options: TestOptions) {\n    const {chips, supportsMultiSelection} = options;\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getChipIdAtIndex.and.callFake((index: number) => {\n      if (index < 0 || index >= chips.length) return '';\n      return chips[index].id;\n    });\n    mockAdapter.getChipIndexById.and.callFake((id: string) => {\n      return chips.findIndex((chip) => chip.id === id);\n    });\n    mockAdapter.getChipActionsAtIndex.and.callFake((index: number) => {\n      if (index < 0 || index >= chips.length) {\n        return [];\n      }\n      return chips[index].actions.map((a) => a.type);\n    });\n    mockAdapter.getChipCount.and.callFake(() => {\n      return chips.length;\n    });\n    mockAdapter.getAttribute.and.callFake((attr: MDCChipSetAttributes) => {\n      if (attr === MDCChipSetAttributes.ARIA_MULTISELECTABLE &&\n          supportsMultiSelection) {\n        return 'true';\n      }\n      return null;\n    });\n    mockAdapter.isChipSelectableAtIndex.and.callFake(\n        (index: number, action: MDCChipActionType) => {\n          if (index < 0 || index >= chips.length) {\n            return false;\n          }\n          const actions = chips[index].actions.filter((a) => a.type === action);\n          if (actions.length === 0) {\n            return false;\n          }\n          return actions[0].isSelectable;\n        });\n    mockAdapter.isChipSelectedAtIndex.and.callFake(\n        (index: number, action: MDCChipActionType) => {\n          if (index < 0 || index >= chips.length) {\n            return false;\n          }\n          const actions = chips[index].actions.filter((a) => a.type === action);\n          if (actions.length === 0) {\n            return false;\n          }\n          return actions[0].isSelected;\n        });\n    mockAdapter.isChipFocusableAtIndex.and.callFake(\n        (index: number, action: MDCChipActionType) => {\n          if (index < 0 || index >= chips.length) {\n            return false;\n          }\n          const chipAction =\n              chips[index].actions.find((a) => a.type === action);\n          if (chipAction) {\n            return chipAction.isFocusable;\n          }\n          return false;\n        });\n    mockAdapter.removeChipAtIndex.and.callFake((index: number) => {\n      if (index < 0 || index >= chips.length) return;\n      chips.splice(index, 1);\n    });\n    return {foundation, mockAdapter};\n  }\n\n  it(`#handleChipInteraction emits an interaction event`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipInteraction({\n      detail: {source: MDCChipActionType.PRIMARY, chipID: 'c0'},\n    } as ChipInteractionEvent);\n\n    expect(mockAdapter.emitEvent)\n        .toHaveBeenCalledWith(MDCChipSetEvents.INTERACTION, {\n          chipID: 'c0',\n          chipIndex: 0,\n        });\n  });\n\n  it(`#handleChipInteraction focuses the source chip action`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipInteraction({\n      detail: {source: MDCChipActionType.PRIMARY, chipID: 'c0'},\n    } as ChipInteractionEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.PRIMARY, MDCChipActionFocusBehavior.FOCUSABLE);\n  });\n\n  it(`#handleChipInteraction unfocuses all other chip actions`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipInteraction({\n      detail: {source: MDCChipActionType.PRIMARY, chipID: 'c0'},\n    } as ChipInteractionEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipInteraction emits a selection event when the chip is selectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipSetEvents.SELECTION, {\n             chipID: 'c0',\n             chipIndex: 0,\n             isSelected: true,\n           });\n     });\n\n  it(`#handleChipInteraction selects the source chip when not multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.setChipSelectedAtIndex)\n           .toHaveBeenCalledWith(0, MDCChipActionType.PRIMARY, true);\n     });\n\n  it(`#handleChipInteraction unselects other chips when not multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.setChipSelectedAtIndex)\n           .toHaveBeenCalledWith(1, MDCChipActionType.PRIMARY, false);\n       expect(mockAdapter.setChipSelectedAtIndex)\n           .toHaveBeenCalledWith(2, MDCChipActionType.PRIMARY, false);\n     });\n\n  it(`#handleChipInteraction only selects the source chip when multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: true,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       // Only expect it to be called once for the selection\n       expect(mockAdapter.setChipSelectedAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it(`#handleChipInteraction selects the source chip when multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: true,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.setChipSelectedAtIndex)\n           .toHaveBeenCalledWith(0, MDCChipActionType.PRIMARY, true);\n     });\n\n  it(`#handleChipInteraction does not unselect other chips when multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: true,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c0',\n           isSelectable: true,\n           isSelected: false\n         },\n       } as ChipInteractionEvent);\n\n       // Only expect it to be called once for the selection\n       expect(mockAdapter.setChipSelectedAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it(`#handleChipInteraction starts the exit animation on the source chip when removable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           chipID: 'c1',\n           shouldRemove: true,\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.startChipAnimationAtIndex)\n           .toHaveBeenCalledWith(1, MDCChipAnimation.EXIT);\n     });\n\n  it(`#handleChipInteraction emits a removal event when the source chip is removable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           chipID: 'c1',\n           shouldRemove: true,\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipSetEvents.REMOVAL, {\n             chipID: 'c1',\n             chipIndex: 1,\n             isComplete: false,\n           });\n     });\n\n  it(`#handleChipInteraction does not emit an interaction event when the source chip is removable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           chipID: 'c1',\n           shouldRemove: true,\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.emitEvent)\n           .not.toHaveBeenCalledWith(\n               MDCChipSetEvents.INTERACTION, jasmine.anything());\n     });\n\n  it(`#handleChipInteraction does not change focus when the source chip is removable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipInteraction({\n         detail: {\n           chipID: 'c1',\n           shouldRemove: true,\n         },\n       } as ChipInteractionEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex).not.toHaveBeenCalled();\n     });\n\n  it(`#handleChipAnimation announces the added message when present`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeDisabledMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeDisabledMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipAnimation({\n      detail: {\n        chipID: 'c1',\n        animation: MDCChipAnimation.ENTER,\n        addedAnnouncement: 'Added foo',\n        isComplete: true,\n      },\n    } as ChipAnimationEvent);\n\n    expect(mockAdapter.announceMessage).toHaveBeenCalledWith('Added foo');\n  });\n\n  it(`#handleChipAnimation removes the source chip when exit animation is complete`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.removeChipAtIndex).toHaveBeenCalledWith(1);\n     });\n\n  it(`#handleChipAnimation emits a removal event when the source chip exit animation is complete`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.emitEvent)\n           .toHaveBeenCalledWith(MDCChipSetEvents.REMOVAL, {\n             chipID: 'c1',\n             chipIndex: 1,\n             isComplete: true,\n           });\n     });\n\n  it(`#handleChipAnimation does not remove the source chip when the animation is incomplete`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: false,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.removeChipAtIndex).not.toHaveBeenCalled();\n     });\n\n  it(`#handleChipAnimation does not remove the source chip for non-exit animations`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.ENTER,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.removeChipAtIndex).not.toHaveBeenCalled();\n     });\n\n  it(`#handleChipAnimation focuses the nearest focusable chip with a preference for the source index`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipAnimation focuses the nearest focusable chip (0), avoiding disabled chips`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeDisabledMultiActionChip('c1'),\n           fakeDisabledMultiActionChip('c2'),\n           fakeDisabledMultiActionChip('c3'),\n           fakeMultiActionChip('c4'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c4',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipAnimation focuses the nearest focusable chip (3), avoiding disabled chips`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeDisabledMultiActionChip('c1'),\n           fakeDisabledMultiActionChip('c2'),\n           fakeDisabledMultiActionChip('c3'),\n           fakeMultiActionChip('c4'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c0',\n           animation: MDCChipAnimation.EXIT,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               3, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipAnimation focuses no chip when all remaining are disabled`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeDisabledMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeDisabledMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipAnimation({\n         detail: {\n           chipID: 'c1',\n           animation: MDCChipAnimation.EXIT,\n           removedAnnouncement: undefined,\n           isComplete: true,\n         },\n       } as ChipAnimationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .not.toHaveBeenCalledWith(0, jasmine.anything(), jasmine.anything());\n       expect(mockAdapter.setChipFocusAtIndex)\n           .not.toHaveBeenCalledWith(1, jasmine.anything(), jasmine.anything());\n     });\n\n  it(`#handleChipAnimation announces the removed message when present`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeDisabledMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeDisabledMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipAnimation({\n      detail: {\n        chipID: 'c1',\n        animation: MDCChipAnimation.EXIT,\n        removedAnnouncement: 'Removed foo',\n        isComplete: true,\n      },\n    } as ChipAnimationEvent);\n\n    expect(mockAdapter.announceMessage).toHaveBeenCalledWith('Removed foo');\n  });\n\n  it(`#handleChipNavigation focuses the next available action with ArrowRight`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c0',\n           key: 'ArrowRight',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowRight`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c0',\n           key: 'ArrowRight',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n     });\n\n  it(`#handleChipNavigation focuses the next available action with ArrowLeft`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c1',\n           key: 'ArrowLeft',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowLeft`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c1',\n        key: 'ArrowLeft',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipNavigation focuses the next available action with ArrowRight in RTL`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c1',\n           key: 'ArrowRight',\n           isRTL: true,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowRight in RTL`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c1',\n           key: 'ArrowRight',\n           isRTL: true,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n     });\n\n  it(`#handleChipNavigation focuses the next available action with ArrowLeft in TRL`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c1',\n           key: 'ArrowLeft',\n           isRTL: true,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowLeft in RTL`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c1',\n           key: 'ArrowLeft',\n           isRTL: true,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n     });\n\n  it(`#handleChipNavigation does not focus unfocusable actions`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeDisabledMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.TRAILING,\n        chipID: 'c0',\n        key: 'ArrowRight',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .not.toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .not.toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n  });\n\n  it(`#handleChipNavigation focuses the next matching action with ArrowUp`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c1',\n           key: 'ArrowUp',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowUp`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c1',\n        key: 'ArrowUp',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipNavigation focuses the previous matching action with ArrowDown`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c1',\n           key: 'ArrowDown',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               2, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with ArrowDown`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c1',\n        key: 'ArrowDown',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipNavigation focuses the first matching action with Home`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.PRIMARY,\n           chipID: 'c2',\n           key: 'Home',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation unfocuses all other actions with Home`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c2',\n        key: 'Home',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipNavigation focuses the first matching action with End`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c0',\n        key: 'End',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n  });\n\n  it(`#handleChipNavigation unfocuses all other actions with End`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.handleChipNavigation({\n      detail: {\n        source: MDCChipActionType.PRIMARY,\n        chipID: 'c0',\n        key: 'End',\n        isRTL: false,\n      },\n    } as ChipNavigationEvent);\n\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            0, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            1, MDCChipActionType.PRIMARY,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n    expect(mockAdapter.setChipFocusAtIndex)\n        .toHaveBeenCalledWith(\n            2, MDCChipActionType.TRAILING,\n            MDCChipActionFocusBehavior.NOT_FOCUSABLE);\n  });\n\n  it(`#handleChipNavigation does not focus unfocusable actions with ArrowUp`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSingleActionChip('c0'),  // Trailing action is not focusable\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c1',\n           key: 'ArrowUp',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       // Verify that the 0th index trailing action is not focused\n       expect(mockAdapter.setChipFocusAtIndex)\n           .not.toHaveBeenCalledWith(\n               0, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation focuses the available focusable action with ArrowUp`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSingleActionChip('c0'),  // Trailing action is not focusable\n           fakeMultiActionChip('c1'),\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c1',\n           key: 'ArrowUp',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       // Verify that the primary action is focused\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               0, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation does not focus unfocusable actions with ArrowDown`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeSingleActionChip('c1'),  // Trailing action is not focusable\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c0',\n           key: 'ArrowDown',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       // Verify that the 0th index trailing action is not focused\n       expect(mockAdapter.setChipFocusAtIndex)\n           .not.toHaveBeenCalledWith(\n               1, MDCChipActionType.TRAILING,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#handleChipNavigation focuses the available focusable action with ArrowDown`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeMultiActionChip('c0'),\n           fakeSingleActionChip('c1'),  // Trailing action is not focusable\n           fakeMultiActionChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.handleChipNavigation({\n         detail: {\n           source: MDCChipActionType.TRAILING,\n           chipID: 'c0',\n           key: 'ArrowDown',\n           isRTL: false,\n         },\n       } as ChipNavigationEvent);\n\n       // Verify that the primary action is focused\n       expect(mockAdapter.setChipFocusAtIndex)\n           .toHaveBeenCalledWith(\n               1, MDCChipActionType.PRIMARY,\n               MDCChipActionFocusBehavior.FOCUSABLE_AND_FOCUSED);\n     });\n\n  it(`#setChipSelected emits a selection event`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0'),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.setChipSelected(0, MDCChipActionType.PRIMARY, true);\n\n    expect(mockAdapter.emitEvent)\n        .toHaveBeenCalledWith(MDCChipSetEvents.SELECTION, {\n          chipID: 'c0',\n          chipIndex: 0,\n          isSelected: true,\n        });\n  });\n\n  it(`#setChipSelected selects the target chip when not multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: false,\n       });\n       foundation.setChipSelected(0, MDCChipActionType.PRIMARY, true);\n\n       expect(mockAdapter.setChipSelectedAtIndex)\n           .toHaveBeenCalledWith(0, MDCChipActionType.PRIMARY, true);\n     });\n\n  it(`#setChipSelected unselects other chips when not multiselectable`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0'),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.setChipSelected(0, MDCChipActionType.PRIMARY, true);\n\n    expect(mockAdapter.setChipSelectedAtIndex)\n        .toHaveBeenCalledWith(1, MDCChipActionType.PRIMARY, false);\n    expect(mockAdapter.setChipSelectedAtIndex)\n        .toHaveBeenCalledWith(2, MDCChipActionType.PRIMARY, false);\n  });\n\n  it(`#setChipSelected selects the target chip when multiselectable`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0'),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2'),\n      ],\n      supportsMultiSelection: true,\n    });\n    foundation.setChipSelected(0, MDCChipActionType.PRIMARY, true);\n\n    expect(mockAdapter.setChipSelectedAtIndex)\n        .toHaveBeenCalledWith(0, MDCChipActionType.PRIMARY, true);\n  });\n\n  it(`#setChipSelected does not unselect other chips when multiselectable`,\n     () => {\n       const {foundation, mockAdapter} = setupChipSetTest({\n         chips: [\n           fakeSelectableChip('c0'),\n           fakeSelectableChip('c1'),\n           fakeSelectableChip('c2'),\n         ],\n         supportsMultiSelection: true,\n       });\n       foundation.setChipSelected(0, MDCChipActionType.PRIMARY, true);\n\n       // Only expect it to be called once for the selection\n       expect(mockAdapter.setChipSelectedAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it(`#isChipSelected returns true if the chip is selected`, () => {\n    const {foundation} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0', true),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2'),\n      ],\n      supportsMultiSelection: true,\n    });\n\n    expect(foundation.isChipSelected(0, MDCChipActionType.PRIMARY)).toBe(true);\n  });\n\n  it(`#isChipSelected returns false if the chip is not selected`, () => {\n    const {foundation} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0'),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2'),\n      ],\n      supportsMultiSelection: true,\n    });\n\n    expect(foundation.isChipSelected(1, MDCChipActionType.PRIMARY)).toBe(false);\n  });\n\n  it(`#getSelectedChipIndexes returns the selected chip indexes`, () => {\n    const {foundation} = setupChipSetTest({\n      chips: [\n        fakeSelectableChip('c0', true),\n        fakeSelectableChip('c1'),\n        fakeSelectableChip('c2', true),\n      ],\n      supportsMultiSelection: true,\n    });\n\n    expect(foundation.getSelectedChipIndexes().has(0)).toBe(true);\n    expect(foundation.getSelectedChipIndexes().has(1)).toBe(false);\n    expect(foundation.getSelectedChipIndexes().has(2)).toBe(true);\n  });\n\n  it(`#removeChip starts the removal animation at the given index`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.removeChip(1);\n\n    expect(mockAdapter.startChipAnimationAtIndex)\n        .toHaveBeenCalledWith(1, MDCChipAnimation.EXIT);\n  });\n\n  it(`#removeChip emits the removal event at the given index`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.removeChip(1);\n\n    expect(mockAdapter.emitEvent)\n        .toHaveBeenCalledWith(MDCChipSetEvents.REMOVAL, {\n          chipID: 'c1',\n          chipIndex: 1,\n          isComplete: false,\n        });\n  });\n\n  it(`#removeChip does nothing if the index is out of bounds`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.removeChip(-1);\n    foundation.removeChip(3);\n\n    expect(mockAdapter.startChipAnimationAtIndex).not.toHaveBeenCalled();\n    expect(mockAdapter.emitEvent).not.toHaveBeenCalled();\n  });\n\n  it(`#addChip starts the enter animation at the given index`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.addChip(0);\n\n    expect(mockAdapter.startChipAnimationAtIndex)\n        .toHaveBeenCalledWith(0, MDCChipAnimation.ENTER);\n  });\n\n  it(`#addChip does nothing if the index is out of bounds`, () => {\n    const {foundation, mockAdapter} = setupChipSetTest({\n      chips: [\n        fakeMultiActionChip('c0'),\n        fakeMultiActionChip('c1'),\n        fakeMultiActionChip('c2'),\n      ],\n      supportsMultiSelection: false,\n    });\n    foundation.addChip(-1);\n    foundation.addChip(3);\n\n    expect(mockAdapter.startChipAnimationAtIndex).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/chip-set/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCChipAnimationEventDetail, MDCChipInteractionEventDetail, MDCChipNavigationEventDetail} from '../chip/types';\n\n/**\n * MDCChipSetInteractionEventDetail provides detail about the interaction event.\n */\nexport interface MDCChipSetInteractionEventDetail {\n  chipID: string;\n  chipIndex: number;\n}\n\n/**\n * MDCChipSetRemovalEventDetail provides detail about the removal event.\n */\nexport interface MDCChipSetRemovalEventDetail {\n  chipID: string;\n  chipIndex: number;\n  isComplete: boolean;\n}\n\n/**\n * MDCChipSetSelectionEventDetail provides detail about the selection event.\n */\nexport interface MDCChipSetSelectionEventDetail {\n  chipID: string;\n  chipIndex: number;\n  isSelected: boolean;\n}\n\n/**\n * ChipInteractionEvent is the custom event for the interaction event.\n */\nexport type ChipInteractionEvent = CustomEvent<MDCChipInteractionEventDetail>;\n\n/**\n * ChipNavigationEvent is the custom event for the navigation event.\n */\nexport type ChipNavigationEvent = CustomEvent<MDCChipNavigationEventDetail>;\n\n/**\n * ChipAnimationEvent is the custom event for the animation event.\n */\nexport type ChipAnimationEvent = CustomEvent<MDCChipAnimationEventDetail>;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/README.md",
    "content": "<!--docs:\ntitle: \"Chips (deprecated)\"\nlayout: detail\nsection: components\nexcerpt: \"Chips are compact elements that represent an attribute, text, entity, or action.\"\niconId: chip\npath: /catalog/chips/deprecated/\n-->\n\n# Chips (deprecated)\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-chips\">Material Design guidelines: Chips</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/chips\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/chips\n```\n\n## Basic Usage\n\n### HTML Structure\n\n>**Note**: Due to IE11 and Edge's lack of support for the `:focus-within` selector, keyboard navigation of the chip set will not be visually obvious.\n\n```html\n<div class=\"mdc-chip-set\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip One</span>\n      </span>\n    </span>\n  </div>\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"-1\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip Two</span>\n      </span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/deprecated/mdc-chips\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCChipSet} from '@material/chips/deprecated';\nconst chipSetEl = document.querySelector('.mdc-chip-set');\nconst chipSet = new MDCChipSet(chipSetEl);\n```\n\n> See [Importing the JS component](../../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Leading and Trailing Icons\n\nYou can optionally add a leading icon (i.e. thumbnail) and/or a trailing \"remove\" icon to a chip. To add an icon, add an `i` element with your preferred icon, give it a class of `mdc-chip__icon`, and a class of either `mdc-chip__icon--leading` or `mdc-chip__icon--trailing`.\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n#### Leading icon\n\n```html\n<div class=\"mdc-chip\" role=\"row\">\n  <div class=\"mdc-chip__ripple\"></div>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <span role=\"gridcell\">\n    <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n      <span class=\"mdc-chip__text\">Add to calendar</span>\n    </span>\n  </span>\n</div>\n```\n\n#### Trailing icon\n\nA trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set `tabindex=\"0\"` and `role=\"button\"` to make it accessible by keyboard and screenreader. Trailing icons should only be added to [input chips](#input-chips).\n\n```html\n<div class=\"mdc-chip\" role=\"row\">\n  <div class=\"mdc-chip__ripple\"></div>\n  <span role=\"gridcell\">\n    <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n      <span class=\"mdc-chip__text\">Jane Smith</span>\n    </span>\n  </span>\n  <span role=\"gridcell\">\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"-1\" role=\"button\">cancel</i>\n  </span>\n</div>\n```\n\n### Choice Chips\n\nChoice chips are a variant of chips which allow single selection from a set of options. To define a set of chips as choice chips, add the class `mdc-chip-set--choice` to the chip set element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--choice\" role=\"grid\">\n  ...\n</div>\n```\n\n### Filter Chips\n\nFilter chips are a variant of chips which allow multiple selection from a set of options. To define a set of chips as filter chips, add the class `mdc-chip-set--filter` to the chip set element. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it. This requires the HTML structure of a filter chip to differ from other chips:\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span class=\"mdc-chip__checkmark\" >\n      <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n        <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"false\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\nTo use a leading icon in a filter chip, put the `mdc-chip__icon--leading` element _before_ the `mdc-chip__checkmark` element:\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">face</i>\n    <span class=\"mdc-chip__checkmark\" >\n      <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n        <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"false\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Input Chips\n\nInput chips are a variant of chips which enable user input by converting text into chips. To define a set of chips as input chips, add the class `mdc-chip-set--input` to the chip set element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--input\" role=\"grid\">\n  ...\n</div>\n```\n\n#### Adding Chips to the DOM\n\nThe MDC Chips package does not handle the process of converting text into chips, in order to remain framework-agnostic. The `MDCChipSet` component exposes an `addChip` method, which accepts an element which is expected to already be inserted within the Chip Set element after any existing chips. The `MDCChipSet` component will then handle creating and tracking a `MDCChip` component instance.\n\nFor example:\n\n```js\ninput.addEventListener('keydown', function(event) {\n  if (event.key === 'Enter' || event.keyCode === 13) {\n    const chipEl = document.createElement('div');\n    // ... perform operations to properly populate/decorate chip element ...\n    chipSetEl.appendChild(chipEl);\n    chipSet.addChip(chipEl);\n  }\n});\n```\n\n> _NOTE_: `MDCChipSet` will generate a unique ID to apply to each added chip's element if it does not already have an ID\n> when it is passed to `addChip`. This is used to distinguish chips during user interactions.\n\n#### Removing Chips from the DOM\n\nBy default, input chips are removed in response to clicking the trailing remove icon in the chip. Removal can also be triggered by calling `MDCChip`'s `beginExit()` method.\n\nIndividual `MDCChip` instances will emit a `MDCChip:removal` event once the exit transition ends. `MDCChipSet` will handle destroying the `MDCChip` instance in response to `MDCChip:removal`, but it must be removed from the DOM manually. You can listen for `MDCChip:removal` from the parent Chip Set or any ancestor, since the event bubbles:\n\n```js\nchipSet.listen('MDCChip:removal', function(event) {\n  chipSetEl.removeChild(event.detail.root);\n});\n```\n\n### Pre-selected\n\nTo display a pre-selected filter or choice chip, add the class `mdc-chip--selected` to the root chip element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--choice\" role=\"grid\">\n  <div class=\"mdc-chip mdc-chip--selected\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"radio\" tabindex=\"0\" aria-checked=\"true\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Add to calendar</span>\n      </span>\n    </span>\n  </div>\n</div>\n```\n\nTo pre-select filter chips that have a leading icon, also add the class `mdc-chip__icon--leading-hidden` to the `mdc-chip__icon--leading` element. This will ensure that the checkmark displaces the leading icon.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip mdc-chip--selected\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden\">face</i>\n    <span class=\"mdc-chip__checkmark\">\n      <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n        <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"true\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n</div>\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your chip:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <div class=\"mdc-chip mdc-chip--touch\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <div class=\"mdc-chip__touch\"></div>\n        <span class=\"mdc-chip__text\">Chip One</span>\n      </span>\n    </span>\n  </div>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to.\n`mdc-chip-set--input` | Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.\n`mdc-chip-set--choice` | Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.\n`mdc-chip-set--filter` | Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.\n`mdc-chip` | Mandatory.\n`mdc-chip__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-chip--selected` | Optional. Indicates that the chip is selected.\n`mdc-chip__text` | Mandatory. Indicates the text content of the chip.\n`mdc-chip__icon` | Optional. Indicates an icon in the chip. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-chip__icon--leading` | Optional. Indicates a leading icon in the chip.\n`mdc-chip__icon--leading-hidden` | Optional. Hides the leading icon in a filter chip when the chip is selected.\n`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips.\n`mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.\n`mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.\n`mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.\n\n> _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.\n\n`mdc-chip__action--primary` | Mandatory. Placed on the `mdc-chip__text` element.\n`mdc-chip__action--trailing` | Optinoal. Placed on the `mdc-chip__icon--trailing` when it should be accessible via keyboard navigation.\n`mdc-chip--deletable` | Optional. Indicates that the chip should be removable by the delete or backspace key.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to chip with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink, icon and ripple colors to meet accessibility standards\n`fill-color($color)` | Customizes the background fill color for a chip\n`ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match\n`selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state\n`outline($width, $style, $color)` | Customizes the outline properties for a chip\n`outline-width($width, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `horizontal-padding` is also included with a custom value\n`outline-style($style)` | Customizes the outline style for a chip\n`outline-color($color)` | Customizes the outline color for a chip\n`height($height)` | Customizes the height for a chip\n`horizontal-padding($padding)` | Customizes the horizontal padding for a chip\n`leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity\n`trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities\n`leading-icon-size($size)` | Customizes the size of a leading icon in a chip\n`trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip\n`leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`elevation-transition()` | Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip\n`density($density-scale)` | Sets density scale for chip. Supported density scales  are `-2`, `-1` and `0` (default).\n\n> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.\n\n## `MDCChip` and `MDCChipSet` Properties and Methods\n\nThe MDC Chips package is composed of two JavaScript classes:\n* `MDCChip` defines the behavior of a single chip.\n* `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an input chip set behave differently from those in a filter chip set.\n\nTo use the `MDCChip` and `MDCChipSet` classes, [import](../../../docs/importing-js.md) both classes from `@material/chips`.\n\n### `MDCChip`\n\nMethod Signature | Description\n--- | ---\n`beginExit() => void` | Proxies to the foundation's `beginExit` method\n`focusPrimaryAction() => void` | Proxies to the foundation's `focusPrimaryAction` method\n`focusTrailingAction() => void` | Proxies to the foundation's `focusTrailingAction` method\n`removeFocus() => void` | Proxies to the foundation's `removeFocus` method\n`setSelectedFromChipSet(selected: boolean) => void` | Proxies to the foundation's `setSelectedFromChipset` method (only called from the chip set)\n\nProperty | Value Type | Description\n--- | --- | ---\n`id` | `string` (read-only) | Unique identifier on the chip\\*\n`selected` | `boolean` | Proxies to the foundation's `isSelected`/`setSelected` methods\n`shouldRemoveOnTrailingIconClick` | `boolean` | Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods\\*\\*\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCChip` initializes\n\n> \\*_NOTE_: This will be the same as the `id` attribute on the root element. If an `id` is not provided, a unique one will be generated by `MDCChipSet.addChip()`.\n\n> \\*\\*_NOTE_: If `shouldRemoveOnTrailingIconClick` is set to false, you must manually call `beginExit()` on the chip to remove it.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCChip:interaction` | `{chipId: string}` | Indicates the chip was interacted with (via click/tap or Enter key)\n`MDCChip:selection` | `{chipId: string, selected: boolean}` | Indicates the chip's selection state has changed (for choice/filter chips)\n`MDCChip:removal` | `{chipId: string, removedAnnouncement: string|null}` | Indicates the chip is ready to be removed from the DOM\n`MDCChip:trailingIconInteraction` | `{chipId: string}` | Indicates the chip's trailing icon was interacted with (via click/tap or Enter key)\n`MDCChip:navigation` | `{chipId: string, key: string, source: FocusSource}` | Indicates a navigation event has occurred on a chip\n\n> _NOTE_: All of `MDCChip`'s emitted events bubble up through the DOM.\n\n### `MDCChipSet`\n\nMethod Signature | Description\n--- | ---\n`addChip(chipEl: Element) => void` | Adds a new `MDCChip` instance to the chip set based on the given `mdc-chip` element\n\nProperty | Value Type | Description\n--- | --- | ---\n`chips` | `ReadonlyArray<MDCChip>` | An array of the `MDCChip` objects that represent chips in the set\n`selectedChipIds` | `ReadonlyArray<string>` | An array of the IDs of all selected chips\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`\n\nSee [`chip/component.ts`](chip/component.ts) and [`chip-set/component.ts`](chip-set/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCChipAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given class\n`addClassToLeadingIcon(className: string) => void` | Adds a class to the leading icon element\n`removeClassFromLeadingIcon(className: string) => void` | Removes a class from the leading icon element\n`eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise\n`notifyInteraction() => void` | Notifies the Chip Set that the chip has been interacted with\\*\n`notifySelection(selected: boolean, chipSetShouldIgnore: boolean) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*. When `chipSetShouldIgnore` is `true`, the chip set does not process the event.\n`notifyTrailingIconInteraction() => void` | Notifies the Chip Set that the chip's trailing icon has been interacted with\\*\n`notifyRemoval() => void` | Notifies the Chip Set that the chip will be removed\\*\\*\\*\n`getComputedStyleValue(propertyName: string) => string` | Returns the computed property value of the given style property on the root element\n`setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element\n`hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon\n`getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element\n`getCheckmarkBoundingClientRect() => ClientRect \\| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist\n`notifyNavigation(key: string, source: EventSource) => void` | Notifies the Chip Set that a navigation event has occurred\n`setPrimaryActionAttr(attr: string, value: string) => void` | Sets an attribute on the primary action element to the given value\n`focusPrimaryAction() => void` | Gives focus to the primary action element\n`hasTrailingAction() => boolean` | Returns `true` if the chip has a trailing action element\n`setTrailingActionAttr(attr: string, value: string) => void` | Sets an attribute on the trailing action element to the given value, if the element exists\n`focusTrailingAction() => void` | Gives focus to the trailing action element if present\n`getAttribute(attr: string) => string|null` | Returns the string value of the attribute if it exists, otherwise `null`\n\n\n> \\*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n> \\*\\*_NOTE_: `notifySelection` must pass along the target chip's ID and selected state, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n> \\*\\*\\*_NOTE_: `notifyRemoval` must pass along the target chip's ID and its root element, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n#### `MDCChipSetAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns whether the chip set element has the given class\n`removeChipAtIndex(index: number) => void` | Removes the chip with the given `index` from the chip set\n`selectChipAtIndex(index: string, selected: boolean, shouldNotifyClients: boolean) => void` | Calls `MDCChip#setSelectedFromChipSet(selected)` on the chip at the given `index`. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.\n`getIndexOfChipById(id: string) => number` | Returns the index of the chip with the matching `id` or -1\n`focusChipPrimaryActionAtIndex(index: number) => void` | Calls `MDCChip#focusPrimaryAction()` on the chip at the given `index`\n`focusChipTrailingActionAtIndex(index: number) => void` | Calls `MDCChip#focusTrailingAction()` on the chip at the given `index`\n`isRTL() => boolean` | Returns `true` if the text direction is RTL\n`getChipListCount() => number` | Returns the number of chips inside the chip set\n`removeFocusFromChipAtIndex(index: number) => void` | Calls `MDCChip#removeFocus()` on the chip at the given `index`\n`announceMessage(message: string) => void` | Announces the message via [an `aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\n\n### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`\n\n#### `MDCChipFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => boolean` | Returns true if the chip is selected\n`setSelected(selected: boolean) => void` | Sets the chip's selected state\n`setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) => void` | Sets the chip's selected state (called from the chip set) to the `selected` param. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.\n`getShouldRemoveOnTrailingIconClick() => boolean` | Returns whether a trailing icon click should trigger exit/removal of the chip\n`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip\n`getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip.\n`beginExit() => void` | Begins the exit animation which leads to removal of the chip\n`handleInteraction(event: Event) => void` | Handles an interaction event on the root element\n`handleTransitionEnd(event: Event) => void` | Handles a transition end event on the root element\n`handleTrailingIconInteraction(event: Event) => void` | Handles an interaction event on the trailing icon element\n`handleKeydown(event: Event) => void` | Handles a keydown event on the root element\n`removeFocus() => void` | Removes focusability from the chip\n\n#### `MDCChipFoundation` Event Handlers\n\nWhen wrapping the Chip foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click`, `keydown` | `.mdc-chip` (root) | `handleInteraction()`\n`click`, `keydown` | `.mdc-chip__icon--trailing` (if present) | `handleTrailingIconInteraction()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n\n#### `MDCChipSetFoundation`\n\nMethod Signature | Description\n--- | ---\n`getSelectedChipIds() => ReadonlyArray<string>` | Returns an array of the IDs of all selected chips\n`select(chipId: string) => void` | Selects the chip with the given id\n`handleChipInteraction(detail: MDCChipInteractionEventDetail) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(detail: MDCChipSelectionEventDetail) => void` | Handles a custom `MDCChip:selection` event on the root element. When `chipSetShouldIgnore` is true, the chip set does not process the event.\n`handleChipRemoval(detail: MDCChipRemovalEventDetail) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(detail: MDCChipNavigationEventDetail) => void` | Handles a custom `MDCChip:navigation` event on the root element\n\n#### `MDCChipSetFoundation` Event Handlers\n\nWhen wrapping the Chip Set foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCChip:interaction` | `.mdc-chip-set` (root) | `handleChipInteraction`\n`MDCChip:selection` | `.mdc-chip-set` (root) | `handleChipSelection`\n`MDCChip:removal` | `.mdc-chip-set` (root) | `handleChipRemoval`\n`MDCChip:navigation` | `.mdc-chip-set` (root) | `handleChipNavigation`\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/checkbox\" as mdc-checkbox-* hide $mdc-checkbox-ripple-target, mdc-checkbox-core-styles, mdc-checkbox-without-ripple, mdc-checkbox-ripple, mdc-checkbox-density, mdc-checkbox-ripple-size, mdc-checkbox-container-colors, mdc-checkbox-disabled-container-colors, mdc-checkbox-ink-color, mdc-checkbox-disabled-ink-color, mdc-checkbox-focus-indicator-color, mdc-checkbox-touch-target, mdc-checkbox-base-, mdc-checkbox-disabled-, mdc-checkbox-child--upgraded-, mdc-checkbox-anim-, mdc-checkbox-if-enabled-, mdc-checkbox-if-disabled-, mdc-checkbox-if-unmarked-enabled-, mdc-checkbox-if-unmarked-disabled-, mdc-checkbox-if-marked-enabled-, mdc-checkbox-if-marked-disabled-, mdc-checkbox-background-, mdc-checkbox-background--marked-, mdc-checkbox-container-colors-, mdc-checkbox-focus-indicator-, mdc-checkbox-focus-indicator--focused-, mdc-checkbox-native-control-, mdc-checkbox-checkmark-, mdc-checkbox-checkmark--checked-, mdc-checkbox-checkmark--indeterminate-, mdc-checkbox-ink-color-, mdc-checkbox-checkmark-path-, mdc-checkbox-checkmark-path--marked-, mdc-checkbox-mixedmark-, mdc-checkbox-mixedmark--checked-, mdc-checkbox-mixedmark--indeterminate-, mdc-checkbox-touch-target-reset-, mdc-checkbox-container-keyframes-, mdc-checkbox-mark-keyframes-;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/touch-target\" as mdc-touch-target-*;\n@forward \"@material/touch-target\" as mdc-* hide $mdc-height, $mdc-width, mdc-margin, mdc-wrapper;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"./index\" as mdc-chip-*;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/animation/functions';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/checkbox/functions' as checkbox-functions;\n@use '@material/checkbox/variables' as checkbox-variables;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/density/functions' as density-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/typography/typography';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use './variables';\n@use '@material/elevation/functions' as elevation-functions;\n@use '@material/theme/theme-color';\n@use './trailingaction/mixins' as trailing-action-mixins;\n\n$ripple-target: '.mdc-chip__ripple';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query: $query);\n  @include ripple($query: $query);\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include leading-icon-color(variables.$icon-color, $query: $query);\n  @include trailing-icon-color(variables.$icon-color, $query: $query);\n  @include leading-icon-size(variables.$leading-icon-size, $query: $query);\n  @include trailing-icon-size(variables.$trailing-icon-size, $query: $query);\n  @include trailing-icon-margin($query: $query);\n  @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n  // prettier-ignore\n  @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-chip {\n    @include shape-radius(variables.$shape-radius, $query: $query);\n    @include fill-color(variables.$fill-color-default, $query: $query);\n    @include ink-color-without-ripple_(\n      variables.$ink-color-default,\n      $query: $query\n    );\n    @include typography.typography(body2, $query: $query);\n    @include density($density-scale: 0, $query: $query);\n    @include leading-icon-margin($query: $query);\n    @include elevation-mixins.overlay-surface-position($query: $query);\n    @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      // position: relative; already set in mdc-elevation-overlay-surface-position\n      align-items: center;\n      box-sizing: border-box;\n      padding: 0 variables.$horizontal-padding;\n      border-width: 0;\n      outline: none;\n      cursor: pointer;\n      -webkit-appearance: none;\n\n      &::-moz-focus-inner {\n        padding: 0;\n        border: 0;\n      }\n    }\n\n    &:hover {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, on-surface);\n      }\n    }\n\n    .mdc-chip__touch {\n      @include touch-target-mixins.touch-target($query: $query);\n    }\n  }\n\n  .mdc-chip--exit {\n    @include feature-targeting.targets($feat-color) {\n      transition: variables.$exit-transition;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n  }\n\n  .mdc-chip__overflow {\n    @include feature-targeting.targets($feat-structure) {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  }\n\n  .mdc-chip__text {\n    @include feature-targeting.targets($feat-structure) {\n      white-space: nowrap;\n    }\n  }\n\n  .mdc-chip__icon {\n    @include feature-targeting.targets($feat-structure) {\n      border-radius: 50%;\n      outline: none;\n      vertical-align: middle;\n    }\n  }\n\n  .mdc-chip__checkmark {\n    @include feature-targeting.targets($feat-structure) {\n      height: variables.$leading-icon-size;\n    }\n  }\n\n  .mdc-chip__checkmark-path {\n    @include feature-targeting.targets($feat-animation) {\n      transition: checkbox-functions.transition-exit(\n        stroke-dashoffset,\n        variables.$checkmark-animation-delay,\n        variables.$checkmark-animation-duration\n      );\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      stroke-width: 2px;\n      stroke-dashoffset: checkbox-variables.$mark-path-length_;\n      stroke-dasharray: checkbox-variables.$mark-path-length_;\n    }\n  }\n\n  .mdc-chip__primary-action:focus {\n    @include feature-targeting.targets($feat-structure) {\n      outline: none;\n    }\n  }\n\n  .mdc-chip--selected .mdc-chip__checkmark-path {\n    @include feature-targeting.targets($feat-structure) {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  .mdc-chip__icon--leading,\n  .mdc-chip__icon--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      // Make these positioned elements, such that they're stacked above the\n      // touch target element (`mdc-chip__touch`), so that clicks reach the\n      // icons (e.g. for removable input chips).\n      position: relative;\n    }\n  }\n\n  // Change color of selected choice chips\n\n  .mdc-chip-set--choice {\n    .mdc-chip {\n      @include selected-ink-color-without-ripple_(primary, $query: $query);\n    }\n\n    .mdc-chip--selected {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, surface);\n      }\n    }\n  }\n\n  // Add leading checkmark to filter chips with no leading icon\n\n  .mdc-chip__checkmark-svg {\n    @include feature-targeting.targets($feat-structure) {\n      width: 0;\n      height: variables.$leading-icon-size;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: width variables.$width-animation-duration\n        animation-variables.$standard-curve-timing-function;\n    }\n  }\n\n  .mdc-chip--selected .mdc-chip__checkmark-svg {\n    @include feature-targeting.targets($feat-structure) {\n      width: variables.$leading-icon-size;\n    }\n  }\n\n  // Add leading checkmark to filter chips with a leading icon\n\n  .mdc-chip-set--filter {\n    .mdc-chip__icon--leading {\n      @include feature-targeting.targets($feat-animation) {\n        transition: opacity variables.$opacity-animation-duration linear;\n        transition-delay: variables.$leading-icon-delay;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n\n      + .mdc-chip__checkmark {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity variables.$opacity-animation-duration linear;\n\n          // Delay the checkmark transition.\n          transition-delay: variables.$checkmark-with-leading-icon-delay;\n        }\n\n        @include feature-targeting.targets($feat-structure) {\n          opacity: 0;\n        }\n\n        .mdc-chip__checkmark-svg {\n          @include feature-targeting.targets($feat-animation) {\n            transition: width 0ms;\n          }\n        }\n      }\n    }\n\n    .mdc-chip--selected .mdc-chip__icon--leading {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n\n      + .mdc-chip__checkmark {\n        @include feature-targeting.targets($feat-structure) {\n          // This ensures that the checkmark has zero width while the leading icon is still animating.\n          width: 0;\n          opacity: 1;\n        }\n      }\n    }\n\n    .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {\n      @include feature-targeting.targets($feat-structure) {\n        width: 0;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        // This ensures that the leading icon doesn't fade in while the checkmark is fading out.\n        opacity: 0;\n      }\n\n      + .mdc-chip__checkmark {\n        @include feature-targeting.targets($feat-structure) {\n          width: variables.$leading-icon-size;\n        }\n      }\n    }\n  }\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-chip {\n    @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include ink-color-ripple_(variables.$ink-color-default, $query: $query);\n\n    #{$ripple-target} {\n      @include ripple.target-common($query: $query);\n\n      @include feature-targeting.targets($feat-structure) {\n        overflow: hidden;\n      }\n    }\n  }\n\n  .mdc-chip-set--choice {\n    .mdc-chip {\n      @include selected-ink-color-ripple_(primary, $query: $query);\n    }\n  }\n}\n\n@mixin set-core-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-chip-entry {\n      from {\n        transform: scale(0.8);\n        opacity: 0.4;\n      }\n\n      to {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  }\n\n  .mdc-chip-set {\n    @include set-spacing(8px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-wrap: wrap;\n      box-sizing: border-box;\n    }\n  }\n\n  .mdc-chip-set--input .mdc-chip {\n    @include feature-targeting.targets($feat-animation) {\n      animation: mdc-chip-entry 100ms\n        animation-variables.$deceleration-curve-timing-function;\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: variables.$density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include shape-mixins.radius(\n    $radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n\n  #{$ripple-target} {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n}\n\n@mixin fill-color-accessible($color, $query: feature-targeting.all()) {\n  $fill-tone: theme-color.tone($color);\n\n  @include fill-color($color, $query: $query);\n\n  @if ($fill-tone == 'dark') {\n    @include ink-color(text-primary-on-dark, $query: $query);\n    @include selected-ink-color(text-primary-on-dark, $query: $query);\n    @include leading-icon-color(text-primary-on-dark, $query: $query);\n    @include trailing-icon-color(text-primary-on-dark, $query: $query);\n  } @else {\n    @include ink-color(text-primary-on-light, $query: $query);\n    @include selected-ink-color(text-primary-on-light, $query: $query);\n    @include leading-icon-color(text-primary-on-light, $query: $query);\n    @include trailing-icon-color(text-primary-on-light, $query: $query);\n  }\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @include ink-color-ripple_($color, $query: $query);\n  @include ink-color-without-ripple_($color, $query: $query);\n}\n\n@mixin ink-color-without-ripple_($color, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n\n  &:hover {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin ink-color-ripple_($color, $query) {\n  @include ripple-theme.states(\n    $color,\n    true,\n    $query: $query,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin selected-ink-color($color, $query: feature-targeting.all()) {\n  @include selected-ink-color-ripple_($color, $query: $query);\n  @include selected-ink-color-without-ripple_($color, $query: $query);\n}\n\n@mixin selected-ink-color-without-ripple_($color, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-chip--selected {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n\n    @include leading-icon-color($color, $query: $query);\n\n    &:hover {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n\n  .mdc-chip__checkmark-path {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(stroke, $color);\n    }\n  }\n}\n\n@mixin selected-ink-color-ripple_($color, $query) {\n  &.mdc-chip {\n    @include ripple-theme.states-selected(\n      $color,\n      $has-nested-focusable-element: true,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin outline(\n  $width: 1px,\n  $style: solid,\n  $color: theme-color.prop-value(on-surface),\n  $query: feature-targeting.all()\n) {\n  @include outline-width($width, $query: $query);\n  @include outline-style($style, $query: $query);\n  @include outline-color($color, $query: $query);\n}\n\n@mixin outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(border-color, $color);\n  }\n}\n\n@mixin outline-style($style, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    border-style: $style;\n  }\n}\n\n@mixin outline-width(\n  $width,\n  $horizontal-padding: variables.$horizontal-padding,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Note: Adjust padding to maintain consistent width with non-outlined chips\n  $horizontal-padding-value: math.max($horizontal-padding - $width, 0);\n\n  @include feature-targeting.targets($feat-structure) {\n    padding-right: $horizontal-padding-value;\n    padding-left: $horizontal-padding-value;\n    border-width: $width;\n  }\n\n  #{$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      top: -$width;\n      left: -$width;\n      border: $width solid transparent;\n    }\n  }\n}\n\n@mixin horizontal-padding($padding, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    padding-right: $padding;\n    padding-left: $padding;\n  }\n}\n\n@mixin height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n@mixin set-spacing($gap-size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    padding: math.div($gap-size, 2);\n  }\n\n  .mdc-chip {\n    @include feature-targeting.targets($feat-structure) {\n      margin: math.div($gap-size, 2);\n    }\n  }\n\n  .mdc-chip--touch {\n    @include touch-target-mixins.margin(\n      $component-height: variables.$height,\n      $query: $query\n    );\n  }\n}\n\n@mixin leading-icon-color(\n  $color,\n  $opacity: variables.$icon-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-chip__icon--leading {\n    @include feature-targeting.targets($feat-color) {\n      color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n}\n\n@mixin trailing-icon-color(\n  $color,\n  $opacity: variables.$icon-opacity,\n  $hover-opacity: variables.$trailing-icon-hover-opacity,\n  $focus-opacity: variables.$trailing-icon-focus-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include trailing-action-mixins.color($color, $query: $query);\n\n  // TODO(b/151980552): Remove the following block\n  .mdc-chip__icon--trailing {\n    @include feature-targeting.targets($feat-color) {\n      color: rgba(theme-color.prop-value($color), $opacity);\n    }\n\n    &:hover {\n      @include feature-targeting.targets($feat-color) {\n        color: rgba(theme-color.prop-value($color), $hover-opacity);\n      }\n    }\n\n    &:focus {\n      @include feature-targeting.targets($feat-color) {\n        color: rgba(theme-color.prop-value($color), $focus-opacity);\n      }\n    }\n  }\n}\n\n// For customizing icon size, we need to increase specifity to ensure\n// overrides apply. Styles defined in the .material-icons CSS class are\n// loaded separately, so the order of CSS definitions is not guaranteed.\n\n@mixin leading-icon-size($size, $query: feature-targeting.all()) {\n  .mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {\n    @include icon-size_($size, $query: $query);\n  }\n}\n\n@mixin trailing-icon-size($size, $query: feature-targeting.all()) {\n  @include trailing-action-mixins.size($size, $query: $query);\n\n  // TODO(b/151980552): Remove the following block\n  .mdc-chip__icon.mdc-chip__icon--trailing {\n    @include icon-size_($size, $query: $query);\n  }\n}\n\n@mixin icon-size_($size, $query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: $size;\n    height: $size;\n    font-size: $size;\n  }\n}\n\n@mixin leading-icon-margin(\n  $left-margin: variables.$leading-icon-margin-left,\n  $right-margin: variables.$leading-icon-margin-right,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &.mdc-chip--selected .mdc-chip__checkmark,\n  .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, $left-margin, $right-margin);\n    }\n  }\n}\n\n@mixin trailing-icon-margin(\n  $left-margin: variables.$trailing-icon-margin-left,\n  $right-margin: variables.$trailing-icon-margin-right,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include trailing-action-mixins.horizontal-spacing(\n    $left-margin,\n    $right-margin,\n    $query: $query\n  );\n\n  // TODO(b/151980552): Remove the following block\n  .mdc-chip__icon--trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, $left-margin, $right-margin);\n    }\n  }\n}\n\n@mixin elevation-transition($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: elevation-functions.transition-value();\n  }\n\n  &.mdc-chip--exit {\n    @include feature-targeting.targets($feat-animation) {\n      transition: elevation-functions.transition-value(),\n        variables.$exit-transition;\n    }\n  }\n}\n\n///\n/// Sets the density scale for chips.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n///     Supported density scale values are `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height($height, $query: $query);\n\n  @if $density-scale != 0 {\n    @include touch-target-reset_($query: $query);\n  }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Selector is necessary here to override original specificity.\n  &.mdc-chip--touch {\n    @include feature-targeting.targets($feat-structure) {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .mdc-chip__touch {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n    }\n  }\n}\n\n@mixin high-contrast-focus {\n  // High contrast mode focus for chips.\n  .mdc-chip__focus-ring {\n    display: none;\n  }\n\n  @include ripple-theme.focus() {\n    .mdc-chip__focus-ring {\n      z-index: 1;\n      display: block;\n      @include focus-ring.focus-ring();\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/_variables.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-chip-* hide $mdc-chip-ripple-target, mdc-chip-core-styles, mdc-chip-without-ripple, mdc-chip-ripple, mdc-chip-set-core-styles, mdc-chip-shape-radius, mdc-chip-fill-color-accessible, mdc-chip-fill-color, mdc-chip-ink-color, mdc-chip-ink-color-without-ripple-, mdc-chip-ink-color-ripple-, mdc-chip-selected-ink-color, mdc-chip-selected-ink-color-without-ripple-, mdc-chip-selected-ink-color-ripple-, mdc-chip-outline, mdc-chip-outline-color, mdc-chip-outline-style, mdc-chip-outline-width, mdc-chip-horizontal-padding, mdc-chip-height, mdc-chip-set-spacing, mdc-chip-leading-icon-color, mdc-chip-trailing-icon-color, mdc-chip-leading-icon-size, mdc-chip-trailing-icon-size, mdc-chip-icon-size-, mdc-chip-leading-icon-margin, mdc-chip-trailing-icon-margin, mdc-chip-elevation-transition, mdc-chip-density, mdc-chip-touch-target-reset-;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:color';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/density/variables' as density-variables;\n@use '@material/theme/theme-color';\n\n$fill-color-default: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  12%\n) !default;\n$ink-color-default: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$horizontal-padding: 12px !default;\n$height: 32px !default;\n$shape-radius: 50% !default;\n\n$minimum-height: 24px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n\n$icon-color: theme-color.prop-value(on-surface) !default;\n$icon-opacity: 0.54 !default;\n$trailing-icon-hover-opacity: 0.62 !default;\n$trailing-icon-focus-opacity: 0.87 !default;\n$leading-icon-size: 20px !default;\n$trailing-icon-size: 18px !default;\n// Speed up delay to bridge gap between leading icon and checkmark transition.\n$leading-icon-delay: -50ms !default;\n$checkmark-with-leading-icon-delay: 80ms !default;\n\n$checkmark-animation-delay: 50ms !default;\n$checkmark-animation-duration: 150ms !default;\n$width-animation-duration: 150ms !default;\n$opacity-animation-duration: 75ms !default;\n\n$leading-icon-margin-right: 4px !default;\n$leading-icon-margin-left: -4px !default;\n\n$trailing-icon-margin-right: -4px !default;\n$trailing-icon-margin-left: 4px !default;\n\n$exit-transition: opacity 75ms\n    animation-variables.$standard-curve-timing-function,\n  width 150ms animation-variables.$deceleration-curve-timing-function,\n  padding 100ms linear, margin 100ms linear !default;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventSource} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipAdapter {\n  /**\n   * Adds a class to the root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * @return true if the root element contains the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Adds a class to the leading icon element.\n   */\n  addClassToLeadingIcon(className: string): void;\n\n  /**\n   * Removes a class from the leading icon element.\n   */\n  removeClassFromLeadingIcon(className: string): void;\n\n  /**\n   * @return true if target has className, false otherwise.\n   */\n  eventTargetHasClass(target: EventTarget|null, className: string): boolean;\n\n  /**\n   * @return the attribute string value if present, otherwise null\n   */\n  getAttribute(attr: string): string|null;\n\n  /**\n   * Emits a custom \"MDCChip:interaction\" event denoting the chip has been\n   * interacted with (typically on click or keydown).\n   */\n  notifyInteraction(): void;\n\n  /**\n   * Emits a custom \"MDCChip:selection\" event denoting the chip has been\n   * selected or deselected.\n   */\n  notifySelection(selected: boolean, chipSetShouldIgnore: boolean): void;\n\n  /**\n   * Emits a custom \"MDCChip:trailingIconInteraction\" event denoting the\n   * trailing icon has been interacted with (typically on click or keydown).\n   */\n  notifyTrailingIconInteraction(): void;\n\n  /**\n   * Emits a custom event \"MDCChip:removal\" denoting the chip will be removed.\n   */\n  notifyRemoval(removedAnnouncement: string|null): void;\n\n  /**\n   * Emits a custom event \"MDCChip:navigation\" denoting a focus navigation\n   * event.\n   */\n  notifyNavigation(key: string, source: EventSource): void;\n\n  /**\n   * Emits when editing starts.\n   */\n  notifyEditStart(): void;\n\n  /**\n   * Emits when editing finishes.\n   */\n  notifyEditFinish(): void;\n\n  /**\n   * @return The computed property value of the given style property on the root\n   *     element.\n   */\n  getComputedStyleValue(propertyName: string): string;\n\n  /**\n   * Sets the property value of the given style property on the root element.\n   */\n  setStyleProperty(propertyName: string, value: string): void;\n\n  /**\n   * @return Whether the chip has a leading icon.\n   */\n  hasLeadingIcon(): boolean;\n\n  /**\n   * @return The bounding client rect of the root element.\n   */\n  getRootBoundingClientRect(): DOMRect;\n\n  /**\n   * @return The bounding client rect of the checkmark element or null if it\n   *     doesn't exist.\n   */\n  getCheckmarkBoundingClientRect(): DOMRect|null;\n\n  /**\n   * Sets the value of the attribute on the primary action content.\n   */\n  setPrimaryActionAttr(attr: string, value: string): void;\n\n  /**\n   * Gives focus to the primary action.\n   */\n  focusPrimaryAction(): void;\n\n  /**\n   * Sets focus to the trailing action.\n   */\n  focusTrailingAction(): void;\n\n  /**\n   * Removes focus from the trailing action.\n   */\n  removeTrailingActionFocus(): void;\n\n  /**\n   * Returns true if the trailing action is navigable.\n   * Should return the value of MDCChipTrailingAction#isNavigable() or false.\n   */\n  isTrailingActionNavigable(): boolean;\n\n  /**\n   * @return true if the text direction is right-to-left.\n   */\n  isRTL(): boolean;\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener, SpecificEventListener} from '@material/base/types';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCChipTrailingAction, MDCChipTrailingActionFactory} from '../trailingaction/component';\nimport {strings as trailingActionStrings} from '../trailingaction/constants';\nimport {MDCChipTrailingActionInteractionEvent, MDCChipTrailingActionNavigationEvent} from '../trailingaction/types';\n\nimport {MDCChipAdapter} from './adapter';\nimport {strings} from './constants';\nimport {MDCChipFoundation} from './foundation';\nimport {MDCChipInteractionEventDetail, MDCChipNavigationEventDetail, MDCChipRemovalEventDetail, MDCChipSelectionEventDetail} from './types';\n\n/** MDC Chip Factory */\nexport type MDCChipFactory =\n    (el: HTMLElement, foundation?: MDCChipFoundation) => MDCChip;\n\n/** MDC Chip */\nexport class MDCChip extends MDCComponent<MDCChipFoundation> implements\n    MDCRippleCapableSurface {\n  /**\n   * @return Whether the chip is selected.\n   */\n  get selected(): boolean {\n    return this.foundation.isSelected();\n  }\n\n  /**\n   * Sets selected state on the chip.\n   */\n  set selected(selected: boolean) {\n    this.foundation.setSelected(selected);\n  }\n\n  /**\n   * @return Whether a trailing icon click should trigger exit/removal of the\n   *     chip.\n   */\n  get shouldRemoveOnTrailingIconClick(): boolean {\n    return this.foundation.getShouldRemoveOnTrailingIconClick();\n  }\n\n  /**\n   * Sets whether a trailing icon click should trigger exit/removal of the chip.\n   */\n  set shouldRemoveOnTrailingIconClick(shouldRemove: boolean) {\n    this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemove);\n  }\n\n  /**\n   * Sets whether a clicking on the chip should focus the primary action.\n   */\n  set setShouldFocusPrimaryActionOnClick(shouldFocus: boolean) {\n    this.foundation.setShouldFocusPrimaryActionOnClick(shouldFocus);\n  }\n\n  get ripple(): MDCRipple {\n    return this.rippleSurface;\n  }\n\n  get id(): string {\n    return this.root.id;\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCChip(root);\n  }\n\n  private leadingIcon!: HTMLElement|null;    // assigned in initialize()\n  private checkmark!: HTMLElement|null;      // assigned in initialize()\n  private primaryAction!: HTMLElement|null;  // assigned in initialize()\n  private trailingAction!: MDCChipTrailingAction|\n      null;                           // assigned in initialize()\n  private rippleSurface!: MDCRipple;  // assigned in initialize()\n\n  private handleTrailingActionInteraction!: CustomEventListener<\n      MDCChipTrailingActionInteractionEvent>;  // assigned in\n                                               // initialSyncWithDOM()\n  private handleTrailingActionNavigation!: CustomEventListener<\n      MDCChipTrailingActionNavigationEvent>;  // assigned in\n                                              // initialSyncWithDOM()\n  private handleTransitionEnd!:\n      SpecificEventListener<'transitionend'>;  // assigned in\n                                               // initialSyncWithDOM()\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n  private handleFocusIn!:\n      SpecificEventListener<'focusin'>;  // assigned in initialSyncWIthDOM()\n  private handleFocusOut!:\n      SpecificEventListener<'focusout'>;  // assigned in initialSyncWIthDOM()\n\n  override initialize(\n      rippleFactory:\n          MDCRippleFactory = (el, foundation) => new MDCRipple(el, foundation),\n      trailingActionFactory:\n          MDCChipTrailingActionFactory = (el) => new MDCChipTrailingAction(el),\n  ) {\n    this.leadingIcon =\n        this.root.querySelector<HTMLElement>(strings.LEADING_ICON_SELECTOR);\n    this.checkmark =\n        this.root.querySelector<HTMLElement>(strings.CHECKMARK_SELECTOR);\n    this.primaryAction =\n        this.root.querySelector<HTMLElement>(strings.PRIMARY_ACTION_SELECTOR);\n\n    const trailingActionEl =\n        this.root.querySelector<HTMLElement>(strings.TRAILING_ACTION_SELECTOR);\n\n    if (trailingActionEl) {\n      this.trailingAction = trailingActionFactory(trailingActionEl);\n    }\n\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const rippleAdapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      computeBoundingRect: () => this.foundation.getDimensions(),\n    };\n    this.rippleSurface =\n        rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));\n  }\n\n  override initialSyncWithDOM() {\n    // Custom events\n    this.handleTrailingActionInteraction = () => {\n      this.foundation.handleTrailingActionInteraction();\n    };\n    this.handleTrailingActionNavigation =\n        (event: MDCChipTrailingActionNavigationEvent) => {\n          this.foundation.handleTrailingActionNavigation(event);\n        };\n    // Native events\n    this.handleClick = () => {\n      this.foundation.handleClick();\n    };\n    this.handleKeydown = (event: KeyboardEvent) => {\n      this.foundation.handleKeydown(event);\n    };\n    this.handleTransitionEnd = (event: TransitionEvent) => {\n      this.foundation.handleTransitionEnd(event);\n    };\n    this.handleFocusIn = (event: FocusEvent) => {\n      this.foundation.handleFocusIn(event);\n    };\n    this.handleFocusOut = (event: FocusEvent) => {\n      this.foundation.handleFocusOut(event);\n    };\n\n\n    this.listen('transitionend', this.handleTransitionEnd);\n    this.listen('click', this.handleClick);\n    this.listen('keydown', this.handleKeydown);\n    this.listen('focusin', this.handleFocusIn);\n    this.listen('focusout', this.handleFocusOut);\n\n    if (this.trailingAction) {\n      this.listen(\n          trailingActionStrings.INTERACTION_EVENT,\n          this.handleTrailingActionInteraction);\n      this.listen(\n          trailingActionStrings.NAVIGATION_EVENT,\n          this.handleTrailingActionNavigation);\n    }\n  }\n\n  override destroy() {\n    this.rippleSurface.destroy();\n\n    this.unlisten('transitionend', this.handleTransitionEnd);\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten('click', this.handleClick);\n    this.unlisten('focusin', this.handleFocusIn);\n    this.unlisten('focusout', this.handleFocusOut);\n\n    if (this.trailingAction) {\n      this.unlisten(\n          trailingActionStrings.INTERACTION_EVENT,\n          this.handleTrailingActionInteraction);\n      this.unlisten(\n          trailingActionStrings.NAVIGATION_EVENT,\n          this.handleTrailingActionNavigation);\n    }\n\n    super.destroy();\n  }\n\n  /**\n   * Begins the exit animation which leads to removal of the chip.\n   */\n  beginExit() {\n    this.foundation.beginExit();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      addClassToLeadingIcon: (className) => {\n        if (this.leadingIcon) {\n          this.leadingIcon.classList.add(className);\n        }\n      },\n      eventTargetHasClass: (target, className) =>\n          target ? (target as Element).classList.contains(className) : false,\n      focusPrimaryAction: () => {\n        if (this.primaryAction) {\n          this.primaryAction.focus();\n        }\n      },\n      focusTrailingAction: () => {\n        if (this.trailingAction) {\n          this.trailingAction.focus();\n        }\n      },\n      getAttribute: (attr) => this.root.getAttribute(attr),\n      getCheckmarkBoundingClientRect: () =>\n          this.checkmark ? this.checkmark.getBoundingClientRect() : null,\n      getComputedStyleValue: (propertyName) =>\n          window.getComputedStyle(this.root).getPropertyValue(propertyName),\n      getRootBoundingClientRect: () => this.root.getBoundingClientRect(),\n      hasClass: (className) => this.root.classList.contains(className),\n      hasLeadingIcon: () => !!this.leadingIcon,\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(\n                       'direction') === 'rtl',\n      isTrailingActionNavigable: () => {\n        if (this.trailingAction) {\n          return this.trailingAction.isNavigable();\n        }\n        return false;\n      },\n      notifyInteraction: () => {\n        this.emit<MDCChipInteractionEventDetail>(\n            strings.INTERACTION_EVENT, {chipId: this.id},\n            true /* shouldBubble */);\n      },\n      notifyNavigation: (key, source) => {\n        this.emit<MDCChipNavigationEventDetail>(\n            strings.NAVIGATION_EVENT, {chipId: this.id, key, source},\n            true /* shouldBubble */);\n      },\n      notifyRemoval: (removedAnnouncement) => {\n        this.emit<MDCChipRemovalEventDetail>(\n            strings.REMOVAL_EVENT, {chipId: this.id, removedAnnouncement},\n            true /* shouldBubble */);\n      },\n      notifySelection: (selected, shouldIgnore) => {\n        this.emit<MDCChipSelectionEventDetail>(\n            strings.SELECTION_EVENT, {chipId: this.id, selected, shouldIgnore},\n            true /* shouldBubble */);\n      },\n      notifyTrailingIconInteraction: () => {\n        this.emit<MDCChipInteractionEventDetail>(\n            strings.TRAILING_ICON_INTERACTION_EVENT, {chipId: this.id},\n            true /* shouldBubble */);\n      },\n      notifyEditStart: () => {/* Not Implemented. */},\n      notifyEditFinish: () => {/* Not Implemented. */},\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      removeClassFromLeadingIcon: (className) => {\n        if (this.leadingIcon) {\n          this.leadingIcon.classList.remove(className);\n        }\n      },\n      removeTrailingActionFocus: () => {\n        if (this.trailingAction) {\n          this.trailingAction.removeFocus();\n        }\n      },\n      setPrimaryActionAttr: (attr, value) => {\n        if (this.primaryAction) {\n          this.safeSetAttribute(this.primaryAction, attr, value);\n        }\n      },\n      setStyleProperty: (propertyName, value) => {\n        this.root.style.setProperty(propertyName, value);\n      },\n    };\n    return new MDCChipFoundation(adapter);\n  }\n\n  setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) {\n    this.foundation.setSelectedFromChipSet(selected, shouldNotifyClients);\n  }\n\n  focusPrimaryAction() {\n    this.foundation.focusPrimaryAction();\n  }\n\n  focusTrailingAction() {\n    this.foundation.focusTrailingAction();\n  }\n\n  removeFocus() {\n    this.foundation.removeFocus();\n  }\n\n  remove() {\n    const parent = this.root.parentNode;\n    if (parent !== null) {\n      parent.removeChild(this.root);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport enum Direction {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum EventSource {\n  PRIMARY = 'primary',\n  TRAILING = 'trailing',\n  NONE = 'none',\n}\n\nexport const strings = {\n  ADDED_ANNOUNCEMENT_ATTRIBUTE: 'data-mdc-chip-added-announcement',\n  ARIA_CHECKED: 'aria-checked',\n  ARROW_DOWN_KEY: 'ArrowDown',\n  ARROW_LEFT_KEY: 'ArrowLeft',\n  ARROW_RIGHT_KEY: 'ArrowRight',\n  ARROW_UP_KEY: 'ArrowUp',\n  BACKSPACE_KEY: 'Backspace',\n  CHECKMARK_SELECTOR: '.mdc-chip__checkmark',\n  DELETE_KEY: 'Delete',\n  END_KEY: 'End',\n  ENTER_KEY: 'Enter',\n  ENTRY_ANIMATION_NAME: 'mdc-chip-entry',\n  HOME_KEY: 'Home',\n  IE_ARROW_DOWN_KEY: 'Down',\n  IE_ARROW_LEFT_KEY: 'Left',\n  IE_ARROW_RIGHT_KEY: 'Right',\n  IE_ARROW_UP_KEY: 'Up',\n  IE_DELETE_KEY: 'Del',\n  INTERACTION_EVENT: 'MDCChip:interaction',\n  LEADING_ICON_SELECTOR: '.mdc-chip__icon--leading',\n  NAVIGATION_EVENT: 'MDCChip:navigation',\n  PRIMARY_ACTION_SELECTOR: '.mdc-chip__primary-action',\n  REMOVED_ANNOUNCEMENT_ATTRIBUTE: 'data-mdc-chip-removed-announcement',\n  REMOVAL_EVENT: 'MDCChip:removal',\n  SELECTION_EVENT: 'MDCChip:selection',\n  SPACEBAR_KEY: ' ',\n  TAB_INDEX: 'tabindex',\n  TRAILING_ACTION_SELECTOR: '.mdc-chip-trailing-action',\n  TRAILING_ICON_INTERACTION_EVENT: 'MDCChip:trailingIconInteraction',\n  TRAILING_ICON_SELECTOR: '.mdc-chip__icon--trailing',\n};\n\nexport const cssClasses = {\n  CHECKMARK: 'mdc-chip__checkmark',\n  CHIP_EXIT: 'mdc-chip--exit',\n  DELETABLE: 'mdc-chip--deletable',\n  EDITABLE: 'mdc-chip--editable',\n  EDITING: 'mdc-chip--editing',\n  HIDDEN_LEADING_ICON: 'mdc-chip__icon--leading-hidden',\n  LEADING_ICON: 'mdc-chip__icon--leading',\n  PRIMARY_ACTION: 'mdc-chip__primary-action',\n  PRIMARY_ACTION_FOCUSED: 'mdc-chip--primary-action-focused',\n  SELECTED: 'mdc-chip--selected',\n  TEXT: 'mdc-chip__text',\n  TRAILING_ACTION: 'mdc-chip__trailing-action',\n  TRAILING_ICON: 'mdc-chip__icon--trailing',\n};\n\nexport const navigationKeys = new Set<string>();\n// IE11 has no support for new Set with iterable so we need to initialize this\n// by hand\nnavigationKeys.add(strings.ARROW_LEFT_KEY);\nnavigationKeys.add(strings.ARROW_RIGHT_KEY);\nnavigationKeys.add(strings.ARROW_DOWN_KEY);\nnavigationKeys.add(strings.ARROW_UP_KEY);\nnavigationKeys.add(strings.END_KEY);\nnavigationKeys.add(strings.HOME_KEY);\nnavigationKeys.add(strings.IE_ARROW_LEFT_KEY);\nnavigationKeys.add(strings.IE_ARROW_RIGHT_KEY);\nnavigationKeys.add(strings.IE_ARROW_DOWN_KEY);\nnavigationKeys.add(strings.IE_ARROW_UP_KEY);\n\nexport const jumpChipKeys = new Set<string>();\n// IE11 has no support for new Set with iterable so we need to initialize this\n// by hand\njumpChipKeys.add(strings.ARROW_UP_KEY);\njumpChipKeys.add(strings.ARROW_DOWN_KEY);\njumpChipKeys.add(strings.HOME_KEY);\njumpChipKeys.add(strings.END_KEY);\njumpChipKeys.add(strings.IE_ARROW_UP_KEY);\njumpChipKeys.add(strings.IE_ARROW_DOWN_KEY);\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCChipTrailingActionNavigationEvent} from '../trailingaction/types';\n\nimport {MDCChipAdapter} from './adapter';\nimport {cssClasses, Direction, EventSource, jumpChipKeys, navigationKeys, strings} from './constants';\n\nconst emptyClientRect = {\n  bottom: 0,\n  height: 0,\n  left: 0,\n  right: 0,\n  top: 0,\n  width: 0,\n} as any;\n\nenum FocusBehavior {\n  SHOULD_FOCUS,\n  SHOULD_NOT_FOCUS,\n}\n\n/** MDC Chip Foundation */\nexport class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get defaultAdapter(): MDCChipAdapter {\n    return {\n      addClass: () => undefined,\n      addClassToLeadingIcon: () => undefined,\n      eventTargetHasClass: () => false,\n      focusPrimaryAction: () => undefined,\n      focusTrailingAction: () => undefined,\n      getAttribute: () => null,\n      getCheckmarkBoundingClientRect: () => emptyClientRect,\n      getComputedStyleValue: () => '',\n      getRootBoundingClientRect: () => emptyClientRect,\n      hasClass: () => false,\n      hasLeadingIcon: () => false,\n      isRTL: () => false,\n      isTrailingActionNavigable: () => false,\n      notifyEditFinish: () => undefined,\n      notifyEditStart: () => undefined,\n      notifyInteraction: () => undefined,\n      notifyNavigation: () => undefined,\n      notifyRemoval: () => undefined,\n      notifySelection: () => undefined,\n      notifyTrailingIconInteraction: () => undefined,\n      removeClass: () => undefined,\n      removeClassFromLeadingIcon: () => undefined,\n      removeTrailingActionFocus: () => undefined,\n      setPrimaryActionAttr: () => undefined,\n      setStyleProperty: () => undefined,\n    };\n  }\n\n  /**\n   * Whether a trailing icon click should immediately trigger exit/removal of\n   * the chip.\n   */\n  private shouldRemoveOnTrailingIconClick = true;\n\n  /**\n   * Whether the primary action should receive focus on click. Should only be\n   * set to true for clients who programmatically give focus to a different\n   * element on the page when a chip is clicked (like a menu).\n   */\n  private shouldFocusPrimaryActionOnClick = true;\n\n  constructor(adapter?: Partial<MDCChipAdapter>) {\n    super({...MDCChipFoundation.defaultAdapter, ...adapter});\n  }\n\n  isSelected() {\n    return this.adapter.hasClass(cssClasses.SELECTED);\n  }\n\n  isEditable() {\n    return this.adapter.hasClass(cssClasses.EDITABLE);\n  }\n\n  isEditing() {\n    return this.adapter.hasClass(cssClasses.EDITING);\n  }\n\n  setSelected(selected: boolean) {\n    this.setSelectedImpl(selected);\n    this.notifySelection(selected);\n  }\n\n  setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) {\n    this.setSelectedImpl(selected);\n    if (shouldNotifyClients) {\n      this.notifyIgnoredSelection(selected);\n    }\n  }\n\n  getShouldRemoveOnTrailingIconClick() {\n    return this.shouldRemoveOnTrailingIconClick;\n  }\n\n  setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) {\n    this.shouldRemoveOnTrailingIconClick = shouldRemove;\n  }\n\n  setShouldFocusPrimaryActionOnClick(shouldFocus: boolean) {\n    this.shouldFocusPrimaryActionOnClick = shouldFocus;\n  }\n\n  getDimensions(): DOMRect {\n    const getRootRect = () => this.adapter.getRootBoundingClientRect();\n    const getCheckmarkRect = () =>\n        this.adapter.getCheckmarkBoundingClientRect();\n\n    // When a chip has a checkmark and not a leading icon, the bounding rect\n    // changes in size depending on the current size of the checkmark.\n    if (!this.adapter.hasLeadingIcon()) {\n      const checkmarkRect = getCheckmarkRect();\n      if (checkmarkRect) {\n        const rootRect = getRootRect();\n        // Checkmark is a square, meaning the client rect's width and height are\n        // identical once the animation completes. However, the checkbox is\n        // initially hidden by setting the width to 0. To account for an initial\n        // width of 0, we use the checkbox's height instead (which equals the\n        // end-state width) when adding it to the root client rect's width.\n        return {\n          bottom: rootRect.bottom,\n          height: rootRect.height,\n          left: rootRect.left,\n          right: rootRect.right,\n          top: rootRect.top,\n          width: rootRect.width + checkmarkRect.height,\n        } as any;\n      }\n    }\n\n    return getRootRect();\n  }\n\n  /**\n   * Begins the exit animation which leads to removal of the chip.\n   */\n  beginExit() {\n    this.adapter.addClass(cssClasses.CHIP_EXIT);\n  }\n\n  handleClick() {\n    this.adapter.notifyInteraction();\n    this.setPrimaryActionFocusable(this.getFocusBehavior());\n  }\n\n  handleDoubleClick() {\n    if (this.isEditable()) {\n      this.startEditing();\n    }\n  }\n\n  /**\n   * Handles a transition end event on the root element.\n   */\n  handleTransitionEnd(event: TransitionEvent) {\n    // Handle transition end event on the chip when it is about to be removed.\n    const shouldHandle =\n        this.adapter.eventTargetHasClass(event.target, cssClasses.CHIP_EXIT);\n    const widthIsAnimating = event.propertyName === 'width';\n    const opacityIsAnimating = event.propertyName === 'opacity';\n\n    if (shouldHandle && opacityIsAnimating) {\n      // See:\n      // https://css-tricks.com/using-css-transitions-auto-dimensions/#article-header-id-5\n      const chipWidth = this.adapter.getComputedStyleValue('width');\n\n      // On the next frame (once we get the computed width), explicitly set the\n      // chip's width to its current pixel width, so we aren't transitioning out\n      // of 'auto'.\n      requestAnimationFrame(() => {\n        this.adapter.setStyleProperty('width', chipWidth);\n\n        // To mitigate jitter, start transitioning padding and margin before\n        // width.\n        this.adapter.setStyleProperty('padding', '0');\n        this.adapter.setStyleProperty('margin', '0');\n\n        // On the next frame (once width is explicitly set), transition width to\n        // 0.\n        requestAnimationFrame(() => {\n          this.adapter.setStyleProperty('width', '0');\n        });\n      });\n      return;\n    }\n\n    if (shouldHandle && widthIsAnimating) {\n      this.removeFocus();\n      const removedAnnouncement =\n          this.adapter.getAttribute(strings.REMOVED_ANNOUNCEMENT_ATTRIBUTE);\n\n      this.adapter.notifyRemoval(removedAnnouncement);\n    }\n\n    // Handle a transition end event on the leading icon or checkmark, since the\n    // transition end event bubbles.\n    if (!opacityIsAnimating) {\n      return;\n    }\n\n    const shouldHideLeadingIcon =\n        this.adapter.eventTargetHasClass(event.target, cssClasses.LEADING_ICON) &&\n        this.adapter.hasClass(cssClasses.SELECTED);\n    const shouldShowLeadingIcon =\n        this.adapter.eventTargetHasClass(event.target, cssClasses.CHECKMARK) &&\n        !this.adapter.hasClass(cssClasses.SELECTED);\n\n    if (shouldHideLeadingIcon) {\n      this.adapter.addClassToLeadingIcon(cssClasses.HIDDEN_LEADING_ICON);\n      return;\n    }\n\n    if (shouldShowLeadingIcon) {\n      this.adapter.removeClassFromLeadingIcon(cssClasses.HIDDEN_LEADING_ICON);\n      return;\n    }\n  }\n\n  handleFocusIn(event: FocusEvent) {\n    // Early exit if the event doesn't come from the primary action\n    if (!this.eventFromPrimaryAction(event)) {\n      return;\n    }\n\n    this.adapter.addClass(cssClasses.PRIMARY_ACTION_FOCUSED);\n  }\n\n  handleFocusOut(event: FocusEvent) {\n    // Early exit if the event doesn't come from the primary action\n    if (!this.eventFromPrimaryAction(event)) {\n      return;\n    }\n\n    if (this.isEditing()) {\n      this.finishEditing();\n    }\n\n    this.adapter.removeClass(cssClasses.PRIMARY_ACTION_FOCUSED);\n  }\n\n  /**\n   * Handles an interaction event on the trailing icon element. This is used to\n   * prevent the ripple from activating on interaction with the trailing icon.\n   */\n  handleTrailingActionInteraction() {\n    this.adapter.notifyTrailingIconInteraction();\n    this.removeChip();\n  }\n\n  /**\n   * Handles a keydown event from the root element.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isEditing()) {\n      if (this.shouldFinishEditing(event)) {\n        event.preventDefault();\n        this.finishEditing();\n      }\n      // When editing, the foundation should only handle key events that finish\n      // the editing process.\n      return;\n    }\n\n    if (this.isEditable()) {\n      if (this.shouldStartEditing(event)) {\n        event.preventDefault();\n        this.startEditing();\n      }\n    }\n\n    if (this.shouldNotifyInteraction(event)) {\n      this.adapter.notifyInteraction();\n      this.setPrimaryActionFocusable(this.getFocusBehavior());\n      return;\n    }\n\n    if (this.isDeleteAction(event)) {\n      event.preventDefault();\n      this.removeChip();\n      return;\n    }\n\n    // Early exit if the key is not usable\n    if (!navigationKeys.has(event.key)) {\n      return;\n    }\n\n    // Prevent default behavior for movement keys which could include scrolling\n    event.preventDefault();\n    this.focusNextAction(event.key, EventSource.PRIMARY);\n  }\n\n  handleTrailingActionNavigation(event: MDCChipTrailingActionNavigationEvent) {\n    this.focusNextAction(event.detail.key, EventSource.TRAILING);\n  }\n\n  /**\n   * Called by the chip set to remove focus from the chip actions.\n   */\n  removeFocus() {\n    this.adapter.setPrimaryActionAttr(strings.TAB_INDEX, '-1');\n    this.adapter.removeTrailingActionFocus();\n  }\n\n  /**\n   * Called by the chip set to focus the primary action.\n   *\n   */\n  focusPrimaryAction() {\n    this.setPrimaryActionFocusable(FocusBehavior.SHOULD_FOCUS);\n  }\n\n  /**\n   * Called by the chip set to focus the trailing action (if present), otherwise\n   * gives focus to the trailing action.\n   */\n  focusTrailingAction() {\n    const trailingActionIsNavigable = this.adapter.isTrailingActionNavigable();\n    if (trailingActionIsNavigable) {\n      this.adapter.setPrimaryActionAttr(strings.TAB_INDEX, '-1');\n      this.adapter.focusTrailingAction();\n      return;\n    }\n\n    this.focusPrimaryAction();\n  }\n\n  private setPrimaryActionFocusable(focusBehavior: FocusBehavior) {\n    this.adapter.setPrimaryActionAttr(strings.TAB_INDEX, '0');\n    if (focusBehavior === FocusBehavior.SHOULD_FOCUS) {\n      this.adapter.focusPrimaryAction();\n    }\n    this.adapter.removeTrailingActionFocus();\n  }\n\n  private getFocusBehavior(): FocusBehavior {\n    if (this.shouldFocusPrimaryActionOnClick) {\n      return FocusBehavior.SHOULD_FOCUS;\n    }\n    return FocusBehavior.SHOULD_NOT_FOCUS;\n  }\n\n  private focusNextAction(key: string, source: EventSource) {\n    const isTrailingActionNavigable = this.adapter.isTrailingActionNavigable();\n    const dir = this.getDirection(key);\n\n    // Early exit if the key should jump chips\n    if (jumpChipKeys.has(key) || !isTrailingActionNavigable) {\n      this.adapter.notifyNavigation(key, source);\n      return;\n    }\n\n    if (source === EventSource.PRIMARY && dir === Direction.RIGHT) {\n      this.focusTrailingAction();\n      return;\n    }\n\n    if (source === EventSource.TRAILING && dir === Direction.LEFT) {\n      this.focusPrimaryAction();\n      return;\n    }\n\n    this.adapter.notifyNavigation(key, EventSource.NONE);\n  }\n\n  private getDirection(key: string): Direction {\n    const isRTL = this.adapter.isRTL();\n    const isLeftKey =\n        key === strings.ARROW_LEFT_KEY || key === strings.IE_ARROW_LEFT_KEY;\n    const isRightKey =\n        key === strings.ARROW_RIGHT_KEY || key === strings.IE_ARROW_RIGHT_KEY;\n    if (!isRTL && isLeftKey || isRTL && isRightKey) {\n      return Direction.LEFT;\n    }\n\n    return Direction.RIGHT;\n  }\n\n  private removeChip() {\n    if (this.shouldRemoveOnTrailingIconClick) {\n      this.beginExit();\n    }\n  }\n\n  private shouldStartEditing(event: KeyboardEvent): boolean {\n    return this.eventFromPrimaryAction(event) && event.key === strings.ENTER_KEY;\n  }\n\n  private shouldFinishEditing(event: KeyboardEvent): boolean {\n    return event.key === strings.ENTER_KEY;\n  }\n\n  private shouldNotifyInteraction(event: KeyboardEvent): boolean {\n    return event.key === strings.ENTER_KEY || event.key === strings.SPACEBAR_KEY;\n  }\n\n  private isDeleteAction(event: KeyboardEvent): boolean {\n    const isDeletable = this.adapter.hasClass(cssClasses.DELETABLE);\n    return isDeletable &&\n        (event.key === strings.BACKSPACE_KEY || event.key === strings.DELETE_KEY ||\n         event.key === strings.IE_DELETE_KEY);\n  }\n\n  private setSelectedImpl(selected: boolean) {\n    if (selected) {\n      this.adapter.addClass(cssClasses.SELECTED);\n      this.adapter.setPrimaryActionAttr(strings.ARIA_CHECKED, 'true');\n    } else {\n      this.adapter.removeClass(cssClasses.SELECTED);\n      this.adapter.setPrimaryActionAttr(strings.ARIA_CHECKED, 'false');\n    }\n  }\n\n  private notifySelection(selected: boolean) {\n    this.adapter.notifySelection(selected, false);\n  }\n\n  private notifyIgnoredSelection(selected: boolean) {\n    this.adapter.notifySelection(selected, true);\n  }\n\n  private eventFromPrimaryAction(event: Event) {\n    return this.adapter.eventTargetHasClass(\n        event.target, cssClasses.PRIMARY_ACTION);\n  }\n\n  private startEditing() {\n    this.adapter.addClass(cssClasses.EDITING);\n    this.adapter.notifyEditStart();\n  }\n\n  private finishEditing() {\n    this.adapter.removeClass(cssClasses.EDITING);\n    this.adapter.notifyEditFinish();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport * from './types';\nexport {cssClasses as chipCssClasses, strings as chipStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/mdc-chip.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '../mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipple} from '../../../../mdc-ripple/index';\nimport {createFixture, html} from '../../../../../testing/dom';\nimport {emitEvent} from '../../../../../testing/dom/events';\nimport {createMockFoundation} from '../../../../../testing/helpers/foundation';\nimport {strings as trailingActionStrings} from '../../trailingaction/constants';\nimport {chipStrings, MDCChip, MDCChipFoundation} from '../index';\n\nconst {CHECKMARK_SELECTOR} = MDCChipFoundation.strings;\n\nfunction getFixture() {\n  return createFixture(html`\n  <div class=\"mdc-chip\" role=\"row\">\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip content</span>\n      </span>\n    </span>\n  </div>`);\n}\n\nfunction getFixtureWithCheckmark() {\n  return createFixture(html`\n  <div class=\"mdc-chip\">\n    <div class=\"mdc-chip__checkmark\" >\n      <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n        <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n    </div>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip content</span>\n      </span>\n    </span>\n  </div>`);\n}\n\nfunction addLeadingIcon(root: HTMLElement) {\n  const icon = createFixture(\n      html`<i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">face</i>`);\n\n  root.insertBefore(icon, root.firstChild);\n  return icon;\n}\n\nfunction addTrailingAction(root: HTMLElement, isFocusable?: boolean) {\n  const parent = createFixture(html`<span role=\"gridcell\"></span>`);\n\n  let innerHTML: ReturnType<typeof html>;\n  if (isFocusable) {\n    innerHTML =\n        html`<button class=\"mdc-chip-trailing-action\" aria-label=\"Remove chip\" tabindex=\"-1\">\n  <span class='mdc-chip-trailing-action__ripple'></span>\n  <span class=\"mdc-chip-trailing-action__icon material-icons\">close</span>\n</button>`;\n  } else {\n    innerHTML =\n        html`<button class=\"mdc-chip-trailing-action\" aria-hidden=\"true\">\n  <span class='mdc-chip-trailing-action__ripple'></span>\n  <span class=\"mdc-chip-trailing-action__icon material-icons\">close</span>\n</button>`;\n  }\n\n  const trailingAction = createFixture(innerHTML);\n\n  parent.appendChild(trailingAction);\n  root.appendChild(parent);\n  return trailingAction;\n}\n\nfunction addFocusableTrailingAction(root: HTMLElement) {\n  return addTrailingAction(root, true);\n}\n\nclass FakeRipple {\n  destroy: jasmine.Spy;\n\n  constructor(readonly root: HTMLElement|null) {\n    this.destroy = jasmine.createSpy('.destroy');\n  }\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCChip(root);\n  return {root, component};\n}\n\nfunction setupMockRippleTest() {\n  const root = getFixture();\n  const component = new MDCChip(root, undefined, () => new FakeRipple(null));\n  return {root, component};\n}\n\nfunction setupMockFoundationTest(root = getFixture()) {\n  const mockFoundation = createMockFoundation(MDCChipFoundation);\n  const component = new MDCChip(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCChip', () => {\n  it('attachTo returns an MDCChip instance', () => {\n    expect(MDCChip.attachTo(getFixture()) instanceof MDCChip).toBe(true);\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).toHaveBeenCalled();\n\n    emitEvent(root, 'transitionend');\n    expect(mockFoundation.handleTransitionEnd)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleTransitionEnd).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, 'focusin');\n    expect(mockFoundation.handleFocusIn)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleFocusIn).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, 'focusout');\n    expect(mockFoundation.handleFocusOut)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleFocusOut).toHaveBeenCalledTimes(1);\n  });\n\n  it('#initialSyncWithDOM sets up trailing action event handlers if present',\n     () => {\n       const root = getFixture();\n       addTrailingAction(root);\n       const {mockFoundation} = setupMockFoundationTest(root);\n\n       emitEvent(root, trailingActionStrings.INTERACTION_EVENT);\n       expect(mockFoundation.handleTrailingActionInteraction)\n           .toHaveBeenCalledTimes(1);\n       emitEvent(root, trailingActionStrings.NAVIGATION_EVENT);\n       expect(mockFoundation.handleTrailingActionNavigation)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component, mockFoundation} = setupMockFoundationTest();\n    component.destroy();\n\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).not.toHaveBeenCalled();\n\n    emitEvent(root, 'transitionend');\n    expect(mockFoundation.handleTransitionEnd)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n\n    emitEvent(root, 'focusin');\n    expect(mockFoundation.handleFocusIn)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n\n    emitEvent(root, 'focusout');\n    expect(mockFoundation.handleFocusOut)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#destroy removes trailing action event handlers if present', () => {\n    const root = getFixture();\n    addTrailingAction(root);\n    const {component, mockFoundation} = setupMockFoundationTest(root);\n\n    component.destroy();\n    emitEvent(root, trailingActionStrings.INTERACTION_EVENT);\n    expect(mockFoundation.handleTrailingActionInteraction)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Expected 0 arguments, but\n        //  got 1.\n        .not.toHaveBeenCalledWith(jasmine.anything());\n    emitEvent(root, trailingActionStrings.NAVIGATION_EVENT);\n    expect(mockFoundation.handleTrailingActionNavigation)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#destroy destroys ripple', () => {\n    const {component} = setupMockRippleTest();\n    component.destroy();\n    expect(component.ripple.destroy).toHaveBeenCalled();\n  });\n\n  it('get ripple returns MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBe(true);\n  });\n\n  it('sets id on chip if attribute exists', () => {\n    const root = createFixture(html`\n    <div class=\"mdc-chip\" id=\"hello-chip\">\n      <div class=\"mdc-chip__text\">Hello</div>\n    </div>\n  `);\n\n    const component = new MDCChip(root);\n    expect(component.id).toEqual('hello-chip');\n  });\n\n  it('adapter#hasClass returns true if class is set on chip set element',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#addClassToLeadingIcon adds a class to the leading icon element',\n     () => {\n       const root = getFixtureWithCheckmark();\n       const leadingIcon = addLeadingIcon(root);\n       const component = new MDCChip(root);\n\n       (component.getDefaultFoundation() as any)\n           .adapter.addClassToLeadingIcon('foo');\n       expect(leadingIcon).toHaveClass('foo');\n     });\n\n  it('adapter#addClassToLeadingIcon does nothing if no leading icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.addClassToLeadingIcon)\n           .not.toThrow();\n     });\n\n  it('adapter#removeClassFromLeadingIcon removes a class from the leading icon element',\n     () => {\n       const root = getFixtureWithCheckmark();\n       const leadingIcon = addLeadingIcon(root);\n       const component = new MDCChip(root);\n\n       leadingIcon.classList.add('foo');\n       (component.getDefaultFoundation() as any)\n           .adapter.removeClassFromLeadingIcon('foo');\n       expect(leadingIcon).not.toHaveClass('foo');\n     });\n\n  it('adapter#removeClassFromLeadingIcon does nothing if no leading icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.removeClassFromLeadingIcon)\n           .not.toThrow();\n     });\n\n  it('adapter#eventTargetHasClass returns true if given element has class',\n     () => {\n       const {component} = setupTest();\n       const mockEventTarget = createFixture(html`<div class=\"foo\">bar</div>`);\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.eventTargetHasClass(mockEventTarget, 'foo'))\n           .toBe(true);\n     });\n\n  it('adapter#notifyInteraction emits ' +\n         MDCChipFoundation.strings.INTERACTION_EVENT,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interaction handler');\n\n       component.listen(MDCChipFoundation.strings.INTERACTION_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyInteraction();\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#notifySelection emits ' +\n         MDCChipFoundation.strings.SELECTION_EVENT,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('selection handler');\n\n       component.listen(MDCChipFoundation.strings.SELECTION_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifySelection();\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#notifyTrailingIconInteraction emits ' +\n         MDCChipFoundation.strings.TRAILING_ICON_INTERACTION_EVENT,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interaction handler');\n\n       component.listen(\n           MDCChipFoundation.strings.TRAILING_ICON_INTERACTION_EVENT, handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.notifyTrailingIconInteraction();\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#notifyRemoval emits ' + MDCChipFoundation.strings.REMOVAL_EVENT,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interaction handler');\n\n       component.listen(MDCChipFoundation.strings.REMOVAL_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyRemoval();\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#notifyNavigation emits ' +\n         MDCChipFoundation.strings.NAVIGATION_EVENT,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interaction handler');\n\n       component.listen(MDCChipFoundation.strings.NAVIGATION_EVENT, handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.notifyNavigation(MDCChipFoundation.strings.ARROW_LEFT_KEY);\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#getComputedStyleValue returns property value from root element styles',\n     () => {\n       const {root, component} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getComputedStyleValue('color'))\n           .toEqual(window.getComputedStyle(root).getPropertyValue('color'));\n     });\n\n  it('adapter#setStyleProperty sets a style property on the root element',\n     () => {\n       const {root, component} = setupTest();\n       const color = 'blue';\n       (component.getDefaultFoundation() as any)\n           .adapter.setStyleProperty('color', color);\n       expect(root.style.getPropertyValue('color')).toEqual(color);\n     });\n\n  it('adapter#hasLeadingIcon returns true if the chip has a leading icon',\n     () => {\n       const root = getFixtureWithCheckmark();\n       addLeadingIcon(root);\n       const component = new MDCChip(root);\n\n       expect(\n           (component.getDefaultFoundation() as any).adapter.hasLeadingIcon())\n           .toBe(true);\n     });\n\n  it('adapter#hasLeadingIcon returns false if the chip does not have a leading icon',\n     () => {\n       const {component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any).adapter.hasLeadingIcon())\n           .toBe(false);\n     });\n\n  it('adapter#getRootBoundingClientRect calls getBoundingClientRect on the root element',\n     () => {\n       const {root, component} = setupTest();\n       root.getBoundingClientRect = jasmine.createSpy('');\n       (component.getDefaultFoundation() as any)\n           .adapter.getRootBoundingClientRect();\n       expect(root.getBoundingClientRect).toHaveBeenCalledTimes(1);\n     });\n\n  it('adapter#getCheckmarkBoundingClientRect calls getBoundingClientRect on the checkmark element if it exists',\n     () => {\n       const root = getFixtureWithCheckmark();\n       const component = new MDCChip(root);\n       const checkmark = root.querySelector<HTMLElement>(CHECKMARK_SELECTOR);\n\n       checkmark!.getBoundingClientRect = jasmine.createSpy('');\n       (component.getDefaultFoundation() as any)\n           .adapter.getCheckmarkBoundingClientRect();\n       expect(checkmark!.getBoundingClientRect).toHaveBeenCalledTimes(1);\n     });\n\n  it('adapter#getCheckmarkBoundingClientRect returns null when there is no checkmark element',\n     () => {\n       const {component} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getCheckmarkBoundingClientRect())\n           .toBe(null);\n     });\n\n  it('adapter#isRTL returns false if the text direction is not RTL', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    expect((component.getDefaultFoundation() as any).adapter.isRTL())\n        .toBe(false);\n    document.documentElement.removeChild(root);\n  });\n\n  it('adapter#isRTL returns true if the text direction is RTL', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    document.documentElement.setAttribute('dir', 'rtl');\n    expect((component.getDefaultFoundation() as any).adapter.isRTL())\n        .toBe(true);\n    document.documentElement.removeAttribute('dir');\n    document.documentElement.removeChild(root);\n  });\n\n  it('adapter#focusPrimaryAction gives focus to the primary action element',\n     () => {\n       const {component, root} = setupTest();\n       document.documentElement.appendChild(root);\n       (component.getDefaultFoundation() as any).adapter.focusPrimaryAction();\n       expect(document.activeElement)\n           .toEqual(root.querySelector<HTMLElement>(\n               chipStrings.PRIMARY_ACTION_SELECTOR));\n       document.documentElement.removeChild(root);\n     });\n\n  it('adapter#focusTrailingAction gives focus to the trailing icon element',\n     () => {\n       const root = getFixture();\n       const trailingAction = addTrailingAction(root);\n       document.documentElement.appendChild(root);\n       const component = new MDCChip(root);\n       (component.getDefaultFoundation() as any).adapter.focusTrailingAction();\n       expect(document.activeElement).toEqual(trailingAction);\n       document.documentElement.removeChild(root);\n     });\n\n  it('adapter#setPrimaryActionAttr sets the attribute on the text element',\n     () => {\n       const {root, component} = setupTest();\n       const primaryAction =\n           root.querySelector<HTMLElement>(chipStrings.PRIMARY_ACTION_SELECTOR);\n       (component.getDefaultFoundation() as any)\n           .adapter.setPrimaryActionAttr('tabindex', '-1');\n       expect(primaryAction!.getAttribute('tabindex')).toEqual('-1');\n     });\n\n  it('adapter#focusTrailingAction focuses the trailing action element', () => {\n    const root = getFixture();\n    const trailingAction = addFocusableTrailingAction(root);\n    document.documentElement.appendChild(root);\n    const component = new MDCChip(root);\n    (component.getDefaultFoundation() as any).adapter.focusTrailingAction();\n    expect(document.activeElement).toEqual(trailingAction);\n    document.documentElement.removeChild(root);\n    expect(trailingAction.getAttribute('tabindex')).toEqual('0');\n  });\n\n  it('adapter#removeTrailingActionFocus removes focus from the trailing action element',\n     () => {\n       const root = getFixture();\n       const trailingAction = addFocusableTrailingAction(root);\n       const component = new MDCChip(root);\n       (component.getDefaultFoundation() as any)\n           .adapter.removeTrailingActionFocus();\n       expect(trailingAction.getAttribute('tabindex')).toEqual('-1');\n     });\n\n  it('adapter#isTrailingActionNavigable returns true if focusable', () => {\n    const root = getFixture();\n    addFocusableTrailingAction(root);\n    const component = new MDCChip(root);\n    const got = (component.getDefaultFoundation() as any)\n                    .adapter.isTrailingActionNavigable();\n    expect(got).toEqual(true);\n  });\n\n  it('adapter#isTrailingActionNavigable returns false if absent', () => {\n    const root = getFixture();\n    const component = new MDCChip(root);\n    const got = (component.getDefaultFoundation() as any)\n                    .adapter.isTrailingActionNavigable();\n    expect(got).toEqual(false);\n  });\n\n  it('#get selected proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    expect(component.selected).toEqual(mockFoundation.isSelected());\n  });\n\n  it('#set selected proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.selected = true;\n    expect(mockFoundation.setSelected).toHaveBeenCalledWith(true);\n  });\n\n  it('#get shouldRemoveOnTrailingIconClick proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    expect(component.shouldRemoveOnTrailingIconClick)\n        .toEqual(mockFoundation.getShouldRemoveOnTrailingIconClick());\n  });\n\n  it('#set shouldRemoveOnTrailingIconClick proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.shouldRemoveOnTrailingIconClick = false;\n    expect(mockFoundation.setShouldRemoveOnTrailingIconClick)\n        .toHaveBeenCalledWith(false);\n  });\n\n  it('#set setShouldFocusPrimaryActionOnClick proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.setShouldFocusPrimaryActionOnClick = false;\n    expect(mockFoundation.setShouldFocusPrimaryActionOnClick)\n        .toHaveBeenCalledWith(false);\n  });\n\n  it('#setSelectedFromChipSet proxies to the same foundation method', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.setSelectedFromChipSet(true, false);\n    expect(mockFoundation.setSelectedFromChipSet)\n        .toHaveBeenCalledWith(true, false);\n  });\n\n  it('#beginExit proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.beginExit();\n    expect(mockFoundation.beginExit).toHaveBeenCalled();\n  });\n\n  it('#focusPrimaryAction proxies to the foundation#focusPrimaryAction', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.focusPrimaryAction();\n    expect(mockFoundation.focusPrimaryAction).toHaveBeenCalled();\n  });\n\n  it('#focusTrailingAction proxies to the foundation#focusTrailingAction',\n     () => {\n       const {component, mockFoundation} = setupMockFoundationTest();\n       component.focusTrailingAction();\n       expect(mockFoundation.focusTrailingAction).toHaveBeenCalled();\n     });\n\n  it('#removeFocus proxies to the foundation#removeFocus', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.removeFocus();\n    expect(mockFoundation.removeFocus).toHaveBeenCalled();\n  });\n\n  it('#remove removes the root from the DOM', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    component.remove();\n    expect(document.querySelector<HTMLElement>('.mdc-chip')).toEqual(null);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../../testing/helpers/setup';\nimport {MDCChipTrailingActionNavigationEvent} from '../../trailingaction/types';\nimport {EventSource} from '../constants';\nimport {MDCChipFoundation} from '../foundation';\n\nconst {cssClasses, strings} = MDCChipFoundation;\n\ndescribe('MDCChipFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports strings', () => {\n    expect('strings' in MDCChipFoundation).toBeTruthy();\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCChipFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCChipFoundation, [\n      'addClass',\n      'addClassToLeadingIcon',\n      'eventTargetHasClass',\n      'focusPrimaryAction',\n      'focusTrailingAction',\n      'getAttribute',\n      'getCheckmarkBoundingClientRect',\n      'getComputedStyleValue',\n      'getRootBoundingClientRect',\n      'hasClass',\n      'hasLeadingIcon',\n      'isRTL',\n      'isTrailingActionNavigable',\n      'notifyEditFinish',\n      'notifyEditStart',\n      'notifyInteraction',\n      'notifyNavigation',\n      'notifyRemoval',\n      'notifySelection',\n      'notifyTrailingIconInteraction',\n      'removeClass',\n      'removeClassFromLeadingIcon',\n      'removeTrailingActionFocus',\n      'setPrimaryActionAttr',\n      'setStyleProperty',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCChipFoundation);\n\n    mockAdapter.eventTargetHasClass.and.returnValue(false);\n    mockAdapter.hasClass.and.returnValue(false);\n\n    return {foundation, mockAdapter};\n  };\n\n  it('#isSelected returns true if mdc-chip--selected class is present', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.SELECTED).and.returnValue(true);\n    expect(foundation.isSelected()).toBe(true);\n  });\n\n  it('#isSelected returns false if mdc-chip--selected class is not present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.SELECTED)\n           .and.returnValue(false);\n       expect(foundation.isSelected()).toBe(false);\n     });\n\n  it('#setSelected adds mdc-chip--selected class if true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(true);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('#setSelected removes mdc-chip--selected class if false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(false);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n  });\n\n  it('#setSelected sets aria-checked=\"true\" if true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(true);\n    expect(mockAdapter.setPrimaryActionAttr)\n        .toHaveBeenCalledWith(strings.ARIA_CHECKED, 'true');\n  });\n\n  it('#setSelected sets aria-checked=\"false\" if false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(false);\n    expect(mockAdapter.setPrimaryActionAttr)\n        .toHaveBeenCalledWith(strings.ARIA_CHECKED, 'false');\n  });\n\n  it('#setSelected notifies of selection when selected is true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(true);\n    expect(mockAdapter.notifySelection).toHaveBeenCalledWith(true, false);\n  });\n\n  it('#setSelected notifies of unselection when selected is false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setSelected(false);\n    expect(mockAdapter.notifySelection).toHaveBeenCalledWith(false, false);\n  });\n\n  it('#setSelectedFromChipSet notifies of selection with shouldIgnore set to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setSelectedFromChipSet(true, true);\n       expect(mockAdapter.notifySelection).toHaveBeenCalledWith(true, true);\n     });\n\n  it('#isEditable returns true if mdc-chip--editable class is present', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.EDITABLE).and.returnValue(true);\n    expect(foundation.isEditable()).toBe(true);\n  });\n\n  it('#isEditable returns false if mdc-chip--editable class is not present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.EDITABLE)\n           .and.returnValue(false);\n       expect(foundation.isEditable()).toBe(false);\n     });\n\n  it('#isEditing returns true if mdc-chip--editing class is present', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.EDITING).and.returnValue(true);\n    expect(foundation.isEditing()).toBe(true);\n  });\n\n  it('#isEditing returns false if mdc-chip--editing class is not present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.EDITING).and.returnValue(false);\n       expect(foundation.isEditing()).toBe(false);\n     });\n\n  it('#getDimensions returns adapter.getRootBoundingClientRect when there is no checkmark bounding rect',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getCheckmarkBoundingClientRect.and.returnValue(null);\n       const boundingRect = {width: 10, height: 10};\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getRootBoundingClientRect.and.returnValue(boundingRect);\n\n       expect(foundation.getDimensions() === boundingRect).toBe(true);\n     });\n\n  it('#getDimensions factors in the checkmark bounding rect when it exists and there is no leading icon',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const boundingRect = {width: 10, height: 10};\n       const checkmarkBoundingRect = {width: 5, height: 5};\n       mockAdapter.getCheckmarkBoundingClientRect.and.returnValue(\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n           //  number; height: number; }' is not assignable to parameter of type\n           //  'DOMRect'.\n           checkmarkBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getRootBoundingClientRect.and.returnValue(boundingRect);\n       mockAdapter.hasLeadingIcon.and.returnValue(false);\n\n       const dimensions = foundation.getDimensions();\n       expect(dimensions.height).toEqual(boundingRect.height);\n       expect(dimensions.width)\n           .toEqual(boundingRect.width + checkmarkBoundingRect.height);\n     });\n\n  it('#getDimensions returns adapter.getRootBoundingClientRect when there is a checkmark and a leading icon',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const checkmarkBoundingRect = {width: 5, height: 5};\n       mockAdapter.getCheckmarkBoundingClientRect.and.returnValue(\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n           //  number; height: number; }' is not assignable to parameter of type\n           //  'DOMRect'.\n           checkmarkBoundingRect);\n       const boundingRect = {width: 10, height: 10};\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getRootBoundingClientRect.and.returnValue(boundingRect);\n       mockAdapter.hasLeadingIcon.and.returnValue(true);\n\n       expect(foundation.getDimensions() === boundingRect).toBe(true);\n     });\n\n  it(`#beginExit adds ${cssClasses.CHIP_EXIT} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.beginExit();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CHIP_EXIT);\n  });\n\n  it('#handleKeydown does not emit event on invalid key', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      type: 'keydown',\n      key: 'Shift',\n    } as KeyboardEvent;\n\n    foundation.handleKeydown(mockevent);\n    expect(mockAdapter.notifyInteraction).not.toHaveBeenCalled();\n    expect(mockAdapter.notifyNavigation).not.toHaveBeenCalled();\n  });\n\n  it(`#handleClick() notifies interaction`, () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.handleClick();\n    expect(mockAdapter.notifyInteraction).toHaveBeenCalled();\n  });\n\n  it('#handleClick() focuses the primary action by default', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.handleClick();\n    expect(mockAdapter.setPrimaryActionAttr)\n        .toHaveBeenCalledWith(strings.TAB_INDEX, '0');\n    expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n    expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n  });\n\n  it('#handleclick() does not focus the primary action when configured', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setShouldFocusPrimaryActionOnClick(false);\n\n    foundation.handleClick();\n    expect(mockAdapter.focusPrimaryAction).not.toHaveBeenCalled();\n  });\n\n  it('#handleDoubleClick() begins editing when editable', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.EDITABLE).and.returnValue(true);\n    foundation.handleDoubleClick();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.EDITING);\n    expect(mockAdapter.notifyEditStart).toHaveBeenCalled();\n  });\n\n  it('#handleDoubleClick() does nothing when not editable', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.EDITABLE).and.returnValue(false);\n    foundation.handleDoubleClick();\n    expect(mockAdapter.addClass).not.toHaveBeenCalled();\n    expect(mockAdapter.notifyEditStart).not.toHaveBeenCalled();\n  });\n\n  const validKeyDownTable = [\n    {\n      type: 'keydown',\n      key: 'Enter',\n    } as KeyboardEvent,\n    {\n      type: 'keydown',\n      key: ' ',  // Space bar\n    } as KeyboardEvent,\n  ];\n\n  for (const event of validKeyDownTable) {\n    it(`#handleKeydown(${event.key}) notifies interaction`, () => {\n      const {foundation, mockAdapter} = setupTest();\n\n      foundation.handleKeydown(event);\n      expect(mockAdapter.notifyInteraction).toHaveBeenCalled();\n    });\n\n    it(`#handleKeydown(${event.key}) focuses the primary action`, () => {\n      const {foundation, mockAdapter} = setupTest();\n\n      foundation.handleKeydown(event);\n      expect(mockAdapter.setPrimaryActionAttr)\n          .toHaveBeenCalledWith(strings.TAB_INDEX, '0');\n      expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n      expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n    });\n\n    it(`#handleKeydown(${\n           event.key}) does not focus the primary action when configured`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.setShouldFocusPrimaryActionOnClick(false);\n\n         foundation.handleKeydown(event);\n         expect(mockAdapter.focusPrimaryAction).not.toHaveBeenCalled();\n       });\n  }\n\n  it('#handleTransitionEnd notifies removal of chip on width transition end',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'width',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.notifyRemoval).toHaveBeenCalled();\n     });\n\n  it('#handleTransitionEnd notifies removal of chip with removal announcement if present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'width',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n       mockAdapter.getAttribute.and.returnValue('Removed foo');\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.notifyRemoval).toHaveBeenCalledWith('Removed foo');\n     });\n\n  it('#handleTransitionEnd animates width if chip is exiting on chip opacity transition end',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n       mockAdapter.getComputedStyleValue.and.returnValue('100px');\n\n       foundation.handleTransitionEnd(mockevent);\n\n       jasmine.clock().tick(1);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('width', '100px');\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('padding', '0');\n       expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('margin', '0');\n\n       jasmine.clock().tick(1);\n       expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('width', '0');\n     });\n\n  it(`#handleTransitionEnd adds ${\n         cssClasses.HIDDEN_LEADING_ICON} class to leading icon ` +\n         'on leading icon opacity transition end, if chip is selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass\n           .withArgs(mockevent.target, cssClasses.CHIP_EXIT)\n           .and.returnValue(false);\n       mockAdapter.eventTargetHasClass\n           .withArgs(mockevent.target, cssClasses.LEADING_ICON)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.SELECTED).and.returnValue(true);\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.addClassToLeadingIcon)\n           .toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n     });\n\n  it('#handleTransitionEnd does nothing on leading icon opacity transition end,' +\n         'if chip is not selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.addClassToLeadingIcon)\n           .not.toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n     });\n\n  it(`#handleTransitionEnd removes ${\n         cssClasses.HIDDEN_LEADING_ICON} class from leading icon ` +\n         'on checkmark opacity transition end, if chip is not selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass\n           .withArgs(mockevent.target, cssClasses.CHECKMARK)\n           .and.returnValue(true);\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.removeClassFromLeadingIcon)\n           .toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n     });\n\n  it('#handleTransitionEnd does nothing on checkmark opacity transition end, if chip is selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n       mockAdapter.hasClass.and.returnValue(true);\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.removeClassFromLeadingIcon)\n           .not.toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n     });\n\n  it('#handleTransitionEnd does nothing for width property when not exiting',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'transitionend',\n         target: {},\n         propertyName: 'width',\n       } as TransitionEvent;\n\n       foundation.handleTransitionEnd(mockevent);\n\n       expect(mockAdapter.notifyRemoval).not.toHaveBeenCalled();\n       expect(mockAdapter.addClassToLeadingIcon)\n           .not.toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n       expect(mockAdapter.removeClassFromLeadingIcon)\n           .not.toHaveBeenCalledWith(cssClasses.HIDDEN_LEADING_ICON);\n     });\n\n  it('#handleTrailingActionInteraction emits custom event', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.handleTrailingActionInteraction();\n    expect(mockAdapter.notifyTrailingIconInteraction).toHaveBeenCalled();\n  });\n\n  it(`#handleTrailingActionInteraction adds ${\n         cssClasses.CHIP_EXIT} class by default on click in trailing icon`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.handleTrailingActionInteraction();\n       expect(foundation.getShouldRemoveOnTrailingIconClick()).toBe(true);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CHIP_EXIT);\n     });\n\n  it(`#handleTrailingActionInteraction does not add ${\n         cssClasses.CHIP_EXIT} class on click in trailing icon ` +\n         'if shouldRemoveOnTrailingIconClick is false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.setShouldRemoveOnTrailingIconClick(false);\n       foundation.handleTrailingActionInteraction();\n       expect(foundation.getShouldRemoveOnTrailingIconClick()).toBe(false);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.CHIP_EXIT);\n     });\n\n  const navigationKeyTable = [\n    strings.ARROW_UP_KEY,\n    strings.IE_ARROW_UP_KEY,\n    strings.HOME_KEY,\n    strings.ARROW_DOWN_KEY,\n    strings.IE_ARROW_DOWN_KEY,\n    strings.END_KEY,\n  ];\n\n  for (const key of navigationKeyTable) {\n    it(`#handleKeydown emits custom event for key ${key}`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      const mockevent = {\n        type: 'keydown',\n        preventDefault: jasmine.createSpy('.preventDefault') as Function,\n        key,\n      } as KeyboardEvent;\n      foundation.handleKeydown(mockevent);\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.PRIMARY);\n    });\n  }\n\n  it('#handleKeydown calls preventDefault on navigation events', () => {\n    const {foundation} = setupTest();\n    const mockevent = {\n      type: 'keydown',\n      key: strings.ARROW_LEFT_KEY,\n      preventDefault: jasmine.createSpy('.preventDefault') as Function,\n    } as KeyboardEvent;\n\n    foundation.handleKeydown(mockevent);\n    expect(mockevent.preventDefault).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleKeydown does not emit a custom event for inappropriate keys',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockevent = {\n         type: 'keydown',\n         key: ' ',\n       } as KeyboardEvent;\n\n       foundation.handleKeydown(mockevent);\n       expect(mockAdapter.notifyNavigation)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n           //  got 1.\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n     });\n\n  it(`#handleFocusIn adds class ${\n         cssClasses\n             .PRIMARY_ACTION_FOCUSED} when the event comes from the primary action`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.eventTargetHasClass.and.returnValue(true);\n       const mockFocusIn = {\n         type: 'focusin',\n       } as FocusEvent;\n\n       foundation.handleFocusIn(mockFocusIn);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.PRIMARY_ACTION_FOCUSED);\n     });\n\n  it('#handleFocusIn adds no class when the event does not come from the primary action',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.eventTargetHasClass.and.returnValue(false);\n       const mockFocusIn = {\n         type: 'focusin',\n       } as FocusEvent;\n\n       foundation.handleFocusIn(mockFocusIn);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.PRIMARY_ACTION_FOCUSED);\n     });\n\n  function setupFocusOutTest(\n      {isEventFromPrimaryAction = false, isEditing = false} = {}) {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.eventTargetHasClass.and.returnValue(isEventFromPrimaryAction);\n    mockAdapter.hasClass.withArgs(cssClasses.EDITING)\n        .and.returnValue(isEditing);\n    return {mockAdapter, foundation};\n  }\n\n  it(`#handleFocusOut removes class ${\n         cssClasses\n             .PRIMARY_ACTION_FOCUSED} when the event comes from the primary action`,\n     () => {\n       const {mockAdapter, foundation} =\n           setupFocusOutTest({isEventFromPrimaryAction: true});\n       foundation.handleFocusOut({type: 'focusout'} as FocusEvent);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.PRIMARY_ACTION_FOCUSED);\n     });\n\n  it(`#handleFocusOut finishes editing when the chip is being edited and the event comes from the primary action`,\n     () => {\n       const {mockAdapter, foundation} =\n           setupFocusOutTest({isEventFromPrimaryAction: true, isEditing: true});\n       foundation.handleFocusOut({type: 'focusout'} as FocusEvent);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.EDITING);\n       expect(mockAdapter.notifyEditFinish).toHaveBeenCalled();\n     });\n\n  it(`#handleFocusOut does not finish editing when the chip is not being edited`,\n     () => {\n       const {mockAdapter, foundation} = setupFocusOutTest(\n           {isEventFromPrimaryAction: true, isEditing: false});\n       foundation.handleFocusOut({type: 'focusout'} as FocusEvent);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.EDITING);\n       expect(mockAdapter.notifyEditFinish).not.toHaveBeenCalled();\n     });\n\n  it('#handleFocusOut does nothing when the event does not come from the primary action',\n     () => {\n       const {mockAdapter, foundation} =\n           setupFocusOutTest({isEventFromPrimaryAction: false});\n       foundation.handleFocusOut({type: 'focusout'} as FocusEvent);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.PRIMARY_ACTION_FOCUSED);\n     });\n\n  function setupNavigationTest({\n    isTrailingActionNavigable = false,\n    isRTL = false,\n    isDeletable = false,\n    isEditable = false,\n    isEditing = false,\n    isEventFromPrimaryAction = false\n  } = {}) {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isTrailingActionNavigable.and.returnValue(\n        isTrailingActionNavigable);\n    mockAdapter.isRTL.and.returnValue(isRTL);\n    mockAdapter.hasClass.withArgs(cssClasses.DELETABLE)\n        .and.returnValue(isDeletable);\n    mockAdapter.hasClass.withArgs(cssClasses.EDITABLE)\n        .and.returnValue(isEditable);\n    mockAdapter.hasClass.withArgs(cssClasses.EDITING)\n        .and.returnValue(isEditing);\n    mockAdapter.eventTargetHasClass.and.returnValue(isEventFromPrimaryAction);\n    return {mockAdapter, foundation};\n  }\n\n  function mockKeyboardEvent(key: string) {\n    return {\n      type: 'keydown',\n      preventDefault: jasmine.createSpy('.preventDefault'),\n      stopPropagation: jasmine.createSpy('.stopPropagation'),\n      target: jasmine.createSpy('.target'),\n      key,\n    } as unknown as KeyboardEvent;\n  }\n\n  const rightKeyNavigationTable = [\n    strings.ARROW_RIGHT_KEY,\n    strings.IE_ARROW_RIGHT_KEY,\n  ];\n\n  const leftKeyNavigationTable = [\n    strings.ARROW_LEFT_KEY,\n    strings.IE_ARROW_LEFT_KEY,\n  ];\n\n  const removeKeyNavigationTable = [\n    strings.BACKSPACE_KEY,\n    strings.DELETE_KEY,\n    strings.IE_DELETE_KEY,\n  ];\n\n  const startEditingNavigationTable = [\n    strings.ENTER_KEY,\n  ];\n\n  const finishEditingNavigationTable = [\n    strings.ENTER_KEY,\n  ];\n\n  for (const key of leftKeyNavigationTable) {\n    it(`#handleKeydown ${key} emits appropriate event`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest();\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.PRIMARY);\n    });\n\n    it(`#handleKeydown ${key} emits appropriate event in RTL`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest({\n        isRTL: true,\n      });\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.PRIMARY);\n    });\n\n    it(`#handleTrailingActionNavigation ${key} emits appropriate event in RTL`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isRTL: true,\n         });\n         foundation.handleTrailingActionNavigation(\n             {detail: {key}} as MDCChipTrailingActionNavigationEvent);\n         expect(mockAdapter.notifyNavigation)\n             .toHaveBeenCalledWith(key, EventSource.TRAILING);\n       });\n\n    it(`#handleKeydown ${\n           key} with navigable trailing action focuses trailing action in RTL`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isRTL: true,\n           isTrailingActionNavigable: true,\n         });\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.setPrimaryActionAttr)\n             .toHaveBeenCalledWith('tabindex', '-1');\n         expect(mockAdapter.focusTrailingAction).toHaveBeenCalled();\n       });\n\n    it(`#handleTrailingActionNavigation ${\n           key} from navigable trailing action focuses primary action`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isTrailingActionNavigable: true,\n         });\n         foundation.handleTrailingActionNavigation(\n             {detail: {key}} as MDCChipTrailingActionNavigationEvent);\n         expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n         expect(mockAdapter.setPrimaryActionAttr)\n             .toHaveBeenCalledWith('tabindex', '0');\n         expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n       });\n  }\n\n  for (const key of rightKeyNavigationTable) {\n    it(`#handleKeydown ${key} emits appropriate event`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest();\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.PRIMARY);\n    });\n\n    it(`#handleKeydown ${key} emits appropriate event in RTL`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest({\n        isRTL: true,\n      });\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.PRIMARY);\n    });\n\n    it(`#handleTrailingActionNavigation ${key} emits appropriate event`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest();\n      foundation.handleTrailingActionNavigation(\n          {detail: {key}} as MDCChipTrailingActionNavigationEvent);\n      expect(mockAdapter.notifyNavigation)\n          .toHaveBeenCalledWith(key, EventSource.TRAILING);\n    });\n\n    it(`#handleKeydown ${\n           key} with navigable trailing action focuses trailing action`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isTrailingActionNavigable: true,\n         });\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.setPrimaryActionAttr)\n             .toHaveBeenCalledWith('tabindex', '-1');\n         expect(mockAdapter.focusTrailingAction).toHaveBeenCalled();\n       });\n\n    it(`#handleTrailingActionNavigation ${\n           key} from navigable trailing action focuses primary action in RTL`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isTrailingActionNavigable: true,\n           isRTL: true,\n         });\n         foundation.handleTrailingActionNavigation(\n             {detail: {key}} as MDCChipTrailingActionNavigationEvent);\n         expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n         expect(mockAdapter.setPrimaryActionAttr)\n             .toHaveBeenCalledWith('tabindex', '0');\n         expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n       });\n  }\n\n  for (const key of removeKeyNavigationTable) {\n    /**\n     * Verify deletability when class is present\n     */\n    it(`#handleKeydown ${\n           key} adds the chip exit class when deletable class is present on root`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupNavigationTest({isDeletable: true});\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.addClass)\n             .toHaveBeenCalledWith(cssClasses.CHIP_EXIT);\n       });\n\n    /**\n     * Verify no deletability when class is absent\n     */\n    it(`#handleKeydown ${key} does not add the chip exit class` +\n           ` when deletable class is absent from root`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest();\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.addClass)\n             .not.toHaveBeenCalledWith(cssClasses.CHIP_EXIT);\n       });\n  }\n\n  for (const key of startEditingNavigationTable) {\n    it(`#handleKeydown ${key} starts editing if editable and on primary action`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isEditable: true,\n           isEventFromPrimaryAction: true,\n         });\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.EDITING);\n         expect(mockAdapter.notifyEditStart).toHaveBeenCalled();\n       });\n\n    it(`#handleKeydown ${key} does nothing if not editable`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest({\n        isEventFromPrimaryAction: true,\n      });\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.EDITING);\n      expect(mockAdapter.notifyEditStart).not.toHaveBeenCalled();\n    });\n\n    it(`#handleKeydown ${key} does nothing if not on the primary action`,\n       () => {\n         const {foundation, mockAdapter} = setupNavigationTest({\n           isEditable: true,\n         });\n         foundation.handleKeydown(mockKeyboardEvent(key));\n         expect(mockAdapter.addClass)\n             .not.toHaveBeenCalledWith(cssClasses.EDITING);\n         expect(mockAdapter.notifyEditStart).not.toHaveBeenCalled();\n       });\n  }\n\n  for (const key of finishEditingNavigationTable) {\n    it(`#handleKeydown ${key} finishes editing if editing`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest({\n        isEditing: true,\n      });\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.EDITING);\n      expect(mockAdapter.notifyEditFinish).toHaveBeenCalled();\n    });\n\n    it(`#handleKeydown ${key} does not finish editing if not editing`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest();\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.removeClass)\n          .not.toHaveBeenCalledWith(cssClasses.EDITING);\n      expect(mockAdapter.notifyEditFinish).not.toHaveBeenCalled();\n    });\n\n    it(`#handleKeydown ${key} does not start editing after finishing`, () => {\n      const {foundation, mockAdapter} = setupNavigationTest({\n        isEditable: true,\n        isEditing: true,\n        isEventFromPrimaryAction: true,\n      });\n      foundation.handleKeydown(mockKeyboardEvent(key));\n      expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.EDITING);\n      expect(mockAdapter.notifyEditStart).not.toHaveBeenCalled();\n    });\n  }\n\n  it('#focusPrimaryAction() gives focus to the primary action', () => {\n    const {foundation, mockAdapter} = setupNavigationTest();\n    foundation.focusPrimaryAction();\n    expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n    expect(mockAdapter.setPrimaryActionAttr)\n        .toHaveBeenCalledWith('tabindex', '0');\n    expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n  });\n\n  it('#focusTrailingAction() gives focus to the primary action when the trailing action is absent',\n     () => {\n       const {foundation, mockAdapter} = setupNavigationTest();\n       mockAdapter.isTrailingActionNavigable.and.returnValue(false);\n       foundation.focusTrailingAction();\n       expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n       expect(mockAdapter.setPrimaryActionAttr)\n           .toHaveBeenCalledWith('tabindex', '0');\n       expect(mockAdapter.focusPrimaryAction).toHaveBeenCalled();\n     });\n\n  it('#focusTrailingAction() gives focus to the trailing action when the trailing action is present',\n     () => {\n       const {foundation, mockAdapter} = setupNavigationTest();\n       mockAdapter.isTrailingActionNavigable.and.returnValue(true);\n       foundation.focusTrailingAction();\n       expect(mockAdapter.setPrimaryActionAttr)\n           .toHaveBeenCalledWith('tabindex', '-1');\n       expect(mockAdapter.focusTrailingAction).toHaveBeenCalled();\n     });\n\n  it('#removeFocus() sets tabindex -1 on the primary and trailing action',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.removeFocus();\n       expect(mockAdapter.setPrimaryActionAttr)\n           .toHaveBeenCalledWith(strings.TAB_INDEX, '-1');\n       expect(mockAdapter.removeTrailingActionFocus).toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventSource} from './constants';\n\nexport interface MDCChipInteractionEventDetail {\n  chipId: string;\n}\n\nexport interface MDCChipSelectionEventDetail extends\n    MDCChipInteractionEventDetail {\n  selected: boolean;\n  shouldIgnore: boolean;\n}\n\nexport interface MDCChipRemovalEventDetail extends\n    MDCChipInteractionEventDetail {\n  removedAnnouncement: string|null;\n}\n\nexport interface MDCChipNavigationEventDetail extends\n    MDCChipInteractionEventDetail {\n  key: string;\n  source: EventSource;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCChipInteractionEvent extends Event {\n  readonly detail: MDCChipInteractionEventDetail;\n}\n\nexport interface MDCChipSelectionEvent extends Event {\n  readonly detail: MDCChipSelectionEventDetail;\n}\n\nexport interface MDCChipRemovalEvent extends Event {\n  readonly detail: MDCChipRemovalEventDetail;\n}\n\nexport interface MDCChipNavigationEvent extends Event {\n  readonly detail: MDCChipNavigationEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipSetAdapter {\n  /**\n   * @return true if the root element contains the given class name.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Removes the chip with the given index from the chip set.\n   * Make sure to remove it from the chip list, too.\n   */\n  removeChipAtIndex(index: number): void;\n\n  /**\n   * Sets the selected state of the chip at the given index.\n   */\n  selectChipAtIndex(\n      index: number, isSelected: boolean, shouldNotifyClients: boolean): void;\n\n  /**\n   * Returns the index of the chip at the given ID.\n   * @param chipId the unique ID of the chip\n   * @return the numerical index of the chip with the matching id or -1.\n   */\n  getIndexOfChipById(chipId: string): number;\n\n  /**\n   * Calls Chip#focusPrimaryAction() on the chip at the given index.\n   * @param index the index of the chip\n   */\n  focusChipPrimaryActionAtIndex(index: number): void;\n\n  /**\n   * Calls Chip#focusTrailingAction() on the chip at the given index.\n   * @param index the index of the chip\n   */\n  focusChipTrailingActionAtIndex(index: number): void;\n\n  /**\n   * Removes focus from the chip at the given index.\n   * @param index the index of the chip\n   */\n  removeFocusFromChipAtIndex(index: number): void;\n\n  /**\n   * @return true if the text direction is RTL.\n   */\n  isRTL(): boolean;\n\n  /**\n   * @return the number of chips in the chip set.\n   */\n  getChipListCount(): number;\n\n  /**\n   * Announces the message via an aria-live region.\n   */\n  announceMessage(message: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {announce} from '@material/dom/announce';\n\nimport {MDCChip, MDCChipFactory} from '../chip/component';\nimport {MDCChipFoundation} from '../chip/foundation';\nimport {MDCChipInteractionEvent, MDCChipNavigationEvent, MDCChipRemovalEvent, MDCChipSelectionEvent} from '../chip/types';\n\nimport {MDCChipSetAdapter} from './adapter';\nimport {MDCChipSetFoundation} from './foundation';\n\nconst {INTERACTION_EVENT, SELECTION_EVENT, REMOVAL_EVENT, NAVIGATION_EVENT} =\n    MDCChipFoundation.strings;\nconst {CHIP_SELECTOR} = MDCChipSetFoundation.strings;\n\nlet idCounter = 0;\n\n/** MDC Chip Set */\nexport class MDCChipSet extends MDCComponent<MDCChipSetFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCChipSet(root);\n  }\n\n  get chips(): readonly MDCChip[] {\n    return this.chipsList.slice();\n  }\n\n  /**\n   * @return An array of the IDs of all selected chips.\n   */\n  get selectedChipIds(): readonly string[] {\n    return this.foundation.getSelectedChipIds();\n  }\n\n  private chipsList!: MDCChip[];  // assigned in initialize()\n  private chipFactory!:\n      (el: HTMLElement) => MDCChip;  // assigned in initialize()\n  private handleChipInteraction!: (event: MDCChipInteractionEvent) =>\n      void;  // assigned in initialSyncWithDOM()\n  private handleChipSelection!:\n      (event: MDCChipSelectionEvent) => void;  // assigned in initialSyncWithDOM()\n  private handleChipRemoval!:\n      (event: MDCChipRemovalEvent) => void;  // assigned in initialSyncWithDOM()\n  private handleChipNavigation!: (event: MDCChipNavigationEvent) =>\n      void;  // assigned in initialSyncWithDOM()\n\n  /**\n   * @param chipFactory A function which creates a new MDCChip.\n   */\n  override initialize(chipFactory: MDCChipFactory = (el) => new MDCChip(el)) {\n    this.chipFactory = chipFactory;\n    this.chipsList = this.instantiateChips(this.chipFactory);\n  }\n\n  override initialSyncWithDOM() {\n    for (const chip of this.chipsList) {\n      if (chip.id && chip.selected) {\n        this.foundation.select(chip.id);\n      }\n    }\n\n    this.handleChipInteraction = (event) => {\n      this.foundation.handleChipInteraction(event.detail);\n    };\n    this.handleChipSelection = (event) => {\n      this.foundation.handleChipSelection(event.detail);\n    };\n    this.handleChipRemoval = (event) => {\n      this.foundation.handleChipRemoval(event.detail);\n    };\n    this.handleChipNavigation = (event) => {\n      this.foundation.handleChipNavigation(event.detail);\n    };\n    this.listen(INTERACTION_EVENT, this.handleChipInteraction);\n    this.listen(SELECTION_EVENT, this.handleChipSelection);\n    this.listen(REMOVAL_EVENT, this.handleChipRemoval);\n    this.listen(NAVIGATION_EVENT, this.handleChipNavigation);\n  }\n\n  override destroy() {\n    for (const chip of this.chipsList) {\n      chip.destroy();\n    }\n\n    this.unlisten(INTERACTION_EVENT, this.handleChipInteraction);\n    this.unlisten(SELECTION_EVENT, this.handleChipSelection);\n    this.unlisten(REMOVAL_EVENT, this.handleChipRemoval);\n    this.unlisten(NAVIGATION_EVENT, this.handleChipNavigation);\n\n    super.destroy();\n  }\n\n  /**\n   * Adds a new chip object to the chip set from the given chip element.\n   */\n  addChip(chipEl: HTMLElement) {\n    chipEl.id = chipEl.id || `mdc-chip-${++idCounter}`;\n    this.chipsList.push(this.chipFactory(chipEl));\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipSetAdapter = {\n      announceMessage: (message) => {\n        announce(message);\n      },\n      focusChipPrimaryActionAtIndex: (index) => {\n        this.chipsList[index].focusPrimaryAction();\n      },\n      focusChipTrailingActionAtIndex: (index) => {\n        this.chipsList[index].focusTrailingAction();\n      },\n      getChipListCount: () => this.chips.length,\n      getIndexOfChipById: (chipId) => {\n        return this.findChipIndex(chipId);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(\n                       'direction') === 'rtl',\n      removeChipAtIndex: (index) => {\n        if (index >= 0 && index < this.chips.length) {\n          this.chipsList[index].destroy();\n          this.chipsList[index].remove();\n          this.chipsList.splice(index, 1);\n        }\n      },\n      removeFocusFromChipAtIndex: (index) => {\n        this.chipsList[index].removeFocus();\n      },\n      selectChipAtIndex: (index, selected, shouldNotifyClients) => {\n        if (index >= 0 && index < this.chips.length) {\n          this.chipsList[index].setSelectedFromChipSet(\n              selected, shouldNotifyClients);\n        }\n      },\n    };\n    return new MDCChipSetFoundation(adapter);\n  }\n\n  /**\n   * Instantiates chip components on all of the chip set's child chip elements.\n   */\n  private instantiateChips(chipFactory: MDCChipFactory): MDCChip[] {\n    const chipElements =\n        Array.from(this.root.querySelectorAll<HTMLElement>(CHIP_SELECTOR));\n    return chipElements.map((el) => {\n      el.id = el.id || `mdc-chip-${++idCounter}`;\n      return chipFactory(el);\n    });\n  }\n\n  /**\n   * Returns the index of the chip with the given id, or -1 if the chip does not\n   * exist.\n   */\n  private findChipIndex(chipId: string): number {\n    for (let i = 0; i < this.chips.length; i++) {\n      if (this.chipsList[i].id === chipId) {\n        return i;\n      }\n    }\n    return -1;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const strings = {\n  CHIP_SELECTOR: '.mdc-chip',\n};\n\nexport const cssClasses = {\n  CHOICE: 'mdc-chip-set--choice',\n  FILTER: 'mdc-chip-set--filter',\n};\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {Direction, EventSource, jumpChipKeys, navigationKeys, strings as chipStrings} from '../chip/constants';\nimport {MDCChipInteractionEventDetail, MDCChipNavigationEventDetail, MDCChipRemovalEventDetail, MDCChipSelectionEventDetail} from '../chip/types';\n\nimport {MDCChipSetAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Chip Set Foundation */\nexport class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get defaultAdapter(): MDCChipSetAdapter {\n    return {\n      announceMessage: () => undefined,\n      focusChipPrimaryActionAtIndex: () => undefined,\n      focusChipTrailingActionAtIndex: () => undefined,\n      getChipListCount: () => -1,\n      getIndexOfChipById: () => -1,\n      hasClass: () => false,\n      isRTL: () => false,\n      removeChipAtIndex: () => undefined,\n      removeFocusFromChipAtIndex: () => undefined,\n      selectChipAtIndex: () => undefined,\n    };\n  }\n\n  /**\n   * The ids of the selected chips in the set. Only used for choice chip set or\n   * filter chip set.\n   */\n  private selectedChipIds: string[] = [];\n\n  constructor(adapter?: Partial<MDCChipSetAdapter>) {\n    super({...MDCChipSetFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * Returns an array of the IDs of all selected chips.\n   */\n  getSelectedChipIds(): readonly string[] {\n    return this.selectedChipIds.slice();\n  }\n\n  /**\n   * Selects the chip with the given id. Deselects all other chips if the chip\n   * set is of the choice variant. Does not notify clients of the updated\n   * selection state.\n   */\n  select(chipId: string) {\n    this.selectImpl(chipId, false);\n  }\n\n  /**\n   * Handles a chip interaction event\n   */\n  handleChipInteraction({chipId}: MDCChipInteractionEventDetail) {\n    const index = this.adapter.getIndexOfChipById(chipId);\n    this.removeFocusFromChipsExcept(index);\n    if (this.adapter.hasClass(cssClasses.CHOICE) ||\n        this.adapter.hasClass(cssClasses.FILTER)) {\n      this.toggleSelect(chipId);\n    }\n  }\n\n  /**\n   * Handles a chip selection event, used to handle discrepancy when selection\n   * state is set directly on the Chip.\n   */\n  handleChipSelection({chipId, selected, shouldIgnore}:\n                          MDCChipSelectionEventDetail) {\n    // Early exit if we should ignore the event\n    if (shouldIgnore) {\n      return;\n    }\n\n    const chipIsSelected = this.selectedChipIds.indexOf(chipId) >= 0;\n    if (selected && !chipIsSelected) {\n      this.select(chipId);\n    } else if (!selected && chipIsSelected) {\n      this.deselectImpl(chipId);\n    }\n  }\n\n  /**\n   * Handles the event when a chip is removed.\n   */\n  handleChipRemoval({chipId, removedAnnouncement}: MDCChipRemovalEventDetail) {\n    if (removedAnnouncement) {\n      this.adapter.announceMessage(removedAnnouncement);\n    }\n\n    const index = this.adapter.getIndexOfChipById(chipId);\n    this.deselectAndNotifyClients(chipId);\n    this.adapter.removeChipAtIndex(index);\n    const maxIndex = this.adapter.getChipListCount() - 1;\n    if (maxIndex < 0) {\n      return;\n    }\n    const nextIndex = Math.min(index, maxIndex);\n    this.removeFocusFromChipsExcept(nextIndex);\n    // After removing a chip, we should focus the trailing action for the next\n    // chip.\n    this.adapter.focusChipTrailingActionAtIndex(nextIndex);\n  }\n\n  /**\n   * Handles a chip navigation event.\n   */\n  handleChipNavigation({chipId, key, source}: MDCChipNavigationEventDetail) {\n    const maxIndex = this.adapter.getChipListCount() - 1;\n    let index = this.adapter.getIndexOfChipById(chipId);\n    // Early exit if the index is out of range or the key is unusable\n    if (index === -1 || !navigationKeys.has(key)) {\n      return;\n    }\n\n    const isRTL = this.adapter.isRTL();\n    const isLeftKey = key === chipStrings.ARROW_LEFT_KEY ||\n        key === chipStrings.IE_ARROW_LEFT_KEY;\n    const isRightKey = key === chipStrings.ARROW_RIGHT_KEY ||\n        key === chipStrings.IE_ARROW_RIGHT_KEY;\n    const isDownKey = key === chipStrings.ARROW_DOWN_KEY ||\n        key === chipStrings.IE_ARROW_DOWN_KEY;\n    const shouldIncrement =\n        !isRTL && isRightKey || isRTL && isLeftKey || isDownKey;\n    const isHome = key === chipStrings.HOME_KEY;\n    const isEnd = key === chipStrings.END_KEY;\n    if (shouldIncrement) {\n      index++;\n    } else if (isHome) {\n      index = 0;\n    } else if (isEnd) {\n      index = maxIndex;\n    } else {\n      index--;\n    }\n\n    // Early exit if the index is out of bounds\n    if (index < 0 || index > maxIndex) {\n      return;\n    }\n\n    this.removeFocusFromChipsExcept(index);\n    this.focusChipAction(index, key, source);\n  }\n\n  private focusChipAction(index: number, key: string, source: EventSource) {\n    const shouldJumpChips = jumpChipKeys.has(key);\n    if (shouldJumpChips && source === EventSource.PRIMARY) {\n      this.adapter.focusChipPrimaryActionAtIndex(index);\n      return;\n    }\n\n    if (shouldJumpChips && source === EventSource.TRAILING) {\n      this.adapter.focusChipTrailingActionAtIndex(index);\n      return;\n    }\n\n    const dir = this.getDirection(key);\n    if (dir === Direction.LEFT) {\n      this.adapter.focusChipTrailingActionAtIndex(index);\n      return;\n    }\n\n    if (dir === Direction.RIGHT) {\n      this.adapter.focusChipPrimaryActionAtIndex(index);\n      return;\n    }\n  }\n\n  private getDirection(key: string): Direction {\n    const isRTL = this.adapter.isRTL();\n    const isLeftKey = key === chipStrings.ARROW_LEFT_KEY ||\n        key === chipStrings.IE_ARROW_LEFT_KEY;\n    const isRightKey = key === chipStrings.ARROW_RIGHT_KEY ||\n        key === chipStrings.IE_ARROW_RIGHT_KEY;\n    if (!isRTL && isLeftKey || isRTL && isRightKey) {\n      return Direction.LEFT;\n    }\n\n    return Direction.RIGHT;\n  }\n\n  /**\n   * Deselects the chip with the given id and optionally notifies clients.\n   */\n  private deselectImpl(chipId: string, shouldNotifyClients = false) {\n    const index = this.selectedChipIds.indexOf(chipId);\n    if (index >= 0) {\n      this.selectedChipIds.splice(index, 1);\n      const chipIndex = this.adapter.getIndexOfChipById(chipId);\n      this.adapter.selectChipAtIndex(\n          chipIndex, /** isSelected */ false, shouldNotifyClients);\n    }\n  }\n\n  /**\n   * Deselects the chip with the given id and notifies clients.\n   */\n  private deselectAndNotifyClients(chipId: string) {\n    this.deselectImpl(chipId, true);\n  }\n\n  /**\n   * Toggles selection of the chip with the given id.\n   */\n  private toggleSelect(chipId: string) {\n    if (this.selectedChipIds.indexOf(chipId) >= 0) {\n      this.deselectAndNotifyClients(chipId);\n    } else {\n      this.selectAndNotifyClients(chipId);\n    }\n  }\n\n  private removeFocusFromChipsExcept(index: number) {\n    const chipCount = this.adapter.getChipListCount();\n    for (let i = 0; i < chipCount; i++) {\n      if (i !== index) {\n        this.adapter.removeFocusFromChipAtIndex(i);\n      }\n    }\n  }\n\n  private selectAndNotifyClients(chipId: string) {\n    this.selectImpl(chipId, true);\n  }\n\n  private selectImpl(chipId: string, shouldNotifyClients: boolean) {\n    if (this.selectedChipIds.indexOf(chipId) >= 0) {\n      return;\n    }\n\n    if (this.adapter.hasClass(cssClasses.CHOICE) &&\n        this.selectedChipIds.length > 0) {\n      const previouslySelectedChip = this.selectedChipIds[0];\n      const previouslySelectedIndex =\n          this.adapter.getIndexOfChipById(previouslySelectedChip);\n      this.selectedChipIds = [];\n      this.adapter.selectChipAtIndex(\n          previouslySelectedIndex, /** isSelected */ false,\n          shouldNotifyClients);\n    }\n    this.selectedChipIds.push(chipId);\n    const index = this.adapter.getIndexOfChipById(chipId);\n    this.adapter.selectChipAtIndex(\n        index, /** isSelected */ true, shouldNotifyClients);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipSetFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {cssClasses as chipSetCssClasses, strings as chipSetStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/mdc-chip-set.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '../mixins';\n@include mixins.set-core-styles;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../../../testing/dom';\nimport {emitEvent} from '../../../../../testing/dom/events';\nimport {createMockFoundation} from '../../../../../testing/helpers/foundation';\nimport {MDCChipFoundation} from '../../chip/index';\nimport {MDCChipSet, MDCChipSetFoundation} from '../index';\n\nconst getFixture = () => {\n  return createFixture(html`\n  <div class=\"mdc-chip-set\">\n    <div class=\"mdc-chip\" id=\"chip1\">\n      <div class=\"mdc-chip__text\">Chip content</div>\n    </div>\n    <div class=\"mdc-chip\" id=\"chip2\">\n      <div class=\"mdc-chip__text\">Chip content</div>\n    </div>\n    <div class=\"mdc-chip\" id=\"chip3\">\n      <div class=\"mdc-chip__text\">Chip content</div>\n    </div>\n  </div>`);\n};\n\ndescribe('MDCChipSet', () => {\n  it('attachTo returns an MDCChipSet instance', () => {\n    expect(MDCChipSet.attachTo(getFixture()) instanceof MDCChipSet)\n        .toBeTruthy();\n  });\n\n  class FakeChip {\n    id: string;\n    destroy: jasmine.Spy;\n    focusPrimaryAction: jasmine.Spy;\n    focusTrailingAction: jasmine.Spy;\n    remove: jasmine.Spy;\n    removeFocus: jasmine.Spy;\n    setSelectedFromChipSet: jasmine.Spy;\n\n    constructor(el: HTMLElement, readonly selected = false) {\n      this.id = el.id;\n      this.destroy = jasmine.createSpy('.destroy');\n      this.focusPrimaryAction = jasmine.createSpy('.focusPrimaryAction');\n      this.focusTrailingAction = jasmine.createSpy('.focusTrailingAction');\n      this.remove = jasmine.createSpy('.remove');\n      this.removeFocus = jasmine.createSpy('.removeFocus');\n      this.setSelectedFromChipSet =\n          jasmine.createSpy('.setSelectedFromChipSet');\n    }\n  }\n\n  function setupTest() {\n    const root = getFixture();\n    const component =\n        new MDCChipSet(root, undefined, (el: HTMLElement) => new FakeChip(el));\n    return {root, component};\n  }\n\n  function setupMockFoundationTest({hasSelection = false} = {}) {\n    const root = getFixture();\n    const mockFoundation = createMockFoundation(MDCChipSetFoundation);\n\n    if (!hasSelection) {\n      const component = new MDCChipSet(root, mockFoundation);\n      return {root, component, mockFoundation};\n    } else {\n      const component = new MDCChipSet(\n          root, mockFoundation, (el: HTMLElement) => new FakeChip(el, true));\n      return {root, component, mockFoundation};\n    }\n  }\n\n  it('#constructor instantiates child chip components', () => {\n    const {component} = setupTest();\n    expect(component.chips.length).toEqual(3);\n    expect(component.chips[0]).toEqual(jasmine.any(FakeChip));\n    expect(component.chips[1]).toEqual(jasmine.any(FakeChip));\n    expect(component.chips[2]).toEqual(jasmine.any(FakeChip));\n  });\n\n  it('#destroy cleans up child chip components', () => {\n    const {component} = setupTest();\n    component.destroy();\n    expect(component.chips[0].destroy).toHaveBeenCalled();\n    expect(component.chips[1].destroy).toHaveBeenCalled();\n    expect(component.chips[2].destroy).toHaveBeenCalled();\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n    const {\n      INTERACTION_EVENT,\n      ARROW_LEFT_KEY,\n      NAVIGATION_EVENT,\n      REMOVAL_EVENT,\n      SELECTION_EVENT\n    } = MDCChipFoundation.strings;\n\n    emitEvent(root, INTERACTION_EVENT, {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        chipId: 'chipA',\n      },\n    });\n\n    expect(mockFoundation.handleChipInteraction).toHaveBeenCalledWith({\n      chipId: 'chipA'\n    });\n    expect(mockFoundation.handleChipInteraction).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, SELECTION_EVENT, {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        chipId: 'chipA',\n        selected: true,\n        shouldIgnore: false,\n      },\n    });\n\n    expect(mockFoundation.handleChipSelection).toHaveBeenCalledWith({\n      chipId: 'chipA',\n      selected: true,\n      shouldIgnore: false,\n    });\n    expect(mockFoundation.handleChipSelection).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, REMOVAL_EVENT, {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        chipId: 'chipA',\n        removedAnnouncement: 'Removed foo',\n      },\n    });\n\n    expect(mockFoundation.handleChipRemoval).toHaveBeenCalledWith({\n      chipId: 'chipA',\n      removedAnnouncement: 'Removed foo'\n    });\n    expect(mockFoundation.handleChipRemoval).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, NAVIGATION_EVENT, {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        chipId: 'chipA',\n        key: ARROW_LEFT_KEY,\n        source: 1,\n      },\n    });\n\n    expect(mockFoundation.handleChipNavigation).toHaveBeenCalledWith({\n      chipId: 'chipA',\n      key: ARROW_LEFT_KEY,\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Type 'number' is not assignable\n      //  to type 'ExpectedRecursive<EventSource>'.\n      source: 1,\n    });\n    expect(mockFoundation.handleChipNavigation).toHaveBeenCalledTimes(1);\n  });\n\n  it('#initialSyncWithDOM calls MDCChipSetFoundation#select on the selected chips',\n     () => {\n       const {mockFoundation} = setupMockFoundationTest({hasSelection: true});\n       expect(mockFoundation.select).toHaveBeenCalledWith('chip1');\n       expect(mockFoundation.select).toHaveBeenCalledWith('chip2');\n       expect(mockFoundation.select).toHaveBeenCalledWith('chip3');\n     });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component, mockFoundation} = setupMockFoundationTest();\n    component.destroy();\n\n    emitEvent(root, MDCChipFoundation.strings.INTERACTION_EVENT);\n    expect(mockFoundation.handleChipInteraction).not.toHaveBeenCalled();\n\n    emitEvent(root, MDCChipFoundation.strings.SELECTION_EVENT);\n    expect(mockFoundation.handleChipSelection).not.toHaveBeenCalled();\n\n    emitEvent(root, MDCChipFoundation.strings.REMOVAL_EVENT);\n    expect(mockFoundation.handleChipRemoval).not.toHaveBeenCalled();\n\n    emitEvent(root, MDCChipFoundation.strings.NAVIGATION_EVENT);\n    expect(mockFoundation.handleChipNavigation).not.toHaveBeenCalled();\n  });\n\n  it('get selectedChipIds proxies to foundation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.selectedChipIds;\n    expect(mockFoundation.getSelectedChipIds).toHaveBeenCalled();\n  });\n\n  it('#addChip adds a new chip to the chip set', () => {\n    const {component} = setupTest();\n    // component.initialSyncWithDOM(); // TODO: why is this here?\n\n    const chipEl = createFixture(html`\n    <div class=\"mdc-chip\">\n      <div class=\"mdc-chip__text\">Hello world</div>\n    </div>`);\n    component.addChip(chipEl);\n\n    expect(component.chips.length).toEqual(4);\n    expect(component.chips[3]).toEqual(jasmine.any(FakeChip));\n  });\n\n  it('#adapter.hasClass returns true if class is set on chip set element',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('#adapter.removeChipAtIndex removes the chip object from the chip set',\n     () => {\n       const {component} = setupTest();\n       const chip = component.chips[0];\n       (component.getDefaultFoundation() as any).adapter.removeChipAtIndex(0);\n       expect(component.chips.length).toEqual(2);\n       expect(chip.destroy).toHaveBeenCalled();\n       expect(chip.remove).toHaveBeenCalled();\n     });\n\n  it('#adapter.removeChipAtIndex does nothing if the given object is not in the chip set',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.removeChipAtIndex(-1);\n       expect(component.chips.length).toEqual(3);\n     });\n\n  it('#adapter.selectChipAtIndex calls setSelectedFromChipSet on chip object',\n     () => {\n       const {component} = setupTest();\n       const chip = component.chips[0];\n       (component.getDefaultFoundation() as any)\n           .adapter.selectChipAtIndex(0, true, true);\n       expect(chip.setSelectedFromChipSet).toHaveBeenCalledWith(true, true);\n     });\n\n  it('#adapter.getChipListCount returns the number of chips', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.getChipListCount())\n        .toEqual(3);\n  });\n\n  it('#adapter.getIndexOfChipById returns the index of the chip', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any)\n               .adapter.getIndexOfChipById('chip1'))\n        .toEqual(0);\n  });\n\n  it('#adapter.focusChipPrimaryActionAtIndex focuses the primary action of the chip at the given index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.focusChipPrimaryActionAtIndex(0);\n       expect(component.chips[0].focusPrimaryAction).toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.focusChipTrailingActionAtIndex focuses the trailing action of the chip at the given index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.focusChipTrailingActionAtIndex(0);\n       expect(component.chips[0].focusTrailingAction).toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.removeFocusFromChipAtIndex removes focus from the chip at the given index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.removeFocusFromChipAtIndex(0);\n       expect(component.chips[0].removeFocus).toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.isRTL returns true if the text direction is RTL', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    document.documentElement.setAttribute('dir', 'rtl');\n    expect((component.getDefaultFoundation() as any).adapter.isRTL())\n        .toBe(true);\n    document.documentElement.removeAttribute('dir');\n    document.documentElement.removeChild(root);\n  });\n\n  it('#adapter.isRTL returns false if the text direction is not RTL', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    expect((component.getDefaultFoundation() as any).adapter.isRTL())\n        .toBe(false);\n    document.documentElement.removeChild(root);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/chip-set/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../../testing/helpers/setup';\nimport {EventSource, strings} from '../../../deprecated/chip/constants';\nimport {MDCChipSetFoundation} from '../../../deprecated/chip-set/foundation';\n\nconst {cssClasses} = MDCChipSetFoundation;\n\ndescribe('MDCChipSetFoundation', () => {\n  it('exports strings', () => {\n    expect('strings' in MDCChipSetFoundation).toBeTruthy();\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCChipSetFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCChipSetFoundation, [\n      'hasClass',\n      'removeChipAtIndex',\n      'selectChipAtIndex',\n      'focusChipPrimaryActionAtIndex',\n      'focusChipTrailingActionAtIndex',\n      'getIndexOfChipById',\n      'isRTL',\n      'getChipListCount',\n      'removeFocusFromChipAtIndex',\n      'announceMessage',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCChipSetFoundation);\n    mockAdapter.hasClass.withArgs(cssClasses.CHOICE).and.returnValue(false);\n    mockAdapter.hasClass.withArgs(cssClasses.FILTER).and.returnValue(false);\n    return {foundation, mockAdapter};\n  };\n\n  it('in choice chips, #select does nothing if chip is already selected',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.CHOICE).and.returnValue(true);\n       foundation.select('chipA');\n       foundation.select('chipA');\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, true, false);\n       expect(mockAdapter.selectChipAtIndex).toHaveBeenCalledTimes(1);\n       expect(foundation.getSelectedChipIds().length).toEqual(1);\n     });\n\n  it('in choice chips, #select selects chip if no chips are selected', () => {\n    const {foundation, mockAdapter} =\n        setupChipNavigationTest(['chipA', 'chipB']);\n    mockAdapter.hasClass.withArgs(cssClasses.CHOICE).and.returnValue(true);\n    expect(foundation.getSelectedChipIds().length).toEqual(0);\n\n    foundation.select('chipA');\n    expect(mockAdapter.selectChipAtIndex).toHaveBeenCalledWith(0, true, false);\n    expect(foundation.getSelectedChipIds().length).toEqual(1);\n  });\n\n  it('in choice chips, #select deselects chip if another chip is selected',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.CHOICE).and.returnValue(true);\n       foundation.select('chipB');\n       expect(foundation.getSelectedChipIds().length).toEqual(1);\n\n       foundation.select('chipA');\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(1, false, false);\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, true, false);\n       expect(foundation.getSelectedChipIds().length).toEqual(1);\n     });\n\n  it('in filter chips, #select selects multiple chips', () => {\n    const {foundation, mockAdapter} =\n        setupChipNavigationTest(['chipA', 'chipB']);\n    mockAdapter.hasClass.withArgs(cssClasses.FILTER).and.returnValue(true);\n    expect(foundation.getSelectedChipIds().length).toEqual(0);\n\n    foundation.select('chipA');\n    expect(mockAdapter.selectChipAtIndex).toHaveBeenCalledWith(0, true, false);\n    expect(foundation.getSelectedChipIds().length).toEqual(1);\n\n    foundation.select('chipB');\n    expect(mockAdapter.selectChipAtIndex).toHaveBeenCalledWith(1, true, false);\n    expect(foundation.getSelectedChipIds().length).toEqual(2);\n  });\n\n  it('in filter chips, #select does nothing if chip is already selected',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.FILTER).and.returnValue(true);\n       foundation.select('chipA');\n       foundation.select('chipA');\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, true, false);\n       expect(mockAdapter.selectChipAtIndex).toHaveBeenCalledTimes(1);\n       expect(foundation.getSelectedChipIds().length).toEqual(1);\n     });\n\n  it('in filter chips, #handleChipInteraction deselects chip if in selectedChipId',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.FILTER).and.returnValue(true);\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       foundation.handleChipInteraction({chipId: 'chipB'});\n       expect(foundation.getSelectedChipIds().length).toEqual(2);\n\n       foundation.handleChipInteraction({chipId: 'chipB'});\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(1, false, true);\n       expect(foundation.getSelectedChipIds().length).toEqual(1);\n\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, false, true);\n       expect(foundation.getSelectedChipIds().length).toEqual(0);\n     });\n\n  it('#handleChipInteraction selects chip if the chip set is a filter chip set and notifies clients',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.FILTER).and.returnValue(true);\n\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, true, /** notifies clients */ true);\n     });\n\n  it('#handleChipInteraction selects chip if the chip set is a choice chip set and notifies clients',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB']);\n       mockAdapter.hasClass.withArgs(cssClasses.CHOICE).and.returnValue(true);\n\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       expect(mockAdapter.selectChipAtIndex)\n           .toHaveBeenCalledWith(0, true, /** notifies clients */ true);\n     });\n\n  it('#handleChipInteraction removes focus from all chips except the selected one',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getChipListCount.and.returnValue(4);\n       mockAdapter.getIndexOfChipById.and.returnValue(1);\n\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(2);\n       expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(3);\n     });\n\n  it('#handleChipInteraction does nothing if the chip set is neither choice nor filter',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chipA', 'chipB', 'chipC']);\n\n       foundation.handleChipInteraction({chipId: 'chipA'});\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Expected 3 arguments, but\n       //  got 2.\n       expect(mockAdapter.selectChipAtIndex).not.toHaveBeenCalledWith(0, true);\n     });\n\n  it('#handleChipSelection selects an unselected chip if selected is true',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation['selectedChipIds'] = [];\n       foundation.select = jasmine.createSpy('');\n       foundation.handleChipSelection(\n           {chipId: 'chipA', selected: true, shouldIgnore: false});\n       expect(foundation.select).toHaveBeenCalledWith('chipA');\n     });\n\n  it('#handleChipSelection does nothing if selected is true and the chip is already selected',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation['selectedChipIds'] = ['chipA'];\n       foundation.select = jasmine.createSpy('');\n       foundation.handleChipSelection(\n           {chipId: 'chipA', selected: true, shouldIgnore: false});\n       expect(foundation.select).not.toHaveBeenCalledWith('chipA');\n     });\n\n  it('#handleChipSelection deselects a selected chip if selected is false',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation['selectedChipIds'] = ['chipA'];\n       foundation.handleChipSelection(\n           {chipId: 'chipA', selected: false, shouldIgnore: false});\n       expect(foundation['selectedChipIds'].length).toEqual(0);\n     });\n\n  it('#handleChipSelection does nothing if selected is false and the chip is not selected',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation['selectedChipIds'] = ['chipB'];\n       foundation.handleChipSelection(\n           {chipId: 'chipA', selected: false, shouldIgnore: false});\n       expect(foundation['selectedChipIds'].length).toEqual(1);\n     });\n\n  it('#handleChipSelection does nothing if shouldIgnore is true', () => {\n    const {foundation} = setupTest();\n\n    foundation['selectedChipIds'] = ['chipB'];\n    foundation.select = jasmine.createSpy('');\n    foundation.handleChipSelection(\n        {chipId: 'chipA', selected: true, shouldIgnore: true});\n    expect(foundation.select).not.toHaveBeenCalledWith('chipA');\n  });\n\n  it('#handleChipSelection emits no events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation['selectedChipIds'] = [];\n    mockAdapter.getIndexOfChipById.and.returnValue(0);\n\n    foundation.handleChipSelection(\n        {chipId: 'chipA', selected: true, shouldIgnore: false});\n    expect(mockAdapter.selectChipAtIndex)\n        .toHaveBeenCalledWith(0, true, /** shouldNotify */ false);\n    foundation.handleChipSelection(\n        {chipId: 'chipA', selected: false, shouldIgnore: false});\n    expect(mockAdapter.selectChipAtIndex)\n        .toHaveBeenCalledWith(0, false, /** shouldNotify */ false);\n  });\n\n  it('#handleChipRemoval removes chip', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getIndexOfChipById.and.returnValue(1);\n\n    foundation.handleChipRemoval({chipId: 'chipA', removedAnnouncement: null});\n    expect(mockAdapter.removeChipAtIndex).toHaveBeenCalledWith(1);\n  });\n\n  it('#handleChipRemoval removes focus from all chips except the next one',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getChipListCount.and.returnValue(4);\n       mockAdapter.getIndexOfChipById.and.returnValue(1);\n\n       foundation.handleChipRemoval(\n           {chipId: 'chipA', removedAnnouncement: null});\n       expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(2);\n     });\n\n  it('#handleChipRemoval gives focus to the next chip', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getChipListCount.and.returnValue(4);\n    mockAdapter.getIndexOfChipById.and.returnValue(1);\n\n    foundation.handleChipRemoval({chipId: 'chipA', removedAnnouncement: null});\n    expect(mockAdapter.focusChipTrailingActionAtIndex).toHaveBeenCalledWith(1);\n  });\n\n  it('#handleChipRemoval if empty do not focus', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getChipListCount.and.returnValue(0);\n    mockAdapter.getIndexOfChipById.and.returnValue(1);\n\n    foundation.handleChipRemoval({chipId: 'chipA', removedAnnouncement: null});\n    expect(mockAdapter.focusChipTrailingActionAtIndex).not.toHaveBeenCalled();\n  });\n\n  function setupChipNavigationTest(chipIds: string[], isRTL = false) {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getIndexOfChipById.and.callFake((id: string) => {\n      for (let i = 0; i < chipIds.length; i++) {\n        if (chipIds[i] === id) {\n          return i;\n        }\n      }\n      return -1;\n    });\n    mockAdapter.getChipListCount.and.returnValue(chipIds.length);\n    mockAdapter.isRTL.and.returnValue(isRTL);\n    return {foundation, mockAdapter};\n  }\n\n  it('#handleChipNavigation \"Space\" does nothing', () => {\n    const {foundation, mockAdapter} =\n        setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n    foundation.handleChipNavigation(\n        {chipId: 'chip1', key: 'Space', source: EventSource.NONE});\n    expect(mockAdapter.focusChipPrimaryActionAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n    expect(mockAdapter.focusChipTrailingActionAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  [strings.ARROW_RIGHT_KEY, strings.IE_ARROW_RIGHT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${key}\" focuses the next chip primary action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .toHaveBeenCalledWith(2);\n       });\n  });\n\n  [strings.ARROW_RIGHT_KEY, strings.IE_ARROW_RIGHT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" removes focus from all chips except the next one`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2', 'chip3']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(0);\n         expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(1);\n         expect(mockAdapter.removeFocusFromChipAtIndex).toHaveBeenCalledWith(3);\n       });\n  });\n\n  [strings.ARROW_LEFT_KEY,\n   strings.IE_ARROW_LEFT_KEY,\n   strings.ARROW_RIGHT_KEY,\n   strings.IE_ARROW_RIGHT_KEY,\n   strings.ARROW_UP_KEY,\n   strings.IE_ARROW_UP_KEY,\n   strings.ARROW_DOWN_KEY,\n   strings.IE_ARROW_DOWN_KEY,\n   strings.HOME_KEY,\n   strings.END_KEY,\n  ].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" removes focus from N-1 chips (all except the next)`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2', 'chip3']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', source: EventSource.PRIMARY, key});\n         expect(mockAdapter.removeFocusFromChipAtIndex)\n             .toHaveBeenCalledWith(jasmine.any(Number));\n         expect(mockAdapter.removeFocusFromChipAtIndex)\n             .toHaveBeenCalledTimes(3);\n       });\n  });\n\n  [strings.ARROW_RIGHT_KEY, strings.IE_ARROW_RIGHT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" focuses the previous chip trailing action in RTL`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2'], true);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .toHaveBeenCalledWith(0);\n       });\n  });\n\n  [strings.ARROW_DOWN_KEY, strings.IE_ARROW_DOWN_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${key}\" focuses the next chip primary action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .toHaveBeenCalledWith(2);\n       });\n  });\n\n  [strings.ARROW_DOWN_KEY, strings.IE_ARROW_DOWN_KEY].forEach((key) => {\n    it('#handleChipNavigation \"${key}\" from the trailing action focuses the next chip trailing action',\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.TRAILING});\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .toHaveBeenCalledWith(2);\n       });\n  });\n\n  it('#handleChipNavigation \"Home\" focuses the first chip primary action',\n     () => {\n       const {foundation, mockAdapter} =\n           setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n       foundation.handleChipNavigation({\n         chipId: 'chip1',\n         key: strings.HOME_KEY,\n         source: EventSource.PRIMARY\n       });\n       expect(mockAdapter.focusChipPrimaryActionAtIndex)\n           .toHaveBeenCalledWith(0);\n     });\n\n  it('#handleChipNavigation \"End\" focuses the last chip primary action', () => {\n    const {foundation, mockAdapter} =\n        setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n    foundation.handleChipNavigation(\n        {chipId: 'chip1', key: strings.END_KEY, source: EventSource.PRIMARY});\n    expect(mockAdapter.focusChipPrimaryActionAtIndex).toHaveBeenCalledWith(2);\n  });\n\n  [strings.ARROW_RIGHT_KEY, strings.IE_ARROW_RIGHT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" from the last chip does not focus any chip action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip2', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n       });\n  });\n\n  [strings.ARROW_DOWN_KEY, strings.IE_ARROW_DOWN_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"{$key}\" from the last chip does not focus any chip action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip2', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n       });\n  });\n\n  [strings.ARROW_LEFT_KEY, strings.IE_ARROW_LEFT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"{$key}\" focuses the previous chip trailing action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.TRAILING});\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .toHaveBeenCalledWith(0);\n       });\n  });\n\n  [strings.ARROW_LEFT_KEY, strings.IE_ARROW_LEFT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" focuses the next chip primary action in RTL`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2'], true);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip1', key, source: EventSource.TRAILING});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .toHaveBeenCalledWith(2);\n       });\n  });\n\n  [strings.ARROW_LEFT_KEY, strings.IE_ARROW_LEFT_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" from the first chip does not focus any chip action`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip0', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n       });\n  });\n\n  [strings.ARROW_UP_KEY, strings.IE_ARROW_UP_KEY].forEach((key) => {\n    it(`#handleChipNavigation \"${\n           key}\" from the first chip does not focus any chip`,\n       () => {\n         const {foundation, mockAdapter} =\n             setupChipNavigationTest(['chip0', 'chip1', 'chip2']);\n\n         foundation.handleChipNavigation(\n             {chipId: 'chip0', key, source: EventSource.PRIMARY});\n         expect(mockAdapter.focusChipPrimaryActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n         expect(mockAdapter.focusChipTrailingActionAtIndex)\n             .not.toHaveBeenCalledWith(jasmine.any(Number));\n       });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './trailingaction/index';\nexport * from './chip/index';\nexport * from './chip-set/index';\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/mdc-chips.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/checkbox/variables\" as mdc-checkbox-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"variables\" as mdc-chip-*;\n@forward \"mixins\" as mdc-chip-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/checkbox/functions\" as mdc-checkbox-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"mdc-chips\";\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/mdc-chips.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './trailingaction/mdc-chip-trailing-action';\n@use './chip/mdc-chip';\n@use './chip-set/mdc-chip-set';\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as chips;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include chips.core-styles($query: $query);\n    @include chips.elevation-transition($query: $query);\n    @include chips.density(-1, $query: $query);\n    @include chips.fill-color(red, $query: $query);\n    @include chips.fill-color-accessible(red, $query: $query);\n    @include chips.height(0, $query: $query);\n    @include chips.horizontal-padding(0, $query: $query);\n    @include chips.ink-color(red, $query: $query);\n    @include chips.leading-icon-color(red, $query: $query);\n    @include chips.leading-icon-margin($query: $query);\n    @include chips.leading-icon-size(0, $query: $query);\n    @include chips.outline($query: $query);\n    @include chips.outline-color(red, $query: $query);\n    @include chips.outline-style(soild, $query: $query);\n    @include chips.outline-width(0, $query: $query);\n    @include chips.ripple($query: $query);\n    @include chips.selected-ink-color(red, $query: $query);\n    @include chips.set-core-styles($query: $query);\n    @include chips.set-spacing(0, $query: $query);\n    @include chips.shape-radius(0, $query: $query);\n    @include chips.trailing-icon-color(red, $query: $query);\n    @include chips.trailing-icon-margin($query: $query);\n    @include chips.trailing-icon-size(0, $query: $query);\n    @include chips.without-ripple($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/test/mdc-chips.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../../testing/featuretargeting';\n\ndescribe('mdc-chips.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/README.md",
    "content": "# Trailing Action (deprecated)\n\nThe trailing action is used in removable input chips. It is a subcomponent of the chips and intended only for use in the context of a chip.\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<button class=\"mdc-deprecated-chip-trailing-action\"\n        aria-label=\"Remove chip\"\n        tabindex=\"-1\">\n  <span class=\"mdc-deprecated-chip-trailing-action__ripple\"></span>\n  <span class=\"mdc-deprecated-chip-trailing-action__icon material-icons\">close</span>\n</button>\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/mdc-deprecated-chip-trailing-action\";\n```\n\n## Variants\n\n### Non-navigable trailing action\n\nIn some cases, the trailing action should be non-navigable. To accomplish this, swap the `aria-label` for `aria-hidden=\"true\"`.\n\n```html\n<button class=\"mdc-deprecated-chip-trailing-action\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\">\n  <span class=\"mdc-deprecated-chip-trailing-action__icon material-icons\">close</span>\n</button>\n```\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your trailing action:\n\n```html\n<button class=\"mdc-deprecated-chip-trailing-action\"\n        aria-label=\"Remove chip\"\n        tabindex=\"-1\">\n  <span class=\"mdc-deprecated-chip-trailing-action__ripple\"></span>\n  <span class=\"mdc-deprecated-chip-trailing-action__touch\"></span>\n  <span class=\"mdc-deprecated-chip-trailing-action__icon material-icons\">close</span>\n</button>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-deprecated-chip-trailing-action` | Mandatory.\n`mdc-deprecated-chip-trailing-action__icon` | Mandatory. Indicates the chip icon.\n`mdc-deprecated-chip-trailing-action__ripple` | Mandatory. Indicates the chip ripple.\n`mdc-deprecated-chip-trailing-action__touch` | Optional. Renders an accessible touch target.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Sets the trailing action color\n`size($size)` | Sets the trailing action size\n`horizontal-spacing($left, $right)` | Sets the trailing action horizontal spacing\n`touch-target-width($width)` | Sets the trailing action touch target width\n\n\n## `MDCChipTrailingAction` Methods\n\nMethod Signature | Description\n--- | ---\n`removeFocus() => void` | Proxies to the foundation's `removeFocus` method\n`focus() => void` | Proxies to the foundation's `focus` method\n`isNavigable() => void` | Proxies to the foundation's `isNavigable` method\n\n##### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCChipTrailingAction:interaction` | `{trigger: InteractionTrigger}` | Indicates the trailing action was interacted with via mouse or keyboard\n`MDCChipTrailingAction:navigation` | `{key: string}` | Indicates a navigation event has occurred on a trailing action\n\n> _NOTE_: All of `MDCChipTrailingAction`'s emitted events bubble up through the DOM.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCChipTrailingActionAdapter`\n\nSee [`component.ts`](component.ts) for a vanilla DOM implementations of the adapter API for reference.\n\nMethod Signature | Description\n--- | ---\n`focus() => void` | Gives focus to the root element\n`getAttribute(attr: string) => string|null` | Returns the attribute value, if present\n`notifyInteraction(trigger: InteractionTrigger) => void` | Notifies the Chip  that the trailing action has been interacted with\n`notifyNavigation(key: string) => void` | Notifies the Chip that the trailing action was navigated\n`setAttribute(attr: string, value: string) => void` | Sets an attribute on the root to the given value\n\n### `MDCChipTrailingActionFoundation`\n\nMethod Signature | Description\n--- | ---\n`removeFocus() => void` | Removes focus from the trailing action\n`focus() => void` | Gives focus to the trailing action\n`isNavigable() => boolean` | Returns the navigability of the trailing action\n`handleClick(event: MouseEvent) => void` | Handles a click event on the root element\n`handleKeydown(event: KeyboardEvent) => void` | Handles a keydown event on the root element\n\n#### `MDCChipTrailingActionFoundation` Event Handlers\n\nWhen wrapping the trailing action foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-deprecated-chip-trailing-action` (root) | `handleClick()`\n`keydown` | `.mdc-deprecated-chip-trailing-action` (root) | `handleKeydown()`\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/_mixins.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/mixins' as rtl;\n@use '@material/theme/theme';\n@use '@material/touch-target/mixins' as touch;\n@use './variables';\n\n$ripple-target: '.mdc-deprecated-chip-trailing-action__ripple';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query: $query);\n  @include ripple($query: $query);\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include touch.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n  @include _touch-target-base($query);\n\n  .mdc-deprecated-chip-trailing-action {\n    @include size(variables.$size, $query);\n    @include color(variables.$color, $query);\n    @include touch-target-width(variables.$touch-target-width, $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      border: none;\n      display: inline-flex;\n      position: relative;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      padding: 0;\n      outline: none;\n      cursor: pointer;\n      -webkit-appearance: none;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      background: none;\n    }\n\n    // Nested to increase specificity, ensuring SVG and font icon\n    // color is affected regardless of load order without needing\n    // !important or HTML tag targetting.\n    .mdc-deprecated-chip-trailing-action__icon {\n      @include feature-targeting.targets($feat-color) {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-deprecated-chip-trailing-action {\n    @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n    @include ripple.radius-unbounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include ripple-theme.states(\n      variables.$ripple-color,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n\n    #{$ripple-target} {\n      @include feature-targeting.targets($feat-structure) {\n        position: absolute;\n        // Ripple needs content-box as the box sizing and box-sizing: border-box\n        // is often set as a default, so we override that here.\n        box-sizing: content-box;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n    }\n  }\n}\n\n/// Set the color of the trailing action\n/// @param {Color} $color The trailing action color\n@mixin color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-chip-trailing-action {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n/// Set the size of the trailing action\n/// @param {Number} $number The size of the trailing action\n@mixin size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-deprecated-chip-trailing-action__icon {\n    @include feature-targeting.targets($feat-structure) {\n      height: $size;\n      width: $size;\n      font-size: $size;\n    }\n  }\n}\n\n/// Set the horizontal spacing of the trailing action\n/// @param {Number} $left The left spacing\n/// @param {Number} $right The right spacing\n@mixin horizontal-spacing($left, $right, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-deprecated-chip-trailing-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, $left, $right);\n    }\n  }\n}\n\n/// Set the width of the touch target\n/// @param {Number} $width The width of the touch target\n@mixin touch-target-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-deprecated-chip-trailing-action__touch {\n    @include feature-targeting.targets($feat-structure) {\n      width: $width;\n    }\n  }\n}\n\n/// Private mixins\n\n@mixin _touch-target-base($query: feature-targeting.all()) {\n  .mdc-deprecated-chip-trailing-action__touch {\n    @include touch.touch-target($set-width: true, $query: $query);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/_variables.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$size: 18px !default;\n$margin-right: -4px !default;\n$margin-left: 4px !default;\n$touch-target-width: 26px !default;\n$color: on-surface !default;\n$ripple-color: on-surface !default;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {InteractionTrigger} from './constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCChipTrailingActionAdapter {\n  focus(): void;\n\n  getAttribute(attr: string): string|null;\n\n  notifyInteraction(trigger: InteractionTrigger): void;\n\n  notifyNavigation(key: string): void;\n\n  setAttribute(attr: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCChipTrailingActionAdapter} from './adapter';\nimport {strings} from './constants';\nimport {MDCChipTrailingActionFoundation} from './foundation';\nimport {MDCChipTrailingActionInteractionEventDetail, MDCChipTrailingActionNavigationEventDetail} from './types';\n\n/**\n * Creates a trailing action component on the given element.\n */\nexport type MDCChipTrailingActionFactory =\n    (el: HTMLElement, foundation?: MDCChipTrailingActionFoundation) =>\n        MDCChipTrailingAction;\n\n/** MDC Chip Trailing Action */\nexport class MDCChipTrailingAction extends\n    MDCComponent<MDCChipTrailingActionFoundation> implements\n        MDCRippleCapableSurface {\n  get ripple(): MDCRipple {\n    return this.rippleSurface;\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCChipTrailingAction(root);\n  }\n\n  private rippleSurface!: MDCRipple;  // assigned in initialize()\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n\n  override initialize(\n      rippleFactory: MDCRippleFactory = (el, foundation) =>\n          new MDCRipple(el, foundation)) {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const rippleAdapter: MDCRippleAdapter = MDCRipple.createAdapter(this);\n    this.rippleSurface =\n        rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));\n  }\n\n  override initialSyncWithDOM() {\n    this.handleClick = (event: MouseEvent) => {\n      this.foundation.handleClick(event);\n    };\n    this.handleKeydown = (event: KeyboardEvent) => {\n      this.foundation.handleKeydown(event);\n    };\n\n    this.listen('click', this.handleClick);\n    this.listen('keydown', this.handleKeydown);\n  }\n\n  override destroy() {\n    this.rippleSurface.destroy();\n    this.unlisten('click', this.handleClick);\n    this.unlisten('keydown', this.handleKeydown);\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipTrailingActionAdapter = {\n      focus: () => {\n        this.root.focus();\n      },\n      getAttribute: (attr) => this.root.getAttribute(attr),\n      notifyInteraction: (trigger) => {\n        this.emit<MDCChipTrailingActionInteractionEventDetail>(\n            strings.INTERACTION_EVENT, {trigger}, true /* shouldBubble */);\n      },\n      notifyNavigation: (key) => {\n        this.emit<MDCChipTrailingActionNavigationEventDetail>(\n            strings.NAVIGATION_EVENT, {key}, true /* shouldBubble */);\n      },\n      setAttribute: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n    };\n    return new MDCChipTrailingActionFoundation(adapter);\n  }\n\n  isNavigable() {\n    return this.foundation.isNavigable();\n  }\n\n  focus() {\n    this.foundation.focus();\n  }\n\n  removeFocus() {\n    this.foundation.removeFocus();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport enum InteractionTrigger {\n  UNSPECIFIED,  // Default type\n  CLICK,\n  BACKSPACE_KEY,\n  DELETE_KEY,\n  SPACEBAR_KEY,\n  ENTER_KEY,\n}\n\nexport const strings = {\n  ARIA_HIDDEN: 'aria-hidden',\n  INTERACTION_EVENT: 'MDCChipTrailingAction:interaction',\n  NAVIGATION_EVENT: 'MDCChipTrailingAction:navigation',\n  TAB_INDEX: 'tabindex',\n};\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {isNavigationEvent, KEY, normalizeKey} from '@material/dom/keyboard';\n\nimport {MDCChipTrailingActionAdapter} from './adapter';\nimport {InteractionTrigger, strings} from './constants';\n\n/** MDC Chip Trailing Action Foundation */\nexport class MDCChipTrailingActionFoundation extends\n    MDCFoundation<MDCChipTrailingActionAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCChipTrailingActionAdapter {\n    return {\n      focus: () => undefined,\n      getAttribute: () => null,\n      setAttribute: () => undefined,\n      notifyInteraction: () => undefined,\n      notifyNavigation: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCChipTrailingActionAdapter>) {\n    super({...MDCChipTrailingActionFoundation.defaultAdapter, ...adapter});\n  }\n\n  handleClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.adapter.notifyInteraction(InteractionTrigger.CLICK);\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    event.stopPropagation();\n    const key = normalizeKey(event);\n    if (this.shouldNotifyInteractionFromKey(key)) {\n      const trigger = this.getTriggerFromKey(key);\n      this.adapter.notifyInteraction(trigger);\n      return;\n    }\n\n    if (isNavigationEvent(event)) {\n      this.adapter.notifyNavigation(key);\n      return;\n    }\n  }\n\n  removeFocus() {\n    this.adapter.setAttribute(strings.TAB_INDEX, '-1');\n  }\n\n  focus() {\n    this.adapter.setAttribute(strings.TAB_INDEX, '0');\n    this.adapter.focus();\n  }\n\n  isNavigable() {\n    return this.adapter.getAttribute(strings.ARIA_HIDDEN) !== 'true';\n  }\n\n  private shouldNotifyInteractionFromKey(key: string): boolean {\n    const isFromActionKey = key === KEY.ENTER || key === KEY.SPACEBAR;\n    const isFromDeleteKey = key === KEY.BACKSPACE || key === KEY.DELETE;\n\n    return isFromActionKey || isFromDeleteKey;\n  }\n\n  private getTriggerFromKey(key: string): InteractionTrigger {\n    if (key === KEY.SPACEBAR) {\n      return InteractionTrigger.SPACEBAR_KEY;\n    }\n\n    if (key === KEY.ENTER) {\n      return InteractionTrigger.ENTER_KEY;\n    }\n\n    if (key === KEY.DELETE) {\n      return InteractionTrigger.DELETE_KEY;\n    }\n\n    if (key === KEY.BACKSPACE) {\n      return InteractionTrigger.BACKSPACE_KEY;\n    }\n\n    // Default case, should never be returned\n    return InteractionTrigger.UNSPECIFIED;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCChipTrailingActionFoundation;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport * from './types';\nexport {strings as trailingActionStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/mdc-chip-trailing-action.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipple} from '../../../../mdc-ripple/index';\nimport {createFixture, html} from '../../../../../testing/dom';\nimport {emitEvent} from '../../../../../testing/dom/events';\nimport {createMockFoundation} from '../../../../../testing/helpers/foundation';\nimport {MDCChipTrailingAction, MDCChipTrailingActionFoundation, trailingActionStrings as strings} from '../index';\n\nconst getFixture = () => {\n  return createFixture(html`\n  <button class=\"mdc-deprecated-chip-trailing-action\" tabindex=\"-1\">\n    <span class=\"mdc-deprecated-chip-trailing-action__ripple\"></span>\n    <span class=\"mdc-deprecated-chip-trailing-action__touch-target\"></span>\n    <span class=\"mdc-deprecated-chip-trailing-action__icon\">X</span>\n  </div>`);\n};\n\nclass FakeRipple {\n  destroy: jasmine.Spy;\n\n  constructor(readonly root: HTMLElement|null) {\n    this.destroy = jasmine.createSpy('.destroy');\n  }\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCChipTrailingAction(root);\n  return {root, component};\n}\n\nfunction setupMockRippleTest() {\n  const root = getFixture();\n  const component =\n      new MDCChipTrailingAction(root, undefined, () => new FakeRipple(null));\n  return {root, component};\n}\n\nfunction setupMockFoundationTest(root = getFixture()) {\n  const mockFoundation = createMockFoundation(MDCChipTrailingActionFoundation);\n  const component = new MDCChipTrailingAction(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCChipTrailingAction', () => {\n  it('attachTo returns an MDCChipTrailingAction instance', () => {\n    expect(\n        MDCChipTrailingAction.attachTo(getFixture()) instanceof\n        MDCChipTrailingAction)\n        .toBe(true);\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleClick).toHaveBeenCalledTimes(1);\n\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component, mockFoundation} = setupMockFoundationTest();\n    component.destroy();\n\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#destroy destroys ripple', () => {\n    const {component} = setupMockRippleTest();\n    component.destroy();\n    expect(component.ripple.destroy).toHaveBeenCalled();\n  });\n\n  it('get ripple returns MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBe(true);\n  });\n\n  it('adapter#focus gives focus to the root', () => {\n    const {component, root} = setupTest();\n    document.documentElement.appendChild(root);\n    (component.getDefaultFoundation() as any).adapter.focus();\n    expect(document.activeElement).toEqual(root);\n    document.documentElement.removeChild(root);\n  });\n\n  it('adapter#getAttribute returns the attribute value if present', () => {\n    const {root, component} = setupTest();\n    root.setAttribute('data-foo', 'bar');\n    expect((component.getDefaultFoundation() as any)\n               .adapter.getAttribute('data-foo'))\n        .toBe('bar');\n  });\n\n  it('adapter#getAttribute returns null if the attribute is absent', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any)\n               .adapter.getAttribute('data-foo'))\n        .toBe(null);\n  });\n\n  it(`adapter#notifyInteraction emits ${strings.INTERACTION_EVENT}`, () => {\n    const {component} = setupTest();\n    const handler = jasmine.createSpy('interaction handler');\n\n    component.listen(strings.INTERACTION_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyInteraction(0);\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it(`adapter#notifyNavigation emits ${strings.NAVIGATION_EVENT}`, () => {\n    const {component} = setupTest();\n    const handler = jasmine.createSpy('navigation handler');\n\n    component.listen(strings.NAVIGATION_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyNavigation('');\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#focus proxies to the foundation#focus', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.focus();\n    expect(mockFoundation.focus).toHaveBeenCalled();\n  });\n\n  it('#removeFocus proxies to the foundation#removeFocus', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.removeFocus();\n    expect(mockFoundation.removeFocus).toHaveBeenCalled();\n  });\n\n  it('#isNavigable proxies to the foundation#isNavigable', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.isNavigable();\n    expect(mockFoundation.isNavigable).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as trailingaction;\n@use '@material/feature-targeting/functions' as feature-functions;\n\n@mixin test($query) {\n  .test {\n    @include trailingaction.core-styles($query: $query);\n    @include trailingaction.color(red, $query: $query);\n    @include trailingaction.size(0, $query: $query);\n    @include trailingaction.horizontal-spacing(10px, 10px, $query: $query);\n    @include trailingaction.touch-target-width(10px, $query: $query);\n    @include trailingaction.ripple($query: $query);\n    @include trailingaction.without-ripple($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-functions.any());\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {KEY} from '@material/dom/keyboard';\n\nimport {verifyDefaultAdapter} from '../../../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../../testing/helpers/setup';\nimport {InteractionTrigger, strings} from '../constants';\nimport {MDCChipTrailingActionFoundation} from '../foundation';\n\ndescribe('MDCChipTrailingActionFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports strings', () => {\n    expect('strings' in MDCChipTrailingActionFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCChipTrailingActionFoundation, [\n      'focus',\n      'getAttribute',\n      'setAttribute',\n      'notifyInteraction',\n      'notifyNavigation',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCChipTrailingActionFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#focus sets the tabindex to 0 and gives the action focus', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.focus();\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.TAB_INDEX, '0');\n    expect(mockAdapter.focus).toHaveBeenCalled();\n  });\n\n  it('#removeFocus sets the tabindex to -1', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.removeFocus();\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.TAB_INDEX, '-1');\n  });\n\n  it('#isNavigable returns true if aria-hidden is absent', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttribute.and.returnValue(null);\n    foundation.removeFocus();\n    expect(foundation.isNavigable()).toBe(true);\n  });\n\n  it('#isNavigable returns false if aria-hidden is \"true\"', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttribute.and.returnValue('true');\n    foundation.removeFocus();\n    expect(foundation.isNavigable()).toBe(false);\n  });\n\n  it('#handleClick notifies interaction', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleClick(mockClick());\n    expect(mockAdapter.notifyInteraction).toHaveBeenCalled();\n  });\n\n  it('#handleClick stops propagation', () => {\n    const {foundation} = setupTest();\n    const click = mockClick();\n    foundation.handleClick(click);\n    expect(click.stopPropagation).toHaveBeenCalled();\n  });\n\n  [{\n    key: KEY.SPACEBAR,\n    trigger: InteractionTrigger.SPACEBAR_KEY,\n  },\n   {\n     key: KEY.ENTER,\n     trigger: InteractionTrigger.ENTER_KEY,\n   },\n   {\n     key: KEY.BACKSPACE,\n     trigger: InteractionTrigger.BACKSPACE_KEY,\n   },\n   {\n     key: KEY.DELETE,\n     trigger: InteractionTrigger.DELETE_KEY,\n   }].forEach(({key, trigger}) => {\n    it(`#handleKeydown notifies interaction on key \"${key}\" with \"${trigger}\"`,\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         foundation.handleKeydown(mockKeyDown(key));\n         expect(mockAdapter.notifyInteraction).toHaveBeenCalledWith(trigger);\n       });\n  });\n\n  [KEY.ARROW_UP,\n   KEY.ARROW_DOWN,\n   KEY.ARROW_RIGHT,\n   KEY.ARROW_LEFT,\n  ].forEach((key) => {\n    it(`#handleKeydown notifies navigation on key \"${key}\" keydown`, () => {\n      const {foundation, mockAdapter} = setupTest();\n      foundation.handleKeydown(mockKeyDown(key));\n      expect(mockAdapter.notifyNavigation).toHaveBeenCalledWith(key);\n    });\n  });\n\n  it('#handleClick stops propagation', () => {\n    const {foundation} = setupTest();\n    const keydown = mockKeyDown('ArrowUp');\n    foundation.handleKeydown(keydown);\n    expect(keydown.stopPropagation).toHaveBeenCalled();\n  });\n});\n\nfunction mockKeyDown(key: string) {\n  const stopPropagation = jasmine.createSpy('stopPropagation');\n  return {\n    stopPropagation,\n    key,\n  } as unknown as KeyboardEvent;\n}\n\nfunction mockClick() {\n  const stopPropagation = jasmine.createSpy('stopPropagation');\n  return {\n    stopPropagation,\n  } as unknown as MouseEvent;\n}\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/test/mdc-chip-trailing-action.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../../../testing/featuretargeting';\n\ndescribe('mdc-deprecated-chip-trailing-action.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-chips/deprecated/trailingaction/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {InteractionTrigger} from './constants';\n\nexport interface MDCChipTrailingActionInteractionEventDetail {\n  trigger: InteractionTrigger;\n}\n\nexport interface MDCChipTrailingActionNavigationEventDetail {\n  key: string;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCChipTrailingActionInteractionEvent extends Event {\n  readonly detail: MDCChipTrailingActionInteractionEventDetail;\n}\n\nexport interface MDCChipTrailingActionNavigationEvent extends Event {\n  readonly detail: MDCChipTrailingActionNavigationEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-chips/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './action/index';\nexport * from './chip/index';\nexport * from './chip-set/index';\n\n/**\n * Backwards compatibility for existing clients.\n */\nimport * as deprecated from './deprecated/index';\nexport {\n  deprecated,\n};\n"
  },
  {
    "path": "packages/mdc-chips/package.json",
    "content": "{\n  \"name\": \"@material/chips\",\n  \"description\": \"The Material Components for the Web chips component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.chips.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"chips\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-chips\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/checkbox\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"safevalues\": \"^1.0.1\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-chips/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './chip';\n@use './chip-set';\n\n@include chip.core-styles;\n@include chip-set.core-styles;\n"
  },
  {
    "path": "packages/mdc-circular-progress/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-circular-progress/README.md",
    "content": "<!--docs:\ntitle: \"Circular Progress\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design-styled circular progress indicators.\"\niconId: progress_activity\npath: /catalog/circular-progress/\n-->\n\n# Circular Progress\n\nThe MDC Circular Progress component is a spec-aligned circular progress indicator component adhering to the\n[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-progress-indicators\">Guidelines</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/circular-progress\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-circular-progress\" style=\"width:48px;height:48px;\" role=\"progressbar\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\">\n  <div class=\"mdc-circular-progress__determinate-container\">\n    <svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle class=\"mdc-circular-progress__determinate-track\" cx=\"24\" cy=\"24\" r=\"18\" stroke-width=\"4\"/>\n      <circle class=\"mdc-circular-progress__determinate-circle\" cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"113.097\" stroke-width=\"4\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-circular-progress__indeterminate-container\">\n    <div class=\"mdc-circular-progress__spinner-layer\">\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__gap-patch\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.2\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Accessibility\n\nProgress bars conform to the [WAI-ARIA Progressbar Specification](https://www.w3.org/TR/wai-aria/#progressbar). The supported ARIA attributes for this progress bar are:\n\n| Attribute | Description |\n| --------- | ----------- |\n| `aria-label` | Label indicating how the progress bar should be announced to the user. |\n| `aria-valuemin` | The minimum numeric value of the progress bar, which should always be `0`. |\n| `aria-valuemax` | The maximum numeric value of the progress bar, which should always be `1`. |\n| `aria-valuenow` | A numeric value between `aria-valuemin` and `aria-valuemax` indicating the progress value of the primary progress bar. This attribute is removed in indeterminate progress bars. |\n\nNote that `aria-label`, `aria-valuemin`, and `aria-valuemax` are static and must be configured in the HTML. `aria-valuenow` is updated dynamically by the foundation when the progress value is updated in determinate progress bars.\n\n### Styles\n```scss\n@use \"@material/circular-progress/mdc-circular-progress\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport { MDCCircularProgress } from '@material/circular-progress';\n\nconst circularProgress = new MDCCircularProgress(document.querySelector('.mdc-circular-progress'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Sizing\n\nTo set the stroke-width and container size strictly to one of three sizes defined by guidelines, replace the templates with the following.\n\n#### Large (48px)\nSee [baseline template](#HTML-Structure) above.\n\n#### Medium (36px)\n```html\n<div class=\"mdc-circular-progress\" style=\"width:36px;height:36px;\" role=\"progressbar\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\">\n  <div class=\"mdc-circular-progress__determinate-container\">\n    <svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle class=\"mdc-circular-progress__determinate-track\" cx=\"16\" cy=\"16\" r=\"12.5\" stroke-width=\"3\"/>\n      <circle class=\"mdc-circular-progress__determinate-circle\" cx=\"16\" cy=\"16\" r=\"12.5\" stroke-dasharray=\"78.54\" stroke-dashoffset=\"78.54\" stroke-width=\"3\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-circular-progress__indeterminate-container\">\n    <div class=\"mdc-circular-progress__spinner-layer\">\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"16\" cy=\"16\" r=\"12.5\" stroke-dasharray=\"78.54\" stroke-dashoffset=\"39.27\" stroke-width=\"3\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__gap-patch\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"16\" cy=\"16\" r=\"12.5\" stroke-dasharray=\"78.54\" stroke-dashoffset=\"39.27\" stroke-width=\"2.4\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"16\" cy=\"16\" r=\"12.5\" stroke-dasharray=\"78.54\" stroke-dashoffset=\"39.27\" stroke-width=\"3\"/>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n#### Small (24px)\n```html\n<div class=\"mdc-circular-progress\" style=\"width:24px;height:24px;\" role=\"progressbar\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\">\n  <div class=\"mdc-circular-progress__determinate-container\">\n    <svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle class=\"mdc-circular-progress__determinate-track\" cx=\"12\" cy=\"12\" r=\"8.75\" stroke-width=\"2.5\"/>\n      <circle class=\"mdc-circular-progress__determinate-circle\" cx=\"12\" cy=\"12\" r=\"8.75\" stroke-dasharray=\"54.978\" stroke-dashoffset=\"54.978\" stroke-width=\"2.5\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-circular-progress__indeterminate-container\">\n    <div class=\"mdc-circular-progress__spinner-layer\">\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"8.75\" stroke-dasharray=\"54.978\" stroke-dashoffset=\"27.489\" stroke-width=\"2.5\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__gap-patch\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"8.75\" stroke-dasharray=\"54.978\" stroke-dashoffset=\"27.489\" stroke-width=\"2\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"8.75\" stroke-dasharray=\"54.978\" stroke-dashoffset=\"27.489\" stroke-width=\"2.5\"/>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n```\n### Four-Colored\n\nYou may choose to have the indicator in inderminate state animate through 4 colors. The template for the four-colored indicator is like that of the [baseline](#HTML-Structure), except the spinner layer is replicated 4 times, 1 for each color. See [Sass-Mixins](#Sass-Mixins) for how to customize the four colors.\nThis is done instead of animating the color property to reduce browser repaints.\n\n```html\n<div class=\"mdc-circular-progress\" style=\"width:48px;height:48px;\" role=\"progressbar\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\">\n  <div class=\"mdc-circular-progress__determinate-container\">\n    <svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle class=\"mdc-circular-progress__determinate-track\" cx=\"24\" cy=\"24\" r=\"18\" stroke-width=\"4\"/>\n      <circle class=\"mdc-circular-progress__determinate-circle\" cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"113.097\" stroke-width=\"4\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-circular-progress__indeterminate-container\">\n    <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-1\">\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__gap-patch\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.8\"/>\n        </svg>\n      </div>\n      <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n        <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n        </svg>\n      </div>\n    </div>\n\n    <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-2\">\n      <!-- Same as above -->\n    </div>\n\n    <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-3\">\n      <!-- Same as above -->\n    </div>\n\n    <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-4\">\n      <!-- Same as above -->\n    </div>\n  </div>\n</div>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--------- | -------------\n`mdc-circular-progress` | Mandatory.  The root element.\n`mdc-circular-progress--indeterminate`   | Optional. Puts the circular progress indicator in an indeterminate state. |\n`mdc-circular-progress--closed`  | Optional. Hides the circular progress indicator. |\n`mdc-circular-progress__determinate-container` | Mandatory.  Contains the determinate progress indicator.\n`mdc-circular-progress__indeterminate-container` | Mandatory.  Contains the indeterminate progress indicator.\n`mdc-circular-progress__determinate-circle-graphic` | Mandatory. The determinate SVG.\n`mdc-circular-progress__determinate-track` | Mandatory.  The determinate SVG track.\n`mdc-circular-progress__determinate-circle` | Mandatory.  The determinate SVG circle.\n`mdc-circular-progress__spinner-layer` | Mandatory.  Another wrapper around the indeterminate indicator.\n`mdc-circular-progress__indeterminate-circle-graphic` | Mandatory.  An indeterminate SVG (there are three of these in total).\n`mdc-circular-progress__circle-clipper` | Mandatory.  Clips an indeterminate SVG circle so that only a section of it is visible.\n`mdc-circular-progress__circle-left` | Mandatory.  One of two circle sections that when combined are animated to form the full indeterminate progress indicator.\n`mdc-circular-progress__circle-right` | Mandatory.  One of two circle sections that when combined are animated to form the full indeterminate progress indicator.\n`mdc-circular-progress__gap-patch` | Mandatory.  A tiny little sliver of an SVG circle used to patch a gap between the circle-left and the circle-right.\n\n\n> _NOTE_: Ensure the correct inner SVG templates for each size are used to ensure optimal ratio of the stroke width to container size as specified in Material Design guidelines.\n\n### Sass Mixins\n\nMixin | Description\n----- | ------------\n`color($color)` | Customizes the stroke-color of the indicator. Applies to the determinate variant, and also the indeterminate variant unless the four-color mixin is applied.\n`track-color($color)` | Customizes the track color of the indicator. Applies to the determinate variant only.\n`indeterminate-colors($colors)` | Applies four animated stroke-colors to the indeterminate indicator. Applicable to the indeterminate variant only and overrides any single color currently set. Takes a list of exacty four colors.\n\n## `MDCCircularProgress` Properties and Methods\n\nProperty | Value Type | Description\n-------- | ---------- | --------------\n`determinate` | `boolean` (write-only) | Toggles the component between the determinate and indeterminate state.\n`progress` | `number` (write-only) | Sets the progress bar to this value. Value should be between 0 and 1.\n\nMethod Signature | Description |\n---------------- | ----------- |\n`open() => void` | Puts the component in the open state. |\n`close() => void` | Puts the component in the closed state. |\n\n\n## Usage within Web Frameworks\n\n### `MDCCircularProgressAdapter`\n\nMethod Signature | Description\n---------------- | -----------\n`addClass(className: string) => void` | Adds a class to the root element.\n`getDeterminateCircleAttribute(attributeName: string) => void` | Gets the specified attribute from the determinate circle element.\n`hasClass(className: string) => boolean` | Returns boolean indicating whether the root element has a given class.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`removeAttribute(attributeName: string) => void` | Removes the specified attribute from the root element.\n`setAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the root element.\n`setDeterminateCircleAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the determinate circle element.\n\n### `MDCCircularProgressFoundation`\n\nMethod Signature | Description\n---------------- | ---\n`setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state.\n`isDeterminate() => boolean` | Whether or not the component is in determinate state.\n`setProgress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1].\n`getProgress() => number` | The current progress value in the interval [0,1].\n`open() => void` | Puts the component in the open state.\n`close() => void` | Puts the component in the closed state.\n`isClosed() => boolean` | Whether or not the progress indicator is closed.\n\n\n"
  },
  {
    "path": "packages/mdc-circular-progress/_circular-progress-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/theme/color-palette';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/dom/dom';\n\n$color: primary !default;\n$track-color: transparent !default;\n\n/// The rotation position of the arcs that corresponds to their fully contracted state\n$base-angle: 135deg !default;\n/// Amount of circle the arc takes up\n$arc-size: 270deg !default;\n/// Time it takes to expand and contract arc\n$arc-time: 1333ms !default;\n/// Time for inactive indicator to disappear\n$shrink-time: 400ms !default;\n/// How much the start location of the arc should rotate each time; 216 gives\n/// us a 5 pointed star shape (it's 360/5 * 3)\n$arc-start-rotation-interval: 216deg !default;\n/// The timing function used for the core spinner animations.\n$timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n\n$custom-property-prefix: 'circular-progress';\n\n$light-theme: (\n  active-indicator-color: theme-color.$primary,\n  active-indicator-width: 4px,\n  four-color-active-indicator-four-color: color-palette.$cyan-400,\n  four-color-active-indicator-one-color: color-palette.$brown-400,\n  four-color-active-indicator-three-color: color-palette.$orange-400,\n  four-color-active-indicator-two-color: color-palette.$teal-400,\n  size: 48px,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include _active-indicator-color(map.get($theme, active-indicator-color));\n  @include _active-indicator-width(map.get($theme, active-indicator-width));\n  @include _four-color-active-indicator(\n    (\n      map.get($theme, four-color-active-indicator-one-color),\n      map.get($theme, four-color-active-indicator-two-color),\n      map.get($theme, four-color-active-indicator-three-color),\n      map.get($theme, four-color-active-indicator-four-color)\n    )\n  );\n  @include _size(map.get($theme, size));\n}\n\n@mixin _active-indicator-color($color) {\n  @include color($color);\n}\n\n@mixin _active-indicator-width($width) {\n  circle {\n    @include theme.property(stroke-width, $width);\n  }\n}\n\n@mixin _four-color-active-indicator($colors) {\n  .mdc-circular-progress--four-color {\n    @include indeterminate-colors($colors);\n  }\n}\n\n@mixin _size($size) {\n  .mdc-circular-progress {\n    // TODO(b/286293822): Remove !important from css styles\n    @include theme.property(width, $size, $important: true);\n    // TODO(b/286293822): Remove !important from css styles\n    @include theme.property(height, $size, $important: true);\n  }\n}\n\n/// Customizes the stroke-color of the indicator. Applies to the\n/// determinate variant, and also the indeterminate variant unless the\n/// four-color mixin is applied.\n/// @param {Color} $color - The desired stroke color.\n/// @see {mixin} indeterminate-colors\n@mixin color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-circular-progress__determinate-circle,\n  .mdc-circular-progress__indeterminate-circle-graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(stroke, $color);\n\n      @include dom.forced-colors-mode {\n        @include theme.property(stroke, CanvasText);\n      }\n    }\n  }\n}\n\n/// Customizes the track color of the indicator. Applies to the\n/// determinate variant only.\n/// @param {Color} $color - The desired track color.\n@mixin track-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-circular-progress__determinate-track {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(stroke, $color);\n    }\n  }\n}\n\n/// Applies four animated stroke-colors to the indeterminate indicator.\n/// Applicable to the indeterminate variant only and overrides any single color\n/// currently set.\n/// @param {List} $colors - A list of four desired colors.\n/// @see {mixin} color\n@mixin indeterminate-colors($colors, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if length($colors) != 4 {\n    @error \"`mdc-circular-progress-colors` accepts exactly 4 colors\";\n  }\n\n  @for $i from 1 through 4 {\n    .mdc-circular-progress__color-#{$i}\n      .mdc-circular-progress__indeterminate-circle-graphic {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(stroke, nth($colors, $i));\n\n        @include dom.forced-colors-mode {\n          @include theme.property(stroke, CanvasText);\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-circular-progress/_circular-progress.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/animation/functions' as animation-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/gss';\n@use '@material/theme/theme';\n@use './circular-progress-theme';\n\n///\n/// Circular progress core styles.\n///\n@mixin core-styles($query: feature-targeting.all()) {\n  @include circular-progress-theme.color(\n    circular-progress-theme.$color,\n    $query\n  );\n  @include circular-progress-theme.track-color(\n    circular-progress-theme.$track-color,\n    $query: $query\n  );\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    @include container-rotate-keyframes_;\n    @include spinner-layer-rotate-keyframes_;\n    @include color-1-fade-in-out-keyframes_;\n    @include color-2-fade-in-out-keyframes_;\n    @include color-3-fade-in-out-keyframes_;\n    @include color-4-fade-in-out-keyframes_;\n    @include left-spin-keyframes_;\n    @include right-spin-keyframes_;\n  }\n\n  .mdc-circular-progress {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      position: relative;\n      @include rtl.ignore-next-line();\n      direction: ltr;\n      line-height: 0;\n      overflow: hidden;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation-functions.exit-temporary(opacity, 250ms);\n    }\n  }\n\n  .mdc-circular-progress__determinate-container,\n  .mdc-circular-progress__indeterminate-circle-graphic,\n  .mdc-circular-progress__indeterminate-container,\n  .mdc-circular-progress__spinner-layer {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .mdc-circular-progress__determinate-container {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      transform: rotate(-90deg);\n    }\n  }\n\n  .mdc-circular-progress__indeterminate-container {\n    @include feature-targeting.targets($feat-structure) {\n      // Font size, letter spacing and nowrap are required in order to ignore\n      // whitespaces between HTML elements.\n      font-size: 0;\n      letter-spacing: 0;\n      white-space: nowrap;\n      opacity: 0;\n    }\n  }\n\n  .mdc-circular-progress__determinate-circle-graphic,\n  .mdc-circular-progress__indeterminate-circle-graphic {\n    @include feature-targeting.targets($feat-structure) {\n      fill: transparent;\n    }\n  }\n\n  .mdc-circular-progress__determinate-circle {\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation-functions.enter(stroke-dashoffset, 500ms);\n    }\n  }\n\n  .mdc-circular-progress__gap-patch {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      @include rtl.ignore-next-line();\n      left: 47.5%;\n      box-sizing: border-box;\n      width: 5%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .mdc-circular-progress__indeterminate-circle-graphic {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        left: -900%;\n        width: 2000%;\n        @include rtl.ignore-next-line();\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .mdc-circular-progress__circle-clipper {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      position: relative;\n      width: 50%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .mdc-circular-progress__indeterminate-circle-graphic {\n      @include feature-targeting.targets($feat-structure) {\n        width: 200%;\n      }\n    }\n  }\n\n  .mdc-circular-progress__circle-right {\n    .mdc-circular-progress__indeterminate-circle-graphic {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        left: -100%;\n      }\n    }\n  }\n\n  .mdc-circular-progress--indeterminate {\n    .mdc-circular-progress__determinate-container {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n\n    .mdc-circular-progress__indeterminate-container {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n\n    @include indeterminate-active-animations_($query);\n  }\n\n  .mdc-circular-progress--closed {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n  }\n}\n\n// Private mixins\n\n/// Sets the animations for the indicator in indeterminate mode.\n/// @access private\n@mixin indeterminate-active-animations_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-circular-progress__indeterminate-container {\n    @include feature-targeting.targets($feat-animation) {\n      $duration: math.div(\n        360deg * circular-progress-theme.$arc-time,\n        circular-progress-theme.$arc-start-rotation-interval +\n          (360 - circular-progress-theme.$arc-size)\n      );\n\n      animation: mdc-circular-progress-container-rotate $duration linear\n        infinite;\n    }\n  }\n\n  $spinner-rotate-animation: mdc-circular-progress-spinner-layer-rotate 4 *\n    circular-progress-theme.$arc-time circular-progress-theme.$timing-function\n    infinite both;\n\n  .mdc-circular-progress__spinner-layer {\n    @include feature-targeting.targets($feat-animation) {\n      animation: $spinner-rotate-animation;\n    }\n  }\n\n  @for $i from 1 through 4 {\n    $color-fade-in-out-animation: mdc-circular-progress-color-#{$i}-fade-in-out\n      4 *\n      circular-progress-theme.$arc-time\n      circular-progress-theme.$timing-function\n      infinite\n      both;\n\n    .mdc-circular-progress__color-#{$i} {\n      @include feature-targeting.targets($feat-animation) {\n        animation: $spinner-rotate-animation, $color-fade-in-out-animation;\n      }\n    }\n  }\n\n  .mdc-circular-progress__circle-left\n    .mdc-circular-progress__indeterminate-circle-graphic {\n    @include feature-targeting.targets($feat-animation) {\n      @include gss.annotate(\n        (\n          noflip: true,\n        )\n      );\n      animation: mdc-circular-progress-left-spin\n        circular-progress-theme.$arc-time\n        circular-progress-theme.$timing-function infinite both;\n    }\n  }\n\n  .mdc-circular-progress__circle-right\n    .mdc-circular-progress__indeterminate-circle-graphic {\n    @include feature-targeting.targets($feat-animation) {\n      @include gss.annotate(\n        (\n          noflip: true,\n        )\n      );\n      animation: mdc-circular-progress-right-spin\n        circular-progress-theme.$arc-time\n        circular-progress-theme.$timing-function infinite both;\n    }\n  }\n}\n\n/// Keyframes for the persistent rotation of the outermost container\n/// @access private\n@mixin container-rotate-keyframes_ {\n  @keyframes mdc-circular-progress-container-rotate {\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(360deg);\n    }\n  }\n}\n\n/// Keyframes for the rotation of the spinner layer\n/// @access private\n@mixin spinner-layer-rotate-keyframes_ {\n  @keyframes mdc-circular-progress-spinner-layer-rotate {\n    @for $i from 1 through 8 {\n      #{$i * 12.5}% {\n        @include rtl.ignore-next-line();\n        transform: rotate($i * 0.5 * circular-progress-theme.$arc-size);\n      }\n    }\n  }\n}\n\n/// Keyframes for the fade-in and fade-out of the first color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-1-fade-in-out-keyframes_ {\n  @keyframes mdc-circular-progress-color-1-fade-in-out {\n    from {\n      opacity: 0.99;\n    }\n    25% {\n      opacity: 0.99;\n    }\n    26% {\n      opacity: 0;\n    }\n    89% {\n      opacity: 0;\n    }\n    90% {\n      opacity: 0.99;\n    }\n    to {\n      opacity: 0.99;\n    }\n  }\n}\n\n/// Keyframes for the fade-in and fade-out of the second color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-2-fade-in-out-keyframes_ {\n  @keyframes mdc-circular-progress-color-2-fade-in-out {\n    from {\n      opacity: 0;\n    }\n    15% {\n      opacity: 0;\n    }\n    25% {\n      opacity: 0.99;\n    }\n    50% {\n      opacity: 0.99;\n    }\n    51% {\n      opacity: 0;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n}\n\n/// Keyframes for the fade-in and fade-out of the third color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-3-fade-in-out-keyframes_ {\n  @keyframes mdc-circular-progress-color-3-fade-in-out {\n    from {\n      opacity: 0;\n    }\n    40% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 0.99;\n    }\n    75% {\n      opacity: 0.99;\n    }\n    76% {\n      opacity: 0;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n}\n\n/// Keyframes for the fade-in and fade-out of the fourth color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-4-fade-in-out-keyframes_ {\n  @keyframes mdc-circular-progress-color-4-fade-in-out {\n    from {\n      opacity: 0;\n    }\n    65% {\n      opacity: 0;\n    }\n    75% {\n      opacity: 0.99;\n    }\n    90% {\n      opacity: 0.99;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n}\n\n/// Keyframes for the expansion and contraction of the arc for the\n/// left semi-circle.\n/// @access private\n@mixin left-spin-keyframes_ {\n  @keyframes mdc-circular-progress-left-spin {\n    from {\n      @include rtl.ignore-next-line();\n      transform: rotate(265deg);\n    }\n    50% {\n      @include rtl.ignore-next-line();\n      transform: rotate(130deg);\n    }\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(265deg);\n    }\n  }\n}\n\n/// Keyframes for the expansion and contraction of the arc for the\n/// right semi-circle.\n/// @access private\n@mixin right-spin-keyframes_ {\n  @keyframes mdc-circular-progress-right-spin {\n    from {\n      @include rtl.ignore-next-line();\n      transform: rotate(-265deg);\n    }\n    50% {\n      @include rtl.ignore-next-line();\n      transform: rotate(-130deg);\n    }\n    to {\n      @include rtl.ignore-next-line();\n      transform: rotate(-265deg);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-circular-progress/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./keyframes\";\n"
  },
  {
    "path": "packages/mdc-circular-progress/_keyframes.import.scss",
    "content": "@forward \"./index\" as mdc-circular-progress-* hide mdc-circular-progress-core-styles, mdc-circular-progress-color, mdc-circular-progress-indeterminate-colors, mdc-circular-progress-size-, mdc-circular-progress-indeterminate-animations-;\n"
  },
  {
    "path": "packages/mdc-circular-progress/_keyframes.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_circular-progress.scss' module instead.\n@forward './circular-progress' show enter, exit;\n"
  },
  {
    "path": "packages/mdc-circular-progress/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-circular-progress-*;\n"
  },
  {
    "path": "packages/mdc-circular-progress/_mixins.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './circular-progress' or './circular-progress-theme' instead.\n@forward './circular-progress' show core-styles;\n@forward './circular-progress-theme' show color, track-color, indeterminate-colors;\n"
  },
  {
    "path": "packages/mdc-circular-progress/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-circular-progress-* hide mdc-circular-progress-core-styles, mdc-circular-progress-color, mdc-circular-progress-indeterminate-colors, mdc-circular-progress-size-, mdc-circular-progress-indeterminate-animations-,  mdc-circular-progress-container-rotate-keyframes-,  mdc-circular-progress-spinner-layer-rotate-keyframes-, mdc-circular-progress-color-1-fade-in-out-keyframes-, mdc-circular-progress-color-2-fade-in-out-keyframes-, mdc-circular-progress-color-3-fade-in-out-keyframes-, mdc-circular-progress-color-4-fade-in-out-keyframes-, mdc-circular-progress-left-spin-keyframes-, mdc-circular-progress-right-spin-keyframes-;\n"
  },
  {
    "path": "packages/mdc-circular-progress/_variables.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './circular-progress-theme' module instead.\n@forward './circular-progress-theme' show $color, $track-color, $base-angle, $arc-size, $arc-time, $shrink-time, $arc-start-rotation-interval, $timing-function;\n"
  },
  {
    "path": "packages/mdc-circular-progress/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCCircularProgressAdapter {\n  addClass(className: string): void;\n  getDeterminateCircleAttribute(attributeName: string): string|null;\n  hasClass(className: string): boolean;\n  removeClass(className: string): void;\n  removeAttribute(attributeName: string): void;\n  setAttribute(attributeName: string, value: string): void;\n  setDeterminateCircleAttribute(attributeName: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-circular-progress/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCProgressIndicator} from '@material/progress-indicator/component';\n\nimport {MDCCircularProgressAdapter} from './adapter';\nimport {MDCCircularProgressFoundation} from './foundation';\n\n/** MDC Circular Progress */\nexport class MDCCircularProgress extends\n    MDCComponent<MDCCircularProgressFoundation> implements\n        MDCProgressIndicator {\n  private determinateCircle!: HTMLElement;\n\n  override initialize() {\n    this.determinateCircle = this.root.querySelector<HTMLElement>(\n        MDCCircularProgressFoundation.strings.DETERMINATE_CIRCLE_SELECTOR)!;\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCCircularProgress(root);\n  }\n\n  /**\n   * Sets whether the progress indicator is in determinate mode.\n   * @param value Whether the indicator should be determinate.\n   */\n  set determinate(value: boolean) {\n    this.foundation.setDeterminate(value);\n  }\n\n  /**\n   * Sets the current progress value. In indeterminate mode, this has no\n   * visual effect but will be reflected if the indicator is switched to\n   * determinate mode.\n   * @param value The current progress value, which must be between 0 and 1.\n   */\n  set progress(value: number) {\n    this.foundation.setProgress(value);\n  }\n\n  /**\n   * Whether the progress indicator is hidden.\n   */\n  get isClosed() {\n    return this.foundation.isClosed();\n  }\n\n  /**\n   * Shows the progress indicator.\n   */\n  open() {\n    this.foundation.open();\n  }\n\n  /**\n   * Hides the progress indicator.\n   */\n  close() {\n    this.foundation.close();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCCircularProgressAdapter = {\n      addClass: (className: string) => {\n        this.root.classList.add(className);\n      },\n      getDeterminateCircleAttribute: (attributeName: string) =>\n          this.determinateCircle.getAttribute(attributeName),\n      hasClass: (className: string) => this.root.classList.contains(className),\n      removeClass: (className: string) => {\n        this.root.classList.remove(className);\n      },\n      removeAttribute: (attributeName: string) => {\n        this.root.removeAttribute(attributeName);\n      },\n      setAttribute: (attributeName: string, value: string) => {\n        this.safeSetAttribute(this.root, attributeName, value);\n      },\n      setDeterminateCircleAttribute: (attributeName: string, value: string) => {\n        this.determinateCircle.setAttribute(attributeName, value);\n      },\n    };\n    return new MDCCircularProgressFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-circular-progress/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * CSS class names used in component.\n */\nexport const cssClasses = {\n  INDETERMINATE_CLASS: 'mdc-circular-progress--indeterminate',\n  CLOSED_CLASS: 'mdc-circular-progress--closed',\n};\n\n/**\n * Attributes and selectors used in component.\n */\nexport const strings = {\n  ARIA_HIDDEN: 'aria-hidden',\n  ARIA_VALUENOW: 'aria-valuenow',\n  DETERMINATE_CIRCLE_SELECTOR: '.mdc-circular-progress__determinate-circle',\n  RADIUS: 'r',\n  STROKE_DASHOFFSET: 'stroke-dashoffset',\n};\n"
  },
  {
    "path": "packages/mdc-circular-progress/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {MDCProgressIndicatorFoundation} from '@material/progress-indicator/foundation';\n\nimport {MDCCircularProgressAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Circular Progress Foundation */\nexport class MDCCircularProgressFoundation extends\n    MDCFoundation<MDCCircularProgressAdapter> implements\n        MDCProgressIndicatorFoundation {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCCircularProgressAdapter {\n    return {\n      addClass: () => undefined,\n      getDeterminateCircleAttribute: () => null,\n      hasClass: () => false,\n      removeClass: () => undefined,\n      removeAttribute: () => undefined,\n      setAttribute: () => undefined,\n      setDeterminateCircleAttribute: () => undefined,\n    };\n  }\n\n  private closed!: boolean;\n  private determinate!: boolean;\n  private progress!: number;\n  private radius!: number;\n\n  constructor(adapter?: Partial<MDCCircularProgressAdapter>) {\n    super({...MDCCircularProgressFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    this.closed = this.adapter.hasClass(cssClasses.CLOSED_CLASS);\n    this.determinate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);\n    this.progress = 0;\n\n    if (this.determinate) {\n      this.adapter.setAttribute(\n          strings.ARIA_VALUENOW, this.progress.toString());\n    }\n\n    this.radius =\n        Number(this.adapter.getDeterminateCircleAttribute(strings.RADIUS));\n  }\n\n  /**\n   * Sets whether the progress indicator is in determinate mode.\n   * @param determinate Whether the indicator should be determinate.\n   */\n  setDeterminate(determinate: boolean) {\n    this.determinate = determinate;\n\n    if (this.determinate) {\n      this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);\n      this.setProgress(this.progress);\n    } else {\n      this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);\n      this.adapter.removeAttribute(strings.ARIA_VALUENOW);\n    }\n  }\n\n  isDeterminate() {\n    return this.determinate;\n  }\n\n  /**\n   * Sets the current progress value. In indeterminate mode, this has no\n   * visual effect but will be reflected if the indicator is switched to\n   * determinate mode.\n   * @param value The current progress value, which must be between 0 and 1.\n   */\n  setProgress(value: number) {\n    this.progress = value;\n    if (this.determinate) {\n      const unfilledArcLength =\n          (1 - this.progress) * (2 * Math.PI * this.radius);\n\n      this.adapter.setDeterminateCircleAttribute(\n          strings.STROKE_DASHOFFSET, `${unfilledArcLength}`);\n      this.adapter.setAttribute(\n          strings.ARIA_VALUENOW, this.progress.toString());\n    }\n  }\n\n  getProgress() {\n    return this.progress;\n  }\n\n  /**\n   * Shows the progress indicator.\n   */\n  open() {\n    this.closed = false;\n    this.adapter.removeClass(cssClasses.CLOSED_CLASS);\n    this.adapter.removeAttribute(strings.ARIA_HIDDEN);\n  }\n\n  /**\n   * Hides the progress indicator\n   */\n  close() {\n    this.closed = true;\n    this.adapter.addClass(cssClasses.CLOSED_CLASS);\n    this.adapter.setAttribute(strings.ARIA_HIDDEN, 'true');\n  }\n\n  /**\n   * @return Returns whether the progress indicator is hidden.\n   */\n  isClosed() {\n    return this.closed;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCCircularProgressFoundation;\n"
  },
  {
    "path": "packages/mdc-circular-progress/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-circular-progress/mdc-circular-progress.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"variables\" as mdc-circular-progress-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"keyframes\" as mdc-circular-progress-*;\n@forward \"mixins\" as mdc-circular-progress-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"mdc-circular-progress\";\n"
  },
  {
    "path": "packages/mdc-circular-progress/mdc-circular-progress.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-circular-progress/package.json",
    "content": "{\n  \"name\": \"@material/circular-progress\",\n  \"description\": \"The Material Components for the web circular progress component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"circular-progress\"\n  ],\n  \"main\": \"dist/mdc.circularProgress.js\",\n  \"module\": \"./index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-circular-progress\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\" : \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/progress-indicator\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-circular-progress/styles.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './circular-progress';\n@include circular-progress.core-styles;\n"
  },
  {
    "path": "packages/mdc-circular-progress/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCCircularProgress, MDCCircularProgressFoundation} from '../../mdc-circular-progress/index';\nimport {createFixture, html} from '../../../testing/dom';\n\nconst RADIUS = 18;\nfunction getFixture() {\n  return createFixture(html`\n  <div class=\"mdc-circular-progress\" style=\"width:48px;height:48px;\" role=\"progressbar\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\">\n    <div class=\"mdc-circular-progress__determinate-container\">\n      <svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle class=\"mdc-circular-progress__determinate-track\" cx=\"24\" cy=\"24\" r=\"18\" stroke-width=\"4\"/>\n        <circle class=\"mdc-circular-progress__determinate-circle\" cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"113.097\" stroke-width=\"4\"/>\n      </svg>\n    </div>\n    <div class=\"mdc-circular-progress__indeterminate-container\">\n      <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-1\">\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.8\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n      </div>\n\n      <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-2\">\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.8\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n      </div>\n\n      <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-3\">\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.8\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n      </div>\n\n      <div class=\"mdc-circular-progress__spinner-layer mdc-circular-progress__color-4\">\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__gap-patch\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.8\"/>\n          </svg>\n        </div>\n        <div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\">\n          <svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\"/>\n          </svg>\n        </div>\n      </div>\n    </div>\n  </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCCircularProgress(root);\n  return {root, component};\n}\n\ndescribe('MDCCircularProgress', () => {\n  it('attachTo initializes and returns a MDCCircularProgress instance', () => {\n    expect(\n        MDCCircularProgress.attachTo(getFixture()) instanceof\n        MDCCircularProgress)\n        .toBeTruthy();\n  });\n\n  it('set indeterminate', () => {\n    const {root, component} = setupTest();\n\n    component.determinate = false;\n    expect(root).toHaveClass('mdc-circular-progress--indeterminate');\n    expect(\n        root.getAttribute(MDCCircularProgressFoundation.strings.ARIA_VALUENOW))\n        .toEqual(null);\n  });\n\n  it('set progress', () => {\n    const {root, component} = setupTest();\n    const progressTestValue = 0.5;\n    component.progress = progressTestValue;\n    const determinateCircle = root.querySelector<HTMLElement>(\n        MDCCircularProgressFoundation.strings.DETERMINATE_CIRCLE_SELECTOR)!;\n\n    expect(\n        root.getAttribute(MDCCircularProgressFoundation.strings.ARIA_VALUENOW))\n        .toEqual(progressTestValue.toString());\n    const strokeDashoffset = Number(determinateCircle.getAttribute(\n        MDCCircularProgressFoundation.strings.STROKE_DASHOFFSET));\n    const expectedVal = progressTestValue * 2 * Math.PI * RADIUS;\n    expect(strokeDashoffset).toBeLessThan(expectedVal + .001);\n    expect(strokeDashoffset).toBeGreaterThan(expectedVal - .001);\n  });\n\n  it('open and close', () => {\n    const {root, component} = setupTest();\n\n    component.close();\n    expect(root).toHaveClass('mdc-circular-progress--closed');\n    expect(component.isClosed).toBe(true);\n\n    component.open();\n    expect(root).not.toHaveClass('mdc-circular-progress--closed');\n    expect(component.isClosed).toBe(false);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-circular-progress/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as circular-progress;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include circular-progress.core-styles($query: $query);\n    @include circular-progress.color(red, $query: $query);\n    @include circular-progress.indeterminate-colors(\n      (red, blue, green, yellow),\n      $query: $query\n    );\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-circular-progress/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCCircularProgressFoundation} from '../../mdc-circular-progress/foundation';\nimport {checkNumTimesSpyCalledWithArgs, verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {cssClasses, strings} = MDCCircularProgressFoundation;\n\ndescribe('MDCCircularProgressFoundation', () => {\n  it('exports strings', () => {\n    expect('strings' in MDCCircularProgressFoundation).toBeTruthy();\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCCircularProgressFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCCircularProgressFoundation, [\n      'addClass',\n      'getDeterminateCircleAttribute',\n      'hasClass',\n      'removeAttribute',\n      'removeClass',\n      'setAttribute',\n      'setDeterminateCircleAttribute',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCCircularProgressFoundation);\n    mockAdapter.getDeterminateCircleAttribute\n        .withArgs(strings.RADIUS)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n        //  not assignable to parameter of type 'string'.\n        .and.returnValue(7);\n    return {foundation, mockAdapter};\n  };\n\n  it('#setDeterminate false adds class and removes aria-valuenow', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setDeterminate(false);\n    expect(foundation.isDeterminate()).toBe(false);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.INDETERMINATE_CLASS);\n    expect(mockAdapter.removeAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_VALUENOW);\n  });\n\n  it('#setDeterminate true removes class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(true);\n    foundation.init();\n    foundation.setDeterminate(true);\n    expect(foundation.isDeterminate()).toBe(true);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.INDETERMINATE_CLASS);\n    expect(mockAdapter.setDeterminateCircleAttribute)\n        .toHaveBeenCalledWith(strings.STROKE_DASHOFFSET, jasmine.any(String));\n  });\n\n  it('#setDeterminate calls setDeterminateCircleAttribute and sets ARIA_VALUENOW',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n           .and.returnValue(true);\n       foundation.init();\n       foundation.setDeterminate(true);\n       expect(mockAdapter.setAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUENOW, '0');\n       expect(mockAdapter.setDeterminateCircleAttribute)\n           .toHaveBeenCalledWith(\n               strings.STROKE_DASHOFFSET, jasmine.any(String));\n     });\n\n  it('#setDeterminate restores previous progress value after toggled from false to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.setProgress(0.123);\n       foundation.setDeterminate(false);\n       foundation.setDeterminate(true);\n\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.setAttribute, [strings.ARIA_VALUENOW, '0.123'], 2);\n     });\n\n  it('#setDeterminate updates progress value set while determinate is false after determinate is true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.setDeterminate(false);\n       foundation.setProgress(0.123);\n       foundation.setDeterminate(true);\n\n       expect(mockAdapter.setAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUENOW, '0.123');\n       expect(mockAdapter.setDeterminateCircleAttribute)\n           .toHaveBeenCalledWith(\n               strings.STROKE_DASHOFFSET, jasmine.any(String));\n     });\n\n  it('#setProgress sets aria-valuenow', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setProgress(0.5);\n    expect(foundation.getProgress()).toEqual(0.5);\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_VALUENOW, '0.5');\n  });\n\n  it('#setProgress on indeterminate does nothing', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(true);\n    foundation.init();\n    foundation.setProgress(0.5);\n    expect(mockAdapter.setDeterminateCircleAttribute).not.toHaveBeenCalled();\n    expect(mockAdapter.setAttribute).not.toHaveBeenCalled();\n  });\n\n  it('#open removes class and aria-hidden', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.open();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.CLOSED_CLASS);\n    expect(mockAdapter.removeAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_HIDDEN);\n    expect(foundation.isClosed()).toBe(false);\n  });\n\n  it('#close adds class and aria-hidden', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.close();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSED_CLASS);\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_HIDDEN, 'true');\n    expect(foundation.isClosed()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-circular-progress/test/mdc-circular-progress.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\n\ndescribe('mdc-circular-progress.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-data-table/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-data-table/README.md",
    "content": "<!--docs:\ntitle: \"Data Tables\"\nlayout: detail\nsection: components\nexcerpt: \"Data tables display information in a grid-like format of rows and columns.\"\niconId: data_table\npath: /catalog/data-tables/\n-->\n\n# Data tables\n\n[Data tables](https://material.io/components/data-tables/#) display sets of data across rows and columns.\n\n![Data table with 5 rows: 1 header row, 4 rows, one column of checkboxes](images/data-table-hero.png)\n\n## Using data tables\n\nData tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.\n\nData tables can contain:\n\n* Interactive components (such as chips, buttons, or menus)\n* Non-interactive elements (such as badges)\n* Tools to query and manipulate data\n\n### Installation\n\n```\nnpm install @material/data-table\n```\n\n### Styles\n\n```scss\n@use \"@material/checkbox\"; // Required only for data table with row selection.\n@use \"@material/icon-button\"; // Required only for data table with column sorting.\n@use \"@material/data-table/data-table\";\n\n@include checkbox.core-styles;\n@include icon-button.core-styles;\n@include data-table.core-styles;\n@include data-table.theme-baseline;\n```\n\n**Note: Styles for any components you intend to include within data-table (e.g. Checkboxes, Buttons etc.) must be\nloaded.**\n\n### JavaScript instantiation\n\n```js\nimport {MDCDataTable} from '@material/data-table';\nconst dataTable = new MDCDataTable(document.querySelector('.mdc-data-table'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n> Instantiating `MDCDataTable` component is only required to add interactions for example, row selection.\n\nMDC Data Table component auto instantiates `MDCCheckbox` for header row checkbox and all row checkboxes. Make sure to set required class names to instantiate checkbox component. We suggest to use `layout` API when rows are added or removed from data table to register new checkbox components.\n\n### Making data tables accessible\n\nPlease refer to the [WAI-ARIA Authoring Practices for table](https://www.w3.org/TR/wai-aria-practices-1.1/#table) for the ARIA recommended role, states and properties required for table element.\n\n## Data tables\n\nData table currently supports following features.\n\n### Standard data table\n\nUse this to render data table without any interactivity such as row selection, sorting, etc.\n\n```html\n<div class=\"mdc-data-table\">\n  <div class=\"mdc-data-table__table-container\">\n    <table class=\"mdc-data-table__table\" aria-label=\"Dessert calories\">\n      <thead>\n        <tr class=\"mdc-data-table__header-row\">\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Dessert</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Carbs (g)</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Protein (g)</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Comments</th>\n        </tr>\n      </thead>\n      <tbody class=\"mdc-data-table__content\">\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Frozen yogurt</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.0</td>\n          <td class=\"mdc-data-table__cell\">Super tasty</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Ice cream sandwich</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">37</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.33333333333</td>\n          <td class=\"mdc-data-table__cell\">I like ice cream more</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Eclair</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">6.0</td>\n          <td class=\"mdc-data-table__cell\">New filing flavor</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n```\n\n### Data table with row selection\n\nThe row selection feature allows users to select table rows via row checkboxes. Users can select or unselect all rows using the header row checkbox. Additionally, the header row checkbox will be automatically updated based on the checked status of each row's checkbox, whether it was checked manually or programmatically.\n\n#### HTML Structure\n\n```html\n<div class=\"mdc-data-table\">\n  <div class=\"mdc-data-table__table-container\">\n    <table class=\"mdc-data-table__table\" aria-label=\"Dessert calories\">\n      <thead>\n        <tr class=\"mdc-data-table__header-row\">\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--checkbox\" role=\"columnheader\" scope=\"col\">\n            <div class=\"mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected\">\n              <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" aria-label=\"Toggle all rows\"/>\n              <div class=\"mdc-checkbox__background\">\n                <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                  <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n                <div class=\"mdc-checkbox__mixedmark\"></div>\n              </div>\n              <div class=\"mdc-checkbox__ripple\"></div>\n            </div>\n          </th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Signal name</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Status</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Severity</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Stage</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Time</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Roles</th>\n        </tr>\n      </thead>\n      <tbody class=\"mdc-data-table__content\">\n        <tr data-row-id=\"u0\" class=\"mdc-data-table__row\">\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--checkbox\">\n            <div class=\"mdc-checkbox mdc-data-table__row-checkbox\">\n              <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" aria-labelledby=\"u0\"/>\n              <div class=\"mdc-checkbox__background\">\n                <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                  <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n                <div class=\"mdc-checkbox__mixedmark\"></div>\n              </div>\n              <div class=\"mdc-checkbox__ripple\"></div>\n            </div>\n          </td>\n          <th class=\"mdc-data-table__cell\" scope=\"row\" id=\"u0\">Arcus watch slowdown</th>\n          <td class=\"mdc-data-table__cell\">Online</td>\n          <td class=\"mdc-data-table__cell\">Medium</td>\n          <td class=\"mdc-data-table__cell\">Triaged</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">0:33</td>\n          <td class=\"mdc-data-table__cell\">Allison Brie</td>\n        </tr>\n        <tr data-row-id=\"u1\" class=\"mdc-data-table__row mdc-data-table__row--selected\" aria-selected=\"true\">\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--checkbox\">\n            <div class=\"mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected\">\n              <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" checked aria-labelledby=\"u1\"/>\n              <div class=\"mdc-checkbox__background\">\n                <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                  <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n                <div class=\"mdc-checkbox__mixedmark\"></div>\n              </div>\n              <div class=\"mdc-checkbox__ripple\"></div>\n            </div>\n          </td>\n          <th class=\"mdc-data-table__cell\" scope=\"row\" id=\"u1\">monarch: prod shared ares-managed-features-provider-heavy</th>\n          <td class=\"mdc-data-table__cell\">Offline</td>\n          <td class=\"mdc-data-table__cell\">Huge</td>\n          <td class=\"mdc-data-table__cell\">Triaged</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">0:33</td>\n          <td class=\"mdc-data-table__cell\">Brie Larson</td>\n        </tr>\n        <tr data-row-id=\"u2\" class=\"mdc-data-table__row mdc-data-table__row--selected\" aria-selected=\"true\">\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--checkbox\">\n            <div class=\"mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected\">\n              <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" checked aria-labelledby=\"u2\"/>\n              <div class=\"mdc-checkbox__background\">\n                <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                  <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n                <div class=\"mdc-checkbox__mixedmark\"></div>\n              </div>\n              <div class=\"mdc-checkbox__ripple\"></div>\n            </div>\n          </td>\n          <th class=\"mdc-data-table__cell\" scope=\"row\" id=\"u2\">monarch: prod shared ares-managed-features-provider-heavy</th>\n          <td class=\"mdc-data-table__cell\">Online</td>\n          <td class=\"mdc-data-table__cell\">Minor</td>\n          <td class=\"mdc-data-table__cell\">Not triaged</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">0:33</td>\n          <td class=\"mdc-data-table__cell\">Jeremy Lake</td>\n        </tr>\n        <tr data-row-id=\"u3\" class=\"mdc-data-table__row\">\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--checkbox\">\n            <div class=\"mdc-checkbox mdc-data-table__row-checkbox\">\n              <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" aria-labelledby=\"u3\"/>\n              <div class=\"mdc-checkbox__background\">\n                <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                  <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n                <div class=\"mdc-checkbox__mixedmark\"></div>\n              </div>\n              <div class=\"mdc-checkbox__ripple\"></div>\n            </div>\n          </td>\n          <th class=\"mdc-data-table__cell\" scope=\"row\" id=\"u3\">Arcus watch slowdown</th>\n          <td class=\"mdc-data-table__cell\">Online</td>\n          <td class=\"mdc-data-table__cell\">Negligible</td>\n          <td class=\"mdc-data-table__cell\">Triaged</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">0:33</td>\n          <td class=\"mdc-data-table__cell\">Angelina Cheng</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n```\n\n#### JavaScript APIs\n\n- Use `layout()` API when new row checkboxes are added or removed from data table.\n- Programmatically get / set row selection using following API's:\n  - `getSelectedRowIds()`\n  - `setSelectedRowIds(string[])`\n\n### Data table with pagination\n\nPagination is rendered at the footer section of data table. Pagination helps\nuser change the rows per page (page size) and navigate between data table pages.\n\n#### HTML Structure\n\n```html\n<div class=\"mdc-data-table\">\n  <div class=\"mdc-data-table__table-container\">\n    <table class=\"mdc-data-table__table\" aria-label=\"Dessert calories\">\n      <thead>\n        <tr class=\"mdc-data-table__header-row\">\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Dessert</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Carbs (g)</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Protein (g)</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Comments</th>\n        </tr>\n      </thead>\n      <tbody class=\"mdc-data-table__content\">\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Frozen yogurt</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.0</td>\n          <td class=\"mdc-data-table__cell\">Super tasty</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Ice cream sandwich</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">37</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.33333333333</td>\n          <td class=\"mdc-data-table__cell\">I like ice cream more</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Eclair</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">6.0</td>\n          <td class=\"mdc-data-table__cell\">New filing flavor</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"mdc-data-table__pagination\">\n    <div class=\"mdc-data-table__pagination-trailing\">\n      <div class=\"mdc-data-table__pagination-rows-per-page\">\n        <div class=\"mdc-data-table__pagination-rows-per-page-label\">\n          Rows per page\n        </div>\n\n        <div class=\"mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select mdc-data-table__pagination-rows-per-page-select--outlined\">\n          <div class=\"mdc-select__anchor\" role=\"button\" aria-haspopup=\"listbox\"\n                aria-labelledby=\"demo-pagination-select\" tabindex=\"0\">\n            <span class=\"mdc-select__selected-text-container\">\n              <span id=\"demo-pagination-select\" class=\"mdc-select__selected-text\">10</span>\n            </span>\n            <span class=\"mdc-select__dropdown-icon\">\n              <svg\n                  class=\"mdc-select__dropdown-icon-graphic\"\n                  viewBox=\"7 10 10 5\">\n                <polygon\n                    class=\"mdc-select__dropdown-icon-inactive\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 10 12 15 17 10\">\n                </polygon>\n                <polygon\n                    class=\"mdc-select__dropdown-icon-active\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 15 12 10 17 15\">\n                </polygon>\n              </svg>\n            </span>\n            <span class=\"mdc-notched-outline mdc-notched-outline--notched\">\n              <span class=\"mdc-notched-outline__leading\"></span>\n              <span class=\"mdc-notched-outline__trailing\"></span>\n            </span>\n          </div>\n\n          <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\" role=\"listbox\">\n            <ul class=\"mdc-list\">\n              <li class=\"mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--selected mdc-list-item--with-one-line\"\n                  aria-selected=\"true\" role=\"option\" data-value=\"10\">\n                <span class=\"mdc-list-item__ripple\"></span>\n                <span class=\"mdc-list-item__content\">\n                  <span class=\"mdc-list-item__primary-text\">10</span>\n                </span>\n              </li>\n              <li class=\"mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line\"\n                  role=\"option\" data-value=\"25\">\n                <span class=\"mdc-list-item__ripple\"></span>\n                <span class=\"mdc-list-item__content\">\n                  <span class=\"mdc-list-item__primary-text\">25</span>\n                </span>\n              </li>\n              <li class=\"mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line\"\n                  role=\"option\" data-value=\"100\">\n                <span class=\"mdc-list-item__ripple\"></span>\n                <span class=\"mdc-list-item__content\">\n                  <span class=\"mdc-list-item__primary-text\">100</span>\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mdc-data-table__pagination-navigation\">\n        <div class=\"mdc-data-table__pagination-total\">\n          1‑10 of 100\n        </div>\n        <button class=\"mdc-icon-button material-icons mdc-data-table__pagination-button\" data-first-page=\"true\" disabled>\n          <div class=\"mdc-button__icon\">first_page</div>\n        </button>\n        <button class=\"mdc-icon-button material-icons mdc-data-table__pagination-button\" data-prev-page=\"true\" disabled>\n          <div class=\"mdc-button__icon\">chevron_left</div>\n        </button>\n        <button class=\"mdc-icon-button material-icons mdc-data-table__pagination-button\" data-next-page=\"true\">\n          <div class=\"mdc-button__icon\">chevron_right</div>\n        </button>\n        <button class=\"mdc-icon-button material-icons mdc-data-table__pagination-button\" data-last-page=\"true\">\n          <div class=\"mdc-button__icon\">last_page</div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n#### JavaScript APIs\n\nData table component does not provide any JavaScript APIs for pagination.\n\n- Should manually initialize following components supporting pagination feature:\n  - Select component: Used to change rows per page (page size).\n  - Icon button: Used to navigate between data table pages.\n- Should re-render data table content when rows per page is changed or navigated to another page using events triggered by select & pagination button.\n- Should manually enable or disable pagination buttons accordingly when data table reaches first or last page.\n\n### Data table with progress indicator\n\nProgress indicator inform users about the status of ongoing processes, such as data loading. Indeterminate linear progress indicator along with a scrim is shown on blocking the table content.\n\n#### HTML Structure\n\n```html\n<div class=\"mdc-data-table\">\n  <div class=\"mdc-data-table__table-container\">\n    <table class=\"mdc-data-table__table\" aria-label=\"Dessert calories\">\n      <thead>\n        <tr class=\"mdc-data-table__header-row\">\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Dessert</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Carbs (g)</th>\n          <th class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric\" role=\"columnheader\" scope=\"col\">Protein (g)</th>\n          <th class=\"mdc-data-table__header-cell\" role=\"columnheader\" scope=\"col\">Comments</th>\n        </tr>\n      </thead>\n      <tbody class=\"mdc-data-table__content\">\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Frozen yogurt</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.0</td>\n          <td class=\"mdc-data-table__cell\">Super tasty</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Ice cream sandwich</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">37</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">4.33333333333</td>\n          <td class=\"mdc-data-table__cell\">I like ice cream more</td>\n        </tr>\n        <tr class=\"mdc-data-table__row\">\n          <th class=\"mdc-data-table__cell\" scope=\"row\">Eclair</th>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">24</td>\n          <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">6.0</td>\n          <td class=\"mdc-data-table__cell\">New filing flavor</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"mdc-data-table__progress-indicator\">\n    <div class=\"mdc-data-table__scrim\"></div>\n    <div class=\"mdc-linear-progress mdc-linear-progress--indeterminate mdc-data-table__linear-progress\" role=\"progressbar\" aria-label=\"Data is being loaded...\">\n      <div class=\"mdc-linear-progress__buffer\">\n        <div class=\"mdc-linear-progress__buffer-bar\"></div>\n        <div class=\"mdc-linear-progress__buffer-dots\"></div>\n      </div>\n      <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n        <span class=\"mdc-linear-progress__bar-inner\"></span>\n      </div>\n      <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n        <span class=\"mdc-linear-progress__bar-inner\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n#### JavaScript APIs\n\n- Use `showProgress()` and `hideProgress()` API to show or hide the progress indicator.\n- Data table component will automatically initializes the linear progress indicator subcomponent.\n\n#### Events\n\nFollowing events are emitted for row selection feature.\n\nEvent constant | Event name | Event detail | Description\n-- | -- | -- | --\n`ROW_SELECTION_CHANGED` | `MDCDataTable:rowSelectionChanged` | `MDCDataTableRowSelectionChangedEventDetail` | Event emitted when row checkbox is checked or unchecked.\n`SELECTED_ALL` | `MDCDataTable:selectedAll` | `void` | Event emitted when header row checkbox is checked.\n`UNSELECTED_ALL` | `MDCDataTable:unselectedAll` | `void` | Event emitted when header row checkbox is unchecked.\n\n### Data table with column sorting\n\nThe column sorting feature allows users to reorder table rows in ascending or descending order by a column.\n\nThe data table handles sorting as follows:\n\n- Triggers event when sort icon button is clicked.\n- Flips the sort icon based on sort direction.\n- Sets appropriate ARIA attributes based on sort status.\n\nData table consumer should re-render the table body (rows) in sorted order on `events.SORTED` event.\n\n#### HTML Structure\n\nSet `data-column-id` on sortable header cell element to uniquely identify column\nthat needs to be sorted.\n\n```html\n<div class=\"mdc-data-table\">\n  <table class=\"mdc-data-table__table\" aria-label=\"Dessert calories\">\n    <thead>\n      <tr class=\"mdc-data-table__header-row\">\n        <th\n          class=\"mdc-data-table__header-cell mdc-data-table__header-cell--with-sort\"\n          role=\"columnheader\"\n          scope=\"col\"\n          aria-sort=\"none\"\n          data-column-id=\"dessert\"\n        >\n          <div class=\"mdc-data-table__header-cell-wrapper\">\n            <div class=\"mdc-data-table__header-cell-label\">\n              Dessert\n            </div>\n            <button class=\"mdc-icon-button material-icons mdc-data-table__sort-icon-button\"\n                    aria-label=\"Sort by dessert\" aria-describedby=\"dessert-status-label\">arrow_upward</button>\n            <div class=\"mdc-data-table__sort-status-label\" aria-hidden=\"true\" id=\"dessert-status-label\">\n            </div>\n          </div>\n        </th>\n        <th\n          class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted\"\n          role=\"columnheader\"\n          scope=\"col\"\n          aria-sort=\"ascending\"\n          data-column-id=\"carbs\"\n        >\n          <div class=\"mdc-data-table__header-cell-wrapper\">\n            <button class=\"mdc-icon-button material-icons mdc-data-table__sort-icon-button\"\n                    aria-label=\"Sort by carbs\" aria-describedby=\"carbs-status-label\">arrow_upward</button>\n            <div class=\"mdc-data-table__header-cell-label\">\n              Carbs (g)\n            </div>\n            <div class=\"mdc-data-table__sort-status-label\" aria-hidden=\"true\" id=\"carbs-status-label\"></div>\n          </div>\n        </th>\n        <th\n          class=\"mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort\"\n          role=\"columnheader\"\n          scope=\"col\"\n          aria-sort=\"none\"\n          data-column-id=\"protein\"\n        >\n          <div class=\"mdc-data-table__header-cell-wrapper\">\n            <button class=\"mdc-icon-button material-icons mdc-data-table__sort-icon-button\"\n                    aria-label=\"Sort by protein\" aria-describedby=\"protein-status-label\">arrow_upward</button>\n            <div class=\"mdc-data-table__header-cell-label\">\n              Protein (g)\n            </div>\n            <div class=\"mdc-data-table__sort-status-label\" aria-hidden=\"true\" id=\"protein-status-label\"></div>\n          </div>\n        </th>\n        <th\n          class=\"mdc-data-table__header-cell\"\n          role=\"columnheader\"\n          scope=\"col\"\n          data-column-id=\"comments\"\n        >\n          Comments\n        </th>\n      </tr>\n    </thead>\n    <tbody class=\"mdc-data-table__content\">\n      <tr class=\"mdc-data-table__row\">\n        <td class=\"mdc-data-table__cell\">Frozen yogurt</td>\n        <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">\n          24\n        </td>\n        <td class=\"mdc-data-table__cell mdc-data-table__cell--numeric\">\n          4.0\n        </td>\n        <td class=\"mdc-data-table__cell\">Super tasty</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n```\n\n#### Events\n\nEvent constant | Event name | Event detail | Description\n-- | -- | -- | --\n`SORTED` | `MDCDataTable:sorted` | `SortActionEventDetail` | Event emitted when clicked on sortable header cell.\n\n## Style customization\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-data-table` | Mandatory. The root DOM element containing `table` and other supporting elements.\n`mdc-data-table--sticky-header` | Optional. Modifier class name added to root element to make header row sticky (fixed) on vertical scroll. (Note: Sticky header feature is not compatible with IE11 browsers.)\n`mdc-data-table__table-container` | Mandatory. Container of Table element. Used for horizontal overflowing of table content.\n`mdc-data-table__table` | Mandatory. Table element. Added to `table` HTML tag.\n`mdc-data-table__header-row` | Mandatory. Table header row element. Added to `thead > tr` HTML tag.\n`mdc-data-table__header-cell` | Mandatory. Table header cell element. Added to `thead > tr > th` HTML tag.\n`mdc-data-table__header-cell--checkbox` | Optional. Table header cell element that contains `mdc-checkbox`. Added to `thead > tr > th` HTML tag.\n`mdc-data-table__header-cell--numeric` | Optional. Table header cell element that maps to numeric cells. Added to `thead > tr > th` HTML tag.\n`mdc-data-table__content` | Mandatory. Table body element. Added to `tbody` HTML tag.\n`mdc-data-table__row` | Mandatory. Table row element. Added to `tbody > tr` HTML tag.\n`mdc-data-table__cell` | Mandatory. Table cell element. Added to `tbody > tr > td` HTML tag.\n`mdc-data-table__cell--numeric` | Optional. Table cell element that contains numeric data. Added to `tbody > tr > td` HTML tag.\n`mdc-data-table__cell--checkbox` | Optional. Table cell element that contains `mdc-checkbox`. Added to `thead> th > td:first-child` HTML tag.\n`mdc-data-table__header-row-checkbox` | Optional. Checkbox element rendered inside table header row element. Add this class name to `mdc-checkbox` element to override styles required for data-table.\n`mdc-data-table__row-checkbox` | Optional. Checkbox element rendered inside table row element. Add this class name to `mdc-checkbox` element to override styles required for data-table.\n`mdc-data-table__row--selected` | Optional. Modifier class added to `mdc-data-table__row` when table row is selected.\n`mdc-data-table__header-cell--sorted` | Optional. Modifier class added to header cell element if column is sorted.\n`mdc-data-table__header-cell--sorted-descending` | Optional. Modifier class added to header cell element if column is sorted in descending order.\n`mdc-data-table__header-cell--with-sort` | Optional. Modifier class added to header cell element if column supports sorting.\n`mdc-data-table__header-cell-wrapper` | Mandatory. Container of header cell label and sort button, used to align header cell in center.\n`mdc-data-table__sort-icon-button` | Optional. Class name added to icon button used as sort icon button. This is sibling to header cell label.\n`mdc-data-table__header-cell-label` | Mandatory. Class name added to header cell label. Child to header cell wrapper element.\n`mdc-data-table__sort-status-label` | Optional. Class name added to sort status label which is visually hidden. Only visible to screen reader users.\n`mdc-data-table__pagination` | Root element of pagination. Pagination block element is rendered as immediate child to data table root element.\n`mdc-data-table__pagination-trailing` | Immediate child of pagination. Used to wrap pagination content.\n`mdc-data-table__pagination-rows-per-page` | Container of rows per page label and rows per page select.\n`mdc-data-table__pagination-rows-per-page-select` | Class name added to select component used for changing rows per page (page size).\n`mdc-data-table__pagination-rows-per-page-select--outlined` | Class name added to outlined select component used for changing rows per page (page size). Used to override outlined select styles.\n`mdc-data-table__pagination-navigation` | Block element containing all icon buttons used to navigate between data table pages.\n`mdc-data-table__pagination-button` | Class name added to icon button component used to navigate between data table pages.\n`mdc-data-table__progress-indicator` | Block element rendered as immediate child to data table root element. Contains linear progress and scrim blocking the data table content.\n`mdc-data-table__scrim` | Element blocking data table content. Rendered inside progress indicator root element.\n`mdc-data-table__linear-progress` | Class name added to linear progress component. Rendered inside progress indicator root element.\n\n### Sass mixins\n\nSee [_mixins.scss](./_mixins.scss) file for up-to-date code documentation of Data table theme APIs.\n\n## `MDCDataTable` properties and methods\n\nSee [component.ts](./component.ts) file for up-to-date code documentation of Data table component APIs.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Data Table for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCDataTableAdapter](./adapter.ts) and [MDCDataTableFoundation](./foundation.ts) for up-to-date code documentation of Data table foundation APIs.\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-cell-checkbox.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use '@material/feature-targeting/feature-targeting';\n\n/// Styles related to checkbox for cell.\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__cell--checkbox {\n    @include feature-targeting.targets($feat-structure) {\n      // Set to lowest width to adapt to cell content. Cell width should adapt\n      // to row checkbox size when it is dense.\n      // NOTE: `min-width` does not seem to work on table cells.\n      width: 1px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-cell.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use './data-table-cell-checkbox';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-data-table__cell {\n    @include typography.typography(body2, $query: $query);\n  }\n\n  @include static-styles($query);\n  @include data-table-cell-checkbox.static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-data-table__cell {\n    @include feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      overflow: hidden;\n      text-align: left;\n      text-overflow: ellipsis;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  .mdc-data-table__cell--numeric {\n    @include feature-targeting.targets($feat-structure) {\n      text-align: right;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: left;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-header-cell-checkbox-sorting.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/animation/functions';\n@use '@material/dom/mixins' as dom;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/rtl/rtl';\n@use './data-table-theme';\n\n/// Styles related to checkbox and sorting for the header cell.\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-data-table__header-cell--checkbox {\n    @include feature-targeting.targets($feat-structure) {\n      // Set to lowest width to adapt to cell content. Cell width should adapt\n      // to row checkbox size when it is dense.\n      // NOTE: `min-width` does not seem to work on table cells.\n      width: 1px;\n    }\n  }\n\n  .mdc-data-table__sort-icon-button {\n    @include icon-button-theme.density(\n      $density-scale: data-table-theme.$sort-icon-density-scale,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      // Apply dummy `transform` to avoid pixel shift on sort down animation.\n      @include rtl.ignore-next-line();\n      transform: rotate(0.0001deg);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, 4px);\n    }\n\n    .mdc-data-table__header-cell--numeric & {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(margin, right, 4px);\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: functions.standard(transform, $duration: 150ms);\n    }\n\n    .mdc-data-table__header-cell--sorted-descending & {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        transform: rotate(-180deg);\n      }\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n\n    &:focus,\n    .mdc-data-table__header-cell:hover &,\n    .mdc-data-table__header-cell--sorted & {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n  }\n\n  .mdc-data-table__header-cell--with-sort {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  .mdc-data-table__sort-status-label {\n    @include dom.visually-hidden($query: $query);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-header-cell.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/animation/functions';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use './data-table-cell';\n@use './data-table-header-cell-checkbox-sorting';\n@use './data-table-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-data-table__header-cell {\n    @include typography.typography(subtitle2, $query: $query);\n  }\n\n  @include static-styles($query);\n  @include data-table-header-cell-checkbox-sorting.static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      outline: none;\n\n      @include rtl.ignore-next-line();\n      text-align: left;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  .mdc-data-table__header-cell--numeric {\n    @include feature-targeting.targets($feat-structure) {\n      text-align: right;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: left;\n      }\n    }\n  }\n\n  .mdc-data-table__header-cell-wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      display: inline-flex;\n      vertical-align: middle;\n    }\n  }\n}\n\n/// Sets header cell in sticky position on table content vertical scroll.\n@mixin header-cell-sticky($query: $query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-structure) {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-pagination.scss",
    "content": "@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use '@material/rtl/mixins' as rtl;\n@use '@material/icon-button/icon-button-theme';\n@use '@material/select/select-theme';\n@use '@material/list/evolution-mixins' as list-theme;\n@use '@material/menu/mixins' as menu-theme;\n@use './data-table-theme';\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n/// Sets core styles for data table pagination.\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-data-table__pagination {\n    @include typography.typography(body2, $query: $query);\n  }\n\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  .mdc-data-table__pagination-trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, 4px);\n\n      align-items: center;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    }\n  }\n\n  .mdc-data-table__pagination-navigation {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      display: flex;\n    }\n  }\n\n  .mdc-data-table__pagination-button {\n    @include icon-button-theme.flip-icon-in-rtl($query: $query);\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, right, 4px);\n    }\n  }\n\n  .mdc-data-table__pagination-total {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(\n        margin,\n        $left-value: 14px,\n        $right-value: 36px\n      );\n\n      white-space: nowrap;\n    }\n  }\n\n  .mdc-data-table__pagination-rows-per-page {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, right, 22px);\n\n      align-items: center;\n      display: inline-flex;\n    }\n  }\n\n  .mdc-data-table__pagination-rows-per-page-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, right, 12px);\n\n      white-space: nowrap;\n    }\n  }\n\n  .mdc-data-table__pagination-rows-per-page-select {\n    @include select-theme.variable-width($min-width: 80px, $query: $query);\n    @include menu-theme.min-width(80px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: 8px 0;\n    }\n\n    // TODO(b/158196144): Set it to `-5` density scale using density mixin when\n    // select component supports it.\n    @include select-theme.outlined-height(\n      data-table-theme.$pagination-rows-per-page-select-height,\n      $query: $query\n    );\n    .mdc-list-item {\n      @include list-theme.one-line-item-height(\n        data-table-theme.$pagination-rows-per-page-select-height,\n        $query: $query\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-progress-indicator.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__progress-indicator {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n      position: absolute;\n      width: 100%;\n    }\n\n    .mdc-data-table--in-progress & {\n      @include feature-targeting.targets($feat-structure) {\n        display: block;\n      }\n    }\n  }\n\n  .mdc-data-table__scrim {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('background-color', surface);\n\n      height: 100%;\n      // TODO(b/151453287): Set appropriate opacity value once we've a UX\n      // guidance.\n      opacity: 0.32;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/animation/functions';\n@use '@material/checkbox/checkbox-theme';\n@use '@material/density/density';\n@use '@material/elevation/mixins';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/list/evolution-mixins' as list-theme;\n@use '@material/rtl/rtl';\n@use '@material/select/select-theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/v0_132' as tokens;\n@use '@material/touch-target/touch-target';\n@use '@material/typography/typography';\n\n$fill-color: surface !default;\n$header-row-fill-color: surface !default;\n$row-fill-color: inherit !default;\n$selected-row-fill-color: rgba(theme-color.prop-value(primary), 0.04) !default;\n$checked-icon-color: primary !default;\n$divider-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;\n$divider-size: 1px !default;\n$row-hover-fill-color: rgba(theme-color.prop-value(on-surface), 0.04) !default;\n\n$header-row-text-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$row-text-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n\n$sort-icon-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n$sort-icon-active-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.87\n) !default;\n$sort-icon-density-scale: -5 !default;\n\n$shape-radius: medium !default;\n$stroke-size: 1px !default;\n$stroke-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;\n\n$row-height: 52px !default;\n$header-row-height: get-header-row-height($row-height) !default;\n$cell-leading-padding: 16px !default;\n$cell-trailing-padding: 16px !default;\n\n$minimum-row-height: 36px !default;\n$maximum-row-height: $row-height !default;\n$default-density-scale: density.$default-scale !default;\n$density-config: (\n  height: (\n    maximum: $row-height,\n    default: $row-height,\n    minimum: $minimum-row-height,\n  ),\n);\n$pagination-rows-per-page-select-height: 36px;\n\n$light-theme: tokens.md-comp-data-table-values();\n\n@function remove-unsupported-keys($theme) {\n  $theme: map.remove(\n    $theme,\n    (\n      // TODO(b/254356584): We don't set pagination background-color.\n      'footer-container-color',\n      // TODO(b/254356584): Select doesn't have Theming API support yet.\n      'footer-outlined-select-text-field-container-height',\n      // TODO(b/254356584): We don't add hover styles on header.\n      'header-hover-headline-color',\n      // TODO(b/254356584): We don't add hover styles on header.\n      'header-hover-sorting-icon-button-color',\n      // TODO(b/254356584): We don't support disabled rows.\n      'row-item-disabled-label-text-color',\n      // TODO(b/254356584): We don't support disabled rows.\n      'row-item-disabled-label-text-opacity',\n      // TODO(b/254356584): We don't add hover styles on selected rows.\n      'row-item-selected-hover-state-layer-color',\n      // TODO(b/254356584): We don't add hover styles on selected rows.\n      'row-item-selected-hover-state-layer-opacity',\n      // TODO(b/254356584): We don't have state layers on rows.\n      'row-item-unselected-hover-state-layer-color'\n        // TODO(b/254356584): We don't have state layers on rows.\n      'row-item-unselected-hover-state-layer-opacity'\n    )\n  );\n  @return $theme;\n}\n\n$_validation-theme: remove-unsupported-keys($light-theme);\n\n$custom-property-prefix: 'data-table';\n\n@mixin theme($theme) {\n  @include theme.validate-theme($_validation-theme, $theme);\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles($theme, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include theme.validate-theme-styles($_validation-theme, $theme);\n  $theme: keys.create-theme-properties($theme, $custom-property-prefix);\n\n  ///////////\n  // Table //\n  ///////////\n\n  @include shape-radius(map.get($theme, 'container-shape'), $query: $query);\n  @include stroke-color(map.get($theme, 'outline-color'), $query: $query);\n  @include stroke-size(map.get($theme, 'outline-width'), $query: $query);\n\n  ////////////\n  // Header //\n  ////////////\n\n  @include header-row-fill-color(\n    map.get($theme, 'header-container-color'),\n    $query: $query\n  );\n  @include header-row-height(\n    map.get($theme, 'header-container-height'),\n    $query: $query\n  );\n  @include header-row-text-color(\n    map.get($theme, 'header-headline-color'),\n    $query: $query\n  );\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-typography) {\n      $font: map.get($theme, 'header-headline-font');\n      $line-height: map.get($theme, 'header-headline-line-height');\n      $size: map.get($theme, 'header-headline-size');\n      $tracking: map.get($theme, 'header-headline-tracking');\n      $weight: map.get($theme, 'header-headline-weight');\n\n      @include theme.property('font-family', $font);\n      @include theme.property('line-height', $line-height);\n      @include theme.property('font-size', $size);\n      @include theme.property('letter-spacing', $tracking);\n      @include theme.property('font-weight', $weight);\n    }\n  }\n\n  //////////\n  // Rows //\n  //////////\n\n  // Separated because row-height() sets min-height on pagination\n  .mdc-data-table__row {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        'height',\n        map.get($theme, 'row-item-container-height')\n      );\n    }\n  }\n  .mdc-data-table__cell {\n    @include feature-targeting.targets($feat-typography) {\n      $font: map.get($theme, 'row-item-label-text-font');\n      $line-height: map.get($theme, 'row-item-label-text-line-height');\n      $size: map.get($theme, 'row-item-label-text-size');\n      $tracking: map.get($theme, 'row-item-label-text-tracking');\n      $weight: map.get($theme, 'row-item-label-text-weight');\n\n      @include theme.property('font-family', $font);\n      @include theme.property('line-height', $line-height);\n      @include theme.property('font-size', $size);\n      @include theme.property('letter-spacing', $tracking);\n      @include theme.property('font-weight', $weight);\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      // Separated because row-text-color() also sets color on pagination text\n      @include theme.property(\n        'color',\n        map.get($theme, 'row-item-label-text-color')\n      );\n    }\n  }\n  .mdc-data-table__cell,\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-color) {\n      // Separated because divider-color() also sets color on pagination select\n      @include theme.property(\n        'border-bottom-color',\n        map.get($theme, 'row-item-outline-color')\n      );\n    }\n  }\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-color) {\n      // Separated because divider-color() also sets color on pagination select\n      @include theme.property(\n        'border-top-color',\n        map.get($theme, 'row-item-outline-color')\n      );\n    }\n  }\n  @include divider-size(\n    map.get($theme, 'row-item-outline-width'),\n    $query: $query\n  );\n  @include row-fill-color(\n    map.get($theme, 'row-item-unselected-container-color'),\n    $query: $query\n  );\n  @include selected-row-fill-color(\n    map.get($theme, 'row-item-selected-container-color'),\n    $query: $query\n  );\n\n  ////////////\n  // Footer //\n  ////////////\n\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-typography) {\n      $font: map.get($theme, 'footer-supporting-text-font');\n      $line-height: map.get($theme, 'footer-supporting-text-line-height');\n      $size: map.get($theme, 'footer-supporting-text-size');\n      $tracking: map.get($theme, 'footer-supporting-text-tracking');\n      $weight: map.get($theme, 'footer-supporting-text-weight');\n\n      @include theme.property('font-family', $font);\n      @include theme.property('line-height', $line-height);\n      @include theme.property('font-size', $size);\n      @include theme.property('letter-spacing', $tracking);\n      @include theme.property('font-weight', $weight);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      // Separated because row-height() also sets height on row\n      @include theme.property(\n        'min-height',\n        map.get($theme, 'footer-container-height')\n      );\n    }\n  }\n  .mdc-data-table__pagination-total,\n  .mdc-data-table__pagination-rows-per-page-label {\n    @include feature-targeting.targets($feat-color) {\n      // Separated because row-text-color() also sets color on row text\n      @include theme.property(\n        'color',\n        map.get($theme, 'footer-supporting-text-color')\n      );\n    }\n  }\n}\n\n@function get-header-row-height($height) {\n  @return $height + 4px;\n}\n\n/// Sets the color of sort icon button when it is in idle state.\n/// (icon showed on header cell focus)\n/// @param {String} $color - Color of sort icon button\n@mixin sort-icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__sort-icon-button {\n    @include icon-button-theme.ink-color($color, $query: $query);\n  }\n}\n\n/// Sets the color of sort icon button when it is activated (sorted).\n/// @param {String} $color - Color of sort icon button\n@mixin sort-icon-active-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button {\n    @include icon-button-theme.ink-color($color, $query: $query);\n  }\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property('background-color', $color);\n  }\n}\n\n@mixin header-row-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Set background color to cell instead of row to support sticky header.\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('background-color', $color);\n    }\n  }\n}\n\n@mixin row-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__row {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('background-color', $color);\n    }\n  }\n}\n\n@mixin selected-row-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__row--selected {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('background-color', $color);\n    }\n  }\n}\n\n@mixin checked-icon-color($color, $query: feature-targeting.all()) {\n  .mdc-data-table__header-row-checkbox,\n  .mdc-data-table__row-checkbox {\n    @include checkbox-theme.focus-indicator-color($color, $query: $query);\n    @include checkbox-theme.container-colors(\n      $marked-stroke-color: $color,\n      $marked-fill-color: $color,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets divider color of data table (including outline color of rows per page\n/// select). Use `stroke-color()` to set table border color.\n/// @param {Color} $color Divider color.\n///\n@mixin divider-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__pagination-rows-per-page-select--outlined {\n    @include select-theme.outline-color($color, $query: $query);\n  }\n\n  .mdc-data-table__cell,\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('border-bottom-color', $color);\n    }\n  }\n\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('border-top-color', $color);\n    }\n  }\n}\n\n@mixin divider-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__cell,\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('border-bottom-width', $size);\n      border-bottom-style: solid;\n    }\n  }\n\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('border-top-width', $size);\n      border-top-style: solid;\n    }\n  }\n\n  .mdc-data-table__row:last-child > .mdc-data-table__cell {\n    @include feature-targeting.targets($feat-structure) {\n      border-bottom: none;\n    }\n  }\n}\n\n@mixin row-hover-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('background-color', $color);\n    }\n  }\n}\n\n@mixin header-row-text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('color', $color);\n    }\n  }\n}\n\n///\n/// Sets row text color (including pagination row text).\n/// @param {Color} $color Row text color\n///\n@mixin row-text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-data-table__pagination-total,\n  .mdc-data-table__pagination-rows-per-page-label,\n  .mdc-data-table__cell {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('color', $color);\n    }\n  }\n}\n\n///\n/// Sets rounded shape radius to data table.\n/// @param {Number|List} $radius - Shape radius in `border-radius` CSS format.\n/// @param {Boolean} $rtl-reflexive - Set to `true` to flip radius corners in\n///     RTL context.\n///\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n\n  // Apply same border radius as parent to leading/trailing header cells,\n  // and leading/trailing cells of last row.\n  // Cells that have explicit background color applied require border\n  // radius to take the parents' rounded shape.\n  $border-radius: shape-functions.unpack-radius($radius);\n  $top-left-radius: shape-functions.resolve-radius(list.nth($border-radius, 1));\n  $top-right-radius: shape-functions.resolve-radius(\n    list.nth($border-radius, 2)\n  );\n  $bottom-right-radius: shape-functions.resolve-radius(\n    list.nth($border-radius, 3)\n  );\n  $bottom-left-radius: shape-functions.resolve-radius(\n    list.nth($border-radius, 4)\n  );\n\n  .mdc-data-table__header-cell:first-child {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-top-left-radius, $top-left-radius);\n\n      @include rtl.rtl {\n        @include theme.property(\n          border-top-right-radius,\n          if($rtl-reflexive, $top-left-radius, $top-right-radius)\n        );\n\n        border-top-left-radius: 0;\n      }\n    }\n  }\n\n  .mdc-data-table__header-cell:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-top-right-radius, $top-right-radius);\n\n      @include rtl.rtl {\n        @include theme.property(\n          border-top-left-radius,\n          if($rtl-reflexive, $top-right-radius, $top-left-radius)\n        );\n\n        border-top-right-radius: 0;\n      }\n    }\n  }\n\n  &.mdc-data-table--without-footer\n    .mdc-data-table__row:last-child\n    > .mdc-data-table__cell:first-child {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-bottom-left-radius, $bottom-left-radius);\n\n      @include rtl.rtl {\n        @include theme.property(\n          border-bottom-right-radius,\n          if($rtl-reflexive, $bottom-left-radius, $bottom-right-radius)\n        );\n\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n\n  &.mdc-data-table--without-footer\n    .mdc-data-table__row:last-child\n    > .mdc-data-table__cell:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-bottom-right-radius, $bottom-right-radius);\n\n      @include rtl.rtl {\n        @include theme.property(\n          border-bottom-left-radius,\n          if($rtl-reflexive, $bottom-right-radius, $bottom-left-radius)\n        );\n\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n}\n\n@mixin stroke-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property('border-width', $size);\n    border-style: solid;\n  }\n}\n\n@mixin stroke-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property('border-color', $color);\n  }\n}\n\n@mixin header-row-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__header-row {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('height', $height);\n    }\n  }\n}\n\n@mixin row-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__row {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('height', $height);\n    }\n  }\n\n  .mdc-data-table__pagination {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('min-height', $height);\n    }\n  }\n}\n\n///\n/// Sets cell padding including cell, header cell, row checkbox cell and header\n/// row checkbox cell.\n/// @param {Number} $leading-padding [$cell-leading-padding] Leading padding.\n/// @param {Number} $trailing-padding [$cell-trailing-padding] Trailing padding.\n/// @param {Number} $checkbox-touch-size [$checkbox-touch-size] Checkbox Touch\n///     Size. Use this to adjust row checkbox cell leading padding based on\n///     checkbox density scale.\n/// @param {Number} $row-checkbox-density-scale [null] Density scale of row\n///     checkbox. Use this to adjust alignment of row checkbox within a cell.\n///     Ignore if data table's density scale is 0.\n///     See `checkbox-theme.density()` mixin for supported density scales.\n///\n@mixin cell-padding(\n  $leading-padding: $cell-leading-padding,\n  $trailing-padding: $cell-trailing-padding,\n  $row-checkbox-density-scale: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__cell,\n  .mdc-data-table__header-cell {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0 $trailing-padding 0 $leading-padding;\n    }\n  }\n\n  @include checkbox-cell-padding(\n    $leading-padding: $leading-padding,\n    $row-checkbox-density-scale: $row-checkbox-density-scale,\n    $query: $query\n  );\n}\n\n///\n/// Sets only row checkbox cell and header row checkbox cell leading padding.\n/// Use `cell-padding()` to set all cell's padding.\n/// @param {Number} $leading-padding [$cell-leading-padding] Leading padding.\n/// @param {Number} $checkbox-touch-size [$checkbox-touch-size] Checkbox Touch\n///     Size. Use this to adjust row checkbox cell leading padding based on\n///     checkbox density scale.\n/// @param {Number} $row-checkbox-density-scale [null] Density scale of row\n///     checkbox. Use this to adjust alignment of row checkbox within a cell.\n///     Ignore if data table's density scale is 0.\n///     See `checkbox-theme.density()` mixin for supported density scales.\n///\n@mixin checkbox-cell-padding(\n  $leading-padding: $cell-leading-padding,\n  $row-checkbox-density-scale: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__header-cell--checkbox,\n  .mdc-data-table__cell--checkbox {\n    @include feature-targeting.targets($feat-structure) {\n      // Distance from leading cell bound to checkbox's icon bound should be\n      // 16dp (`$leading-padding`). Calculate required padding excluding\n      // checkbox bounds.\n      $checkbox-icon-size: 24px;\n      $checkbox-touch-size: touch-target.$height;\n      @if $row-checkbox-density-scale and $row-checkbox-density-scale < 0 {\n        $checkbox-touch-size: checkbox-theme.get-ripple-size(\n          $row-checkbox-density-scale\n        );\n      }\n      $leading-padding: $leading-padding -\n        math.div($checkbox-touch-size - $checkbox-icon-size, 2);\n      @include rtl.reflexive-property(padding, $leading-padding, 0);\n    }\n  }\n}\n\n@mixin column-widths($width-list, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @for $i from 1 through list.length($width-list) {\n    .mdc-data-table__row > :nth-child(#{$i}) {\n      @include feature-targeting.targets($feat-structure) {\n        width: list.nth($width-list, $i);\n      }\n    }\n  }\n}\n\n///\n/// Sets density scale for data table. Use corresponding density mixins of child components (such as Checkbox) to apply\n/// density scales which will be rendered inside data table.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`.\n/// @param {Number} $row-checkbox-density-scale [null] Density scale of row\n///     checkbox. Use this to set density of row checkbox and also\n///     automatically adjust the alignment of row checkbox within a cell.\n///     See `checkbox.density()` mixin for supported density scales.\n///\n@mixin density(\n  $density-scale,\n  $row-checkbox-density-scale: null,\n  $pagination-select-density-scale: null,\n  $query: feature-targeting.all()\n) {\n  $height: density.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include row-height($height, $query: $query);\n  @include header-row-height(get-header-row-height($height), $query: $query);\n\n  @if $row-checkbox-density-scale {\n    @include checkbox-cell-padding(\n      $leading-padding: $cell-leading-padding,\n      $row-checkbox-density-scale: $row-checkbox-density-scale,\n      $query: $query\n    );\n\n    .mdc-data-table__header-row-checkbox,\n    .mdc-data-table__row-checkbox {\n      @include checkbox-theme.density($row-checkbox-density-scale);\n    }\n  }\n\n  @if $pagination-select-density-scale {\n    @include select-density($pagination-select-density-scale);\n  }\n}\n\n@mixin select-density($density-scale) {\n  @include select-theme.outlined-height(\n    select-theme.$height + density.$interval * $density-scale\n  );\n  .mdc-list-item {\n    @include list-theme.one-line-item-density(\n      $density-scale + 2,\n      $exclude-variants: true\n    );\n  }\n\n  margin: 0;\n}\n\n///\n/// Sets maximum height of data table. Use this to make table vertically\n/// scrollable.\n/// @param {Number} $height\n///\n@mixin max-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table__table-container {\n    @include feature-targeting.targets($feat-structure) {\n      max-height: $height;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_data-table.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/animation/functions';\n@use '@material/checkbox/mixins' as checkbox-mixins;\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom;\n@use '@material/elevation/mixins';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './data-table-cell';\n@use './data-table-header-cell';\n@use './data-table-pagination';\n@use './data-table-progress-indicator';\n@use './data-table-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include table-styles($query: $query);\n  @include data-table-theme.sort-icon-color(\n    data-table-theme.$sort-icon-color,\n    $query: $query\n  );\n  @include data-table-theme.sort-icon-active-color(\n    data-table-theme.$sort-icon-active-color,\n    $query: $query\n  );\n\n  @include data-table-progress-indicator.static-styles($query: $query);\n  @include data-table-pagination.core-styles($query: $query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-data-table {\n    @include feature-targeting.targets($feat-structure) {\n      // Makes the table scroll smoothly in iOS.\n      // NOTE: Root element should not be scrollable, added this for backward\n      // compatibility.\n      -webkit-overflow-scrolling: touch;\n      display: inline-flex;\n      flex-direction: column;\n      box-sizing: border-box;\n      position: relative;\n    }\n  }\n\n  .mdc-data-table__table-container {\n    @include feature-targeting.targets($feat-structure) {\n      // Makes the table scroll smoothly in iOS.\n      -webkit-overflow-scrolling: touch;\n      overflow-x: auto;\n      width: 100%;\n    }\n  }\n\n  .mdc-data-table__table {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: 100%; // Makes table full-width of its container (Firefox / IE11)\n      border: 0;\n      white-space: nowrap;\n      border-spacing: 0;\n      /**\n       * With table-layout:fixed, table and column widths are defined by the width\n       * of the first row of cells. Cells in subsequent rows do not affect column\n       * widths. This results in a predictable table layout and may also speed up\n       * rendering.\n       */\n      table-layout: fixed;\n    }\n  }\n}\n\n// This API includes only the table styles without the sorting, pagination and\n// loading styles. It is intended to be used by frameworks that only need the\n// table styles.\n@mixin table-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define data-table\n\n  .mdc-data-table__content {\n    @include typography.typography(body2, $query: $query);\n  }\n\n  .mdc-data-table {\n    @include data-table-theme.fill-color(\n      data-table-theme.$fill-color,\n      $query: $query\n    );\n    @include data-table-theme.shape-radius(\n      data-table-theme.$shape-radius,\n      $query: $query\n    );\n    @include data-table-theme.stroke-size(\n      data-table-theme.$stroke-size,\n      $query: $query\n    );\n    @include data-table-theme.stroke-color(\n      data-table-theme.$stroke-color,\n      $query: $query\n    );\n  }\n\n  // Note that we don't output the color styles inside the `@at-root`,\n  // because it makes it difficult to consume by projects that wrap their\n  // themes in a class (e.g. `.my-theme { @include mdc-data-table-core-style() }`).\n  @include data-table-theme.row-fill-color(\n    data-table-theme.$row-fill-color,\n    $query: $query\n  );\n  @include data-table-theme.header-row-fill-color(\n    data-table-theme.$header-row-fill-color,\n    $query: $query\n  );\n  @include data-table-theme.selected-row-fill-color(\n    data-table-theme.$selected-row-fill-color,\n    $query: $query\n  );\n  @include data-table-theme.divider-color(\n    data-table-theme.$divider-color,\n    $query: $query\n  );\n  @include data-table-theme.divider-size(\n    data-table-theme.$divider-size,\n    $query: $query\n  );\n  @include data-table-theme.row-hover-fill-color(\n    data-table-theme.$row-hover-fill-color,\n    $query: $query\n  );\n  @include data-table-theme.header-row-text-color(\n    data-table-theme.$header-row-text-color,\n    $query: $query\n  );\n  @include data-table-theme.row-text-color(\n    data-table-theme.$row-text-color,\n    $query: $query\n  );\n  @include data-table-theme.density(\n    data-table-theme.$default-density-scale,\n    $query: $query\n  );\n  @include data-table-theme.cell-padding(\n    $leading-padding: data-table-theme.$cell-leading-padding,\n    $trailing-padding: data-table-theme.$cell-trailing-padding,\n    $query: $query\n  );\n\n  @include data-table-cell.core-styles($query: $query);\n  @include data-table-header-cell.core-styles($query: $query);\n\n  .mdc-data-table--sticky-header {\n    @include data-table-header-cell.header-cell-sticky($query: $query);\n  }\n\n  @include static-styles($query);\n  @include data-table-header-cell.static-styles($query);\n  @include data-table-cell.static-styles($query);\n  @include data-table-pagination.static-styles($query);\n  @include data-table-progress-indicator.static-styles($query);\n}\n\n@mixin theme-baseline($query: feature-targeting.all()) {\n  @include data-table-theme.checked-icon-color(\n    data-table-theme.$checked-icon-color,\n    $query: $query\n  );\n}\n"
  },
  {
    "path": "packages/mdc-data-table/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './data-table-theme';\n"
  },
  {
    "path": "packages/mdc-data-table/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/checkbox\" as mdc-checkbox-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./mixins\" as mdc-data-table-*;\n"
  },
  {
    "path": "packages/mdc-data-table/_mixins.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './data-table-theme' show sort-icon-color, sort-icon-active-color, fill-color, header-row-fill-color, row-fill-color, selected-row-fill-color, checked-icon-color, divider-color, divider-size, row-hover-fill-color, header-row-text-color, row-text-color, shape-radius, stroke-size, stroke-color, header-row-height, row-height, cell-padding, column-widths, density;\n@forward './data-table' show core-styles, theme-baseline;\n"
  },
  {
    "path": "packages/mdc-data-table/_variables.import.scss",
    "content": "@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"./variables\" as mdc-data-table-*;\n"
  },
  {
    "path": "packages/mdc-data-table/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './data-table-theme' show $fill-color, $header-row-fill-color, $row-fill-color, $selected-row-fill-color, $checked-icon-color, $divider-color, $divider-size, $row-hover-fill-color, $checkbox-touch-dimension, $header-row-text-color, $row-text-color, $sort-icon-color, $sort-icon-active-color, $sort-icon-density-scale, $shape-radius, $stroke-size, $stroke-color, $row-height, $header-row-height, $cell-leading-padding, $cell-trailing-padding, $minimum-row-height, $maximum-row-height, $default-density-scale;\n"
  },
  {
    "path": "packages/mdc-data-table/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {SortValue} from './constants';\nimport {MDCDataTableRowSelectionChangedEventDetail, ProgressIndicatorStyles, RowClickEventData, SortActionEventDetail} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCDataTableAdapter {\n  /**\n   * Adds CSS class name to root element.\n   *\n   * @param className CSS class name to add to root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes CSS class name from root element.\n   *\n   * @param className CSS class name to add to root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Adds a class name to row element at given row index excluding header row.\n   *\n   * @param rowIndex Index of row element excluding header row.\n   * @param cssClasses CSS Class string to add.\n   */\n  addClassAtRowIndex(rowIndex: number, cssClasses: string): void;\n\n  /**\n   * @return Row count excluding header row.\n   */\n  getRowCount(): number;\n\n  /**\n   * @return Array of row elements excluding header row.\n   */\n  getRowElements(): HTMLElement[];\n\n  /**\n   * Returns row id of row element at given row index based on `data-row-id`\n   * attribute on row element `tr`.\n   *\n   * @param rowIndex Index of row element.\n   * @return Row id of row element, returns `null` in absence of `data-row-id`\n   *     attribute on row element.\n   */\n  getRowIdAtIndex(rowIndex: number): string|null;\n\n  /**\n   * Returns index of row element that contains give child element. Returns -1\n   * if element is not child of any row element.\n   *\n   * @param el Child element of row element.\n   * @return Index of row element.\n   */\n  getRowIndexByChildElement(el: Element): number;\n\n  /**\n   * @return Selected row count.\n   */\n  getSelectedRowCount(): number;\n\n  /**\n   * @param rowIndex Index of row element.\n   * @return True if row checkbox at given row index is checked.\n   */\n  isCheckboxAtRowIndexChecked(rowIndex: number): boolean;\n\n  /**\n   * @return True if header row checkbox is checked.\n   */\n  isHeaderRowCheckboxChecked(): boolean;\n\n  /**\n   * @return True if table rows are selectable.\n   */\n  isRowsSelectable(): boolean;\n\n  /**\n   * Notifies when row selection is changed.\n   *\n   * @param data Event detail data for row selection changed event.\n   */\n  notifyRowSelectionChanged(data: MDCDataTableRowSelectionChangedEventDetail):\n      void;\n\n  /**\n   * Notifies when header row is checked.\n   */\n  notifySelectedAll(): void;\n\n  /**\n   * Notifies when header row is unchecked.\n   */\n  notifyUnselectedAll(): void;\n\n  /**\n   * Notifies when data row is clicked.\n   */\n  notifyRowClick(detail: RowClickEventData): void;\n\n  /**\n   * Initializes header row checkbox. Destroys previous header row checkbox\n   * instance if any.\n   * @return Can return Promise only if registering checkbox is asynchronous.\n   */\n  registerHeaderRowCheckbox(): Promise<void>|void;\n\n  /**\n   * Initializes all row checkboxes. Destroys previous row checkbox instances if\n   * any. This is usually called when row checkboxes are added or removed from\n   * table.\n   * @return Can return Promise only if registering checkbox is asynchronous.\n   */\n  registerRowCheckboxes(): Promise<void>|void;\n\n  /**\n   * Removes class name from row element at give row index.\n   *\n   * @param rowIndex Index of row element excluding header row element.\n   * @param cssClasses Class name string.\n   */\n  removeClassAtRowIndex(rowIndex: number, cssClasses: string): void;\n\n  /**\n   * Sets attribute to row element at given row index.\n   *\n   * @param rowIndex Index of row element excluding header row element.\n   * @param attr Name of attribute.\n   * @param value Value of attribute.\n   */\n  setAttributeAtRowIndex(rowIndex: number, attr: string, value: string): void;\n\n  /**\n   * Sets header row checkbox checked or unchecked.\n   *\n   * @param checked True to set header row checkbox checked.\n   */\n  setHeaderRowCheckboxChecked(checked: boolean): void;\n\n  /**\n   * Sets header row checkbox to indeterminate.\n   *\n   * @param indeterminate True to set header row checkbox indeterminate.\n   */\n  setHeaderRowCheckboxIndeterminate(indeterminate: boolean): void;\n\n  /**\n   * Sets row checkbox to checked or unchecked at given row index.\n   *\n   * @param rowIndex Index of row element excluding header row element.\n   * @param checked True to set checked.\n   */\n  setRowCheckboxCheckedAtIndex(rowIndex: number, checked: boolean): void;\n\n  /**\n   * @return Total count of header cells.\n   */\n  getHeaderCellCount(): number;\n\n  /**\n   * @return Array of header cell elements.\n   */\n  getHeaderCellElements(): HTMLElement[];\n\n  /**\n   * @return Attribute value for given header cell index.\n   */\n  getAttributeByHeaderCellIndex(columnIndex: number, attribute: string): string\n      |null;\n\n  /**\n   * Sets attribute of a header cell by index.\n   */\n  setAttributeByHeaderCellIndex(\n      columnIndex: number, attribute: string, value: string): void;\n\n  /**\n   * Sets class name of a header cell by index.\n   */\n  setClassNameByHeaderCellIndex(columnIndex: number, className: string): void;\n\n  /**\n   * Removes a class name of a header cell by index.\n   */\n  removeClassNameByHeaderCellIndex(columnIndex: number, className: string):\n      void;\n\n  /**\n   * Notifies when column is sorted.\n   */\n  notifySortAction(data: SortActionEventDetail): void;\n\n  /**\n   * @return Returns computed styles height of table container element.\n   */\n  getTableContainerHeight(): number;\n\n  /**\n   * @return Returns computed styles height of table's header element.\n   */\n  getTableHeaderHeight(): number;\n\n  /**\n   * Sets progress indicator CSS styles to position it on top of table body.\n   */\n  setProgressIndicatorStyles(styles: ProgressIndicatorStyles): void;\n\n  /**\n   * Sets appropriate sort status label by header cell index. Skips setting sort\n   * status label if header cell is not sortable.\n   *\n   * Example status label to set for sortValue:\n   *\n   *   - `SortValue.ASCENDING`: 'Sorted in ascending order'\n   *   - `SortValue.DESCENDING`: 'Sorted in descending order'\n   *   - `SortValue.NONE`: '' (Empty string)\n   */\n  setSortStatusLabelByHeaderCellIndex(\n      columnIndex: number, sortValue: SortValue): void;\n}\n"
  },
  {
    "path": "packages/mdc-data-table/component.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCCheckbox, MDCCheckboxFactory} from '@material/checkbox/component';\nimport {closest} from '@material/dom/ponyfill';\nimport {MDCLinearProgress} from '@material/linear-progress/component';\n\nimport {MDCDataTableAdapter} from './adapter';\nimport {cssClasses, dataAttributes, events, messages, selectors, SortValue} from './constants';\nimport {MDCDataTableFoundation} from './foundation';\nimport {MDCDataTableRowSelectionChangedEventDetail, RowClickEventData} from './types';\n\n/** MDC Data Table */\nexport class MDCDataTable extends MDCComponent<MDCDataTableFoundation> {\n  static override attachTo(root: HTMLElement): MDCDataTable {\n    return new MDCDataTable(root);\n  }\n\n  private headerRowCheckbox!: MDCCheckbox;\n  private rowCheckboxList!: MDCCheckbox[];\n  private checkboxFactory!: MDCCheckboxFactory;\n  private linearProgress!: MDCLinearProgress;\n  private headerRow!: HTMLElement;\n  private content!: HTMLElement;\n  private handleHeaderRowCheckboxChange!: SpecificEventListener<'change'>;\n  private handleRowCheckboxChange!: SpecificEventListener<'change'>;\n  private headerRowClickListener!:\n      SpecificEventListener<'click'>;  // Assigned in `initialSyncWithDOM()`\n  private handleContentClick!:\n      SpecificEventListener<'click'>;  // Assigned in `initialSyncWithDOM()`\n\n  override initialize(\n      checkboxFactory:\n          MDCCheckboxFactory = (el: HTMLElement) => new MDCCheckbox(el)) {\n    this.checkboxFactory = checkboxFactory;\n  }\n\n  override initialSyncWithDOM() {\n    this.headerRow =\n        this.root.querySelector<HTMLElement>(`.${cssClasses.HEADER_ROW}`)!;\n    this.handleHeaderRowCheckboxChange = () => {\n      this.foundation.handleHeaderRowCheckboxChange();\n    };\n    this.headerRow.addEventListener(\n        'change', this.handleHeaderRowCheckboxChange);\n\n    this.headerRowClickListener = (event) => {\n      this.handleHeaderRowClick(event);\n    };\n    this.headerRow.addEventListener('click', this.headerRowClickListener);\n\n\n    this.content =\n        this.root.querySelector<HTMLElement>(`.${cssClasses.CONTENT}`)!;\n    this.handleContentClick = (event) => {\n      const dataRowEl =\n          closest(event.target as Element, selectors.ROW) as HTMLElement;\n      if (!dataRowEl) return;\n\n      this.foundation.handleRowClick({\n        rowId: this.getRowIdByRowElement(dataRowEl),\n        row: dataRowEl,\n        altKey: event.altKey,\n        ctrlKey: event.ctrlKey,\n        metaKey: event.metaKey,\n        shiftKey: event.shiftKey,\n      });\n    };\n    this.content.addEventListener('click', this.handleContentClick);\n    this.handleRowCheckboxChange = (event) => {\n      this.foundation.handleRowCheckboxChange(event);\n    };\n    this.content.addEventListener('change', this.handleRowCheckboxChange);\n\n    this.layout();\n  }\n\n  /**\n   * Re-initializes header row checkbox and row checkboxes when selectable rows\n   * are added or removed from table.\n   */\n  layout() {\n    this.foundation.layout();\n  }\n\n  /**\n   * @return Returns array of header row cell elements.\n   */\n  getHeaderCells() {\n    return Array.from(\n        this.root.querySelectorAll<HTMLElement>(selectors.HEADER_CELL));\n  }\n\n  /**\n   * @return Returns array of row elements.\n   */\n  getRows(): HTMLElement[] {\n    return this.foundation.getRows();\n  }\n\n  /**\n   * @return Returns array of selected row ids.\n   */\n  getSelectedRowIds(): Array<string|null> {\n    return this.foundation.getSelectedRowIds();\n  }\n\n  /**\n   * Sets selected row ids. Overwrites previously selected rows.\n   * @param rowIds Array of row ids that needs to be selected.\n   */\n  setSelectedRowIds(rowIds: string[]) {\n    this.foundation.setSelectedRowIds(rowIds);\n  }\n\n  /**\n   * Shows progress indicator when data table is in loading state.\n   */\n  showProgress() {\n    this.getLinearProgress().open();\n    this.foundation.showProgress();\n  }\n\n  /**\n   * Hides progress indicator after data table is finished loading.\n   */\n  hideProgress() {\n    this.foundation.hideProgress();\n    this.getLinearProgress().close();\n  }\n\n  override destroy() {\n    if (this.handleHeaderRowCheckboxChange) {\n      this.headerRow.removeEventListener(\n          'change', this.handleHeaderRowCheckboxChange);\n    }\n    if (this.headerRowClickListener) {\n      this.headerRow.removeEventListener('click', this.headerRowClickListener);\n    }\n    if (this.handleRowCheckboxChange) {\n      this.content.removeEventListener('change', this.handleRowCheckboxChange);\n    }\n\n    if (this.headerRowCheckbox) {\n      this.headerRowCheckbox.destroy();\n    }\n    if (this.rowCheckboxList) {\n      for (const checkbox of this.rowCheckboxList) {\n        checkbox.destroy();\n      }\n    }\n    if (this.handleContentClick) {\n      this.content.removeEventListener('click', this.handleContentClick);\n    }\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCDataTableAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      getHeaderCellElements: () => this.getHeaderCells(),\n      getHeaderCellCount: () => this.getHeaderCells().length,\n      getAttributeByHeaderCellIndex: (index, attribute) => {\n        return this.getHeaderCells()[index].getAttribute(attribute);\n      },\n      setAttributeByHeaderCellIndex: (index, attribute, value) => {\n        this.safeSetAttribute(this.getHeaderCells()[index], attribute, value);\n      },\n      setClassNameByHeaderCellIndex: (index, className) => {\n        this.getHeaderCells()[index].classList.add(className);\n      },\n      removeClassNameByHeaderCellIndex: (index, className) => {\n        this.getHeaderCells()[index].classList.remove(className);\n      },\n      notifySortAction: (data) => {\n        this.emit(events.SORTED, data, /** shouldBubble */ true);\n      },\n      getTableContainerHeight: () => {\n        const tableContainer = this.root.querySelector<HTMLElement>(\n            `.${cssClasses.TABLE_CONTAINER}`);\n\n        if (!tableContainer) {\n          throw new Error('MDCDataTable: Table container element not found.');\n        }\n\n        return tableContainer.getBoundingClientRect().height;\n      },\n      getTableHeaderHeight: () => {\n        const tableHeader =\n            this.root.querySelector<HTMLElement>(selectors.HEADER_ROW);\n\n        if (!tableHeader) {\n          throw new Error('MDCDataTable: Table header element not found.');\n        }\n\n        return tableHeader.getBoundingClientRect().height;\n      },\n      setProgressIndicatorStyles: (styles) => {\n        const progressIndicator =\n            this.root.querySelector<HTMLElement>(selectors.PROGRESS_INDICATOR);\n\n        if (!progressIndicator) {\n          throw new Error(\n              'MDCDataTable: Progress indicator element not found.');\n        }\n\n        progressIndicator.style.setProperty('height', styles.height);\n        progressIndicator.style.setProperty('top', styles.top);\n      },\n      addClassAtRowIndex: (rowIndex: number, className: string) => {\n        this.getRows()[rowIndex].classList.add(className);\n      },\n      getRowCount: () => this.getRows().length,\n      getRowElements: () =>\n          Array.from(this.root.querySelectorAll<HTMLElement>(selectors.ROW)),\n      getRowIdAtIndex: (rowIndex: number) =>\n          this.getRows()[rowIndex].getAttribute(dataAttributes.ROW_ID),\n      getRowIndexByChildElement: (el: Element) => {\n        return this.getRows().indexOf(\n            (closest(el, selectors.ROW) as HTMLElement));\n      },\n      getSelectedRowCount: () =>\n          this.root.querySelectorAll<HTMLElement>(selectors.ROW_SELECTED)\n              .length,\n      isCheckboxAtRowIndexChecked: (rowIndex: number) =>\n          this.rowCheckboxList[rowIndex].checked,\n      isHeaderRowCheckboxChecked: () => this.headerRowCheckbox.checked,\n      isRowsSelectable: () =>\n          !!this.root.querySelector<HTMLElement>(selectors.ROW_CHECKBOX) ||\n          !!this.root.querySelector<HTMLElement>(selectors.HEADER_ROW_CHECKBOX),\n      notifyRowSelectionChanged:\n          (data: MDCDataTableRowSelectionChangedEventDetail) => {\n            this.emit(\n                events.ROW_SELECTION_CHANGED, {\n                  row: this.getRowByIndex(data.rowIndex),\n                  rowId: this.getRowIdByIndex(data.rowIndex),\n                  rowIndex: data.rowIndex,\n                  selected: data.selected,\n                },\n                /** shouldBubble */ true);\n          },\n      notifySelectedAll: () => {\n        this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true);\n      },\n      notifyUnselectedAll: () => {\n        this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true);\n      },\n      notifyRowClick: (data: RowClickEventData) => {\n        this.emit(events.ROW_CLICK, data, /** shouldBubble */ true);\n      },\n      registerHeaderRowCheckbox: () => {\n        if (this.headerRowCheckbox) {\n          this.headerRowCheckbox.destroy();\n        }\n\n        const checkboxEl = this.root.querySelector<HTMLElement>(\n            selectors.HEADER_ROW_CHECKBOX)!;\n        this.headerRowCheckbox = this.checkboxFactory(checkboxEl);\n      },\n      registerRowCheckboxes: () => {\n        if (this.rowCheckboxList) {\n          this.rowCheckboxList.forEach((checkbox) => {\n            checkbox.destroy();\n          });\n        }\n\n        this.rowCheckboxList = [];\n        this.getRows().forEach((rowEl) => {\n          const checkbox = this.checkboxFactory(\n              rowEl.querySelector<HTMLElement>(selectors.ROW_CHECKBOX)!);\n          this.rowCheckboxList.push(checkbox);\n        });\n      },\n      removeClassAtRowIndex: (rowIndex: number, className: string) => {\n        this.getRows()[rowIndex].classList.remove(className);\n      },\n      setAttributeAtRowIndex:\n          (rowIndex: number, attr: string, value: string) => {\n            this.safeSetAttribute(this.getRows()[rowIndex], attr, value);\n          },\n      setHeaderRowCheckboxChecked: (checked: boolean) => {\n        this.headerRowCheckbox.checked = checked;\n      },\n      setHeaderRowCheckboxIndeterminate: (indeterminate: boolean) => {\n        this.headerRowCheckbox.indeterminate = indeterminate;\n      },\n      setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) => {\n        this.rowCheckboxList[rowIndex].checked = checked;\n      },\n      setSortStatusLabelByHeaderCellIndex: (\n          columnIndex: number, sortValue: SortValue) => {\n        const headerCell = this.getHeaderCells()[columnIndex];\n        const sortStatusLabel =\n            headerCell.querySelector<HTMLElement>(selectors.SORT_STATUS_LABEL);\n\n        if (!sortStatusLabel) return;\n\n        sortStatusLabel.textContent =\n            this.getSortStatusMessageBySortValue(sortValue);\n      },\n    };\n    return new MDCDataTableFoundation(adapter);\n  }\n\n  private getRowByIndex(index: number): Element {\n    return this.getRows()[index];\n  }\n\n  private getRowIdByIndex(index: number): string|null {\n    return this.getRowByIndex(index).getAttribute(dataAttributes.ROW_ID);\n  }\n\n  private handleHeaderRowClick(event: Event): void {\n    const headerCell =\n        closest(event.target as Element, selectors.HEADER_CELL_WITH_SORT) as\n        HTMLElement;\n\n    if (!headerCell) {\n      return;\n    }\n\n    const columnId = headerCell.getAttribute(dataAttributes.COLUMN_ID);\n    const columnIndex = this.getHeaderCells().indexOf(headerCell);\n    if (columnIndex === -1) {\n      return;\n    }\n\n    this.foundation.handleSortAction({columnId, columnIndex, headerCell});\n  }\n\n  private getSortStatusMessageBySortValue(sortValue: SortValue): string {\n    switch (sortValue) {\n      case SortValue.ASCENDING:\n        return messages.SORTED_IN_ASCENDING;\n      case SortValue.DESCENDING:\n        return messages.SORTED_IN_DESCENDING;\n      default:\n        return '';\n    }\n  }\n\n  private getLinearProgressElement(): HTMLElement {\n    const el =\n        this.root.querySelector<HTMLElement>(`.${cssClasses.LINEAR_PROGRESS}`);\n    if (!el) {\n      throw new Error('MDCDataTable: linear progress element is not found.');\n    }\n\n    return el;\n  }\n\n  private getLinearProgress(): MDCLinearProgress {\n    if (!this.linearProgress) {\n      const el = this.getLinearProgressElement();\n      this.linearProgress = new MDCLinearProgress(el);\n    }\n\n    return this.linearProgress;\n  }\n\n  private getRowIdByRowElement(rowElement: HTMLElement): string|null {\n    return rowElement.getAttribute(dataAttributes.ROW_ID);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/constants.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * CSS class names used in component.\n */\nexport const cssClasses = {\n  CELL: 'mdc-data-table__cell',\n  CELL_NUMERIC: 'mdc-data-table__cell--numeric',\n  CONTENT: 'mdc-data-table__content',\n  HEADER_CELL: 'mdc-data-table__header-cell',\n  HEADER_CELL_LABEL: 'mdc-data-table__header-cell-label',\n  HEADER_CELL_SORTED: 'mdc-data-table__header-cell--sorted',\n  HEADER_CELL_SORTED_DESCENDING:\n      'mdc-data-table__header-cell--sorted-descending',\n  HEADER_CELL_WITH_SORT: 'mdc-data-table__header-cell--with-sort',\n  HEADER_CELL_WRAPPER: 'mdc-data-table__header-cell-wrapper',\n  HEADER_ROW: 'mdc-data-table__header-row',\n  HEADER_ROW_CHECKBOX: 'mdc-data-table__header-row-checkbox',\n  IN_PROGRESS: 'mdc-data-table--in-progress',\n  LINEAR_PROGRESS: 'mdc-data-table__linear-progress',\n  PAGINATION_ROWS_PER_PAGE_LABEL:\n      'mdc-data-table__pagination-rows-per-page-label',\n  PAGINATION_ROWS_PER_PAGE_SELECT:\n      'mdc-data-table__pagination-rows-per-page-select',\n  PROGRESS_INDICATOR: 'mdc-data-table__progress-indicator',\n  ROOT: 'mdc-data-table',\n  ROW: 'mdc-data-table__row',\n  ROW_CHECKBOX: 'mdc-data-table__row-checkbox',\n  ROW_SELECTED: 'mdc-data-table__row--selected',\n  SORT_ICON_BUTTON: 'mdc-data-table__sort-icon-button',\n  SORT_STATUS_LABEL: 'mdc-data-table__sort-status-label',\n  TABLE_CONTAINER: 'mdc-data-table__table-container',\n};\n\n/**\n * DOM attributes used in component.\n */\nexport const attributes = {\n  ARIA_SELECTED: 'aria-selected',\n  ARIA_SORT: 'aria-sort',\n};\n\n/**\n * List of data attributes used in component.\n */\nexport const dataAttributes = {\n  COLUMN_ID: 'data-column-id',\n  ROW_ID: 'data-row-id',\n};\n\n/**\n * CSS selectors used in component.\n */\nexport const selectors = {\n  CONTENT: `.${cssClasses.CONTENT}`,\n  HEADER_CELL: `.${cssClasses.HEADER_CELL}`,\n  HEADER_CELL_WITH_SORT: `.${cssClasses.HEADER_CELL_WITH_SORT}`,\n  HEADER_ROW: `.${cssClasses.HEADER_ROW}`,\n  HEADER_ROW_CHECKBOX: `.${cssClasses.HEADER_ROW_CHECKBOX}`,\n  PROGRESS_INDICATOR: `.${cssClasses.PROGRESS_INDICATOR}`,\n  ROW: `.${cssClasses.ROW}`,\n  ROW_CHECKBOX: `.${cssClasses.ROW_CHECKBOX}`,\n  ROW_SELECTED: `.${cssClasses.ROW_SELECTED}`,\n  SORT_ICON_BUTTON: `.${cssClasses.SORT_ICON_BUTTON}`,\n  SORT_STATUS_LABEL: `.${cssClasses.SORT_STATUS_LABEL}`,\n};\n\n/**\n * Messages used in component.\n */\nexport const messages = {\n  SORTED_IN_DESCENDING: 'Sorted in descending order',\n  SORTED_IN_ASCENDING: 'Sorted in ascending order',\n};\n\n/**\n * Sort values defined by ARIA.\n * See https://www.w3.org/WAI/PF/aria/states_and_properties#aria-sort\n */\nexport enum SortValue {\n  // Items are sorted in ascending order by this column.\n  ASCENDING = 'ascending',\n\n  // Items are sorted in descending order by this column.\n  DESCENDING = 'descending',\n\n  // There is no defined sort applied to the column.\n  NONE = 'none',\n\n  // A sort algorithm other than ascending or descending has been applied.\n  OTHER = 'other',\n}\n\n/**\n * Event names used in component.\n */\nexport const events = {\n  ROW_CLICK: 'MDCDataTable:rowClick',\n  ROW_SELECTION_CHANGED: 'MDCDataTable:rowSelectionChanged',\n  SELECTED_ALL: 'MDCDataTable:selectedAll',\n  SORTED: 'MDCDataTable:sorted',\n  UNSELECTED_ALL: 'MDCDataTable:unselectedAll',\n};\n"
  },
  {
    "path": "packages/mdc-data-table/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCDataTableAdapter} from './adapter';\nimport {cssClasses, SortValue, attributes} from './constants';\nimport {RowClickEventData, SortActionEventData} from './types';\n\n/**\n * The Foundation of data table component containing pure business logic, any\n * logic requiring DOM manipulation are delegated to adapter methods.\n */\nexport class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {\n  static override get defaultAdapter(): MDCDataTableAdapter {\n    return {\n      addClass: () => undefined,\n      addClassAtRowIndex: () => undefined,\n      getAttributeByHeaderCellIndex: () => '',\n      getHeaderCellCount: () => 0,\n      getHeaderCellElements: () => [],\n      getRowCount: () => 0,\n      getRowElements: () => [],\n      getRowIdAtIndex: () => '',\n      getRowIndexByChildElement: () => 0,\n      getSelectedRowCount: () => 0,\n      getTableContainerHeight: () => 0,\n      getTableHeaderHeight: () => 0,\n      isCheckboxAtRowIndexChecked: () => false,\n      isHeaderRowCheckboxChecked: () => false,\n      isRowsSelectable: () => false,\n      notifyRowSelectionChanged: () => undefined,\n      notifySelectedAll: () => undefined,\n      notifySortAction: () => undefined,\n      notifyUnselectedAll: () => undefined,\n      notifyRowClick: () => undefined,\n      registerHeaderRowCheckbox: () => undefined,\n      registerRowCheckboxes: () => undefined,\n      removeClass: () => undefined,\n      removeClassAtRowIndex: () => undefined,\n      removeClassNameByHeaderCellIndex: () => undefined,\n      setAttributeAtRowIndex: () => undefined,\n      setAttributeByHeaderCellIndex: () => undefined,\n      setClassNameByHeaderCellIndex: () => undefined,\n      setHeaderRowCheckboxChecked: () => undefined,\n      setHeaderRowCheckboxIndeterminate: () => undefined,\n      setProgressIndicatorStyles: () => undefined,\n      setRowCheckboxCheckedAtIndex: () => undefined,\n      setSortStatusLabelByHeaderCellIndex: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCDataTableAdapter>) {\n    super({...MDCDataTableFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * Re-initializes header row checkbox and row checkboxes when selectable rows\n   * are added or removed from table. Use this if registering checkbox is\n   * synchronous.\n   */\n  layout() {\n    if (this.adapter.isRowsSelectable()) {\n      this.adapter.registerHeaderRowCheckbox();\n      this.adapter.registerRowCheckboxes();\n\n      this.setHeaderRowCheckboxState();\n    }\n  }\n\n  /**\n   * Re-initializes header row checkbox and row checkboxes when selectable rows\n   * are added or removed from table. Use this if registering checkbox is\n   * asynchronous.\n   */\n  async layoutAsync(): Promise<void> {\n    if (this.adapter.isRowsSelectable()) {\n      await this.adapter.registerHeaderRowCheckbox();\n      await this.adapter.registerRowCheckboxes();\n\n      this.setHeaderRowCheckboxState();\n    }\n  }\n\n  /**\n   * @return Returns array of row elements.\n   */\n  getRows(): HTMLElement[] {\n    return this.adapter.getRowElements();\n  }\n\n  /**\n   * @return Array of header cell elements.\n   */\n  getHeaderCells(): Element[] {\n    return this.adapter.getHeaderCellElements();\n  }\n\n  /**\n   * Sets selected row ids. Overwrites previously selected rows.\n   * @param rowIds Array of row ids that needs to be selected.\n   */\n  setSelectedRowIds(rowIds: string[]) {\n    for (let rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {\n      const rowId = this.adapter.getRowIdAtIndex(rowIndex);\n\n      let isSelected = false;\n      if (rowId && rowIds.indexOf(rowId) >= 0) {\n        isSelected = true;\n      }\n\n      this.adapter.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);\n      this.selectRowAtIndex(rowIndex, isSelected);\n    }\n\n    this.setHeaderRowCheckboxState();\n  }\n\n  /**\n   * @return Returns array of all row ids.\n   */\n  getRowIds(): Array<string|null> {\n    const rowIds = [];\n    for (let rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {\n      rowIds.push(this.adapter.getRowIdAtIndex(rowIndex));\n    }\n\n    return rowIds;\n  }\n\n  /**\n   * @return Returns array of selected row ids.\n   */\n  getSelectedRowIds(): Array<string|null> {\n    const selectedRowIds: Array<string|null> = [];\n    for (let rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {\n      if (this.adapter.isCheckboxAtRowIndexChecked(rowIndex)) {\n        selectedRowIds.push(this.adapter.getRowIdAtIndex(rowIndex));\n      }\n    }\n\n    return selectedRowIds;\n  }\n\n  /**\n   * Handles header row checkbox change event.\n   */\n  handleHeaderRowCheckboxChange() {\n    const isHeaderChecked = this.adapter.isHeaderRowCheckboxChecked();\n\n    for (let rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {\n      this.adapter.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);\n      this.selectRowAtIndex(rowIndex, isHeaderChecked);\n    }\n\n    if (isHeaderChecked) {\n      this.adapter.notifySelectedAll();\n    } else {\n      this.adapter.notifyUnselectedAll();\n    }\n  }\n\n  /**\n   * Handles change event originated from row checkboxes.\n   */\n  handleRowCheckboxChange(event: Event) {\n    const rowIndex = this.adapter.getRowIndexByChildElement(\n        event.target as HTMLInputElement);\n\n    if (rowIndex === -1) {\n      return;\n    }\n\n    const selected = this.adapter.isCheckboxAtRowIndexChecked(rowIndex);\n\n    this.selectRowAtIndex(rowIndex, selected);\n    this.setHeaderRowCheckboxState();\n\n    const rowId = this.adapter.getRowIdAtIndex(rowIndex);\n    this.adapter.notifyRowSelectionChanged({rowId, rowIndex, selected});\n  }\n\n  /**\n   * Handles sort action on sortable header cell.\n   */\n  handleSortAction(eventData: SortActionEventData) {\n    const {columnId, columnIndex, headerCell} = eventData;\n\n    // Reset sort attributes / classes on other header cells.\n    for (let index = 0; index < this.adapter.getHeaderCellCount(); index++) {\n      if (index === columnIndex) {\n        continue;\n      }\n\n      this.adapter.removeClassNameByHeaderCellIndex(\n          index, cssClasses.HEADER_CELL_SORTED);\n      this.adapter.removeClassNameByHeaderCellIndex(\n          index, cssClasses.HEADER_CELL_SORTED_DESCENDING);\n      this.adapter.setAttributeByHeaderCellIndex(\n          index, attributes.ARIA_SORT, SortValue.NONE);\n      this.adapter.setSortStatusLabelByHeaderCellIndex(index, SortValue.NONE);\n    }\n\n    // Set appropriate sort attributes / classes on target header cell.\n    this.adapter.setClassNameByHeaderCellIndex(\n        columnIndex, cssClasses.HEADER_CELL_SORTED);\n\n    const currentSortValue = this.adapter.getAttributeByHeaderCellIndex(\n        columnIndex, attributes.ARIA_SORT);\n    let sortValue = SortValue.NONE;\n\n    // Set to descending if sorted on ascending order.\n    if (currentSortValue === SortValue.ASCENDING) {\n      this.adapter.setClassNameByHeaderCellIndex(\n          columnIndex, cssClasses.HEADER_CELL_SORTED_DESCENDING);\n      this.adapter.setAttributeByHeaderCellIndex(\n          columnIndex, attributes.ARIA_SORT, SortValue.DESCENDING);\n      sortValue = SortValue.DESCENDING;\n      // Set to ascending if sorted on descending order.\n    } else if (currentSortValue === SortValue.DESCENDING) {\n      this.adapter.removeClassNameByHeaderCellIndex(\n          columnIndex, cssClasses.HEADER_CELL_SORTED_DESCENDING);\n      this.adapter.setAttributeByHeaderCellIndex(\n          columnIndex, attributes.ARIA_SORT, SortValue.ASCENDING);\n      sortValue = SortValue.ASCENDING;\n    } else {\n      // Set to ascending by default when not sorted.\n      this.adapter.setAttributeByHeaderCellIndex(\n          columnIndex, attributes.ARIA_SORT, SortValue.ASCENDING);\n      sortValue = SortValue.ASCENDING;\n    }\n\n    this.adapter.setSortStatusLabelByHeaderCellIndex(columnIndex, sortValue);\n\n    this.adapter.notifySortAction({\n      columnId,\n      columnIndex,\n      headerCell,\n      sortValue,\n    });\n  }\n\n  /**\n   * Handles data table row click event.\n   */\n  handleRowClick({rowId, row, altKey, ctrlKey, metaKey, shiftKey}:\n                     RowClickEventData) {\n    this.adapter.notifyRowClick({\n      rowId,\n      row,\n      altKey,\n      ctrlKey,\n      metaKey,\n      shiftKey,\n    });\n  }\n\n  /**\n   * Shows progress indicator blocking only the table body content when in\n   * loading state.\n   */\n  showProgress() {\n    const tableHeaderHeight = this.adapter.getTableHeaderHeight();\n    // Calculate the height of table content (Not scroll content) excluding\n    // header row height.\n    const height = this.adapter.getTableContainerHeight() - tableHeaderHeight;\n    const top = tableHeaderHeight;\n\n    this.adapter.setProgressIndicatorStyles({\n      height: `${height}px`,\n      top: `${top}px`,\n    });\n    this.adapter.addClass(cssClasses.IN_PROGRESS);\n  }\n\n  /**\n   * Hides progress indicator when data table is finished loading.\n   */\n  hideProgress() {\n    this.adapter.removeClass(cssClasses.IN_PROGRESS);\n  }\n\n  /**\n   * Updates header row checkbox state based on number of rows selected.\n   */\n  private setHeaderRowCheckboxState() {\n    if (this.adapter.getSelectedRowCount() === 0) {\n      this.adapter.setHeaderRowCheckboxChecked(false);\n      this.adapter.setHeaderRowCheckboxIndeterminate(false);\n    } else if (\n        this.adapter.getSelectedRowCount() === this.adapter.getRowCount()) {\n      this.adapter.setHeaderRowCheckboxChecked(true);\n      this.adapter.setHeaderRowCheckboxIndeterminate(false);\n    } else {\n      this.adapter.setHeaderRowCheckboxIndeterminate(true);\n      this.adapter.setHeaderRowCheckboxChecked(false);\n    }\n  }\n\n  /**\n   * Sets the attributes of row element based on selection state.\n   */\n  private selectRowAtIndex(rowIndex: number, selected: boolean) {\n    if (selected) {\n      this.adapter.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);\n      this.adapter.setAttributeAtRowIndex(\n          rowIndex, attributes.ARIA_SELECTED, 'true');\n    } else {\n      this.adapter.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);\n      this.adapter.setAttributeAtRowIndex(\n          rowIndex, attributes.ARIA_SELECTED, 'false');\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport * from './constants';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-data-table/mdc-data-table.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/checkbox/variables\" as mdc-checkbox-*;\n@forward \"@material/checkbox/mixins\" as mdc-checkbox-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-data-table-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/checkbox/keyframes\" as mdc-checkbox-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"mixins\" as mdc-data-table-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/checkbox/functions\" as mdc-checkbox-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-data-table\";\n"
  },
  {
    "path": "packages/mdc-data-table/mdc-data-table.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-data-table/package.json",
    "content": "{\n  \"name\": \"@material/data-table\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components Web data table component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\"material components\", \"material design\", \"data table\"],\n  \"main\": \"dist/mdc.dataTable.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/checkbox\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/icon-button\": \"^14.0.0\",\n    \"@material/linear-progress\": \"^14.0.0\",\n    \"@material/list\": \"^14.0.0\",\n    \"@material/menu\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/select\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-data-table/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './data-table';\n\n@include data-table.core-styles;\n@include data-table.theme-baseline;\n"
  },
  {
    "path": "packages/mdc-data-table/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {createMouseEvent} from '../../../testing/dom/events';\nimport {MDCDataTable} from '../component';\nimport {cssClasses, dataAttributes, events, selectors, SortValue} from '../constants';\n\ninterface ClassMap {\n  [className: string]: boolean;\n}\n\nfunction classMap(classesMap: ClassMap) {\n  return Object.keys(classesMap)\n      .filter((className: string) => {\n        return classesMap[className];\n      })\n      .join(' ');\n}\n\ninterface CheckboxTemplateProps {\n  classNames: string;\n  isChecked: boolean;\n}\n\nfunction mdcCheckboxTemplate(props: Partial<CheckboxTemplateProps>) {\n  return html`\n    <div class=\"mdc-checkbox ${props.classNames || ''}\">\n      <input type=\"checkbox\" class=\"mdc-checkbox__native-control\" ${\n      props.isChecked ? 'checked' : ''}>\n      <div class=\"mdc-checkbox__background\">\n        <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n          <path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n        </svg>\n        <div class=\"mdc-checkbox__mixedmark\"></div>\n      </div>\n    </div>`;\n}\n\ninterface IconButtonProps {\n  iconName: string;\n  classNames: string;\n}\n\nfunction mdcIconButtonTemplate(props: IconButtonProps) {\n  const classes = {\n    'mdc-icon-button': true,\n    'material-icons': true,\n    [props.classNames]: !!props.classNames,\n  };\n\n  return html`<button class=\"${classMap(classes)}\">${props.iconName}</button>`;\n}\n\ninterface DataTableHeaderCellTemplateProps {\n  content: string|ReturnType<typeof html>;\n  isSortable?: boolean;\n  columnId?: string;\n}\n\n\nfunction mdcDataTableHeaderCellTemplate(\n    props: DataTableHeaderCellTemplateProps) {\n  const classes = {\n    [cssClasses.HEADER_CELL]: true,\n    [cssClasses.HEADER_CELL_WITH_SORT]: !!props.isSortable,\n  };\n  const columnId = props.columnId || '';\n  const sortButton = props.isSortable ?\n      mdcIconButtonTemplate(\n          {iconName: 'arrow_upward', classNames: cssClasses.SORT_ICON_BUTTON}) :\n      '';\n\n  return html`\n      <th class=\"${classMap(classes)}\" role=\"columnheader\" scope=\"col\" ${\n      dataAttributes.COLUMN_ID}=\"${columnId}\">\n        <div class=\"${cssClasses.HEADER_CELL_WRAPPER}\">\n          <div class=\"${cssClasses.HEADER_CELL_LABEL}\">\n            ${props.content}\n          </div>\n          ${sortButton}\n          <div class=\"${cssClasses.SORT_STATUS_LABEL}\"></div>\n        </div>\n      </th>\n      `;\n}\n\ninterface DataTableCellTemplateProps {\n  isNumeric: boolean;\n  content: string|number|ReturnType<typeof html>;\n}\n\nfunction mdcDataTableCellTemplate(props: Partial<DataTableCellTemplateProps>) {\n  const classes = {\n    [cssClasses.CELL_NUMERIC]: !!props.isNumeric,\n  };\n  return html`\n      <td class=\"${classMap(classes)}\">${props.content}</td>\n    `;\n}\n\ninterface DataTableRowTemplateProps {\n  isSelected: boolean;\n  rowId: string;\n  content: string;\n  withoutRowSelection?: boolean;\n}\n\nfunction mdcDataTableRowTemplate(props: DataTableRowTemplateProps) {\n  const classes = {\n    [cssClasses.ROW]: true,\n    [cssClasses.ROW_SELECTED]: props.isSelected,\n  };\n  const ariaSelectedValue = props.isSelected ? 'true' : 'false';\n  const rowCheckbox = mdcDataTableCellTemplate({\n    content: mdcCheckboxTemplate({\n      classNames: cssClasses.ROW_CHECKBOX,\n      isChecked: props.isSelected,\n    }),\n  });\n\n  return html`\n  <tr\n    data-row-id=\"${props.rowId}\"\n    class=\"${classMap(classes)}\"\n    aria-selected=\"${ariaSelectedValue}\"\n  >\n    ${props.withoutRowSelection ? '' : rowCheckbox} ${props.content}\n  </tr>\n  `;\n}\n\nfunction progressIndicatorTemplate() {\n  return html`\n      <div class=\"mdc-data-table__progress-indicator\">\n        <div class=\"mdc-data-table__scrim\"></div>\n        <div class=\"mdc-linear-progress mdc-linear-progress--indeterminate mdc-data-table__linear-progress\" role=\"progressbar\" aria-label=\"Data is being loaded...\">\n          <div class=\"mdc-linear-progress__buffer\">\n            <div class=\"mdc-linear-progress__buffer-bar\"></div>\n            <div class=\"mdc-linear-progress__buffer-dots\"></div>\n          </div>\n          <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n            <span class=\"mdc-linear-progress__bar-inner\"></span>\n          </div>\n          <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n            <span class=\"mdc-linear-progress__bar-inner\"></span>\n          </div>\n        </div>\n      </div>\n      `;\n}\n\ninterface DataTableHeader {\n  name: string;\n  isSortable?: boolean;\n  columnId?: string;\n}\n\ninterface DataTableData {\n  headers: DataTableHeader[];\n  rows: Array<Array<string|number>>;\n  selectedRowIndexes: number[];\n}\n\nconst mdcDataTableData = {\n  headers: [\n    {\n      name: 'Dessert',\n      isSortable: true,\n      columnId: 'dessert',\n    },\n    {\n      name: 'Calories',\n      isSortable: true,\n      columnId: 'calories',\n    },\n    {\n      name: 'Fat',\n      columnId: 'fat',\n    },\n    {\n      name: 'Carbs',\n      columnId: 'carbs',\n    },\n    {\n      name: 'Protein (g)',\n      columnId: 'protein',\n    },\n  ],\n  rows: [\n    ['Frozen yogurt', 159, 6.0, 24, 4.0],\n    ['Ice cream sandwich', 237, 9.0, 37, 4.3],\n    ['Eclair', 262, 16.0, 24, 6.0],\n  ],\n  selectedRowIndexes: [1],\n};\n\ninterface RenderComponentProps {\n  data: DataTableData;\n  excludeProgressIndicator?: boolean;\n  withoutRowSelection?: boolean;\n}\n\nfunction renderComponent(props: RenderComponentProps): HTMLElement {\n  const headerRowContent =\n      html`${props.withoutRowSelection ? '' : mdcDataTableHeaderCellTemplate({\n        content: mdcCheckboxTemplate({\n          classNames: cssClasses.HEADER_ROW_CHECKBOX,\n        }),\n      })}\n      ${props.data.headers.map((header) => mdcDataTableHeaderCellTemplate({\n                                 content: header.name,\n                                 isSortable: header.isSortable,\n                                 columnId: header.columnId,\n                               }))}`;\n  const bodyContent =\n      props.data.rows.map((row: Array<string|number>, index: number) => {\n        const isSelected = props.data.selectedRowIndexes.indexOf(index) >= 0;\n        return mdcDataTableRowTemplate({\n          rowId: `u${index}`,\n          isSelected,\n          content: row.map((cell: string|number) => {\n                        const isNumeric = typeof cell === 'number';\n                        return mdcDataTableCellTemplate(\n                            {content: cell, isNumeric});\n                      })\n                       .join(''),\n          withoutRowSelection: props.withoutRowSelection,\n        });\n      });\n\n  const blobHtml = html`\n    <div class=\"${cssClasses.ROOT}\">\n      <div class=\"${cssClasses.TABLE_CONTAINER}\">\n        <table class=\"mdc-data-table__table\">\n          <thead>\n            <tr class=\"${cssClasses.HEADER_ROW}\">\n              ${headerRowContent}\n            </tr>\n          </thead>\n          <tbody class=\"mdc-data-table__content\">\n            ${bodyContent}\n          </tbody>\n        </table>\n      </div>\n      ${props.excludeProgressIndicator ? '' : progressIndicatorTemplate()}\n    </div>\n  `;\n\n  const preventable = document.querySelector<HTMLElement>(`.${cssClasses.ROOT}`);\n  if (preventable) {\n    document.body.removeChild(preventable.parentElement as HTMLElement);\n  }\n\n  return createFixture(blobHtml);\n}\n\ninterface SetupProps {\n  excludeProgressIndicator?: boolean;\n  withoutRowSelection?: boolean;\n}\n\nfunction setupTest(props: SetupProps = {}) {\n  const root = renderComponent({\n    data: mdcDataTableData,\n    excludeProgressIndicator: props.excludeProgressIndicator,\n    withoutRowSelection: props.withoutRowSelection,\n  });\n  const component = new MDCDataTable(root);\n  // This is an intentionally reference to adapter instance for testing.\n  // tslint:disable-next-line:no-any\n  const adapter = (component.getDefaultFoundation() as any).adapter;\n  return {root, component, adapter};\n}\n\ndescribe('MDCDataTable', () => {\n  it('#attachTo returns a component instance', () => {\n    const root = renderComponent({data: mdcDataTableData});\n    const component = MDCDataTable.attachTo(root);\n    expect(component).toEqual(jasmine.any(MDCDataTable));\n    component.destroy();\n  });\n\n  it('Checking at least 1 row checkbox sets header row checkbox to indeterminate',\n     () => {\n       const {root} = setupTest();\n\n       const rowCheckbox =\n           root.querySelector(selectors.ROW_CHECKBOX)!.querySelector('input')!;\n       rowCheckbox.click();\n\n       const headerRowCheckbox =\n           root.querySelector(selectors.HEADER_ROW_CHECKBOX)!.querySelector(\n               'input')!;\n       expect(headerRowCheckbox.indeterminate).toBe(true);\n     });\n\n  it('#setSelectedRowIds sets selected row ids', () => {\n    const {component} = setupTest();\n\n    component.setSelectedRowIds(['u1', 'u2']);\n    expect(component.getSelectedRowIds()).toEqual(['u1', 'u2']);\n    component.destroy();\n  });\n\n  it('#getSelectedRowIds returns empty array when no rows selected', () => {\n    const {component} = setupTest();\n\n    component.setSelectedRowIds([]);\n    expect(component.getSelectedRowIds()).toEqual([]);\n    component.destroy();\n  });\n\n  it('adapter#isHeaderRowCheckboxChecked returns true if header row checkbox is checked',\n     () => {\n       const {component, root, adapter} = setupTest();\n\n       const nativeCheckbox =\n           root.querySelector(selectors.HEADER_ROW_CHECKBOX)!.querySelector(\n               'input')!;\n\n       nativeCheckbox.checked = false;\n       expect(adapter.isHeaderRowCheckboxChecked()).toBe(false);\n\n       nativeCheckbox.checked = true;\n       expect(adapter.isHeaderRowCheckboxChecked()).toBe(true);\n\n       component.destroy();\n     });\n\n  it('adapter#addClassAtRowIndex adds class name at given row index ', () => {\n    const {component, adapter} = setupTest();\n\n    adapter.addClassAtRowIndex(1, 'test-class-name');\n    expect(component.getRows()[1]).toHaveClass('test-class-name');\n\n    component.destroy();\n  });\n\n  it('adapter#removeClassAtRowIndex removes class name from given row index ',\n     () => {\n       const {component, adapter} = setupTest();\n\n       adapter.addClassAtRowIndex(1, 'test-remove-class-name');\n       adapter.removeClassAtRowIndex(1, 'test-remove-class-name');\n       expect(component.getRows()[1]).not.toHaveClass('test-remove-class-name');\n\n       component.destroy();\n     });\n\n  it('adapter#setAttributeAtRowIndex', () => {\n    const {component, adapter} = setupTest();\n\n    adapter.setAttributeAtRowIndex(1, 'data-test-set-attr', 'test-val-1');\n    expect(adapter.getRowElements()[1].getAttribute('data-test-set-attr'))\n        .toBe('test-val-1');\n\n    component.destroy();\n  });\n\n  it('adapter#getRowElements', () => {\n    const {component, adapter} = setupTest();\n\n    expect(adapter.getRowElements().length).toEqual(3);\n    component.destroy();\n  });\n\n  it('adapter#isRowsSelectable', () => {\n    const {component, adapter} = setupTest();\n\n    expect(adapter.isRowsSelectable()).toBe(true);\n\n    component.destroy();\n  });\n\n  it('adapter#getRowIndexByChildElement', () => {\n    const {component, root, adapter} = setupTest();\n\n    const rows = Array.from(root.querySelectorAll<HTMLElement>(selectors.ROW));\n    const inputEl = rows[2].querySelector('input')!;\n    expect(adapter.getRowIndexByChildElement(inputEl)).toEqual(2);\n\n    component.destroy();\n  });\n\n  it('adapter#getRowCount calls foundation.getRows() method', () => {\n    const {component, adapter} = setupTest();\n\n    expect(adapter.getRowCount()).toEqual(3);\n\n    component.destroy();\n  });\n\n  it('adapter#getSelectedRowCount', () => {\n    const {component, adapter} = setupTest();\n\n    expect(adapter.getSelectedRowCount())\n        .toBe(mdcDataTableData.selectedRowIndexes.length);\n\n    component.destroy();\n  });\n\n  it('adapter#notifyRowSelectionChanged', () => {\n    const {component, adapter} = setupTest();\n    const handler = jasmine.createSpy('notifyRowSelectionChangedHandler');\n\n    component.listen(events.ROW_SELECTION_CHANGED, handler);\n    adapter.notifyRowSelectionChanged(\n        {rowIndex: 1, rowId: 'u1', selected: true});\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n\n    component.unlisten(events.ROW_SELECTION_CHANGED, handler);\n    component.destroy();\n  });\n\n  it('adapter#setHeaderRowCheckboxIndeterminate', () => {\n    const {component, root, adapter} = setupTest();\n\n    const nativeCheckbox =\n        root.querySelector(selectors.HEADER_ROW_CHECKBOX)!.querySelector(\n            'input')!;\n\n    nativeCheckbox.indeterminate = false;\n    adapter.setHeaderRowCheckboxIndeterminate(true);\n    expect(nativeCheckbox.indeterminate).toBe(true);\n\n    component.destroy();\n  });\n\n  it('adapter#setHeaderRowCheckboxChecked', () => {\n    const {component, root, adapter} = setupTest();\n\n    const nativeCheckbox =\n        root.querySelector(selectors.HEADER_ROW_CHECKBOX)!.querySelector(\n            'input')!;\n    expect(nativeCheckbox.checked).toBe(false);\n    adapter.setHeaderRowCheckboxChecked(true);\n    expect(nativeCheckbox.checked).toBe(true);\n\n    component.destroy();\n  });\n\n  it('adapter#getRowIdAtIndex', () => {\n    const {component, adapter} = setupTest();\n\n    expect(adapter.getRowIdAtIndex(1)).toEqual('u1');\n    component.destroy();\n  });\n\n  it('adapter#setRowCheckboxCheckedAtIndex', () => {\n    const {component, root, adapter} = setupTest();\n    const nativeCheckbox =\n        root.querySelector(selectors.ROW_CHECKBOX)!.querySelector('input');\n\n    expect(nativeCheckbox!.checked).toBe(false);\n    adapter.setRowCheckboxCheckedAtIndex(0, true);\n    expect(nativeCheckbox!.checked).toBe(true);\n\n    component.destroy();\n  });\n\n  it('adapter#notifySelectedAll', () => {\n    const {component, adapter} = setupTest();\n    const handler = jasmine.createSpy('notifySelectedAll');\n\n    component.listen(events.SELECTED_ALL, handler);\n    adapter.notifySelectedAll();\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n\n    component.unlisten(events.SELECTED_ALL, handler);\n    component.destroy();\n  });\n\n  it('adapter#notifyUnselectedAll', () => {\n    const {component, adapter} = setupTest();\n    const handler = jasmine.createSpy('notifyUnselectedAll');\n\n    component.listen(events.UNSELECTED_ALL, handler);\n    adapter.notifyUnselectedAll();\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n\n    component.unlisten(events.UNSELECTED_ALL, handler);\n    component.destroy();\n  });\n\n  it('Should trigger row click event when clicked on data row', () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('mockRowClickListener');\n    component.listen(events.ROW_CLICK, handler);\n    component.getRows()[1].click();\n    expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({\n      detail: {\n        rowId: 'u1',\n        row: component.getRows()[1],\n        altKey: false,\n        ctrlKey: false,\n        metaKey: false,\n        shiftKey: false,\n      }\n    }));\n\n    component.unlisten(events.ROW_CLICK, handler);\n    component.destroy();\n  });\n\n  it('Should trigger row click event with modifiers when clicked on data row',\n     () => {\n       const {component} = setupTest();\n\n       const handler = jasmine.createSpy('mockRowClickListener');\n       component.listen(events.ROW_CLICK, handler);\n       component.getRows()[1].dispatchEvent(createMouseEvent('click', {\n         bubbles: true,\n         cancelable: true,\n         altKey: true,\n         ctrlKey: true,\n         metaKey: true,\n         shiftKey: true\n       }));\n\n       expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({\n         detail: {\n           rowId: 'u1',\n           row: component.getRows()[1],\n           altKey: true,\n           ctrlKey: true,\n           metaKey: true,\n           shiftKey: true,\n         }\n       }));\n\n       component.unlisten(events.ROW_CLICK, handler);\n       component.destroy();\n     });\n\n  it('Should not trigger row click event when clicked on header cell', () => {\n    const {component, root} = setupTest();\n\n    const handler = jasmine.createSpy('mockRowClickListener');\n    component.listen(events.ROW_CLICK, handler);\n    root.querySelector<HTMLElement>('th')!.click();\n    expect(handler).not.toHaveBeenCalled();\n\n    component.unlisten(events.ROW_CLICK, handler);\n    component.destroy();\n  });\n\n  describe('Removing Rows', () => {\n    it('removes all rows while the header checkbox is checked.', () => {\n      const {component, root, adapter} = setupTest();\n      adapter.setHeaderRowCheckboxChecked(true);\n      expect(adapter.isHeaderRowCheckboxChecked()).toBe(true);\n      const tableContent =\n          root.querySelector<HTMLElement>(`.${cssClasses.CONTENT}`);\n      tableContent!.textContent = ``;\n      component.layout();\n      expect(adapter.isHeaderRowCheckboxChecked()).toBe(false);\n    });\n  });\n\n  describe('Column sorting', () => {\n    it('emits sort event when clicked on sort button of sortable column header',\n       () => {\n         const {component, root} = setupTest();\n         const handler = jasmine.createSpy('handleSorted');\n\n         component.listen(events.SORTED, handler);\n         const columnId = 'dessert';\n         const headerCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"${columnId}\"]`);\n         headerCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         const matchEventDetail = {\n           columnId,\n           columnIndex: 1,\n           headerCell,\n           sortValue: SortValue.ASCENDING,\n         };\n         expect(handler).toHaveBeenCalledWith(\n             jasmine.objectContaining({detail: matchEventDetail}));\n         component.unlisten(events.SORTED, handler);\n         component.destroy();\n       });\n\n    it('emits sort event when clicked on sortable column header text', () => {\n      const {component, root} = setupTest();\n      const handler = jasmine.createSpy('handleSorted');\n\n      component.listen(events.SORTED, handler);\n      const columnId = 'dessert';\n      const headerCell = root.querySelector<HTMLElement>(\n          `[${dataAttributes.COLUMN_ID}=\"${columnId}\"]`);\n      headerCell!\n          .querySelector<HTMLElement>(\n              `.${cssClasses.HEADER_CELL_LABEL}`)!.click();\n      const matchEventDetail = {\n        columnId,\n        columnIndex: 1,\n        headerCell,\n        sortValue: SortValue.ASCENDING,\n      };\n      expect(handler).toHaveBeenCalledWith(\n          jasmine.objectContaining({detail: matchEventDetail}));\n      component.unlisten(events.SORTED, handler);\n      component.destroy();\n    });\n\n    it('does not emit sort event when clicked on non sortable column header',\n       () => {\n         const {component, root} = setupTest();\n         const handler = jasmine.createSpy('handleSorted');\n\n         component.listen(events.SORTED, handler);\n\n         const headerCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"protein\"]`);\n         const testButton = document.createElement('button');\n         headerCell!.appendChild(testButton);\n         testButton.click();\n         expect(handler).not.toHaveBeenCalled();\n         headerCell!.removeChild(testButton);\n         component.unlisten(events.SORTED, handler);\n         component.destroy();\n       });\n\n    it('does not emit sort event after component is destroyed', () => {\n      const {component, root} = setupTest();\n      component.destroy();\n      const handler = jasmine.createSpy('handleSorted');\n\n      component.listen(events.SORTED, handler);\n      const columnId = 'dessert';\n      const headerCell = root.querySelector<HTMLElement>(\n          `[${dataAttributes.COLUMN_ID}=\"${columnId}\"]`);\n      headerCell!.querySelector<HTMLElement>(\n                     `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n      expect(handler).not.toHaveBeenCalled();\n      component.unlisten(events.SORTED, handler);\n    });\n\n    it('clicking on header cell when in idle state sorts that column in ascending order by default',\n       () => {\n         const {component, root} = setupTest();\n\n         const columnId = 'dessert';\n         const headerCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"${columnId}\"]`);\n         expect(headerCell!.getAttribute('aria-sort')).toBe(null);\n         headerCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         expect(headerCell!.getAttribute('aria-sort')).toBe('ascending');\n         component.destroy();\n       });\n\n    it('clicking on header cell toggles sort status if already sorted', () => {\n      const {component, root} = setupTest();\n\n      const columnId = 'dessert';\n      const headerCell = root.querySelector<HTMLElement>(\n          `[${dataAttributes.COLUMN_ID}=\"${columnId}\"]`);\n      const sortButton = headerCell!.querySelector<HTMLElement>(\n          `.${cssClasses.SORT_ICON_BUTTON}`);\n      sortButton!.click();\n      expect(headerCell!.getAttribute('aria-sort')).toBe('ascending');\n\n      sortButton!.click();\n      expect(headerCell!.getAttribute('aria-sort')).toBe('descending');\n      component.destroy();\n    });\n\n    it('clicking on header cells deactivates sorting state on other header cells',\n       () => {\n         const {component, root} = setupTest();\n\n         const dessertHeaderCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"dessert\"]`);\n         dessertHeaderCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         expect(dessertHeaderCell!.getAttribute('aria-sort')).toBe('ascending');\n\n         const caloriesHeaderCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"calories\"]`);\n         caloriesHeaderCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n\n         expect(caloriesHeaderCell!.getAttribute('aria-sort'))\n             .toBe('ascending');\n\n         // Resets previous column sort state.\n         expect(dessertHeaderCell!.getAttribute('aria-sort')).toBe('none');\n         component.destroy();\n       });\n\n    it('clicking on sortable header cell sets appropriate sort status label that is visually hidden',\n       () => {\n         const {component, root} = setupTest();\n\n         const caloriesHeaderCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"calories\"]`);\n         expect(caloriesHeaderCell!\n                    .querySelector<HTMLElement>(\n                        selectors.SORT_STATUS_LABEL)!.textContent)\n             .toBe('');\n         caloriesHeaderCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         expect(caloriesHeaderCell!\n                    .querySelector<HTMLElement>(\n                        selectors.SORT_STATUS_LABEL)!.textContent)\n             .toMatch(/ascending/);\n         caloriesHeaderCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         expect(caloriesHeaderCell!\n                    .querySelector<HTMLElement>(\n                        selectors.SORT_STATUS_LABEL)!.textContent)\n             .toMatch(/descending/);\n\n         // Should reset previous column sort status label.\n         const dessertHeaderCell = root.querySelector<HTMLElement>(\n             `[${dataAttributes.COLUMN_ID}=\"dessert\"]`);\n         dessertHeaderCell!\n             .querySelector<HTMLElement>(\n                 `.${cssClasses.SORT_ICON_BUTTON}`)!.click();\n         expect(caloriesHeaderCell!\n                    .querySelector<HTMLElement>(\n                        selectors.SORT_STATUS_LABEL)!.textContent)\n             .toBe('');\n\n         component.destroy();\n       });\n\n    it('should not throw error when destroy() is called without row selection',\n       () => {\n         const {component} = setupTest({withoutRowSelection: true});\n         expect(() => {\n           component.destroy();\n         }).not.toThrowError();\n       });\n  });\n\n  describe('Progress indicator', () => {\n    it('Should show progress indicator blocking the content when calling showProgress()',\n       () => {\n         const {component, root} = setupTest();\n\n         const progressIndicator = root.querySelector<HTMLElement>(\n             `.${cssClasses.PROGRESS_INDICATOR}`);\n         expect(progressIndicator!.style.cssText).toBe('');\n\n         component.showProgress();\n         expect(progressIndicator!.style.cssText).toMatch(/(height|top)/);\n         expect(root).toHaveClass(cssClasses.IN_PROGRESS);\n\n         destroyProgress(component, root);\n         component.destroy();\n       });\n\n    it('Should hide progress indicator when hideProgress() called', () => {\n      const {component, root} = setupTest();\n\n      component.showProgress();\n      component.hideProgress();\n      expect(root).not.toHaveClass(cssClasses.IN_PROGRESS);\n\n      destroyProgress(component, root);\n      component.destroy();\n    });\n\n    it('Should throw error when showProgress() is called without progress indicator element',\n       () => {\n         const {component} = setupTest({excludeProgressIndicator: true});\n\n         expect(() => {\n           component.showProgress();\n         }).toThrowError();\n         component.destroy();\n       });\n\n    it('Should throw error when hideProgress() is called without progress indicator element',\n       () => {\n         const {component} = setupTest({excludeProgressIndicator: true});\n\n         expect(() => {\n           component.hideProgress();\n         }).toThrowError();\n         component.destroy();\n       });\n  });\n});\n\nfunction destroyProgress(component: MDCDataTable, root: HTMLElement) {\n  const progressIndicator =\n      root.querySelector<HTMLElement>(`.${cssClasses.PROGRESS_INDICATOR}`);\n  component.hideProgress();\n  progressIndicator!.setAttribute('style', '');\n}\n"
  },
  {
    "path": "packages/mdc-data-table/test/feature-targeting-any.test.scss",
    "content": "@use '../data-table' as data-table;\n@use '../data-table-theme' as data-table-theme;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include data-table.core-styles($query: $query);\n    @include data-table.theme-baseline($query: $query);\n    @include data-table-theme.fill-color(red, $query: $query);\n    @include data-table-theme.header-row-fill-color(red, $query: $query);\n    @include data-table-theme.row-fill-color(red, $query: $query);\n    @include data-table-theme.selected-row-fill-color(red, $query: $query);\n    @include data-table-theme.checked-icon-color(red, $query: $query);\n    @include data-table-theme.divider-color(red, $query: $query);\n    @include data-table-theme.divider-size(0, $query: $query);\n    @include data-table-theme.row-hover-fill-color(red, $query: $query);\n    @include data-table-theme.header-row-text-color(red, $query: $query);\n    @include data-table-theme.row-text-color(red, $query: $query);\n    @include data-table-theme.shape-radius(0, $query: $query);\n    @include data-table-theme.stroke-size(0, $query: $query);\n    @include data-table-theme.stroke-color(red, $query: $query);\n    @include data-table-theme.header-row-height(0, $query: $query);\n    @include data-table-theme.row-height(0, $query: $query);\n    @include data-table-theme.cell-padding(0, $query: $query);\n    @include data-table-theme.column-widths(0, $query: $query);\n    @include data-table-theme.density(0, $query: $query);\n    @include data-table-theme.sort-icon-color(red, $query: $query);\n    @include data-table-theme.sort-icon-active-color(red, $query: $query);\n    @include data-table-theme.max-height(99px, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-data-table/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {attributes, cssClasses, SortValue} from '../constants';\nimport {MDCDataTableFoundation} from '../foundation';\n\ndescribe('MDCDataTableFoundation', () => {\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCDataTableFoundation, [\n      'addClass',\n      'addClassAtRowIndex',\n      'getAttributeByHeaderCellIndex',\n      'getHeaderCellCount',\n      'getHeaderCellElements',\n      'getRowCount',\n      'getRowElements',\n      'getRowIdAtIndex',\n      'getRowIndexByChildElement',\n      'getSelectedRowCount',\n      'getTableContainerHeight',\n      'getTableHeaderHeight',\n      'isCheckboxAtRowIndexChecked',\n      'isHeaderRowCheckboxChecked',\n      'isRowsSelectable',\n      'notifyRowClick',\n      'notifyRowSelectionChanged',\n      'notifySelectedAll',\n      'notifySortAction',\n      'notifyUnselectedAll',\n      'registerHeaderRowCheckbox',\n      'registerRowCheckboxes',\n      'removeClass',\n      'removeClassAtRowIndex',\n      'removeClassNameByHeaderCellIndex',\n      'setAttributeAtRowIndex',\n      'setAttributeByHeaderCellIndex',\n      'setClassNameByHeaderCellIndex',\n      'setHeaderRowCheckboxChecked',\n      'setHeaderRowCheckboxIndeterminate',\n      'setProgressIndicatorStyles',\n      'setRowCheckboxCheckedAtIndex',\n      'setSortStatusLabelByHeaderCellIndex',\n    ]);\n  });\n\n  function setupTest() {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCDataTableFoundation);\n    return {foundation, mockAdapter};\n  }\n\n  it('#layout should register header row checkbox only if table is selectable',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isRowsSelectable.and.returnValue(true);\n       foundation.layout();\n       expect(mockAdapter.registerHeaderRowCheckbox).toHaveBeenCalledTimes(1);\n       expect(mockAdapter.registerRowCheckboxes).toHaveBeenCalledTimes(1);\n\n       mockAdapter.registerHeaderRowCheckbox.calls.reset();\n       mockAdapter.registerRowCheckboxes.calls.reset();\n\n       mockAdapter.isRowsSelectable.and.returnValue(false);\n       foundation.layout();\n       expect(mockAdapter.registerHeaderRowCheckbox).not.toHaveBeenCalled();\n       expect(mockAdapter.registerRowCheckboxes).not.toHaveBeenCalled();\n     });\n\n  it('#layout should set header row checkbox checked when all row checkboxes are checked',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isRowsSelectable.and.returnValue(true);\n       mockAdapter.getSelectedRowCount.and.returnValue(5);\n       mockAdapter.getRowCount.and.returnValue(5);\n\n       foundation.layout();\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.setHeaderRowCheckboxChecked)\n           .toHaveBeenCalledWith(true);\n       expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);\n     });\n\n  it('#layout should set header row checkbox unchecked when all row checkboxes are unchecked',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isRowsSelectable.and.returnValue(true);\n       mockAdapter.getSelectedRowCount.and.returnValue(0);\n       mockAdapter.getRowCount.and.returnValue(5);\n\n       foundation.layout();\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.setHeaderRowCheckboxChecked)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);\n     });\n\n  it('#layout should set header row checkbox unchecked when there are no rows',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isRowsSelectable.and.returnValue(true);\n       mockAdapter.getSelectedRowCount.and.returnValue(0);\n       mockAdapter.getRowCount.and.returnValue(0);\n\n       foundation.layout();\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.setHeaderRowCheckboxChecked)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);\n     });\n\n  it('#layout should set header row checkbox indeterminate when some of the checkboxes are checked',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isRowsSelectable.and.returnValue(true);\n       mockAdapter.getSelectedRowCount.and.returnValue(2);\n       mockAdapter.getRowCount.and.returnValue(5);\n\n       foundation.layout();\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledWith(true);\n       expect(mockAdapter.setHeaderRowCheckboxIndeterminate)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.setHeaderRowCheckboxChecked)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);\n     });\n\n  it('#getHeaderCells should return array of header cell elements', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.getHeaderCells();\n    expect(mockAdapter.getHeaderCellElements).toHaveBeenCalledTimes(1);\n  });\n\n  it('#getRows should return array of row elements', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.getRows();\n    expect(mockAdapter.getRowElements).toHaveBeenCalledTimes(1);\n  });\n\n  it('#getRowIds should return array of row ids', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getRowCount.and.returnValue(5);\n    foundation.getRowIds();\n    expect(mockAdapter.getRowIdAtIndex).toHaveBeenCalledTimes(5);\n  });\n\n  it('#setSelectedRowIds Sets the row checkbox checked by id and sets selected class name to row',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowCount.and.returnValue(5);\n       mockAdapter.getRowIdAtIndex.withArgs(0).and.returnValue('testId-0');\n       mockAdapter.getRowIdAtIndex.withArgs(1).and.returnValue('testId-1');\n       mockAdapter.getRowIdAtIndex.withArgs(2).and.returnValue(null);\n       mockAdapter.getRowIdAtIndex.withArgs(3).and.returnValue('testId-3');\n       mockAdapter.getRowIdAtIndex.withArgs(4).and.returnValue('testId-4');\n\n       foundation.setSelectedRowIds(['testId-1', 'testId-3']);\n\n       const anyIndexMatch = (indexList: number[]) => {\n         return {\n           asymmetricMatch: (compareTo: number) =>\n               indexList.indexOf(compareTo) >= 0,\n           jasmineToString: () =>\n               '<anyIndexMatch: [' + indexList.toString() + ']>',\n         };\n       };\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledWith(anyIndexMatch([1, 3]), true);\n\n       expect(mockAdapter.addClassAtRowIndex)\n           .toHaveBeenCalledWith(\n               anyIndexMatch([1, 3]), cssClasses.ROW_SELECTED);\n\n       expect(mockAdapter.setAttributeAtRowIndex)\n           .toHaveBeenCalledWith(\n               anyIndexMatch([1, 3]), attributes.ARIA_SELECTED, 'true');\n\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledWith(anyIndexMatch([0, 2, 4]), false);\n\n       expect(mockAdapter.removeClassAtRowIndex)\n           .toHaveBeenCalledWith(\n               anyIndexMatch([0, 2, 4]), cssClasses.ROW_SELECTED);\n\n       expect(mockAdapter.setAttributeAtRowIndex)\n           .toHaveBeenCalledWith(\n               anyIndexMatch([0, 2, 4]), attributes.ARIA_SELECTED, 'false');\n     });\n\n  it('#setSelectedRowIds when empty unchecks all row checkboxes and unchecks header row checkbox',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowCount.and.returnValue(5);\n       mockAdapter.getSelectedRowCount.and.returnValue(0);\n\n       foundation.setSelectedRowIds([]);\n\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledWith(jasmine.any(Number), false);\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledTimes(5);\n       expect(mockAdapter.setHeaderRowCheckboxChecked)\n           .toHaveBeenCalledWith(false);\n       expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);\n     });\n\n  it('#getSelectedRowIds Returns selected row ids', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    mockAdapter.getRowCount.and.returnValue(3);\n    mockAdapter.isCheckboxAtRowIndexChecked.withArgs(jasmine.any(Number))\n        .and.returnValue(true);\n    mockAdapter.getRowIdAtIndex.withArgs(0).and.returnValue('testRowId0');\n    mockAdapter.getRowIdAtIndex.withArgs(1).and.returnValue('testRowId1');\n    mockAdapter.getRowIdAtIndex.withArgs(2).and.returnValue('testRowId2');\n\n    expect(foundation.getSelectedRowIds()).toEqual([\n      'testRowId0', 'testRowId1', 'testRowId2'\n    ]);\n  });\n\n  it('#handleHeaderRowCheckboxChange checks all row checkboxes when it is checked and notifies',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isHeaderRowCheckboxChecked.and.returnValue(true);\n       mockAdapter.getRowCount.and.returnValue(5);\n\n       foundation.handleHeaderRowCheckboxChange();\n\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledWith(jasmine.any(Number), true);\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledTimes(5);\n       expect(mockAdapter.notifySelectedAll).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleHeaderRowCheckboxChange unchecks all row checkboxes when it is unchecked and notifies',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.isHeaderRowCheckboxChecked.and.returnValue(false);\n       mockAdapter.getRowCount.and.returnValue(5);\n\n       foundation.handleHeaderRowCheckboxChange();\n\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledWith(jasmine.any(Number), false);\n       expect(mockAdapter.setRowCheckboxCheckedAtIndex)\n           .toHaveBeenCalledTimes(5);\n       expect(mockAdapter.notifyUnselectedAll).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleRowClick should notify', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    const mockDataRowEl = document.createElement('tr');\n    foundation.handleRowClick({\n      rowId: '1231',\n      row: mockDataRowEl,\n      altKey: true,\n      ctrlKey: false,\n      metaKey: true,\n      shiftKey: false\n    });\n    expect(mockAdapter.notifyRowClick).toHaveBeenCalledWith({\n      rowId: '1231',\n      row: mockDataRowEl,\n      altKey: true,\n      ctrlKey: false,\n      metaKey: true,\n      shiftKey: false\n    });\n  });\n\n  it('#handleRowCheckboxChange does not do anything when target row is not found',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowIndexByChildElement.withArgs(jasmine.anything())\n           .and.returnValue(-1);\n       foundation.handleRowCheckboxChange({} as Event);\n\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Expected 1 arguments, but got\n       //  0.\n       expect(mockAdapter.notifyRowSelectionChanged).not.toHaveBeenCalledWith();\n     });\n\n  it('#handleRowCheckboxChange does not do anything when target element (native checkbox) is not found',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowIndexByChildElement\n           .withArgs(jasmine.any(HTMLInputElement))\n           .and.returnValue(2);\n\n       foundation.handleRowCheckboxChange({} as Event);\n\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Expected 1 arguments, but got\n       //  0.\n       expect(mockAdapter.notifyRowSelectionChanged).not.toHaveBeenCalledWith();\n     });\n\n  it('#handleRowCheckboxChange selects row when row checkbox is checked and notifies',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowIndexByChildElement.withArgs(jasmine.anything())\n           .and.returnValue(2);\n       mockAdapter.isCheckboxAtRowIndexChecked.withArgs(2).and.returnValue(\n           true);\n       mockAdapter.getRowIdAtIndex.withArgs(2).and.returnValue('testRowId-u2');\n\n       foundation.handleRowCheckboxChange(\n           {target: {checked: true}} as unknown as Event);\n\n       expect(mockAdapter.addClassAtRowIndex)\n           .toHaveBeenCalledWith(2, cssClasses.ROW_SELECTED);\n       expect(mockAdapter.setAttributeAtRowIndex)\n           .toHaveBeenCalledWith(2, attributes.ARIA_SELECTED, 'true');\n\n       expect(mockAdapter.notifyRowSelectionChanged).toHaveBeenCalledWith({\n         rowId: 'testRowId-u2',\n         rowIndex: 2,\n         selected: true,\n       });\n     });\n\n  it('#handleRowCheckboxChange unselects row when row checkbox is unchecked and notifies',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getRowIndexByChildElement.withArgs(jasmine.anything())\n           .and.returnValue(2);\n       mockAdapter.isCheckboxAtRowIndexChecked.withArgs(2).and.returnValue(\n           false);\n       mockAdapter.getRowIdAtIndex.withArgs(2).and.returnValue('testRowId-u2');\n\n       foundation.handleRowCheckboxChange(\n           {target: {checked: false}} as unknown as Event);\n\n       expect(mockAdapter.removeClassAtRowIndex)\n           .toHaveBeenCalledWith(2, cssClasses.ROW_SELECTED);\n       expect(mockAdapter.setAttributeAtRowIndex)\n           .toHaveBeenCalledWith(2, attributes.ARIA_SELECTED, 'false');\n\n       expect(mockAdapter.notifyRowSelectionChanged).toHaveBeenCalledWith({\n         rowId: 'testRowId-u2',\n         rowIndex: 2,\n         selected: false,\n       });\n     });\n\n  describe('Column sorting', () => {\n    it('#handleSortAction Sets header cell in ascending sorted state by default on sort action',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttributeByHeaderCellIndex\n             .withArgs(2, attributes.ARIA_SORT)\n             .and.returnValue(null);\n         mockAdapter.getHeaderCellCount.and.returnValue(5);\n\n         const mockHeaderCell = document.createElement('div');\n         foundation.handleSortAction({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n         });\n\n         expect(mockAdapter.setClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, cssClasses.HEADER_CELL_SORTED);\n         expect(mockAdapter.setAttributeByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 2, attributes.ARIA_SORT, SortValue.ASCENDING);\n         expect(mockAdapter.notifySortAction).toHaveBeenCalledWith({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n           sortValue: SortValue.ASCENDING,\n         });\n       });\n\n    it('#handleSortAction Sets header cell in descending sorted state when currently sorted in ascending order on sort action',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttributeByHeaderCellIndex\n             .withArgs(2, attributes.ARIA_SORT)\n             .and.returnValue(SortValue.ASCENDING);\n         mockAdapter.getHeaderCellCount.and.returnValue(5);\n\n         const mockHeaderCell = document.createElement('div');\n         foundation.handleSortAction({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n         });\n\n         expect(mockAdapter.setClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, cssClasses.HEADER_CELL_SORTED);\n         expect(mockAdapter.setAttributeByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 2, attributes.ARIA_SORT, SortValue.DESCENDING);\n         expect(mockAdapter.setClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, cssClasses.HEADER_CELL_SORTED_DESCENDING);\n         expect(mockAdapter.notifySortAction).toHaveBeenCalledWith({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n           sortValue: SortValue.DESCENDING,\n         });\n       });\n\n    it('#handleSortAction Sets header cell in ascending sorted state when currently sorted in descending order on sort action',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttributeByHeaderCellIndex\n             .withArgs(2, attributes.ARIA_SORT)\n             .and.returnValue(SortValue.DESCENDING);\n         mockAdapter.getHeaderCellCount.and.returnValue(5);\n\n         const mockHeaderCell = document.createElement('div');\n         foundation.handleSortAction({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n         });\n\n         expect(mockAdapter.setClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, cssClasses.HEADER_CELL_SORTED);\n         expect(mockAdapter.setAttributeByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 2, attributes.ARIA_SORT, SortValue.ASCENDING);\n         expect(mockAdapter.removeClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, cssClasses.HEADER_CELL_SORTED_DESCENDING);\n         expect(mockAdapter.notifySortAction).toHaveBeenCalledWith({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n           sortValue: SortValue.ASCENDING,\n         });\n       });\n\n    it('#handleSortAction Resets sort states of other header cells when sorted on target header cell',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttributeByHeaderCellIndex\n             .withArgs(2, attributes.ARIA_SORT)\n             .and.returnValue(null);\n         mockAdapter.getHeaderCellCount.and.returnValue(5);\n\n         const mockHeaderCell = document.createElement('div');\n         foundation.handleSortAction({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n         });\n\n         expect(mockAdapter.removeClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 jasmine.any(Number), cssClasses.HEADER_CELL_SORTED);\n         expect(mockAdapter.removeClassNameByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 jasmine.any(Number), cssClasses.HEADER_CELL_SORTED_DESCENDING);\n         expect(mockAdapter.setAttributeByHeaderCellIndex)\n             .toHaveBeenCalledWith(\n                 jasmine.any(Number), attributes.ARIA_SORT, SortValue.NONE);\n       });\n\n    it('#handleSortAction Activating sort sets appropriate sort status label that is visually hidden',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n         mockAdapter.getAttributeByHeaderCellIndex\n             .withArgs(2, attributes.ARIA_SORT)\n             .and.returnValue(null);\n         mockAdapter.getHeaderCellCount.and.returnValue(5);\n\n         const mockHeaderCell = document.createElement('div');\n         foundation.handleSortAction({\n           columnId: 'testColId-u2',\n           columnIndex: 2,\n           headerCell: mockHeaderCell,\n         });\n\n         expect(mockAdapter.setSortStatusLabelByHeaderCellIndex)\n             .toHaveBeenCalledWith(2, SortValue.ASCENDING);\n\n         // Should reset sort label on other columns.\n         expect(mockAdapter.setSortStatusLabelByHeaderCellIndex)\n             .toHaveBeenCalledWith(jasmine.any(Number), SortValue.NONE);\n       });\n  });\n\n  it('#showProgress Adds class name that makes the progress indicator visibile',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getTableHeaderHeight.and.returnValue(20);\n       mockAdapter.getTableContainerHeight.and.returnValue(100);\n\n       foundation.showProgress();\n\n       expect(mockAdapter.setProgressIndicatorStyles)\n           .toHaveBeenCalledWith({height: '80px', top: '20px'});\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.IN_PROGRESS);\n     });\n\n  it('#hideProgress Removes class name that makes progress indicator hidden',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.hideProgress();\n\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.IN_PROGRESS);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-data-table/test/sass.test.scss",
    "content": "@use '../data-table';\n@use '../data-table-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    // Core Style APIs\n    @include data-table.core-styles($query: $query);\n    @include data-table.theme-baseline($query: $query);\n\n    // Theme APIs\n    @include data-table-theme.fill-color(red, $query: $query);\n    @include data-table-theme.header-row-fill-color(red, $query: $query);\n    @include data-table-theme.row-fill-color(red, $query: $query);\n    @include data-table-theme.selected-row-fill-color(red, $query: $query);\n    @include data-table-theme.checked-icon-color(red, $query: $query);\n    @include data-table-theme.divider-color(red, $query: $query);\n    @include data-table-theme.divider-size(0, $query: $query);\n    @include data-table-theme.row-hover-fill-color(red, $query: $query);\n    @include data-table-theme.header-row-text-color(red, $query: $query);\n    @include data-table-theme.row-text-color(red, $query: $query);\n    @include data-table-theme.shape-radius(0, $query: $query);\n    @include data-table-theme.stroke-size(0, $query: $query);\n    @include data-table-theme.stroke-color(red, $query: $query);\n    @include data-table-theme.header-row-height(0, $query: $query);\n    @include data-table-theme.row-height(0, $query: $query);\n    @include data-table-theme.cell-padding(0, $query: $query);\n    @include data-table-theme.column-widths(0, $query: $query);\n    @include data-table-theme.density(0, $query: $query);\n    @include data-table-theme.sort-icon-color(red, $query: $query);\n    @include data-table-theme.sort-icon-active-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-data-table/test/styles.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-data-table styles', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-data-table/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {SortValue} from './constants';\n\nexport interface MDCDataTableRowSelectionChangedEventDetail {\n  rowIndex: number;\n  rowId: string|null;\n  selected: boolean;\n}\n\n/**\n * Event data required for sort action callback - `handleSortAction()`.\n * Component must send this data to foundation when sort action triggered on\n * sortable header cell.\n */\nexport interface SortActionEventData {\n  columnId: string|null;\n  columnIndex: number;\n  headerCell: HTMLElement;\n}\n\n/**\n * Event detail triggered by foundation on sort action. This event detail is\n * used to trigger DOM event by component.\n */\nexport interface SortActionEventDetail {\n  columnId: string|null;\n  columnIndex: number;\n  headerCell: HTMLElement;\n  sortValue: SortValue;\n}\n\n/**\n * Event data used for data table row click action.\n */\nexport interface RowClickEventData {\n  rowId: string|null;\n  row: HTMLElement;\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  shiftKey: boolean;\n}\n\n/** Event details used for data table row click action. */\nexport interface RowClickEventDetail extends RowClickEventData {}\n\n/**\n * Styles used to dynamically set dimensions of progress indicator based on\n * table header & body.\n */\nexport interface ProgressIndicatorStyles {\n  height: string;\n  top: string;\n}\n"
  },
  {
    "path": "packages/mdc-density/README.md",
    "content": "<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n"
  },
  {
    "path": "packages/mdc-density/_density.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n$interval: 4px !default;\n$minimum-scale: minimum !default;\n$maximum-scale: maximum !default;\n$supported-scales: (default, minimum, maximum) !default;\n$supported-properties: (height, size, margin-top, margin-bottom, top) !default;\n$default-scale: 0 !default;\n\n///\n/// Returns component property value based on given density config and density scale.\n///\n/// @param {Map} $density-config - Density configuration for component.\n/// @param {Number | String} $density-scale - Density scale value for component. Examples: `-3`, `0` or `minimum`.\n/// @param {Map} $property-name - Density scale map for the target component.\n///\n/// @example\n///   mdc-density-prop-value(\n///     $density-config: (\n///       height: (\n///         default: 36px,\n///         maximum: 40px,\n///         minimum: 24px,\n///       ),\n///     ),\n///     $density-scale: minimum,\n///     $property-name: height,\n///   )\n///   // 24px\n///\n/// @example\n///   mdc-density-prop-value(\n///     $density-config: (\n///       height: (\n///         default: 40px,\n///         maximum: 60px,\n///         minimum: 24px,\n///       ),\n///     ),\n///     $density-scale: -2,\n///     $property-name: height,\n///   )\n///   // 32px\n///\n/// @example\n///   mdc-density-prop-value(\n///     $density-config: (\n///       height: (\n///         default: 36px,\n///         maximum: 40px,\n///         minimum: 24px,\n///       ),\n///       width: (\n///         default: 56px,\n///         maximum: 64px,\n///         minimum: 48px,\n///       ),\n///     ),\n///     $density-scale: minimum,\n///     $property-name: width,\n///   )\n///   // 48px\n///\n@function prop-value($density-config, $density-scale, $property-name) {\n  @if (\n    meta.type-of($density-scale) ==\n      'string' and\n      list.index($list: $supported-scales, $value: $density-scale) ==\n      null\n  ) {\n    @error \"mdc-density: Supported density scales #{$supported-scales}, but received #{$density-scale}.\";\n  }\n\n  @if (\n    list.index($list: $supported-properties, $value: $property-name) == null\n  ) {\n    @error \"mdc-density: Supported density properties #{$supported-properties},\" +\n      \"but received #{$property-name}.\";\n  }\n\n  $value: null;\n  $property-scale-map: map.get($density-config, $property-name);\n\n  @if map.has-key($property-scale-map, $density-scale) {\n    $value: map.get($property-scale-map, $density-scale);\n  } @else {\n    $value: map.get($property-scale-map, default) + $density-scale * $interval;\n  }\n\n  $min-value: map.get($property-scale-map, $minimum-scale);\n  $max-value: map.get($property-scale-map, $maximum-scale);\n\n  @if ($value < $min-value or $value > $max-value) {\n    @error \"mdc-density: #{$property-name} must be between #{$min-value} and \" +\n      \"#{$max-value} (inclusive), but received #{$value}.\";\n  }\n\n  @return $value;\n}\n"
  },
  {
    "path": "packages/mdc-density/_functions.import.scss",
    "content": "@forward \"./index\" as mdc-density-*;\n"
  },
  {
    "path": "packages/mdc-density/_functions.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_density.scss' instead.\n@forward './density' show prop-value;\n"
  },
  {
    "path": "packages/mdc-density/_index.scss",
    "content": "@forward './density';\n"
  },
  {
    "path": "packages/mdc-density/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-density-* hide mdc-density-prop-value;\n"
  },
  {
    "path": "packages/mdc-density/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_density.scss' module instead.\n@forward './density' show $interval, $minimum-scale, $maximum-scale, $supported-scales, $supported-properties, $default-scale;\n"
  },
  {
    "path": "packages/mdc-density/package.json",
    "content": "{\n  \"name\": \"@material/density\",\n  \"description\": \"Density utilities for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"density\",\n    \"adaptive layout\"\n  ],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-density\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dialog/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-dialog/README.md",
    "content": "<!--docs:\ntitle: \"Dialogs\"\nlayout: detail\nsection: components\nexcerpt: \"Modal dialogs.\"\niconId: dialog\npath: /catalog/dialogs/\n-->\n\n# Dialogs\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\nThere are four types of dialogs:\n\n1. [Alert](#alert-dialog)\n1. [Simple](#simple-dialog)\n1. [Confirmation](#confirmation-dialog)\n1. [Full-screen](#full-screen-dialog)\n\n## Using dialogs\n\nA dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.\n\nDialogs are purposefully interruptive, so they should be used sparingly.\n\nFor additional guidance, refer to the [Material guidelines](https://material.io/go/design-dialogs).\n\n### Installation\n\n```\nnpm install @material/dialog\n```\n\n### Styles\n\n```scss\n@use \"@material/dialog\";\n\n@include dialog.core-styles;\n```\n\n**Note: Styles for any components you intend to include within dialogs (e.g. List, Checkboxes, etc.) must also be imported.**\n\n### JavaScript Instantiation\n\n```js\nimport {MDCDialog} from '@material/dialog';\nconst dialog = new MDCDialog(document.querySelector('.mdc-dialog'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\nMDC Dialog makes no assumptions about what will be added to the `mdc-dialog__content` element. Any list, checkboxes,\netc. must also be instantiated. If your dialog contains any layout-sensitive components, you should wait until\n`MDCDialog:opened` is emitted to instantiate them (or call `layout` on them) so that the dialog's transition finishes\nfirst.\n\nFor example, to instantiate an MDC List inside of a simple or confirmation dialog:\n\n```js\nimport {MDCList} from '@material/list';\nconst list = new MDCList(document.querySelector('.mdc-dialog .mdc-deprecated-list'));\n\ndialog.listen('MDCDialog:opened', () => {\n  list.layout();\n});\n```\n\n**Note: Mispositioned or incorrectly-sized elements (e.g. ripples, floating labels, notched outlines) are a strong\nindication that child components are being instantiated before the dialog has finished opening.**\n\n### Making dialogs accessible\n\n#### Using `aria-hidden` as a fallback for `aria-modal`\n\n`aria-modal` is part of the ARIA 1.1 specification, and indicates to screen readers that they should confine themselves to a single element. We recommend adding `aria-modal=\"true\"` to the root element of its DOM structure.\n\nHowever, not all user agents and screen readers properly interpret this attribute.\n\nThe fallback is to use `aria-hidden` using `aria-hidden=\"true\"` to all static content beneath the dialog when the dialog is open. This will be easiest to achieve if all non-modal elements are under a single common ancestor under the body, so that `aria-hidden` can be applied to one element.\n\n```js\ndialog.listen('MDCDialog:opened', function() {\n  // Assuming contentElement references a common parent element with the rest of the page's content\n  contentElement.setAttribute('aria-hidden', 'true');\n});\ndialog.listen('MDCDialog:closing', function() {\n  contentElement.removeAttribute('aria-hidden');\n});\n```\n\n**Note: The example above intentionally listens to the opened (not opening) event and the closing (not closed) event in order to avoid additional jumping between elements by screen readers due to one element becoming hidden before others become visible.**\n\n## Alert dialog\n\nAlert dialogs interrupt users with urgent information, details, or actions.\n\n<img src=\"images/alert-dialog.png\" alt=\"Alert dialog: discard\" width=\"250px\">\n\n### Alert dialog example\n\n```html\n<div class=\"mdc-dialog\">\n  <div class=\"mdc-dialog__container\">\n    <div class=\"mdc-dialog__surface\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"my-dialog-title\"\n      aria-describedby=\"my-dialog-content\"\n      tabindex=\"-1\">\n      <div class=\"mdc-dialog__content\" id=\"my-dialog-content\">\n        Discard draft?\n      </div>\n      <div class=\"mdc-dialog__actions\">\n        <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"cancel\">\n          <div class=\"mdc-button__ripple\"></div>\n          <span class=\"mdc-button__label\">Cancel</span>\n        </button>\n        <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"discard\">\n          <div class=\"mdc-button__ripple\"></div>\n          <span class=\"mdc-button__label\">Discard</span>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"mdc-dialog__scrim\"></div>\n</div>\n```\n\n## Simple dialog\n\nSimple dialogs can display items that are immediately actionable when selected. They don’t have text buttons.\n\nAs simple dialogs are interruptive, they should be used sparingly. Alternatively, dropdown menus provide options in a non-modal, less disruptive way.\n\n<img src=\"images/simple-dialog.png\" alt=\"Simple dialog: selection\" width=\"250px\">\n\n### Simple dialog example\n\n```html\n<div class=\"mdc-dialog\">\n  <div class=\"mdc-dialog__container\">\n    <div class=\"mdc-dialog__surface\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"my-dialog-title\"\n      aria-describedby=\"my-dialog-content\"\n      tabindex=\"-1\">\n      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->\n      <h2 class=\"mdc-dialog__title\" id=\"my-dialog-title\"><!--\n     -->Choose a Ringtone<!--\n   --></h2>\n      <div class=\"mdc-dialog__content\" id=\"my-dialog-content\">\n        <ul class=\"mdc-deprecated-list mdc-deprecated-list--avatar-list\">\n          <li class=\"mdc-deprecated-list-item\" tabindex=\"0\" data-mdc-dialog-action=\"none\">\n            <span class=\"mdc-deprecated-list-item__text\">None</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-mdc-dialog-action=\"callisto\">\n            <span class=\"mdc-deprecated-list-item__text\">Callisto</span>\n          </li>\n          <!-- ... -->\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div class=\"mdc-dialog__scrim\"></div>\n</div>\n```\n\n**Note: Note the inclusion of the `mdc-deprecated-list--avatar-list` class, which aligns with the Simple Dialog spec.**\n\n## Confirmation dialog\n\nConfirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, so they have a chance to change their minds if necessary.\n\nIf the user confirms a choice, it’s carried out. Otherwise, the user can dismiss the dialog. For example, users can listen to multiple ringtones but only make a final selection upon tapping “OK.”\n\n<img src=\"images/confirmation-dialog.png\" alt=\"Confirmation dialog: selection confirmation\" width=\"250px\">\n\n### Confirmation dialog example\n\n```html\n<div class=\"mdc-dialog\">\n  <div class=\"mdc-dialog__container\">\n    <div class=\"mdc-dialog__surface\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"my-dialog-title\"\n      aria-describedby=\"my-dialog-content\"\n      tabindex=\"-1\">\n      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->\n      <h2 class=\"mdc-dialog__title\" id=\"my-dialog-title\"><!--\n     -->Choose a Ringtone<!--\n   --></h2>\n      <div class=\"mdc-dialog__content\" id=\"my-dialog-content\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n            <span class=\"mdc-deprecated-list-item__graphic\">\n              <div class=\"mdc-radio\">\n                <input class=\"mdc-radio__native-control\"\n                       type=\"radio\"\n                       id=\"test-dialog-baseline-confirmation-radio-1\"\n                       name=\"test-dialog-baseline-confirmation-radio-group\"\n                       checked>\n                <div class=\"mdc-radio__background\">\n                  <div class=\"mdc-radio__outer-circle\"></div>\n                  <div class=\"mdc-radio__inner-circle\"></div>\n                </div>\n              </div>\n            </span>\n            <label id=\"test-dialog-baseline-confirmation-radio-1-label\"\n                   for=\"test-dialog-baseline-confirmation-radio-1\"\n                   class=\"mdc-deprecated-list-item__text\">None</label>\n          </li>\n          <!-- ... -->\n        </ul>\n      </div>\n      <div class=\"mdc-dialog__actions\">\n        <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"close\">\n          <div class=\"mdc-button__ripple\"></div>\n          <span class=\"mdc-button__label\">Cancel</span>\n        </button>\n        <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"accept\">\n          <div class=\"mdc-button__ripple\"></div>\n          <span class=\"mdc-button__label\">OK</span>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"mdc-dialog__scrim\"></div>\n</div>\n```\n\n**Note: In the example above, the Cancel button intentionally has the `close` action to align with the behavior of\nclicking the scrim or pressing the Escape key, allowing all interactions involving dismissal without taking an action\nto be detected the same way.**\n\n## Full-screen dialog\n\nFull-screen dialogs group a series of tasks, such as creating a calendar entry with the event title, date, location, and time.\n\n<img src=\"images/full-screen-dialog.png\" alt=\"Full-screen dialog: event\" width=\"250px\">\n\n### Full-screen dialog example\n\n```html\n<div class=\"mdc-dialog mdc-dialog--open mdc-dialog--fullscreen\">\n  <div class=\"mdc-dialog__container\">\n    <div class=\"mdc-dialog__surface\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"my-dialog-title\"\n      aria-describedby=\"my-dialog-content\"\n      tabindex=\"-1\">\n      <div class=\"mdc-dialog__header\">\n        <h2 class=\"mdc-dialog__title\" id=\"my-dialog-title\">\n          Full-Screen Dialog Title\n        </h2>\n        <div class=\"mdc-dialog__close-tooltip-wrapper\">\n          <button class=\"mdc-icon-button material-icons mdc-dialog__close\" data-mdc-dialog-action=\"close\">\n            close\n          </button>\n        </div>\n      </div>\n      <div class=\"mdc-dialog__content\" id=\"my-dialog-content\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        Sed scelerisque metus dapibus, maximus massa pulvinar, commodo nunc.\n        Quisque vitae luctus lectus, ut tempus ipsum. Sed suscipit gravida scelerisque.\n        Aenean vulputate elementum est, quis consectetur orci consectetur ac.\n        Quisque accumsan vel nisi id dapibus. Suspendisse nec urna eu massa ornare rutrum.\n        Vivamus at nisi sit amet nulla pretium volutpat sit amet in justo. Donec mi metus,\n        interdum ac tincidunt at, vehicula vitae nisl. Morbi fermentum dapibus massa,\n        nec lobortis massa vestibulum eu.\n      </div>\n      <div class=\"mdc-dialog__actions\">\n        <button type=\"button\" class=\"mdc-button mdc-dialog__button\"\n                data-mdc-dialog-action=\"ok\">\n          <div class=\"mdc-button__ripple\"></div>\n          <span class=\"mdc-button__label\">OK</span>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div class=\"mdc-dialog__scrim\"></div>\n</div>\n```\n\nNote: Full-screen dialogs are intended for mobile/small-screen devices. The\ndialog's size will adapt to the screen size, and so becomes modal if used on\nlarger screen sizes.\n\n## Floating sheet\n\nFloating sheets are dialogs with a close icon button. Clicking the close icon\nbutton closes the sheet. Having the close icon button is mutually exclusive with\nhaving action bar buttons (e.g. cancel and OK buttons). The icon button is\nabsolutely positioned. Sheet content can have no default padding by using the\n`mdc-dialog--no-content-padding` class.\n\n### Floating sheet example\n\n```html\n<div class=\"mdc-dialog mdc-dialog--open test-dialog mdc-dialog--sheet mdc-dialog--no-content-padding\"\n     aria-modal=\"true\"\n     aria-labelledby=\"test-dialog__title--with-close-icon-button\"\n     aria-describedby=\"test-dialog__content--with-close-icon-button\"\n     id=\"test-dialog\">\n  <div class=\"mdc-dialog__scrim\" data-mdc-dialog-action=\"cancel\"></div>\n  <div class=\"mdc-dialog__container\">\n    <div class=\"mdc-dialog__surface\" tabindex=\"-1\">\n      <div class=\"mdc-dialog__close-tooltip-wrapper\">\n        <button class=\"mdc-icon-button material-icons mdc-dialog__close\" data-mdc-dialog-action=\"close\">\n          close\n        </button>\n      </div>\n      <div class=\"mdc-dialog__content test-dialog__content\">\n        <div class=\"test-sheet__content\">\n          <h3>Sheets</h3>\n          There are no action buttons. Any HTML content can go here. Title is also defined through content.\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n## Additional Information\n\n### Dialog actions\n\nAll dialog variants support the concept of dialog actions. Any element within a dialog may include the\n`data-mdc-dialog-action` attribute to indicate that interacting with it should close the dialog with the specified action.\nThis action is then reflected via `event.detail.action` in the `MDCDialog:closing` and `MDCDialog:closed` events.\n\nAdditionally, two interactions have defined actions by default:\n\n* Clicking on the scrim\n* Pressing the Escape key within the dialog\n\nBoth of these map to the `close` action by default. This can be accessed and customized via the component's\n`scrimClickAction` and `escapeKeyAction` properties, respectively.\n\nSetting either of these properties to an empty string will result in that interaction being disabled (i.e. the dialog\nwill no longer close in response to the interaction). Exercise caution when doing this - it should always be possible\nfor a user to dismiss the dialog.\n\nAny action buttons within the dialog which equate strictly to a dismissal with no further action should also use the\n`close` action; this will make it easy to handle all such interactions consistently, while separately handling other\nactions.\n\n### Action button arrangement\n\nAs indicated in the [Dialog design article](https://material.io/design/components/dialogs.html#anatomy), buttons within\nthe `mdc-dialog__actions` element are arranged horizontally by default, with the confirming action _last_.\n\nIn cases where the button text is too long for all buttons to fit on a single line, the buttons are stacked vertically,\nwith the confirming action _first_.\n\nMDC Dialog detects and handles this automatically by default, reversing the buttons when applying the stacked layout.\nThis automatic behavior can be disabled by setting `autoStackButtons` to `false` on the component instance:\n\n```js\ndialog.autoStackButtons = false;\n```\n\nThis will also be disabled if the `mdc-dialog--stacked` modifier class is applied manually to the root element before the\ncomponent is instantiated, but note that dialog action button labels are recommended to be short enough to fit on a\nsingle line if possible.\n\n### Default action button\n\nMDC Dialog supports indicating that one of its action buttons represents the default action, triggered by pressing the\nEnter key. This can be used e.g. for single-choice Confirmation Dialogs to accelerate the process of making a selection,\navoiding the need to tab through to the appropriate button to confirm the choice.\n\nTo indicate that a button represents the default action, add the `data-mdc-dialog-button-default` data attribute.\nFor example:\n```html\n...\n<div class=\"mdc-dialog__actions\">\n  <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"close\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Cancel</span>\n  </button>\n  <button type=\"button\" class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"accept\" data-mdc-dialog-button-default>\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">OK</span>\n  </button>\n</div>\n...\n```\n\n### Actions and selections\n\nDialogs which require making a choice via selection controls should initially disable any button which performs an\naction if no choice is selected by default. MDC Dialog does not include built-in logic for this, since it aims to remain\nas unopinionated as possible regarding dialog contents, aside from relaying information on which action is taken.\n\n## Style customizations\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-dialog` | Mandatory. The root DOM element containing the surface and the container.\n`mdc-dialog__scrim` | Mandatory. Semitransparent backdrop that displays behind a dialog.\n`mdc-dialog__scrim--removed` | Optional. Remove semitransparent backdrop behind dialog and allow pointer on a content behind a dialog.\n`mdc-dialog__container` | Mandatory. Wrapper element needed to ensure flexbox behavior in IE 11.\n`mdc-dialog__surface` | Mandatory. The bounding box for the dialog's content.\n`mdc-dialog__title` | Optional. Brief summary of the dialog's purpose.\n`mdc-dialog__content` | Optional. Primary content area. May contain a list, a form, or prose.\n`mdc-dialog__actions` | Optional. Footer area containing the dialog's action buttons.\n`mdc-dialog__button` | Optional. Individual action button. Typically paired with [`mdc-button`](../mdc-button).\n`mdc-dialog--open` | Optional. Indicates that the dialog is open and visible.\n`mdc-dialog--opening` | Optional. Applied automatically when the dialog is in the process of animating open.\n`mdc-dialog--closing` | Optional. Applied automatically when the dialog is in the process of animating closed.\n`mdc-dialog--scrollable` | Optional. Applied automatically when the dialog has overflowing content to warrant scrolling.\n`mdc-dialog--stacked` | Optional. Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the fill color of the dialog.\n`scrim-color($color, $opacity)` | Sets the color of the scrim behind the dialog.\n`title-ink-color($color, $opacity)` | Sets the color of the dialog's title text.\n`content-ink-color($color, $opacity)` | Sets the color of the dialog's content text.\n`content-display($display)` | Sets the display property of the dialog's content.\n`content-padding($padding-top, $padding-right, $padding-bottom, $padding-left)` | Sets the padding of the dialog's content.\n`scroll-divider-color($color, $opacity)` | Sets the color of the dividers which display around scrollable content.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to dialog surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width)` | Sets the minimum width of the dialog (defaults to 280px).\n`max-width($max-width, $margin)` | Sets the maximum width of the dialog (defaults to 560px max width and 16px margins).\n`max-height($max-height, $margin)` | Sets the maximum height of the dialog (defaults to no max height and 16px margins).\n\n**Note: The `max-width` and `max-height` mixins only apply their maximum when the viewport is large enough to accommodate the specified value when accounting for the specified margin on either side. When the viewport is smaller, the dialog is sized such that the given margin is retained around the edges.**\n\n## Other customizations\n\nData Attributes | Description\n--- | ---\n`data-mdc-dialog-button-default` | Optional. Add to a button to indicate that it is the default action button (see Default Action Button section above).\n`data-mdc-dialog-initial-focus` | Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.\n\n## `MDCDialog` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Proxies to the foundation's `isOpen` method.\n`escapeKeyAction` | `string` | Proxies to the foundation's `getEscapeKeyAction` and `setEscapeKeyAction` methods.\n`scrimClickAction` | `string` | Proxies to the foundation's `getScrimClickAction` and `setScrimClickAction` methods.\n`autoStackButtons` | `boolean` | Proxies to the foundation's `getAutoStackButtons` and `setAutoStackButtons` methods.\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Recalculates layout and automatically adds/removes modifier classes like `--scrollable`.\n`open() => void` | Opens the dialog.\n`close(action: string?) => void` | Closes the dialog, optionally with the specified action indicating why it was closed.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCDialog:opening` | `{}` | Indicates when the dialog begins its opening animation.\n`MDCDialog:opened` | `{}` | Indicates when the dialog finishes its opening animation.\n`MDCDialog:closing` | `{action: string?}` | Indicates when the dialog begins its closing animation. `action` represents the action which closed the dialog.\n`MDCDialog:closed` | `{action: string?}` | Indicates when the dialog finishes its closing animation. `action` represents the action which closed the dialog.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Dialog for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDialogAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns whether the given class exists on the root element.\n`addBodyClass(className: string) => void` | Adds a class to the `<body>`.\n`removeBodyClass(className: string) => void` | Removes a class from the `<body>`.\n`eventTargetMatches(target: EventTarget \\| null, selector: string) => void` | Returns `true` if the target element matches the given CSS selector, otherwise `false`.\n`trapFocus(initialFocusEl: HTMLElement \\| null) => void` | Sets up the DOM such that keyboard navigation is restricted to focusable elements within the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details). Moves focus to `initialFocusEl`, if set.\n`releaseFocus() => void` | Removes any effects of focus trapping on the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details).\n`getInitialFocusEl() => HTMLElement \\| null` | Returns the `data-mdc-dialog-initial-focus` element to add focus to after the dialog has opened.\n`isContentScrollable() => boolean` | Returns `true` if `mdc-dialog__content` can be scrolled by the user, otherwise `false`.\n`areButtonsStacked() => boolean` | Returns `true` if `mdc-dialog__action` buttons (`mdc-dialog__button`) are stacked vertically, otherwise `false` if they are side-by-side.\n`getActionFromEvent(event: Event) => string \\| null` | Retrieves the value of the `data-mdc-dialog-action` attribute from the given event's target, or an ancestor of the target.\n`clickDefaultButton() => void` | Invokes `click()` on the `data-mdc-dialog-button-default` element, if one exists in the dialog.\n`reverseButtons() => void` | Reverses the order of action buttons in the `mdc-dialog__actions` element. Used when switching between stacked and unstacked button layouts.\n`notifyOpening() => void` | Broadcasts an event denoting that the dialog has just started to open.\n`notifyOpened() => void` | Broadcasts an event denoting that the dialog has finished opening.\n`notifyClosing(action: string) {}` | Broadcasts an event denoting that the dialog has just started closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.\n`notifyClosed(action: string) {}` | Broadcasts an event denoting that the dialog has finished closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.\n\n### `MDCDialogFoundation`\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the dialog.\n`close(action: string)` | Closes the dialog, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the dialog is open.\n`layout()` | Recalculates layout and automatically adds/removes modifier classes e.g. `--scrollable`.\n`getEscapeKeyAction() => string` | Returns the action reflected when the Escape key is pressed.\n`setEscapeKeyAction(action: string)` | Sets the action reflected when the Escape key is pressed. Setting to `''` disables closing the dialog via Escape key.\n`getScrimClickAction() => string` | Returns the action reflected when the scrim is clicked.\n`setScrimClickAction(action: string)` | Sets the action reflected when the scrim is clicked. Setting to `''` disables closing the dialog via scrim click.\n`getAutoStackButtons() => boolean` | Returns whether stacked/unstacked action button layout is automatically handled during layout logic.\n`setAutoStackButtons(autoStack: boolean) => void` | Sets whether stacked/unstacked action button layout is automatically handled during layout logic.\n`handleClick(event: MouseEvent)` | Handles `click` events on or within the dialog's root element.\n`handleKeydown(event: KeyboardEvent)` | Handles `keydown` events on or within the dialog's root element.\n`handleDocumentKeydown(event: Event)` | Handles `keydown` events on or within the document while the dialog is open.\n`getSuppressDefaultPressSelector() => string` | Returns the selector string for elements that suppress the default dialog press action, such as pressing enter in a textarea.\n`setSuppressDefaultPressSelector(selector: string)` | Customize the selector string to suppress the default dialog press action. An empty string indicates that no elements should suppress the default action.\n\n#### Event handlers\n\nWhen wrapping the Dialog foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`click` | `.mdc-dialog` (root) | `handleClick` | During initialization | During destruction\n`keydown` | `.mdc-dialog` (root) | `handleKeydown` | During initialization | During destruction\n`keydown` | `document` | `handleDocumentKeydown` | On `MDCDialog:opening` | On `MDCDialog:closing`\n`resize` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`\n`orientationchange` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`\n\n### The `util` API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`createFocusTrapInstance(surfaceEl: Element, focusTrapFactory: function(): !FocusTrap, initialFocusEl: ?Element) => !FocusTrap` | Creates a properly configured [focus-trap][] instance.\n`isScrollable(el: Element \\| null) => boolean` | Determines if the given element is scrollable.\n`areTopsMisaligned(els: Element[]) => boolean` | Determines if two or more of the given elements have different `offsetTop` values.\n\n### Handling focus trapping\n\nIn order for dialogs to be fully accessible, they must conform to the guidelines outlined in:\n\n* https://www.w3.org/TR/wai-aria-practices/#dialog_modal\n* https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html\n* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role\n\nThe main implication of these guidelines is that the only focusable elements are those contained within a dialog\nsurface.\n\nTrapping focus correctly for a modal dialog requires a complex set of events and interaction\npatterns that we feel is best not duplicated within the logic of this component. Furthermore,\nframeworks and libraries may have their own ways of trapping focus that framework authors may want\nto make use of. For this reason, we have two methods on the adapter that should be used to handle\nfocus trapping:\n\n* `trapFocus()` is called when the dialog is open and should set up focus trapping adhering\n  to the ARIA practices in the link above.\n* `releaseFocus()` is called when the dialog is closed and should tear down any focus\n  trapping set up when the dialog was open.\n\nThe `MDCDialog` component uses the [focus-trap][] package to handle this.\n**You can use `util.createFocusTrapInstance()` (see below) to easily create\na focus trapping solution for your component code.**\n\n[focus-trap]: https://github.com/davidtheclark/focus-trap\n\n**Note: iOS platform doesn't seem to register currently focused element via `document.activeElement` which causes releasing focus to last focused element fail.**\n\n#### `createFocusTrapInstance()`\n\n```js\nconst {activate, deactivate} =\n  util.createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl);\n```\n\nGiven a dialog surface element an optional `focusTrap` factory function, and an optional initial element to focus,\nsuch that:\n\n* The focus is trapped within the `surfaceEl`\n* The `initialFocusEl` receives focus when the focus trap is activated\n    - If omitted, defaults to the first focusable element in `surfaceEl`\n* Closing the dialog in any way (including pressing Escape or clicking outside the dialog) deactivates focus trapping\n* Focus is returned to the previously focused element before the focus trap was activated\n\nThis focus trap instance can be used to implement the `trapFocus` and `releaseFocus` adapter methods by calling\n`instance.activate()` and `instance.deactivate()` respectively within those methods.\n\nThe `focusTrapFactory` can be used to override the `focus-trap` function used to create the focus trap. Its API is the\nsame as focus-trap's [createFocusTrap](https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions)\n(which is what it defaults to). You can pass in a custom function for mocking out the actual function within tests,\nor to modify the arguments passed to the function before it's called.\n"
  },
  {
    "path": "packages/mdc-dialog/_dialog-custom-properties.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$z-index: --mdc-dialog-z-index;\n"
  },
  {
    "path": "packages/mdc-dialog/_dialog-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc-\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software-\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT- IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE-\n//\n\n// Selector '-mdc-*' should only be used in this project-\n// stylelint-disable selector-class-pattern --\n// Internal styling for Dialog MDC component-\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/shape/shape';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/button/button-text-theme';\n\n$light-theme: (\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  with-divider-divider-color: null,\n  with-divider-divider-height: null,\n  with-icon-icon-size: null,\n  with-icon-icon-color: null,\n  subhead-font: null,\n  subhead-line-height: null,\n  subhead-size: null,\n  subhead-weight: null,\n  subhead-tracking: null,\n  subhead-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-weight: null,\n  supporting-text-tracking: null,\n  supporting-text-color: null,\n  action-label-text-font: null,\n  action-label-text-line-height: null,\n  action-label-text-size: null,\n  action-label-text-weight: null,\n  action-label-text-tracking: null,\n  action-label-text-color: null,\n  action-hover-state-layer-color: null,\n  action-hover-state-layer-opacity: null,\n  action-hover-label-text-color: null,\n  action-focus-state-layer-color: null,\n  action-focus-state-layer-opacity: null,\n  action-focus-label-text-color: null,\n  action-pressed-state-layer-color: null,\n  action-pressed-state-layer-opacity: null,\n  action-pressed-label-text-color: null,\n  // TODO(b/229523517): add headline token support to dialog\n  headline-color: null,\n  headline-font: null,\n  headline-line-height: null,\n  headline-size: null,\n  headline-tracking: null,\n  headline-weight: null,\n  z-index: null,\n);\n\n$custom-property-prefix: 'dialog';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  // TODO(b/251881053): Replace with `validate-theme`.\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: _resolve-elevation($theme, map.get($resolvers, elevation));\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include _container-color(map.get($theme, container-color));\n  @include _container-elevation(\n    map.get($resolvers, elevation),\n    map.get($theme, container-elevation),\n    map.get($theme, container-shadow-color)\n  );\n  @include container-shape(map.get($theme, container-shape));\n  @include _divider-color(map.get($theme, with-divider-divider-color));\n  @include _divider-height(map.get($theme, with-divider-divider-height));\n  @include _icon-size(map.get($theme, with-icon-icon-size));\n  @include _icon-color(map.get($theme, with-icon-icon-color));\n  @include subhead-typography(\n    (\n      font: map.get($theme, subhead-font),\n      line-height: map.get($theme, subhead-line-height),\n      size: map.get($theme, subhead-size),\n      weight: map.get($theme, subhead-weight),\n      tracking: map.get($theme, subhead-tracking),\n    )\n  );\n  @include _subhead-color(map.get($theme, subhead-color));\n  @include _supporting-text-typography(\n    (\n      font: map.get($theme, supporting-text-font),\n      line-height: map.get($theme, supporting-text-line-height),\n      size: map.get($theme, supporting-text-size),\n      weight: map.get($theme, supporting-text-weight),\n      tracking: map.get($theme, supporting-text-tracking),\n    )\n  );\n  @include _supporting-text-color(map.get($theme, supporting-text-color));\n  @include _z-index(map.get($theme, z-index));\n\n  .mdc-dialog__actions .mdc-button {\n    @include button-text-theme.theme-styles-internal(\n      (\n        focus-label-text-color: map.get($theme, action-focus-label-text-color),\n        focus-state-layer-color: map.get($theme, action-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, action-focus-state-layer-opacity),\n        hover-label-text-color: map.get($theme, action-hover-text-color),\n        hover-state-layer-color: map.get($theme, action-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, action-hover-state-layer-opacity),\n        label-text-color: map.get($theme, action-label-text-color),\n        label-text-font: map.get($theme, action-label-text-font),\n        label-text-size: map.get($theme, action-label-text-size),\n        label-text-tracking: map.get($theme, action-label-text-tracking),\n        label-text-weight: map.get($theme, action-label-text-weight),\n        pressed-label-text-color:\n          map.get($theme, action-pressed-label-text-color),\n        pressed-state-layer-color:\n          map.get($theme, action-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, action-pressed-state-layer-opacity),\n      )\n    );\n  }\n}\n\n@mixin _container-color($color) {\n  .mdc-dialog__surface {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin _container-elevation($elevation-resolver, $elevation, $shadow-color) {\n  .mdc-dialog__surface {\n    @include elevation-theme.with-resolver(\n      $elevation-resolver,\n      $elevation: $elevation,\n      $shadow-color: $shadow-color\n    );\n  }\n}\n\n@mixin container-shape($radius) {\n  .mdc-dialog__surface {\n    @include shape.radius($radius);\n  }\n}\n\n@mixin _divider-color($color) {\n  &.mdc-dialog--scrollable .mdc-dialog__title,\n  &.mdc-dialog--scrollable .mdc-dialog__actions,\n  &.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer\n    .mdc-dialog__actions {\n    @include theme.property(border-color, $color);\n  }\n\n  &.mdc-dialog--scrollable .mdc-dialog__title {\n    @include theme.property(border-bottom-color, $color);\n  }\n}\n\n@mixin _divider-height($height) {\n  .mdc-dialog__actions {\n    @include theme.property(border-top-width, $height);\n  }\n\n  &.mdc-dialog--scrollable .mdc-dialog__title {\n    @include theme.property(border-bottom-width, $height);\n  }\n}\n\n@mixin _icon-size($size) {\n  .mdc-dialog__title-icon {\n    @include theme.property(height, $size);\n    @include theme.property(width, $size);\n    @include theme.property(font-size, $size);\n  }\n}\n\n@mixin _icon-color($color) {\n  .mdc-dialog__title-icon {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin subhead-typography($typography) {\n  .mdc-dialog__title {\n    @include theme.property(font-family, map.get($typography, font));\n    @include theme.property(line-height, map.get($typography, line-height));\n    @include theme.property(font-size, map.get($typography, size));\n    @include theme.property(font-weight, map.get($typography, weight));\n    @include theme.property(letter-spacing, map.get($typography, tracking));\n  }\n}\n\n@mixin _subhead-color($color) {\n  .mdc-dialog__title {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _supporting-text-typography($typography) {\n  .mdc-dialog__content {\n    @include theme.property(font-family, map.get($typography, font));\n    @include theme.property(line-height, map.get($typography, line-height));\n    @include theme.property(font-size, map.get($typography, size));\n    @include theme.property(font-weight, map.get($typography, weight));\n    @include theme.property(letter-spacing, map.get($typography, tracking));\n  }\n}\n\n@mixin _supporting-text-color($color) {\n  .mdc-dialog__content {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _z-index($z-index) {\n  &.mdc-dialog {\n    @include theme.property(z-index, $z-index);\n  }\n}\n\n@function _resolve-elevation($theme, $elevation-resolver) {\n  @if map.get($theme, container-elevation) and\n    map.get($theme, container-shadow-color)\n  {\n    $resolved-value: meta.call(\n      $elevation-resolver,\n      $elevation: map.get($theme, container-elevation),\n      $shadow-color: map.get($theme, container-shadow-color)\n    );\n    $theme: map.set($theme, container-elevation, $resolved-value);\n  }\n\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-dialog/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-dialog/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/button\" as mdc-button-* hide $mdc-button-ripple-target, mdc-button-core-styles, mdc-button-theme-baseline, mdc-button-without-ripple, mdc-button-ripple, mdc-button-filled-accessible, mdc-button-container-fill-color, mdc-button-disabled-container-fill-color, mdc-button-outline-color, mdc-button-disabled-outline-color, mdc-button-icon-color, mdc-button-disabled-icon-color, mdc-button-ink-color, mdc-button-disabled-ink-color, mdc-button-density, mdc-button-touch-target-reset-, mdc-button-height, mdc-button-shape-radius, mdc-button-horizontal-padding, mdc-button-outline-width, mdc-button-label-overflow-ellipsis, mdc-button-base-, mdc-button-icon-, mdc-button-icon-trailing-, mdc-button-icon-svg-, mdc-button-icon-contained-, mdc-button-icon-contained-trailing-, mdc-button-outlined-, mdc-button-filled-, mdc-button-raised-, mdc-button-container-fill-color-, mdc-button-outline-color-, mdc-button-icon-color-, mdc-button-ink-color-;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/elevation\" as mdc-elevation-*;\n@forward \"@material/elevation\" as mdc-* hide $mdc-baseline-color, $mdc-umbra-opacity, $mdc-penumbra-opacity, $mdc-ambient-opacity, $mdc-umbra-map, $mdc-penumbra-map, $mdc-ambient-map, $mdc-property, $mdc-overlay-color, $mdc-overlay-property, $mdc-transition-duration, $mdc-transition-timing-function, mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/rtl\" as mdc-rtl-*;\n@forward \"@material/rtl\" as mdc-* hide $mdc-include, mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/touch-target\" as mdc-touch-target-*;\n@forward \"@material/typography\" as mdc-typography-*;\n@forward \"@material/typography\" as mdc-* hide $mdc-font-family, $mdc-base, $mdc-font-weight-values, $mdc-styles, mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-dialog-*;\n"
  },
  {
    "path": "packages/mdc-dialog/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n// Internal styling for Dialog MDC component.\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as animation-functions;\n@use '@material/button/button-theme';\n@use '@material/dom/dom';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/touch-target/variables' as touch-target-variables;\n@use '@material/typography/typography';\n@use './dialog-custom-properties';\n@use '@material/icon-button/icon-button-theme';\n@use './variables';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // prettier-ignore\n  @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // postcss-bem-linter: define dialog\n\n  .mdc-dialog,\n  .mdc-dialog__scrim {\n    @include feature-targeting.targets($feat-structure) {\n      position: fixed;\n      top: 0;\n      left: 0;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .mdc-dialog {\n    // Note: the top padding is only 20px for dialogs without titles; see below for override.\n    @include content-padding(20px, 24px, 20px, 24px, $query: $query);\n    @include min-width(variables.$min-width, $query: $query);\n    @include max-width(variables.$max-width, variables.$margin, $query: $query);\n    @include max-height(null, variables.$margin, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      // Use `display: none` instead of `visibility: hidden` to avoid recalculating layout when the dialog is closed.\n      display: none;\n      $z-index: custom-properties.create(\n        dialog-custom-properties.$z-index,\n        variables.$z-index\n      );\n      @include theme.property(z-index, $z-index);\n    }\n\n    &.mdc-dialog--fullscreen {\n      @include _fullscreen-dialog-size($query: $query);\n    }\n\n    &.mdc-dialog__scrim--hidden {\n      .mdc-dialog__scrim {\n        @include feature-targeting.targets($feat-structure) {\n          opacity: 0;\n        }\n      }\n    }\n  }\n\n  .mdc-dialog__scrim {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n      z-index: -1;\n    }\n  }\n\n  // This wrapper element is needed to make max-height work in IE 11.\n  // See https://github.com/philipwalton/flexbugs/issues/216\n  .mdc-dialog__container {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-direction: row; // IE 11\n      align-items: center;\n      justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)\n      box-sizing: border-box;\n      height: 100%;\n      opacity: 0;\n      // This element is necessary for IE 11 and needs to have `height: 100%`.\n      // Let clicks on element fall through to scrim element underneath.\n      pointer-events: none;\n    }\n  }\n\n  .mdc-dialog__surface {\n    @include elevation-mixins.overlay-surface-position($query: $query);\n    @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 0; // IE 11\n      flex-shrink: 0; // IE 11\n      box-sizing: border-box;\n      max-width: 100%; // IE 11\n      max-height: 100%; // IE 11\n      pointer-events: auto; // Override from `.mdc-dialog__container`.\n      // IE 11: Otherwise, scrolling content in `mdc-dialog__content` overflows.\n      overflow-y: auto;\n      outline: 0;\n      // Dialog scales up as it opens.\n      transform: scale(0.8);\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n\n      @include dom.forced-colors-mode {\n        // Colored outline is used for HCM instead of transparent border\n        // below to prevent scrolling content overflow.\n        outline: 2px solid windowText;\n      }\n    }\n\n    &::before {\n      @include dom.transparent-border($border-width: 2px, $query: $query);\n      @include feature-targeting.targets($feat-structure) {\n        // Prevent IE11 from rendering this element, because it causes scrolling\n        // content to overflow.\n        @media screen and (-ms-high-contrast: active),\n          screen and (-ms-high-contrast: none) {\n          content: none;\n        }\n      }\n    }\n  }\n\n  .mdc-dialog__title {\n    @include typography.text-baseline(\n      $top: 40px,\n      $display: block,\n      $lineHeight: null,\n      $query: $query\n    );\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      flex-shrink: 0;\n      box-sizing: border-box;\n      margin: 0 0 1px;\n      padding: 0 24px variables.$title-bottom-padding;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  .mdc-dialog--scrollable .mdc-dialog__title {\n    @include feature-targeting.targets($feat-structure) {\n      margin-bottom: 1px;\n      // Adjust bottom padding to make title height align to spec when divider is present.\n      // (Titles for alert dialogs w/o dividers align based on text baseline. All spec values are divisible by 4.)\n      padding-bottom: variables.$title-bottom-padding + 6px;\n    }\n  }\n\n  .mdc-dialog--fullscreen {\n    .mdc-dialog__header {\n      @include feature-targeting.targets($feat-structure) {\n        align-items: baseline;\n        border-bottom: 1px solid transparent;\n        display: inline-flex;\n        justify-content: space-between;\n        padding: 0 variables.$header-side-padding\n          variables.$title-bottom-padding;\n        z-index: 1;\n\n        @include dom.forced-colors-mode($exclude-ie11: true) {\n          border-bottom-color: CanvasText;\n        }\n\n        @include _modal-header(\n          $close-icon-padding: variables.$close-icon-padding\n        );\n      }\n    }\n\n    .mdc-dialog__title {\n      @include feature-targeting.targets($feat-structure) {\n        margin-bottom: 0;\n        padding: 0;\n        border-bottom: 0;\n      }\n    }\n\n    &.mdc-dialog--scrollable .mdc-dialog__title {\n      @include feature-targeting.targets($feat-structure) {\n        border-bottom: 0;\n        margin-bottom: 0;\n      }\n    }\n\n    .mdc-dialog__close-tooltip-wrapper {\n      @include feature-targeting.targets($feat-structure) {\n        top: 5px;\n      }\n    }\n\n    &.mdc-dialog--scrollable .mdc-dialog__actions {\n      // If full-screen dialog is scrollable, the scroll divider over the action\n      // buttons (i.e. the \"footer\") should only be visible when the content is\n      // \"cut off\" by the footer. To toggle this divider, we override the\n      // styling set by the mdc-dialog--scrollable class, and instead rely on\n      // the mdc-dialog-scroll-divider-footer class to determine when the\n      // border-top should be visible.\n      @include feature-targeting.targets($feat-structure) {\n        border-top: 1px solid transparent;\n        @include dom.forced-colors-mode($exclude-ie11: true) {\n          border-top-color: CanvasText;\n        }\n      }\n    }\n  }\n\n  // Needed so that close affordance is aligned as if there was a title.\n  .mdc-dialog--fullscreen--titleless {\n    .mdc-dialog__close-tooltip-wrapper {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: 4px;\n      }\n    }\n\n    &.mdc-dialog--scrollable .mdc-dialog__close-tooltip-wrapper {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .mdc-dialog__content {\n    @include feature-targeting.targets($feat-structure) {\n      flex-grow: 1;\n      box-sizing: border-box;\n      margin: 0;\n      overflow: auto;\n    }\n\n    // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n    > :first-child {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: 0;\n      }\n    }\n\n    // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n    > :last-child {\n      @include feature-targeting.targets($feat-structure) {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .mdc-dialog__title + .mdc-dialog__content,\n  .mdc-dialog__header + .mdc-dialog__content {\n    @include feature-targeting.targets($feat-structure) {\n      // Eliminate padding to bring as close to spec as possible, relying on title padding.\n      // (Spec seems inconsistent RE title/body spacing on alert vs. simple variants.)\n      padding-top: 0;\n    }\n  }\n\n  .mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {\n    @include feature-targeting.targets($feat-structure) {\n      // Reduce and equalize vertical paddings when scrollable dividers are present\n      // (Note: this is intentionally after title + content to take precedence)\n      padding-top: 8px;\n      padding-bottom: 8px;\n    }\n  }\n\n  .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      // Override default .mdc-deprecated-list padding for content consisting exclusively of a MDC List\n      padding: 6px 0 0; // Top padding balances with title height\n    }\n  }\n\n  .mdc-dialog--scrollable\n    .mdc-dialog__content\n    .mdc-deprecated-list:first-child:last-child {\n    @include feature-targeting.targets($feat-structure) {\n      // Override default .mdc-deprecated-list padding for content consisting exclusively of a MDC List\n      padding: 0;\n    }\n  }\n\n  .mdc-dialog__actions {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      position: relative;\n      flex-shrink: 0;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: flex-end;\n      box-sizing: border-box;\n      min-height: 52px;\n      margin: 0;\n      padding: variables.$actions-padding;\n      border-top: 1px solid transparent;\n      @include dom.forced-colors-mode($exclude-ie11: true) {\n        border-top-color: CanvasText;\n      }\n    }\n\n    .mdc-dialog--stacked & {\n      @include feature-targeting.targets($feat-structure) {\n        flex-direction: column;\n        align-items: flex-end;\n      }\n    }\n  }\n\n  .mdc-dialog__button {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, 8px);\n    }\n\n    &:first-child {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(margin, left, 0);\n      }\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      max-width: 100%; // Prevent long text from overflowing parent element in IE 11\n      @include rtl.ignore-next-line();\n      text-align: right;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: left;\n      }\n    }\n\n    .mdc-dialog--stacked &:not(:first-child) {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .mdc-dialog--open,\n  .mdc-dialog--opening,\n  .mdc-dialog--closing {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n    }\n  }\n\n  .mdc-dialog--opening {\n    .mdc-dialog__scrim {\n      @include feature-targeting.targets($feat-animation) {\n        transition: opacity 150ms linear;\n      }\n    }\n\n    .mdc-dialog__container {\n      @include feature-targeting.targets($feat-animation) {\n        transition:\n          opacity 75ms linear,\n          animation-functions.enter(transform, 150ms);\n      }\n    }\n  }\n\n  .mdc-dialog--closing {\n    .mdc-dialog__scrim,\n    .mdc-dialog__container {\n      @include feature-targeting.targets($feat-animation) {\n        transition: opacity 75ms linear;\n      }\n    }\n\n    .mdc-dialog__container {\n      @include feature-targeting.targets($feat-structure) {\n        transform: none;\n      }\n    }\n\n    .mdc-dialog__surface {\n      @include feature-targeting.targets($feat-structure) {\n        // Dialog container scales up while opening, but should remain scaled up while closing\n        transform: none;\n      }\n    }\n  }\n\n  // Override the above transitions when chaining dialogs.\n  .mdc-dialog--chaining .mdc-dialog__scrim {\n    @include feature-targeting.targets($feat-animation) {\n      transition: none;\n    }\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n\n  .mdc-dialog--open {\n    .mdc-dialog__scrim {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n\n    .mdc-dialog__container {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n\n    .mdc-dialog__surface {\n      @include feature-targeting.targets($feat-structure) {\n        transform: none;\n      }\n    }\n\n    &.mdc-dialog__surface-scrim--shown {\n      .mdc-dialog__surface-scrim {\n        @include feature-targeting.targets($feat-structure) {\n          opacity: 1;\n        }\n      }\n    }\n\n    &.mdc-dialog__surface-scrim--hiding {\n      .mdc-dialog__surface-scrim {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity 75ms linear;\n        }\n      }\n    }\n\n    &.mdc-dialog__surface-scrim--showing {\n      .mdc-dialog__surface-scrim {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity 150ms linear;\n        }\n      }\n    }\n  }\n\n  .mdc-dialog__surface-scrim {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n      opacity: 0;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      z-index: 1;\n    }\n\n    .mdc-dialog__surface-scrim--shown &,\n    .mdc-dialog__surface-scrim--showing &,\n    .mdc-dialog__surface-scrim--hiding & {\n      @include feature-targeting.targets($feat-structure) {\n        display: block;\n      }\n    }\n  }\n\n  // postcss-bem-linter: end\n\n  // Class applied to body while dialog is open, to prevent scrolling behind the dialog\n  .mdc-dialog-scroll-lock {\n    @include feature-targeting.targets($feat-structure) {\n      overflow: hidden;\n    }\n  }\n\n  .mdc-dialog--no-content-padding {\n    .mdc-dialog__content {\n      @include feature-targeting.targets($feat-structure) {\n        padding: 0;\n      }\n    }\n  }\n\n  .mdc-dialog--sheet {\n    .mdc-dialog__container .mdc-dialog__close-tooltip-wrapper {\n      @include feature-targeting.targets($feat-structure) {\n        right: variables.$sheet-close-icon-right;\n        top: variables.$sheet-close-icon-top;\n        position: absolute;\n        // Customers can create their stacking context in dialog content using\n        // any way of createing stacking context. For example with\n        //   position: relative;\n        //   z-index: 0;\n        z-index: 1;\n      }\n    }\n  }\n\n  .mdc-dialog__scrim--removed {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n\n    .mdc-dialog__scrim,\n    .mdc-dialog__surface-scrim {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog {\n    @include container-fill-color(surface, $query: $query);\n    @include scrim-color(variables.$scrim-color, $query: $query);\n    @include title-ink-color(variables.$title-ink-color, $query: $query);\n    @include content-ink-color(variables.$content-ink-color, $query: $query);\n    @include scroll-divider-color(\n      variables.$scroll-divider-color,\n      $query: $query\n    );\n    @include shape-radius(variables.$shape-radius, $query: $query);\n  }\n\n  .mdc-dialog__surface {\n    @include elevation-mixins.elevation(24, $query: $query);\n  }\n\n  .mdc-dialog__title {\n    @include typography.typography(headline6, $query: $query);\n  }\n\n  .mdc-dialog__content {\n    @include typography.typography(body1, $query: $query);\n  }\n\n  // For go/soy-checks/rewrite-css\n  .mdc-dialog__title-icon {\n    @include feature-targeting.targets($feat-structure) {\n      /** Hook for theming API. */\n    }\n  }\n\n  @include static-styles($query: $query);\n}\n\n@mixin container-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin scrim-color(\n  $color,\n  $opacity: variables.$scrim-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-dialog__scrim {\n    @include feature-targeting.targets($feat-color) {\n      background-color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n\n  .mdc-dialog__surface-scrim {\n    @include feature-targeting.targets($feat-color) {\n      background-color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n}\n\n@mixin title-ink-color(\n  $color,\n  $opacity: variables.$title-ink-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-dialog__title {\n    @include feature-targeting.targets($feat-color) {\n      color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n}\n\n@mixin content-ink-color(\n  $color,\n  $opacity: variables.$content-ink-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-dialog__content {\n    @include feature-targeting.targets($feat-color) {\n      color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n\n  .mdc-dialog__close {\n    @include icon-button-theme.ink_color($color: $color, $query: $query);\n  }\n}\n\n/// Defines the `display` property of the content element using a given query.\n/// This is useful if the content of the dialog needs to use a custom layout,\n/// for example one that consists of a fixed header and a fixed footer, with a\n/// scrollable list area in-between, which is sized to fill available space\n/// (see b/231813016).\n/// @param {string} $display - The `display` type to set.\n/// @param {string} $query Query.\n@mixin content-display($display, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__content {\n    @include feature-targeting.targets($feat-structure) {\n      display: $display;\n    }\n  }\n}\n\n@mixin content-padding(\n  $padding-top,\n  $padding-right,\n  $padding-bottom,\n  $padding-left,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__content {\n    @include feature-targeting.targets($feat-structure) {\n      padding: $padding-top $padding-right $padding-bottom $padding-left;\n    }\n  }\n}\n\n@mixin scroll-divider-color(\n  $color,\n  $opacity: variables.$scroll-divider-opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-dialog--scrollable .mdc-dialog__title,\n  &.mdc-dialog--scrollable .mdc-dialog__actions,\n  &.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer\n    .mdc-dialog__actions {\n    @include feature-targeting.targets($feat-color) {\n      border-color: rgba(theme-color.prop-value($color), $opacity);\n    }\n  }\n\n  &.mdc-dialog--scrollable .mdc-dialog__title {\n    @include feature-targeting.targets($feat-color) {\n      border-bottom: 1px solid rgba(theme-color.prop-value($color), $opacity);\n      margin-bottom: 0;\n    }\n  }\n\n  &.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen\n    .mdc-dialog__header {\n    @include elevation-mixins.elevation(2, $query: $query);\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__surface {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: $min-width;\n    }\n  }\n}\n\n@mixin min-height($min-height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-structure) {\n      min-height: $min-height;\n    }\n  }\n}\n\n@mixin max-width-with-breakpoint(\n  $above-breakpoint-max-width,\n  $below-breakpoint-max-width,\n  $max-width-breakpoint,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-structure) {\n      @media (max-width: $max-width-breakpoint) {\n        max-width: $below-breakpoint-max-width;\n      }\n      @media (min-width: $max-width-breakpoint) {\n        max-width: $above-breakpoint-max-width;\n      }\n    }\n  }\n}\n\n@mixin max-width($max-width, $margin, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $max-width-breakpoint: $max-width + ($margin * 2);\n  // Fit snugly within the viewport at smaller screen sizes.\n  $below-breakpoint-max-width: calc(100vw - #{$margin * 2});\n\n  @if $max-width {\n    @include max-width-with-breakpoint(\n      $max-width,\n      $below-breakpoint-max-width,\n      $max-width-breakpoint,\n      $query\n    );\n  } @else {\n    .mdc-dialog__surface {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: $below-breakpoint-max-width;\n      }\n    }\n  }\n}\n\n@mixin max-height($max-height, $margin, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $max-size-calc-expr: calc(100% - #{$margin * 2});\n\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-structure) {\n      @if $max-height {\n        $max-height-breakpoint: $max-height + ($margin * 2);\n\n        // Fit snugly within the viewport at smaller screen sizes.\n        @media (max-height: $max-height-breakpoint) {\n          max-height: $max-size-calc-expr;\n        }\n\n        // Once the screen gets big enough, apply a fixed maximum height.\n        @media (min-height: $max-height-breakpoint) {\n          max-height: $max-height;\n        }\n      } @else {\n        max-height: $max-size-calc-expr;\n      }\n    }\n  }\n\n  // Target IE 11.\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    // On IE 11, if surface height is fixed and container height is 100%,\n    // scrolling content overflows. So, reset height if surface height\n    // is fixed.\n    .mdc-dialog__container {\n      @include feature-targeting.targets($feat-structure) {\n        @if $max-height {\n          $max-height-breakpoint: $max-height + ($margin * 2);\n\n          @media (min-height: $max-height-breakpoint) {\n            align-items: stretch;\n            height: auto;\n          }\n        }\n      }\n    }\n  }\n}\n\n// Applied to dialogs that have buttons with an increased touch target.\n@mixin with-touch-target($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $touch-target-margin: math.div(\n    touch-target-variables.$height - button-theme.$height,\n    2\n  );\n  $vertical-padding: math.max(\n    0,\n    variables.$actions-padding - $touch-target-margin\n  );\n\n  // Buttons with an increased touch target have added vertical margin, so\n  // decrease the actions element padding to compensate.\n  .mdc-dialog__actions {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: $vertical-padding;\n      padding-bottom: $vertical-padding;\n\n      // The below styles override the default button touch target values,\n      // which otherwise cause `mdc-dialog__surface` to scroll unnnecessarily\n      // in IE 11.\n      .mdc-button__touch {\n        top: -$touch-target-margin; // IE 11\n        transform: none; // IE 11\n      }\n    }\n  }\n}\n\n/// Defines dialog position on the screen.\n/// Dialog position can be customised across both vertical and horizontal axis.\n/// If only one axis is specified dialog is centered across the second one.\n/// Only one value can be specified for each axis at the time. For example\n/// dialog can not have both $top and $bottom specified because it will conflict\n/// with size related mixins. Use `min-width`, `max-width` and `max-height`\n/// to control the dialog size.\n/// @param {Map} $position-map - Dialog position specified as map with keys\n///     {top, bottom, left, right}\n@mixin position($position-map, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $top: map.get($position-map, top);\n  $right: map.get($position-map, right);\n  $bottom: map.get($position-map, bottom);\n  $left: map.get($position-map, left);\n\n  @if ($top != null and $bottom != null) {\n    @error \"Top and Botton properties can not be used simultaneously. Use \" +\n           \"`min-width`, `max-width` and `max-height` to control dialog size.\";\n  }\n  @if ($right != null and $left != null) {\n    @error \"Right and Left properties can not be used simultaneously. Use \" +\n           \"`min-width`, `max-width` and `max-height` to control dialog size.\";\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    @if ($top != null) {\n      .mdc-dialog__container {\n        align-items: flex-start;\n        padding-top: $top;\n      }\n    }\n    @if ($bottom != null) {\n      .mdc-dialog__container {\n        align-items: flex-end;\n        padding-bottom: $bottom;\n      }\n    }\n    @if ($right != null) {\n      &.mdc-dialog {\n        justify-content: flex-end;\n        padding-right: $right;\n      }\n    }\n    @if ($left != null) {\n      &.mdc-dialog {\n        justify-content: flex-start;\n        padding-left: $left;\n      }\n    }\n  }\n}\n\n/// Defines dialog base z-index.\n/// This mixin can be used to specify dialog base z-index to make it compatible\n/// with other frameworks used on the same page.\n/// @param {Number} $z-index - Dialog z-index value.\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    &.mdc-dialog {\n      z-index: $z-index;\n    }\n  }\n}\n\n/// This mixin can be used to hide the fullscreen dialog header when the dialog\n/// is a standard modal and not yet fullscreen in X-small sizes.\n@mixin fullscreen-dialog-hide-modal-header($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Non-fullscreen-dialog sizes\n  @media (min-width: 600px) {\n    &.mdc-dialog--fullscreen {\n      .mdc-dialog__header {\n        @include feature-targeting.targets($feat-structure) {\n          display: none;\n        }\n      }\n\n      .mdc-dialog__content {\n        @include feature-targeting.targets($feat-structure) {\n          padding-top: 24px;\n        }\n      }\n    }\n  }\n}\n\n@mixin _fullscreen-dialog-size($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-dialog__surface {\n    @include feature-targeting.targets($feat-structure) {\n      // Reset the max-width so the default dialog sizing doesn't interfere with\n      // the full-screen dialog sizing.\n      max-width: none;\n    }\n\n    // Medium screens\n    @media (max-width: 960px) {\n      @include feature-targeting.targets($feat-structure) {\n        max-height: 560px;\n        width: 560px;\n        @include _modal-header(\n          $close-icon-padding: variables.$close-icon-padding\n        );\n      }\n    }\n\n    // Small screens\n    @media (max-width: 720px) {\n      @include feature-targeting.targets($feat-structure) {\n        $max-small-height: 560px;\n        $max-small-width: 560px;\n        $min-horizontal-small-margin: 56px;\n        $min-vertical-small-margin: 80px;\n        @include _fluid-size-calc(\n          $vertical-margin: $min-vertical-small-margin,\n          $max-height: $max-small-height,\n          $horizontal-margin: $min-horizontal-small-margin,\n          $max-width: $max-small-width\n        );\n        @include _modal-header(\n          $close-icon-padding: variables.$close-icon-padding\n        );\n      }\n    }\n\n    // X-Small Screens\n    @media (max-width: 720px) and (max-height: 400px),\n      (max-width: 600px),\n      (min-width: 720px) and (max-height: 400px) {\n      @include feature-targeting.targets($feat-structure) {\n        // Use 100% instead of vw/vh so the url bar is taken into account on\n        // mobile.\n        height: 100%;\n        max-height: 100vh;\n        max-width: 100vw;\n        width: 100vw;\n        @include _fullscreen-header(\n          $close-icon-padding: variables.$close-icon-padding,\n          $title-side-padding: variables.$title-side-padding\n        );\n      }\n      @include shape-mixins.radius(0, $query: $query);\n    }\n\n    // Large to X-Large screens\n    @media (min-width: 960px) {\n      @include feature-targeting.targets($feat-structure) {\n        $min-horizontal-margin: 200px;\n        width: calc(100vw - #{$min-horizontal-margin * 2});\n        @include _modal-header(\n          $close-icon-padding: variables.$close-icon-padding\n        );\n      }\n    }\n  }\n}\n\n/// Defines styling to specify a fluid dialog size while maintaining a specific\n/// vertical and horizontal margin.\n/// @param  {Number} $vertical-margin\n/// @param  {Number} $max-height\n/// @param  {Number} $horizontal-margin\n/// @param  {Number} $max-width\n@mixin _fluid-size-calc(\n  $vertical-margin,\n  $max-height,\n  $horizontal-margin,\n  $max-width\n) {\n  $max-width-calc-expr: calc(100vw - #{$horizontal-margin * 2});\n  $max-width-breakpoint: $max-width + ($horizontal-margin * 2);\n\n  @media (max-width: $max-width-breakpoint) {\n    width: $max-width-calc-expr;\n  }\n  @media (min-width: $max-width-breakpoint) {\n    width: $max-width;\n  }\n\n  $max-height-calc-expr: calc(100vh - #{$vertical-margin * 2});\n  $max-height-breakpoint: $max-height + ($vertical-margin * 2);\n\n  @media (max-height: $max-height-breakpoint) {\n    max-height: $max-height-calc-expr;\n  }\n  @media (min-height: $max-height-breakpoint) {\n    max-height: $max-height;\n  }\n}\n\n/// Defines styles for the header bar when a dialog takes up the full screen.\n/// @param  {Number} $close-icon-padding - Padding on close icon button.\n/// @param  {Number} $title-side-padding - Space between the edge of the close\n///   icon button and edge of the title.\n@mixin _fullscreen-header($close-icon-padding, $title-side-padding) {\n  .mdc-dialog__close-tooltip-wrapper {\n    position: relative;\n    order: -1;\n    @include theme.property(left, -#{$close-icon-padding});\n  }\n  .mdc-dialog__header {\n    padding: 0 variables.$fullscreen-header-side-padding\n      variables.$title-bottom-padding;\n    justify-content: flex-start;\n  }\n  .mdc-dialog__title {\n    @include theme.property(\n      margin-left,\n      'calc(title - 2 * close)',\n      $replace: (title: $title-side-padding, close: $close-icon-padding)\n    );\n  }\n}\n\n/// Defines styles for the header bar when a dialog is modal.\n/// @param  {Number} $close-icon-padding - Padding on close icon button.\n@mixin _modal-header($close-icon-padding) {\n  .mdc-dialog__close-tooltip-wrapper {\n    position: relative;\n    @include theme.property(right, -#{$close-icon-padding});\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dialog/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-dialog-* hide mdc-dialog-core-styles, mdc-dialog-container-fill-color, mdc-dialog-scrim-color, mdc-dialog-title-ink-color, mdc-dialog-content-ink-color, mdc-dialog-scroll-divider-color, mdc-dialog-shape-radius, mdc-dialog-min-width, mdc-dialog-max-width, mdc-dialog-max-height, mdc-dialog-with-touch-target;\n"
  },
  {
    "path": "packages/mdc-dialog/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$scrim-color: on-surface !default;\n$title-ink-color: on-surface !default;\n$content-ink-color: on-surface !default;\n$scroll-divider-color: on-surface !default;\n\n$scrim-opacity: 0.32 !default;\n$title-ink-opacity: 0.87 !default;\n$content-ink-opacity: 0.6 !default;\n$scroll-divider-opacity: 0.12 !default;\n\n$min-width: 280px !default;\n$max-width: 560px !default;\n$margin: 16px !default;\n$shape-radius: medium !default;\n$title-bottom-padding: 9px !default;\n$actions-padding: 8px !default;\n$header-side-padding: 24px !default;\n\n$close-icon-padding: 12px !default;\n$title-side-padding: 16px !default;\n$fullscreen-header-side-padding: 16px !default;\n\n$sheet-close-icon-right: 12px !default;\n$sheet-close-icon-top: 9px !default;\n\n$z-index: 7 !default;\n"
  },
  {
    "path": "packages/mdc-dialog/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener, SpecificWindowEventListener, WindowEventType} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCDialogAdapter {\n  addClass(className: string): void;\n  removeClass(className: string): void;\n  hasClass(className: string): boolean;\n  addBodyClass(className: string): void;\n  removeBodyClass(className: string): void;\n  eventTargetMatches(target: EventTarget|null, selector: string): boolean;\n\n  isContentScrollable(): boolean;\n  areButtonsStacked(): boolean;\n  getActionFromEvent(event: Event): string|null;\n\n  trapFocus(focusElement: HTMLElement|null): void;\n  releaseFocus(): void;\n  // Element to focus on after dialog has opened.\n  getInitialFocusEl(): HTMLElement|null;\n  clickDefaultButton(): void;\n  reverseButtons(): void;\n\n  notifyOpening(): void;\n  notifyOpened(): void;\n  notifyClosing(action: string): void;\n  notifyClosed(action: string): void;\n\n  /**\n   * Registers an event listener on the dialog's content element (indicated\n   * with the 'mdc-dialog__content' class).\n   */\n  registerContentEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the dialog's content element.\n   */\n  deregisterContentEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * @return true if the content has been scrolled (that is, for\n   *     scrollable content, if it is at the \"top\"). This is used in full-screen\n   *     dialogs, where the scroll divider is expected only to appear once the\n   *     content has been scrolled \"underneath\" the header bar.\n   */\n  isScrollableContentAtTop(): boolean;\n\n  /**\n   * @return true if the content has been scrolled all\n   *     the way to the bottom. This is used in full-screen dialogs, where the\n   *     footer scroll divider is expected only to appear when the content is\n   *     \"cut-off\" by the footer bar.\n   */\n  isScrollableContentAtBottom(): boolean;\n\n  /**\n   * Registers an event listener to the window.\n   */\n  registerWindowEventHandler<K extends WindowEventType>(\n      eventType: K, handler: SpecificWindowEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener to the window.\n   */\n  deregisterWindowEventHandler<K extends WindowEventType>(\n      eventType: K, handler: SpecificWindowEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-dialog/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {FocusTrap} from '@material/dom/focus-trap';\nimport {closest, matches} from '@material/dom/ponyfill';\nimport {MDCRipple} from '@material/ripple/component';\n\nimport {MDCDialogAdapter} from './adapter';\nimport {MDCDialogFoundation} from './foundation';\nimport {MDCDialogCloseEventDetail} from './types';\nimport * as util from './util';\nimport {MDCDialogFocusTrapFactory} from './util';\n\nconst {strings} = MDCDialogFoundation;\n\n/** MDC Dialog */\nexport class MDCDialog extends MDCComponent<MDCDialogFoundation> {\n  get isOpen() {\n    return this.foundation.isOpen();\n  }\n\n  get escapeKeyAction() {\n    return this.foundation.getEscapeKeyAction();\n  }\n\n  set escapeKeyAction(action) {\n    this.foundation.setEscapeKeyAction(action);\n  }\n\n  get scrimClickAction() {\n    return this.foundation.getScrimClickAction();\n  }\n\n  set scrimClickAction(action) {\n    this.foundation.setScrimClickAction(action);\n  }\n\n  get autoStackButtons() {\n    return this.foundation.getAutoStackButtons();\n  }\n\n  set autoStackButtons(autoStack) {\n    this.foundation.setAutoStackButtons(autoStack);\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCDialog(root);\n  }\n\n  private buttonRipples!: MDCRipple[];             // assigned in initialize()\n  private buttons!: HTMLButtonElement[];           // assigned in initialize()\n  private container!: HTMLElement;                 // assigned in initialize()\n  private content!: HTMLElement|null;              // assigned in initialize()\n  private defaultButton!: HTMLButtonElement|null;  // assigned in initialize()\n\n  private focusTrap!: FocusTrap;  // assigned in initialSyncWithDOM()\n  private focusTrapFactory!:\n      MDCDialogFocusTrapFactory;  // assigned in initialize()\n\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n  private handleDocumentKeydown!:\n      SpecificEventListener<'keydown'>;   // assigned in initialSyncWithDOM()\n  private handleOpening!: EventListener;  // assigned in initialSyncWithDOM()\n  private handleClosing!: () => void;     // assigned in initialSyncWithDOM()\n\n  override initialize(\n      focusTrapFactory: MDCDialogFocusTrapFactory = (el, focusOptions) =>\n          new FocusTrap(el, focusOptions),\n  ) {\n    const container =\n        this.root.querySelector<HTMLElement>(strings.CONTAINER_SELECTOR);\n    if (!container) {\n      throw new Error(`Dialog component requires a ${\n          strings.CONTAINER_SELECTOR} container element`);\n    }\n    this.container = container;\n    this.content =\n        this.root.querySelector<HTMLElement>(strings.CONTENT_SELECTOR);\n    this.buttons = Array.from(\n        this.root.querySelectorAll<HTMLButtonElement>(strings.BUTTON_SELECTOR));\n    this.defaultButton = this.root.querySelector<HTMLButtonElement>(\n        `[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);\n    this.focusTrapFactory = focusTrapFactory;\n    this.buttonRipples = [];\n\n    for (const buttonEl of this.buttons) {\n      this.buttonRipples.push(new MDCRipple(buttonEl));\n    }\n  }\n\n  override initialSyncWithDOM() {\n    this.focusTrap = util.createFocusTrapInstance(\n        this.container, this.focusTrapFactory,\n        this.getInitialFocusEl() || undefined);\n\n    this.handleClick = this.foundation.handleClick.bind(this.foundation);\n    this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation);\n    this.handleDocumentKeydown =\n        this.foundation.handleDocumentKeydown.bind(this.foundation);\n    // this.handleLayout = this.layout.bind(this);\n\n    this.handleOpening = () => {\n      document.addEventListener('keydown', this.handleDocumentKeydown);\n    };\n    this.handleClosing = () => {\n      document.removeEventListener('keydown', this.handleDocumentKeydown);\n    };\n\n    this.listen('click', this.handleClick);\n    this.listen('keydown', this.handleKeydown);\n    this.listen(strings.OPENING_EVENT, this.handleOpening);\n    this.listen(strings.CLOSING_EVENT, this.handleClosing);\n  }\n\n  override destroy() {\n    this.unlisten('click', this.handleClick);\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten(strings.OPENING_EVENT, this.handleOpening);\n    this.unlisten(strings.CLOSING_EVENT, this.handleClosing);\n    this.handleClosing();\n\n    this.buttonRipples.forEach((ripple) => {\n      ripple.destroy();\n    });\n    super.destroy();\n  }\n\n  layout() {\n    this.foundation.layout();\n  }\n\n  open() {\n    this.foundation.open();\n  }\n\n  close(action = '') {\n    this.foundation.close(action);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCDialogAdapter = {\n      addBodyClass: (className) => {\n        document.body.classList.add(className);\n      },\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      areButtonsStacked: () => util.areTopsMisaligned(this.buttons),\n      clickDefaultButton: () => {\n        if (this.defaultButton && !this.defaultButton.disabled) {\n          this.defaultButton.click();\n        }\n      },\n      eventTargetMatches: (target, selector) =>\n          target ? matches(target as Element, selector) : false,\n      getActionFromEvent: (event: Event) => {\n        if (!event.target) {\n          return '';\n        }\n        const element =\n            closest(event.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);\n        return element && element.getAttribute(strings.ACTION_ATTRIBUTE);\n      },\n      getInitialFocusEl: () => this.getInitialFocusEl(),\n      hasClass: (className) => this.root.classList.contains(className),\n      isContentScrollable: () => util.isScrollable(this.content),\n      notifyClosed: (action) => {\n        this.emit<MDCDialogCloseEventDetail>(\n            strings.CLOSED_EVENT, action ? {action} : {});\n      },\n      notifyClosing: (action) => {\n        this.emit<MDCDialogCloseEventDetail>(\n            strings.CLOSING_EVENT, action ? {action} : {});\n      },\n      notifyOpened: () => {\n        this.emit(strings.OPENED_EVENT, {});\n      },\n      notifyOpening: () => {\n        this.emit(strings.OPENING_EVENT, {});\n      },\n      releaseFocus: () => {\n        this.focusTrap.releaseFocus();\n      },\n      removeBodyClass: (className) => {\n        document.body.classList.remove(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      reverseButtons: () => {\n        this.buttons.reverse();\n        this.buttons.forEach((button) => {\n          button.parentElement!.appendChild(button);\n        });\n      },\n      trapFocus: () => {\n        this.focusTrap.trapFocus();\n      },\n      registerContentEventHandler: (event, handler) => {\n        if (this.content instanceof HTMLElement) {\n          this.content.addEventListener(event, handler);\n        }\n      },\n      deregisterContentEventHandler: (event, handler) => {\n        if (this.content instanceof HTMLElement) {\n          this.content.removeEventListener(event, handler);\n        }\n      },\n      isScrollableContentAtTop: () => {\n        return util.isScrollAtTop(this.content);\n      },\n      isScrollableContentAtBottom: () => {\n        return util.isScrollAtBottom(this.content);\n      },\n      registerWindowEventHandler: (event, handler) => {\n        window.addEventListener(event, handler);\n      },\n      deregisterWindowEventHandler: (event, handler) => {\n        window.removeEventListener(event, handler);\n      },\n    };\n    return new MDCDialogFoundation(adapter);\n  }\n\n  private getInitialFocusEl(): HTMLElement|null {\n    return this.root.querySelector<HTMLElement>(\n        `[${strings.INITIAL_FOCUS_ATTRIBUTE}]`);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dialog/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  CLOSING: 'mdc-dialog--closing',\n  OPEN: 'mdc-dialog--open',\n  OPENING: 'mdc-dialog--opening',\n  SCROLLABLE: 'mdc-dialog--scrollable',\n  SCROLL_LOCK: 'mdc-dialog-scroll-lock',\n  STACKED: 'mdc-dialog--stacked',\n  FULLSCREEN: 'mdc-dialog--fullscreen',\n  // Class for showing a scroll divider on full-screen dialog header element.\n  // Should only be displayed on scrollable content, when the dialog content is\n  // scrolled \"underneath\" the header.\n  SCROLL_DIVIDER_HEADER: 'mdc-dialog-scroll-divider-header',\n  // Class for showing a scroll divider on a full-screen dialog footer element.\n  // Should only be displayed on scrolalble content, when the dialog content is\n  // obscured \"underneath\" the footer.\n  SCROLL_DIVIDER_FOOTER: 'mdc-dialog-scroll-divider-footer',\n  // The \"surface scrim\" is a scrim covering only the surface of a dialog. This\n  // is used in situations where a confirmation dialog is shown over an already\n  // opened full-screen dialog. On larger screen-sizes, the full-screen dialog\n  // is sized as a modal and so in these situations we display a \"surface scrim\"\n  // to prevent a \"double scrim\" (where the scrim from the secondary\n  // confirmation dialog would overlap with the scrim from the full-screen\n  // dialog).\n  SURFACE_SCRIM_SHOWN: 'mdc-dialog__surface-scrim--shown',\n  // \"Showing\" animating class for the surface-scrim.\n  SURFACE_SCRIM_SHOWING: 'mdc-dialog__surface-scrim--showing',\n  // \"Hiding\" animating class for the surface-scrim.\n  SURFACE_SCRIM_HIDING: 'mdc-dialog__surface-scrim--hiding',\n  // Class to hide a dialog's scrim (used in conjunction with a surface-scrim).\n  // Note that we only hide the original scrim rather than removing it entirely\n  // to prevent interactions with the content behind this scrim, and to capture\n  // scrim clicks.\n  SCRIM_HIDDEN: 'mdc-dialog__scrim--hidden',\n};\n\nexport const strings = {\n  ACTION_ATTRIBUTE: 'data-mdc-dialog-action',\n  BUTTON_DEFAULT_ATTRIBUTE: 'data-mdc-dialog-button-default',\n  BUTTON_SELECTOR: '.mdc-dialog__button',\n  CLOSED_EVENT: 'MDCDialog:closed',\n  CLOSE_ACTION: 'close',\n  CLOSING_EVENT: 'MDCDialog:closing',\n  CONTAINER_SELECTOR: '.mdc-dialog__container',\n  CONTENT_SELECTOR: '.mdc-dialog__content',\n  DESTROY_ACTION: 'destroy',\n  INITIAL_FOCUS_ATTRIBUTE: 'data-mdc-dialog-initial-focus',\n  OPENED_EVENT: 'MDCDialog:opened',\n  OPENING_EVENT: 'MDCDialog:opening',\n  SCRIM_SELECTOR: '.mdc-dialog__scrim',\n  SUPPRESS_DEFAULT_PRESS_SELECTOR: [\n    'textarea',\n    '.mdc-menu .mdc-list-item',\n    '.mdc-menu .mdc-deprecated-list-item',\n  ].join(', '),\n  SURFACE_SELECTOR: '.mdc-dialog__surface',\n};\n\nexport const numbers = {\n  DIALOG_ANIMATION_CLOSE_TIME_MS: 75,\n  DIALOG_ANIMATION_OPEN_TIME_MS: 150,\n};\n"
  },
  {
    "path": "packages/mdc-dialog/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {AnimationFrame} from '@material/animation/animationframe';\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener, SpecificWindowEventListener} from '@material/base/types';\n\nimport {MDCDialogAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\nimport {DialogConfigOptions} from './types';\n\nenum AnimationKeys {\n  POLL_SCROLL_POS = 'poll_scroll_position',\n  POLL_LAYOUT_CHANGE = 'poll_layout_change'\n}\n\n/** MDC Dialog Foundation */\nexport class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCDialogAdapter {\n    return {\n      addBodyClass: () => undefined,\n      addClass: () => undefined,\n      areButtonsStacked: () => false,\n      clickDefaultButton: () => undefined,\n      eventTargetMatches: () => false,\n      getActionFromEvent: () => '',\n      getInitialFocusEl: () => null,\n      hasClass: () => false,\n      isContentScrollable: () => false,\n      notifyClosed: () => undefined,\n      notifyClosing: () => undefined,\n      notifyOpened: () => undefined,\n      notifyOpening: () => undefined,\n      releaseFocus: () => undefined,\n      removeBodyClass: () => undefined,\n      removeClass: () => undefined,\n      reverseButtons: () => undefined,\n      trapFocus: () => undefined,\n      registerContentEventHandler: () => undefined,\n      deregisterContentEventHandler: () => undefined,\n      isScrollableContentAtTop: () => false,\n      isScrollableContentAtBottom: () => false,\n      registerWindowEventHandler: () => undefined,\n      deregisterWindowEventHandler: () => undefined,\n    };\n  }\n\n  private dialogOpen = false;\n  private isFullscreen = false;\n  private animationFrame = 0;\n  private animationTimer = 0;\n  private escapeKeyAction = strings.CLOSE_ACTION;\n  private scrimClickAction = strings.CLOSE_ACTION;\n  private autoStackButtons = true;\n  private areButtonsStacked = false;\n  private suppressDefaultPressSelector =\n      strings.SUPPRESS_DEFAULT_PRESS_SELECTOR;\n  private readonly contentScrollHandler: SpecificEventListener<'scroll'>;\n  private readonly animFrame: AnimationFrame;\n  private readonly windowResizeHandler: SpecificWindowEventListener<'resize'>;\n  private readonly windowOrientationChangeHandler:\n      SpecificWindowEventListener<'orientationchange'>;\n\n  constructor(adapter?: Partial<MDCDialogAdapter>) {\n    super({...MDCDialogFoundation.defaultAdapter, ...adapter});\n\n    this.animFrame = new AnimationFrame();\n    this.contentScrollHandler = () => {\n      this.handleScrollEvent();\n    };\n\n    this.windowResizeHandler = () => {\n      this.layout();\n    };\n\n    this.windowOrientationChangeHandler = () => {\n      this.layout();\n    };\n  }\n\n  override init() {\n    if (this.adapter.hasClass(cssClasses.STACKED)) {\n      this.setAutoStackButtons(false);\n    }\n    this.isFullscreen = this.adapter.hasClass(cssClasses.FULLSCREEN);\n  }\n\n  override destroy() {\n    if (this.animationTimer) {\n      clearTimeout(this.animationTimer);\n      this.handleAnimationTimerEnd();\n    }\n\n    if (this.isFullscreen) {\n      this.adapter.deregisterContentEventHandler(\n          'scroll', this.contentScrollHandler);\n    }\n\n    this.animFrame.cancelAll();\n    this.adapter.deregisterWindowEventHandler(\n        'resize', this.windowResizeHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'orientationchange', this.windowOrientationChangeHandler);\n  }\n\n  open(dialogOptions?: DialogConfigOptions) {\n    this.dialogOpen = true;\n    this.adapter.notifyOpening();\n    this.adapter.addClass(cssClasses.OPENING);\n    if (this.isFullscreen) {\n      // A scroll event listener is registered even if the dialog is not\n      // scrollable on open, since the window resize event, or orientation\n      // change may make the dialog scrollable after it is opened.\n      this.adapter.registerContentEventHandler(\n          'scroll', this.contentScrollHandler);\n    }\n    if (dialogOptions && dialogOptions.isAboveFullscreenDialog) {\n      this.adapter.addClass(cssClasses.SCRIM_HIDDEN);\n    }\n\n    this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);\n    this.adapter.registerWindowEventHandler(\n        'orientationchange', this.windowOrientationChangeHandler);\n\n    // Wait a frame once display is no longer \"none\", to establish basis for\n    // animation\n    this.runNextAnimationFrame(() => {\n      this.adapter.addClass(cssClasses.OPEN);\n      if (!dialogOptions || !dialogOptions.isScrimless) {\n        this.adapter.addBodyClass(cssClasses.SCROLL_LOCK);\n      }\n\n      this.layout();\n\n      this.animationTimer = setTimeout(() => {\n        this.handleAnimationTimerEnd();\n        this.adapter.trapFocus(this.adapter.getInitialFocusEl());\n        this.adapter.notifyOpened();\n      }, numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n    });\n  }\n\n  close(action = '') {\n    if (!this.dialogOpen) {\n      // Avoid redundant close calls (and events), e.g. from keydown on elements\n      // that inherently emit click\n      return;\n    }\n\n    this.dialogOpen = false;\n    this.adapter.notifyClosing(action);\n    this.adapter.addClass(cssClasses.CLOSING);\n    this.adapter.removeClass(cssClasses.OPEN);\n    this.adapter.removeBodyClass(cssClasses.SCROLL_LOCK);\n    if (this.isFullscreen) {\n      this.adapter.deregisterContentEventHandler(\n          'scroll', this.contentScrollHandler);\n    }\n    this.adapter.deregisterWindowEventHandler(\n        'resize', this.windowResizeHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'orientationchange', this.windowOrientationChangeHandler);\n\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = 0;\n\n    clearTimeout(this.animationTimer);\n    this.animationTimer = setTimeout(() => {\n      this.adapter.releaseFocus();\n      this.handleAnimationTimerEnd();\n      this.adapter.notifyClosed(action);\n    }, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n  }\n\n  /**\n   * Used only in instances of showing a secondary dialog over a full-screen\n   * dialog. Shows the \"surface scrim\" displayed over the full-screen dialog.\n   */\n  showSurfaceScrim() {\n    this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWING);\n    this.runNextAnimationFrame(() => {\n      this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWN);\n    });\n  }\n\n  /**\n   * Used only in instances of showing a secondary dialog over a full-screen\n   * dialog. Hides the \"surface scrim\" displayed over the full-screen dialog.\n   */\n  hideSurfaceScrim() {\n    this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWN);\n    this.adapter.addClass(cssClasses.SURFACE_SCRIM_HIDING);\n  }\n\n  /**\n   * Handles `transitionend` event triggered when surface scrim animation is\n   * finished.\n   */\n  handleSurfaceScrimTransitionEnd() {\n    this.adapter.removeClass(cssClasses.SURFACE_SCRIM_HIDING);\n    this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWING);\n  }\n\n  isOpen() {\n    return this.dialogOpen;\n  }\n\n  getEscapeKeyAction(): string {\n    return this.escapeKeyAction;\n  }\n\n  setEscapeKeyAction(action: string) {\n    this.escapeKeyAction = action;\n  }\n\n  getScrimClickAction(): string {\n    return this.scrimClickAction;\n  }\n\n  setScrimClickAction(action: string) {\n    this.scrimClickAction = action;\n  }\n\n  getAutoStackButtons(): boolean {\n    return this.autoStackButtons;\n  }\n\n  setAutoStackButtons(autoStack: boolean) {\n    this.autoStackButtons = autoStack;\n  }\n\n  getSuppressDefaultPressSelector(): string {\n    return this.suppressDefaultPressSelector;\n  }\n\n  setSuppressDefaultPressSelector(selector: string) {\n    this.suppressDefaultPressSelector = selector;\n  }\n\n  layout() {\n    this.animFrame.request(AnimationKeys.POLL_LAYOUT_CHANGE, () => {\n      this.layoutInternal();\n    });\n  }\n\n  /** Handles click on the dialog root element. */\n  handleClick(event: MouseEvent) {\n    const isScrim =\n        this.adapter.eventTargetMatches(event.target, strings.SCRIM_SELECTOR);\n    // Check for scrim click first since it doesn't require querying ancestors.\n    if (isScrim && this.scrimClickAction !== '') {\n      this.close(this.scrimClickAction);\n    } else {\n      const action = this.adapter.getActionFromEvent(event);\n      if (action) {\n        this.close(action);\n      }\n    }\n  }\n\n  /** Handles keydown on the dialog root element. */\n  handleKeydown(event: KeyboardEvent) {\n    const isEnter = event.key === 'Enter' || event.keyCode === 13;\n    if (!isEnter) {\n      return;\n    }\n    const action = this.adapter.getActionFromEvent(event);\n    if (action) {\n      // Action button callback is handled in `handleClick`,\n      // since space/enter keydowns on buttons trigger click events.\n      return;\n    }\n\n    // `composedPath` is used here, when available, to account for use cases\n    // where a target meant to suppress the default press behaviour\n    // may exist in a shadow root.\n    // For example, a textarea inside a web component:\n    // <mwc-dialog>\n    //   <horizontal-layout>\n    //     #shadow-root (open)\n    //       <mwc-textarea>\n    //         #shadow-root (open)\n    //           <textarea></textarea>\n    //       </mwc-textarea>\n    //   </horizontal-layout>\n    // </mwc-dialog>\n    const target = event.composedPath ? event.composedPath()[0] : event.target;\n    const isDefault = this.suppressDefaultPressSelector ?\n        !this.adapter.eventTargetMatches(\n            target, this.suppressDefaultPressSelector) :\n        true;\n    if (isEnter && isDefault) {\n      this.adapter.clickDefaultButton();\n    }\n  }\n\n  /** Handles keydown on the document. */\n  handleDocumentKeydown(event: KeyboardEvent) {\n    const isEscape = event.key === 'Escape' || event.keyCode === 27;\n    if (isEscape && this.escapeKeyAction !== '') {\n      this.close(this.escapeKeyAction);\n    }\n  }\n\n  /**\n   * Handles scroll event on the dialog's content element -- showing a scroll\n   * divider on the header or footer based on the scroll position. This handler\n   * should only be registered on full-screen dialogs with scrollable content.\n   */\n  private handleScrollEvent() {\n    // Since scroll events can fire at a high rate, we throttle these events by\n    // using requestAnimationFrame.\n    this.animFrame.request(AnimationKeys.POLL_SCROLL_POS, () => {\n      this.toggleScrollDividerHeader();\n      this.toggleScrollDividerFooter();\n    });\n  }\n\n  private layoutInternal() {\n    if (this.autoStackButtons) {\n      this.detectStackedButtons();\n    }\n    this.toggleScrollableClasses();\n  }\n\n  private handleAnimationTimerEnd() {\n    this.animationTimer = 0;\n    this.adapter.removeClass(cssClasses.OPENING);\n    this.adapter.removeClass(cssClasses.CLOSING);\n  }\n\n  /**\n   * Runs the given logic on the next animation frame, using setTimeout to\n   * factor in Firefox reflow behavior.\n   */\n  private runNextAnimationFrame(callback: () => void) {\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = requestAnimationFrame(() => {\n      this.animationFrame = 0;\n      clearTimeout(this.animationTimer);\n      this.animationTimer = setTimeout(callback, 0);\n    });\n  }\n\n  private detectStackedButtons() {\n    // Remove the class first to let us measure the buttons' natural positions.\n    this.adapter.removeClass(cssClasses.STACKED);\n\n    const areButtonsStacked = this.adapter.areButtonsStacked();\n\n    if (areButtonsStacked) {\n      this.adapter.addClass(cssClasses.STACKED);\n    }\n\n    if (areButtonsStacked !== this.areButtonsStacked) {\n      this.adapter.reverseButtons();\n      this.areButtonsStacked = areButtonsStacked;\n    }\n  }\n\n  private toggleScrollableClasses() {\n    // Remove the class first to let us measure the natural height of the\n    // content.\n    this.adapter.removeClass(cssClasses.SCROLLABLE);\n    if (this.adapter.isContentScrollable()) {\n      this.adapter.addClass(cssClasses.SCROLLABLE);\n\n      if (this.isFullscreen) {\n        // If dialog is full-screen and scrollable, check if a scroll divider\n        // should be shown.\n        this.toggleScrollDividerHeader();\n        this.toggleScrollDividerFooter();\n      }\n    }\n  }\n\n  private toggleScrollDividerHeader() {\n    if (!this.adapter.isScrollableContentAtTop()) {\n      this.adapter.addClass(cssClasses.SCROLL_DIVIDER_HEADER);\n    } else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_HEADER)) {\n      this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_HEADER);\n    }\n  }\n\n  private toggleScrollDividerFooter() {\n    if (!this.adapter.isScrollableContentAtBottom()) {\n      this.adapter.addClass(cssClasses.SCROLL_DIVIDER_FOOTER);\n    } else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_FOOTER)) {\n      this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_FOOTER);\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCDialogFoundation;\n"
  },
  {
    "path": "packages/mdc-dialog/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-dialog/mdc-dialog.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/button/variables\" as mdc-button-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-dialog-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"mixins\" as mdc-dialog-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-dialog\";\n"
  },
  {
    "path": "packages/mdc-dialog/mdc-dialog.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-dialog/package.json",
    "content": "{\n  \"name\": \"@material/dialog\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components Web dialog component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"dialog\",\n    \"modal\"\n  ],\n  \"main\": \"dist/mdc.dialog.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-dialog\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/button\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/icon-button\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dialog/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {supportsCssVariables} from '../../mdc-ripple/util';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {numbers, strings} from '../constants';\nimport {MDCDialog, MDCDialogFoundation, util} from '../index';\n\nconst DEFAULT_CONTENT = html`Let Google help apps determine location.`;\n\nfunction getFixture(content: ReturnType<typeof html> = DEFAULT_CONTENT) {\n  return createFixture(html`\n    <div>\n      <button class=\"open-dialog-button\">click</button>\n      <div id=\"test-dialog\"\n           class=\"mdc-dialog\"\n           role=\"alertdialog\"\n           aria-labelledby=\"test-dialog-label\"\n           aria-describedby=\"test-dialog-description\">\n        <div class=\"mdc-dialog__container\">\n          <div class=\"mdc-dialog__surface\">\n            <h2 class=\"mdc-dialog__title\">\n              Use Google's location service?\n            </h2>\n            <section class=\"mdc-dialog__content\">\n              ${content}\n            </section>\n            <div class=\"mdc-dialog__actions\">\n              <button class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"cancel\" type=\"button\">\n                <span class=\"mdc-button__label\">Cancel</span>\n              </button>\n              <button class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"no\" type=\"button\">\n                <span class=\"mdc-button__label\">No</span>\n              </button>\n              <button class=\"mdc-button mdc-dialog__button\" data-mdc-dialog-action=\"yes\" type=\"button\" ${\n      strings.INITIAL_FOCUS_ATTRIBUTE}>\n                <span class=\"mdc-button__label\">Yes</span>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"mdc-dialog__scrim\"></div>\n      </div>\n    </div>`);\n}\n\nfunction setupTest(fixture = getFixture()) {\n  const root = fixture.querySelector<HTMLElement>('.mdc-dialog')!;\n  const component = new MDCDialog(root);\n  const title = fixture.querySelector<HTMLElement>('.mdc-dialog__title')!;\n  const content = fixture.querySelector<HTMLElement>('.mdc-dialog__content')!;\n  const actions = fixture.querySelector<HTMLElement>('.mdc-dialog__actions')!;\n  const yesButton =\n      fixture.querySelector<HTMLElement>('[data-mdc-dialog-action=\"yes\"]')!;\n  const noButton =\n      fixture.querySelector<HTMLElement>('[data-mdc-dialog-action=\"no\"]')!;\n  const cancelButton =\n      fixture.querySelector<HTMLElement>('[data-mdc-dialog-action=\"cancel\"]')!;\n  return {\n    root,\n    component,\n    title,\n    content,\n    actions,\n    yesButton,\n    noButton,\n    cancelButton\n  };\n}\n\nfunction setupTestWithMocks() {\n  const root = getFixture();\n\n  const mockFoundation = createMockFoundation(MDCDialogFoundation);\n  const mockFocusTrapInstance =\n      jasmine.createSpyObj('focusTrap', ['trapFocus', 'releaseFocus']);\n\n  const component =\n      new MDCDialog(root, mockFoundation, () => mockFocusTrapInstance);\n  return {root, component, mockFoundation, mockFocusTrapInstance};\n}\n\ndescribe('MDCDialog', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo returns a component instance', () => {\n    expect(MDCDialog.attachTo(\n               getFixture().querySelector<HTMLElement>('.mdc-dialog')!))\n        .toEqual(jasmine.any(MDCDialog));\n  });\n\n  it('attachTo throws an error when container element is missing', () => {\n    const fixture = getFixture();\n    const container =\n        fixture.querySelector<HTMLElement>('.mdc-dialog__container')!;\n    container.parentElement!.removeChild(container);\n    expect(\n        () => MDCDialog.attachTo(\n            fixture.querySelector<HTMLElement>('.mdc-dialog')!))\n        .toThrow();\n  });\n\n  it('#initialSyncWithDOM registers click handler on the root element', () => {\n    const {root, component, mockFoundation} = setupTestWithMocks();\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).toHaveBeenCalledWith(jasmine.any(Event));\n    expect(mockFoundation.handleClick).toHaveBeenCalledTimes(1);\n    component.destroy();\n  });\n\n  it('#initialSyncWithDOM registers keydown handler on the root element',\n     () => {\n       const {root, component, mockFoundation} = setupTestWithMocks();\n       emitEvent(root, 'keydown');\n       expect(mockFoundation.handleKeydown)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n       component.destroy();\n     });\n\n  it('#destroy deregisters click handler on the root element', () => {\n    const {root, component, mockFoundation} = setupTestWithMocks();\n    component.destroy();\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n  });\n\n  it('#destroy deregisters keydown handler on the root element', () => {\n    const {root, component, mockFoundation} = setupTestWithMocks();\n    component.destroy();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n  });\n\n  it(`${strings.OPENING_EVENT} registers document keydown handler and ${\n         strings.CLOSING_EVENT} deregisters it`,\n     () => {\n       const {root, mockFoundation} = setupTestWithMocks();\n       emitEvent(root, strings.OPENING_EVENT);\n       emitEvent(document, 'keydown');\n       expect(mockFoundation.handleDocumentKeydown)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleDocumentKeydown).toHaveBeenCalledTimes(1);\n\n       emitEvent(root, strings.CLOSING_EVENT);\n       emitEvent(document, 'keydown');\n       expect(mockFoundation.handleDocumentKeydown)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleDocumentKeydown).toHaveBeenCalledTimes(1);\n     });\n\n  it('#initialize attaches ripple elements to all footer buttons', () => {\n    if (!supportsCssVariables(window, true)) {\n      return;\n    }\n\n    const {yesButton, noButton, cancelButton} = setupTest();\n    jasmine.clock().tick(1);\n\n    expect(yesButton).toHaveClass('mdc-ripple-upgraded');\n    expect(noButton).toHaveClass('mdc-ripple-upgraded');\n    expect(cancelButton).toHaveClass('mdc-ripple-upgraded');\n  });\n\n  it('#destroy cleans up all ripples on footer buttons', () => {\n    if (!supportsCssVariables(window, true)) {\n      return;\n    }\n\n    const {component, yesButton, noButton, cancelButton} = setupTest();\n    jasmine.clock().tick(1);\n\n    component.destroy();\n    jasmine.clock().tick(1);\n\n    expect(yesButton).not.toHaveClass('mdc-ripple-upgraded');\n    expect(noButton).not.toHaveClass('mdc-ripple-upgraded');\n    expect(cancelButton).not.toHaveClass('mdc-ripple-upgraded');\n  });\n\n  it('#open forwards to MDCDialogFoundation#open', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.open();\n    expect(mockFoundation.open).toHaveBeenCalled();\n  });\n\n  it('#close forwards to MDCDialogFoundation#close', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n    const action = 'action';\n\n    component.close(action);\n    expect(mockFoundation.close).toHaveBeenCalledWith(action);\n\n    component.close();\n    expect(mockFoundation.close).toHaveBeenCalledWith('');\n  });\n\n  it('get isOpen forwards to MDCDialogFoundation#isOpen', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.isOpen;\n    expect(mockFoundation.isOpen).toHaveBeenCalled();\n  });\n\n  it('get escapeKeyAction forwards to MDCDialogFoundation#getEscapeKeyAction',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.escapeKeyAction;\n       expect(mockFoundation.getEscapeKeyAction).toHaveBeenCalled();\n     });\n\n  it('set escapeKeyAction forwards to MDCDialogFoundation#setEscapeKeyAction',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.escapeKeyAction = 'action';\n       expect(mockFoundation.setEscapeKeyAction).toHaveBeenCalledWith('action');\n     });\n\n  it('get scrimClickAction forwards to MDCDialogFoundation#getScrimClickAction',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.scrimClickAction;\n       expect(mockFoundation.getScrimClickAction).toHaveBeenCalled();\n     });\n\n  it('set scrimClickAction forwards to MDCDialogFoundation#setScrimClickAction',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.scrimClickAction = 'action';\n       expect(mockFoundation.setScrimClickAction)\n           .toHaveBeenCalledWith('action');\n     });\n\n  it('get autoStackButtons forwards to MDCDialogFoundation#getAutoStackButtons',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.autoStackButtons;\n       expect(mockFoundation.getAutoStackButtons).toHaveBeenCalled();\n     });\n\n  it('set autoStackButtons forwards to MDCDialogFoundation#setAutoStackButtons',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.autoStackButtons = false;\n       expect(mockFoundation.setAutoStackButtons).toHaveBeenCalledWith(false);\n     });\n\n  it('autoStackButtons adds scrollable class', () => {\n    // Simulate a scrollable content area\n    const contentChildren =\n        new Array(100).join(html`<p>${DEFAULT_CONTENT}</p>`);\n    const fixture = getFixture(contentChildren);\n    const root = fixture.querySelector<HTMLElement>('.mdc-dialog')!;\n    const content = root.querySelector<HTMLElement>('.mdc-dialog__content')!;\n\n    content.style.height = '50px';\n    content.style.overflow = 'auto';\n\n    document.body.appendChild(fixture);\n\n    try {\n      const component = new MDCDialog(root);\n      component.autoStackButtons = false;\n      component.open();\n      jasmine.clock().tick(1);\n      jasmine.clock().tick(1);\n\n      expect(root).toHaveClass('mdc-dialog--scrollable');\n    } finally {\n      document.body.removeChild(fixture);\n    }\n  });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#hasClass returns whether a class exists on the root element',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.hasClass('does-not-exist'))\n           .toBe(false);\n     });\n\n  it('adapter#addBodyClass adds a class to the body', () => {\n    const {component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.addBodyClass('mdc-dialog--scroll-lock');\n    expect((document.querySelector<HTMLElement>('body')!))\n        .toHaveClass('mdc-dialog--scroll-lock');\n  });\n\n  it('adapter#removeBodyClass removes a class from the body', () => {\n    const {component} = setupTest();\n    const body = document.querySelector<HTMLElement>('body')!;\n\n    body.classList.add('mdc-dialog--scroll-lock');\n    (component.getDefaultFoundation() as any)\n        .adapter.removeBodyClass('mdc-dialog--scroll-lock');\n    expect(body).not.toHaveClass('mdc-dialog--scroll-lock');\n  });\n\n  it('adapter#eventTargetMatches returns whether or not the target matches the selector',\n     () => {\n       const {component} = setupTest();\n       const target = document.createElement('div');\n       target.classList.add('existent-class');\n       const {adapter: adapter} = component.getDefaultFoundation() as any;\n\n       expect(adapter.eventTargetMatches(target, '.existent-class')).toBe(true);\n       expect(adapter.eventTargetMatches(target, '.non-existent-class'))\n           .toBe(false);\n       expect(adapter.eventTargetMatches(null, '.existent-class')).toBe(false);\n     });\n\n  it(`adapter#notifyOpening emits ${strings.OPENING_EVENT}`, () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('notifyOpeningHandler');\n\n    component.listen(strings.OPENING_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpening();\n    component.unlisten(strings.OPENING_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it(`adapter#notifyOpened emits ${strings.OPENED_EVENT}`, () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('notifyOpenedHandler');\n\n    component.listen(strings.OPENED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpened();\n    component.unlisten(strings.OPENED_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it(`adapter#notifyClosing emits ${\n         strings\n             .CLOSING_EVENT} without action if passed action is empty string`,\n     () => {\n       const {component} = setupTest();\n\n       const handler = jasmine.createSpy('notifyClosingHandler');\n\n       component.listen(strings.CLOSING_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClosing('');\n       component.unlisten(strings.CLOSING_EVENT, handler);\n\n       expect(handler).toHaveBeenCalledWith(\n           jasmine.objectContaining({detail: {}}));\n     });\n\n  it(`adapter#notifyClosing emits ${strings.CLOSING_EVENT} with action`, () => {\n    const {component} = setupTest();\n    const action = 'action';\n\n    const handler = jasmine.createSpy('notifyClosingHandler');\n\n    component.listen(strings.CLOSING_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyClosing(action);\n    component.unlisten(strings.CLOSING_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {action}}));\n  });\n\n  it(`adapter#notifyClosed emits ${\n         strings.CLOSED_EVENT} without action if passed action is empty string`,\n     () => {\n       const {component} = setupTest();\n\n       const handler = jasmine.createSpy('notifyClosedHandler');\n\n       component.listen(strings.CLOSED_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClosed('');\n       component.unlisten(strings.CLOSED_EVENT, handler);\n\n       expect(handler).toHaveBeenCalledWith(\n           jasmine.objectContaining({detail: {}}));\n     });\n\n  it(`adapter#notifyClosed emits ${strings.CLOSED_EVENT} with action`, () => {\n    const {component} = setupTest();\n    const action = 'action';\n\n    const handler = jasmine.createSpy('notifyClosedHandler');\n\n    component.listen(strings.CLOSED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyClosed(action);\n    component.unlisten(strings.CLOSED_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {action}}));\n  });\n\n  it('adapter#trapFocus calls trapFocus() on a properly configured focus trap instance',\n     () => {\n       const {component, mockFocusTrapInstance} = setupTestWithMocks();\n       component.initialize();\n       (component.getDefaultFoundation() as any).adapter.trapFocus();\n\n       expect(mockFocusTrapInstance.trapFocus).toHaveBeenCalled();\n     });\n\n  it('adapter#releaseFocus calls releaseFocus() on a properly configured focus trap instance',\n     () => {\n       const {component, mockFocusTrapInstance} = setupTestWithMocks();\n       component.initialize();\n       (component.getDefaultFoundation() as any).adapter.releaseFocus();\n\n       expect(mockFocusTrapInstance.releaseFocus).toHaveBeenCalled();\n     });\n\n  it('adapter#isContentScrollable returns false when there is no content element',\n     () => {\n       const {component, content} = setupTest();\n       content.parentElement!.removeChild(content);\n       const isContentScrollable = (component.getDefaultFoundation() as any)\n                                       .adapter.isContentScrollable();\n       expect(isContentScrollable).toBe(false);\n     });\n\n  it('adapter#isContentScrollable returns result of util.isScrollable', () => {\n    const {component, content} = setupTest();\n    expect(\n        (component.getDefaultFoundation() as any).adapter.isContentScrollable())\n        .toBe(util.isScrollable(content));\n  });\n\n  it('adapter#areButtonsStacked returns result of util.areTopsMisaligned',\n     () => {\n       const {component, yesButton, noButton, cancelButton} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.areButtonsStacked())\n           .toBe(util.areTopsMisaligned([yesButton, noButton, cancelButton]));\n     });\n\n  it('adapter#getActionFromEvent returns an empty string when no event target is present',\n     () => {\n       const {component} = setupTest();\n       const action = (component.getDefaultFoundation() as any)\n                          .adapter.getActionFromEvent({});\n       expect(action).toEqual('');\n     });\n\n  it('adapter#getActionFromEvent returns attribute value on event target',\n     () => {\n       const {component, yesButton} = setupTest();\n       const action = (component.getDefaultFoundation() as any)\n                          .adapter.getActionFromEvent({target: yesButton});\n       expect(action).toEqual('yes');\n     });\n\n  it('adapter#getActionFromEvent returns attribute value on parent of event target',\n     () => {\n       const {component, yesButton} = setupTest();\n       const childEl = document.createElement('span');\n       yesButton.appendChild(childEl);\n       const action = (component.getDefaultFoundation() as any)\n                          .adapter.getActionFromEvent({target: childEl});\n       expect(action).toEqual('yes');\n     });\n\n  it('adapter#getActionFromEvent returns null when attribute is not present',\n     () => {\n       const {component, title} = setupTest();\n       const action = (component.getDefaultFoundation() as any)\n                          .adapter.getActionFromEvent({target: title});\n       expect(action).toBe(null);\n     });\n\n  it(`adapter#clickDefaultButton invokes click() on button matching ${\n         strings.BUTTON_DEFAULT_ATTRIBUTE}`,\n     () => {\n       const fixture = getFixture();\n       const yesButton = fixture.querySelector<HTMLElement>(\n           '[data-mdc-dialog-action=\"yes\"]')!;\n       yesButton.setAttribute(strings.BUTTON_DEFAULT_ATTRIBUTE, 'true');\n\n       const {component} = setupTest(fixture);\n       yesButton.click = jasmine.createSpy('click');\n\n       (component.getDefaultFoundation() as any).adapter.clickDefaultButton();\n       expect(yesButton.click).toHaveBeenCalled();\n     });\n\n  it(`adapter#clickDefaultButton does nothing if nothing matches ${\n         strings.BUTTON_DEFAULT_ATTRIBUTE}`,\n     () => {\n       const {component, yesButton, noButton} = setupTest();\n       yesButton.click = jasmine.createSpy('click');\n       noButton.click = jasmine.createSpy('click');\n\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.clickDefaultButton)\n           .not.toThrow();\n       expect(yesButton.click).not.toHaveBeenCalled();\n       expect(noButton.click).not.toHaveBeenCalled();\n     });\n\n  it('adapter#reverseButtons reverses the order of children under the actions element',\n     () => {\n       const {component, actions, yesButton, noButton, cancelButton} =\n           setupTest();\n       (component.getDefaultFoundation() as any).adapter.reverseButtons();\n       expect(actions.children[0]).toEqual(yesButton);\n       expect(actions.children[1]).toEqual(noButton);\n       expect(actions.children[2]).toEqual(cancelButton);\n     });\n\n  it('#layout proxies to foundation', () => {\n    const {component} = setupTest();\n    (component as any).foundation.layout =\n        jasmine.createSpy('component.foundation.layout');\n    component.layout();\n    expect((component as any).foundation.layout).toHaveBeenCalled();\n  });\n\n  it(`Button with ${\n         strings\n             .INITIAL_FOCUS_ATTRIBUTE} will be focused when the dialog is opened, with multiple initial focus buttons in DOM`,\n     () => {\n       const {root: root1, component: component1, yesButton: yesButton1} =\n           setupTest();\n       const {root: root2, component: component2, yesButton: yesButton2} =\n           setupTest();\n\n       expect(yesButton1.hasAttribute(strings.INITIAL_FOCUS_ATTRIBUTE))\n           .toBe(true);\n       expect(yesButton2.hasAttribute(strings.INITIAL_FOCUS_ATTRIBUTE))\n           .toBe(true);\n\n       try {\n         document.body.appendChild(root1);\n         document.body.appendChild(root2);\n\n         component1.open();\n         jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS + 10);\n         expect(document.activeElement).toEqual(yesButton1);\n         component1.close();\n         jasmine.clock().tick(numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n\n         component2.open();\n         jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS + 10);\n         expect(document.activeElement).toEqual(yesButton2);\n         component2.close();\n         jasmine.clock().tick(numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n       } finally {\n         document.body.removeChild(root1);\n         document.body.removeChild(root2);\n       }\n     });\n});\n"
  },
  {
    "path": "packages/mdc-dialog/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as dialog;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include dialog.core-styles($query: $query);\n    @include dialog.container-fill-color(red, $query: $query);\n    @include dialog.scrim-color(red, $query: $query);\n    @include dialog.title-ink-color(red, $query: $query);\n    @include dialog.content-ink-color(red, $query: $query);\n    @include dialog.scroll-divider-color(red, $query: $query);\n    @include dialog.shape-radius(0, $query: $query);\n    @include dialog.min-width(0, $query: $query);\n    @include dialog.max-width(0, 0, $query: $query);\n    @include dialog.max-height(0, 0, $query: $query);\n    @include dialog.with-touch-target($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-dialog/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport {MDCDialogFoundation} from '../foundation';\n\nconst ENTER_EVENTS = [\n  {type: 'keydown', key: 'Enter', target: {}} as KeyboardEvent,\n  {type: 'keydown', keyCode: 13, target: {}} as KeyboardEvent,\n];\n\ndescribe('MDCDialogFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports cssClasses', () => {\n    expect(MDCDialogFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports strings', () => {\n    expect(MDCDialogFoundation.strings).toEqual(strings);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCDialogFoundation.numbers).toEqual(numbers);\n  });\n\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCDialogFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'addBodyClass',\n      'removeBodyClass',\n      'eventTargetMatches',\n      'trapFocus',\n      'releaseFocus',\n      'getInitialFocusEl',\n      'isContentScrollable',\n      'areButtonsStacked',\n      'getActionFromEvent',\n      'clickDefaultButton',\n      'reverseButtons',\n      'notifyOpening',\n      'notifyOpened',\n      'notifyClosing',\n      'notifyClosed',\n      'registerContentEventHandler',\n      'deregisterContentEventHandler',\n      'isScrollableContentAtTop',\n      'isScrollableContentAtBottom',\n      'registerWindowEventHandler',\n      'deregisterWindowEventHandler',\n    ]);\n  });\n\n  function setupTest(dialogOptions: {isFullscreen?: boolean} = {}) {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCDialogFoundation);\n    if (dialogOptions.isFullscreen) {\n      mockAdapter.hasClass.withArgs(cssClasses.FULLSCREEN)\n          .and.returnValue(true);\n    }\n    foundation.init();\n    return {foundation, mockAdapter};\n  }\n\n  it(`#init turns off auto-stack if ${cssClasses.STACKED} is already present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.STACKED).and.returnValue(true);\n\n       foundation.init();\n       expect(foundation.getAutoStackButtons()).toBe(false);\n     });\n\n  it('#destroy removes animating classes if called when the dialog is animating',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(1);\n       foundation.destroy();\n\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n     });\n\n  it('#destroy cancels layout handling if called on same frame as layout',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.layout();\n       foundation.destroy();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.areButtonsStacked).not.toHaveBeenCalled();\n       expect(mockAdapter.isContentScrollable).not.toHaveBeenCalled();\n     });\n\n  it('#destroy deregisters event handlers on dialog content if they exist',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(true);\n\n       foundation.open();\n       foundation.destroy();\n       expect(mockAdapter.deregisterContentEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#destroy deregisters event handlers on the window', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isContentScrollable.and.returnValue(true);\n\n    foundation.open();\n    foundation.destroy();\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('resize', jasmine.any(Function));\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('orientationchange', jasmine.any(Function));\n  });\n\n  it('#open adds CSS classes after rAF', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.addBodyClass)\n        .not.toHaveBeenCalledWith(cssClasses.SCROLL_LOCK);\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.addBodyClass)\n        .toHaveBeenCalledWith(cssClasses.SCROLL_LOCK);\n  });\n\n  it('#close removes CSS classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close();\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.removeBodyClass)\n        .toHaveBeenCalledWith(cssClasses.SCROLL_LOCK);\n  });\n\n  it('#close cancels rAF scheduled by open if still pending', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close();\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#open adds the opening class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(1);\n       jasmine.clock().tick(100);\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPENING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPENING);\n       jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n     });\n\n  it('#close adds the closing class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n       foundation.close();\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.CLOSING);\n       jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n     });\n\n  it('#open activates focus trapping on the dialog surface', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    const button = document.createElement('button');\n    mockAdapter.getInitialFocusEl.and.returnValue(button);\n    foundation.open();\n\n    // Wait for application of opening class and setting of additional timeout\n    // prior to full open animation timeout\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(100);\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n\n    expect(mockAdapter.trapFocus).toHaveBeenCalledWith(button);\n  });\n\n  it('#close deactivates focus trapping on the dialog surface', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n\n    foundation.close();\n\n    // Wait till setTimeout callback is executed.\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(100);\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n\n    expect(mockAdapter.releaseFocus).toHaveBeenCalled();\n  });\n\n  it('#open emits \"opening\" and \"opened\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(100);\n\n    expect(mockAdapter.notifyOpening).toHaveBeenCalledTimes(1);\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n    expect(mockAdapter.notifyOpened).toHaveBeenCalledTimes(1);\n  });\n\n  it('#close emits \"closing\" and \"closed\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n    foundation.close();\n\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledWith('');\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledWith('');\n\n    foundation.open();\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n\n    const action = 'action';\n    foundation.close(action);\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledWith(action);\n    jasmine.clock().tick(numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledWith(action);\n  });\n\n  it('#close does nothing if the dialog is already closed', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.close();\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.removeBodyClass)\n        .not.toHaveBeenCalledWith(cssClasses.SCROLL_LOCK);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.CLOSING);\n    expect(mockAdapter.releaseFocus).not.toHaveBeenCalled();\n    expect(mockAdapter.notifyClosing).not.toHaveBeenCalledWith('');\n  });\n\n  it('#isOpen returns false when the dialog has never been opened', () => {\n    const {foundation} = setupTest();\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it('#isOpen returns true when the dialog is open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n\n    expect(foundation.isOpen()).toBe(true);\n  });\n\n  it('#isOpen returns false when the dialog is closed after being open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n    foundation.close();\n\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it('#open recalculates layout', () => {\n    const {foundation} = setupTest();\n\n    foundation.layout = jasmine.createSpy('layout');\n\n    foundation.open();\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(100);\n\n    expect(foundation.layout).toHaveBeenCalled();\n  });\n\n  it('#open registers scroll event handler if dialog is full-screen and scrollable',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(true);\n\n       foundation.open();\n\n       expect(mockAdapter.registerContentEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#open registers scroll event handler if dialog is full-screen and not scrollable',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(false);\n\n       foundation.open();\n\n       expect(mockAdapter.registerContentEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#open doesn\\'t registers scroll event handler if dialog is not full-screen',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.isContentScrollable.and.returnValue(true);\n\n       foundation.open();\n\n       expect(mockAdapter.registerContentEventHandler)\n           .not.toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#close deregisters scroll event handler if dialog is full-screen and scrollable',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(true);\n\n       foundation.open();\n       foundation.close();\n\n       expect(mockAdapter.deregisterContentEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#close deregisters scroll event handler if dialog is full-screen and not scrollable',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(false);\n\n       foundation.open();\n       foundation.close();\n\n       expect(mockAdapter.deregisterContentEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n     });\n\n  it('#open hides the scrim if \"isAboveFullscreenDialog\" is true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.open({isAboveFullscreenDialog: true});\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SCRIM_HIDDEN);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPENING);\n  });\n\n  it('#open registers resize and orientationchange event listeners on the window',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.open();\n\n       expect(mockAdapter.registerWindowEventHandler)\n           .toHaveBeenCalledWith('resize', jasmine.any(Function));\n       expect(mockAdapter.registerWindowEventHandler)\n           .toHaveBeenCalledWith('orientationchange', jasmine.any(Function));\n     });\n\n  it('#close deregisters resize and orientationchange event listeners on the window',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.open();\n       foundation.close();\n\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('resize', jasmine.any(Function));\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('orientationchange', jasmine.any(Function));\n     });\n\n  it(`#layout removes ${\n         cssClasses.STACKED} class, detects stacked buttons, and adds class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.areButtonsStacked.and.returnValue(true);\n\n       foundation.layout();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.STACKED);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.STACKED);\n     });\n\n  it(`#layout removes ${\n         cssClasses\n             .STACKED} class, detects unstacked buttons, and does not add class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.areButtonsStacked.and.returnValue(true);\n\n       foundation.setAutoStackButtons(false);\n       foundation.layout();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.STACKED);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.STACKED);\n     });\n\n  it('#layout adds scrollable class when content is scrollable', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isContentScrollable.and.returnValue(true);\n\n    foundation.layout();\n    jasmine.clock().tick(1);\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SCROLLABLE);\n  });\n\n  it('#layout removes scrollable class when content is not scrollable', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isContentScrollable.and.returnValue(false);\n\n    foundation.layout();\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.SCROLLABLE);\n  });\n\n  it('#layout adds header scroll divider if dialog is fullscreen and content is scrolled',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(true);\n       mockAdapter.isScrollableContentAtTop.and.returnValue(false);\n\n       foundation.layout();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_HEADER);\n     });\n\n  it('#layout adds footer scroll divider if dialog is fullscreen and content is scrollable',\n     () => {\n       const {foundation, mockAdapter} = setupTest({isFullscreen: true});\n       mockAdapter.isContentScrollable.and.returnValue(true);\n       mockAdapter.isScrollableContentAtBottom.and.returnValue(false);\n\n       foundation.layout();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_FOOTER);\n     });\n\n  it(`#handleClick: Click closes dialog when ${\n         strings.ACTION_ATTRIBUTE} attribute is present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const action = 'action';\n       foundation.close = jasmine.createSpy('close');\n\n       const event = {target: {}} as MouseEvent;\n       mockAdapter.getActionFromEvent.withArgs(event).and.returnValue(action);\n       foundation.open();\n       foundation.handleClick(event);\n\n       expect(foundation.close).toHaveBeenCalledWith(action);\n     });\n\n  it('#handleKeydown: Keydown does not close dialog with action for non-activation keys',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const action = 'action';\n       const event = {type: 'keydown', key: 'Shift', target: {}} as\n           KeyboardEvent;\n       foundation.close = jasmine.createSpy('close');\n       mockAdapter.getActionFromEvent.withArgs(event).and.returnValue(action);\n\n       foundation.open();\n       foundation.handleKeydown(event);\n\n       expect(foundation.close).not.toHaveBeenCalledWith(action);\n     });\n\n  it(`#handleClick: Click does nothing when ${\n         strings.ACTION_ATTRIBUTE} attribute is not present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       const event = {target: {}} as MouseEvent;\n       mockAdapter.getActionFromEvent.withArgs(event).and.returnValue('');\n       foundation.open();\n       foundation.handleClick(event);\n\n       expect(foundation.close).not.toHaveBeenCalledWith(jasmine.any(String));\n     });\n\n  it(`#handleKeydown: Keydown does nothing when ${\n         strings.ACTION_ATTRIBUTE} attribute is not present`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       ENTER_EVENTS.forEach((event) => {\n         mockAdapter.getActionFromEvent.withArgs(event).and.returnValue('');\n         foundation.open();\n         foundation.handleKeydown(event);\n\n         expect(foundation.close).not.toHaveBeenCalledWith(jasmine.any(String));\n       });\n     });\n\n  it('#handleKeydown: Enter keydown calls adapter.clickDefaultButton', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    ENTER_EVENTS.forEach((event) => {\n      foundation.handleKeydown(event);\n      expect(mockAdapter.clickDefaultButton).toHaveBeenCalled();\n    });\n  });\n\n  it('#handleKeydown: Enter keydown does not call adapter.clickDefaultButton when it should be suppressed',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       ENTER_EVENTS.forEach((event) => {\n         mockAdapter.eventTargetMatches\n             .withArgs(event.target, strings.SUPPRESS_DEFAULT_PRESS_SELECTOR)\n             .and.returnValue(true);\n         foundation.handleKeydown(event);\n         expect(mockAdapter.clickDefaultButton).not.toHaveBeenCalled();\n       });\n     });\n\n  it(`#handleClick: Click closes dialog when ${\n         strings.SCRIM_SELECTOR} selector matches`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const event = {type: 'click', target: {}} as MouseEvent;\n       foundation.close = jasmine.createSpy('close');\n       mockAdapter.eventTargetMatches\n           .withArgs(event.target, strings.SCRIM_SELECTOR)\n           .and.returnValue(true);\n\n       foundation.open();\n       foundation.handleClick(event);\n\n       expect(foundation.close)\n           .toHaveBeenCalledWith(foundation.getScrimClickAction());\n     });\n\n  it(`#handleClick: Click does nothing when ${\n         strings.SCRIM_SELECTOR} class is present but scrimClickAction is \n    empty string`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const event = {type: 'click', target: {}} as MouseEvent;\n       foundation.close = jasmine.createSpy('close');\n       mockAdapter.eventTargetMatches\n           .withArgs(event.target, strings.SCRIM_SELECTOR)\n           .and.returnValue(true);\n\n       foundation.setScrimClickAction('');\n       foundation.open();\n       foundation.handleClick(event);\n\n       expect(foundation.close).not.toHaveBeenCalledWith(jasmine.any(String));\n     });\n\n  it('escape keydown closes the dialog (via key property)', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n    foundation.handleDocumentKeydown({key: 'Escape'} as KeyboardEvent);\n\n    expect(foundation.close)\n        .toHaveBeenCalledWith(foundation.getEscapeKeyAction());\n  });\n\n  it('escape keydown closes the dialog (via keyCode property)', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n    foundation.handleDocumentKeydown({keyCode: 27} as KeyboardEvent);\n\n    expect(foundation.close)\n        .toHaveBeenCalledWith(foundation.getEscapeKeyAction());\n  });\n\n  it('escape keydown does nothing if escapeKeyAction is set to empty string',\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.setEscapeKeyAction('');\n       foundation.open();\n       foundation.handleDocumentKeydown({key: 'Escape'} as KeyboardEvent);\n\n       expect(foundation.close)\n           .not.toHaveBeenCalledWith(foundation.getEscapeKeyAction());\n     });\n\n  it('keydown does nothing when key other than escape is pressed', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n    foundation.handleDocumentKeydown({key: 'Enter'} as KeyboardEvent);\n\n    expect(foundation.close)\n        .not.toHaveBeenCalledWith(foundation.getEscapeKeyAction());\n  });\n\n  it('#getAutoStackButtons reflects setting of #setAutoStackButtons', () => {\n    const {foundation} = setupTest();\n    foundation.setAutoStackButtons(false);\n    expect(foundation.getAutoStackButtons()).toBe(false);\n    foundation.setAutoStackButtons(true);\n    expect(foundation.getAutoStackButtons()).toBe(true);\n  });\n\n  it('#getEscapeKeyAction reflects setting of #setEscapeKeyAction', () => {\n    const {foundation} = setupTest();\n    const action = 'foo';\n    foundation.setEscapeKeyAction(action);\n    expect(foundation.getEscapeKeyAction()).toBe(action);\n  });\n\n  it('#getScrimClickAction reflects setting of #setScrimClickAction', () => {\n    const {foundation} = setupTest();\n    const action = 'foo';\n    foundation.setScrimClickAction(action);\n    expect(foundation.getScrimClickAction()).toBe(action);\n  });\n\n  it('shows header scroll divider on scrollable full-screen dialogs', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.FULLSCREEN).and.returnValue(true);\n    mockAdapter.isContentScrollable.and.returnValue(true);\n    mockAdapter.registerContentEventHandler.and.callThrough();\n    mockAdapter.isScrollableContentAtTop.and.returnValue(false);\n\n    foundation.open();\n    foundation['handleScrollEvent']();\n    jasmine.clock().tick(1);\n\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_HEADER);\n  });\n\n  it('removes header scroll divider on scrollable full-screen dialogs when content is at top',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.FULLSCREEN)\n           .and.returnValue(true);\n       mockAdapter.isContentScrollable.and.returnValue(true);\n       mockAdapter.registerContentEventHandler.and.callThrough();\n       mockAdapter.isScrollableContentAtTop.and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.SCROLL_DIVIDER_HEADER)\n           .and.returnValue(true);\n\n       foundation.open();\n       foundation['handleScrollEvent']();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_HEADER);\n     });\n\n  it('shows footer scroll divider on scrollable full-screen dialogs', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.FULLSCREEN).and.returnValue(true);\n    mockAdapter.isContentScrollable.and.returnValue(true);\n    mockAdapter.registerContentEventHandler.and.callThrough();\n    mockAdapter.isScrollableContentAtBottom.and.returnValue(false);\n\n    foundation.open();\n    foundation['handleScrollEvent']();\n    jasmine.clock().tick(1);\n\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_FOOTER);\n  });\n\n  it('removes footer scroll divider on scrollable full-screen dialogs when content is at bottom',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.FULLSCREEN)\n           .and.returnValue(true);\n       mockAdapter.isContentScrollable.and.returnValue(true);\n       mockAdapter.registerContentEventHandler.and.callThrough();\n       mockAdapter.isScrollableContentAtBottom.and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.SCROLL_DIVIDER_FOOTER)\n           .and.returnValue(true);\n\n       foundation.open();\n       foundation['handleScrollEvent']();\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.SCROLL_DIVIDER_FOOTER);\n     });\n\n  it('#showSurfaceScrim adds css classes to show surface scrim', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.showSurfaceScrim();\n\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_SHOWING);\n    // tick to wait for next animation frame\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(100);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_SHOWN);\n  });\n\n  it('#hideSurfaceScrim adds css classes to hide surface scrim', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.hideSurfaceScrim();\n\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_SHOWN);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_HIDING);\n  });\n\n  it('#handleSurfaceScrimTransitionEnd removes surface-scrim animation classes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleSurfaceScrimTransitionEnd();\n\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_SHOWING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.SURFACE_SCRIM_HIDING);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-dialog/test/mdc-dialog.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-dialog.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-dialog/test/util.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {FocusTrap} from '../../mdc-dom/focus-trap';\nimport {createFixture, html} from '../../../testing/dom';\nimport * as util from '../util';\n\ndescribe('MDCDialog - util', () => {\n  it('createFocusTrapInstance creates a properly configured focus trap instance with all args specified',\n     () => {\n       const surface = document.createElement('div');\n       const yesBtn = document.createElement('button');\n       const focusTrapFactory = jasmine.createSpy('focusTrapFactory');\n       const properlyConfiguredFocusTrapInstance: FocusTrap = {} as FocusTrap;\n       focusTrapFactory\n           .withArgs(surface, {\n             initialFocusEl: yesBtn,\n           })\n           .and.returnValue(properlyConfiguredFocusTrapInstance);\n\n       const instance =\n           util.createFocusTrapInstance(surface, focusTrapFactory, yesBtn);\n       expect(instance).toEqual(properlyConfiguredFocusTrapInstance);\n     });\n\n  it('isScrollable returns false when element is null', () => {\n    expect(util.isScrollable(null)).toBe(false);\n  });\n\n  it('isScrollable returns false when element has no content', () => {\n    const parent = document.createElement('div');\n\n    // Element.scrollHeight only returns the correct value when the element is\n    // attached to the DOM.\n    document.body.appendChild(parent);\n    try {\n      expect(util.isScrollable(parent)).toBe(false);\n    } finally {\n      document.body.removeChild(parent);\n    }\n  });\n\n  it('isScrollable returns false when element content does not overflow its bounding box',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 10px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(false);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('isScrollable returns true when element content overflows its bounding box',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 30px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(true);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('isScrollAtTop returns true when scrollable content has not been scrolled',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 30px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(true);\n         expect(util.isScrollAtTop(parent)).toBe(true);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('isScrollAtTop returns false when scrollable content has been scrolled',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 30px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(true);\n         parent.scrollTop = 10;\n         expect(util.isScrollAtTop(parent)).toBe(false);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('isScrollAtBottom returns false when scrollable content is not scrolled to the bottom',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 30px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(true);\n         expect(util.isScrollAtBottom(parent)).toBe(false);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('isScrollAtBottom returns true when scrollable content has been scrolled to the bottom',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"height: 20px; overflow: auto;\">\n           <div style=\"height: 30px;\"></div>\n         </div>`);\n\n       // Element.scrollHeight only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.isScrollable(parent)).toBe(true);\n         parent.scrollTop = 10;\n         expect(util.isScrollAtBottom(parent)).toBe(true);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('areTopsMisaligned returns false when array is empty', () => {\n    expect(util.areTopsMisaligned([])).toBe(false);\n  });\n\n  it('areTopsMisaligned returns false when array only contains one element',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"display: flex;\n                     position: relative;\n                     flex-direction: row;\n                     flex-wrap: wrap;\n                     align-items: center;\n                     justify-content: flex-end;\">\n           <button>1</button>\n         </div>`);\n       const buttons = Array.from(parent.querySelectorAll('button'));\n\n       // HTMLElement.offsetTop only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.areTopsMisaligned(buttons)).toBe(false);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('areTopsMisaligned returns false when elements have same offsetTop',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"display: flex;\n                     position: relative;\n                     flex-direction: row;\n                     flex-wrap: wrap;\n                     align-items: center;\n                     justify-content: flex-end;\">\n           <button>1</button>\n           <button>2</button>\n         </div>`);\n       const buttons = Array.from(parent.querySelectorAll('button'));\n\n       // HTMLElement.offsetTop only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.areTopsMisaligned(buttons)).toBe(false);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n\n  it('areTopsMisaligned returns true when elements have different \"top\" values',\n     () => {\n       const parent = createFixture(html`\n         <div style=\"display: flex;\n                     position: relative;\n                     flex-direction: column;\n                     flex-wrap: wrap;\n                     align-items: center;\n                     justify-content: flex-end;\">\n           <button>1</button>\n           <button>2</button>\n         </div>`);\n       const buttons = Array.from(parent.querySelectorAll('button'));\n\n       // HTMLElement.offsetTop only returns the correct value when the element\n       // is attached to the DOM.\n       document.body.appendChild(parent);\n       try {\n         expect(util.areTopsMisaligned(buttons)).toBe(true);\n       } finally {\n         document.body.removeChild(parent);\n       }\n     });\n});\n"
  },
  {
    "path": "packages/mdc-dialog/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCDialogCloseEventDetail {\n  action?: string;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCDialogCloseEvent extends Event {\n  readonly detail: MDCDialogCloseEventDetail;\n}\n\n\n/**\n * Options for how to configure the dialog.\n */\nexport interface DialogConfigOptions {\n  // Boolean indicating whether or not the dialog being opened is a confirmation\n  // dialog opened on top of a full-screen dialog (the only time multiple\n  // dialogs should be open on top of one another).\n  isAboveFullscreenDialog?: boolean;\n  // Boolean indicating whether or not the dialog blocks background document\n  // scrolling.\n  isScrimless?: boolean;\n}\n"
  },
  {
    "path": "packages/mdc-dialog/util.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {FocusOptions, FocusTrap} from '@material/dom/focus-trap';\n\nexport type MDCDialogFocusTrapFactory = (\n    element: HTMLElement,\n    options: FocusOptions,\n    ) => FocusTrap;\n\nexport function createFocusTrapInstance(\n    surfaceEl: HTMLElement,\n    focusTrapFactory: MDCDialogFocusTrapFactory,\n    initialFocusEl?: HTMLElement,\n    ): FocusTrap {\n  return focusTrapFactory(surfaceEl, {initialFocusEl});\n}\n\nexport function isScrollable(el: HTMLElement|null): boolean {\n  return el ? el.scrollHeight > el.offsetHeight : false;\n}\n\n/**\n * For scrollable content, returns true if the content has not been scrolled\n * (that is, the scroll content is as the \"top\"). This is used in full-screen\n * dialogs, where the scroll divider is expected only to appear once the\n * content has been scrolled \"underneath\" the header bar.\n */\nexport function isScrollAtTop(el: HTMLElement|null) {\n  return el ? el.scrollTop === 0 : false;\n}\n\n/**\n * For scrollable content, returns true if the content has been scrolled all the\n * way to the bottom. This is used in full-screen dialogs, where the footer\n * scroll divider is expected only to appear when the content is \"cut-off\" by\n * the footer bar.\n */\nexport function isScrollAtBottom(el: HTMLElement|null) {\n  return el ? Math.ceil(el.scrollHeight - el.scrollTop) === el.clientHeight :\n              false;\n}\n\nexport function areTopsMisaligned(els: HTMLElement[]): boolean {\n  const tops = new Set();\n  [].forEach.call(els, (el: HTMLElement) => tops.add(el.offsetTop));\n  return tops.size > 1;\n}\n"
  },
  {
    "path": "packages/mdc-dom/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-dom/README.md",
    "content": "<!--docs:\ntitle: \"DOM\"\nlayout: detail\nsection: components\nexcerpt: \"Provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.\"\npath: /catalog/dom/\n-->\n\n# DOM\n\nMDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.\n\nMost of the time, you shouldn't need to depend on `mdc-dom` directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.\n\n## Installation\n\n```\nnpm install @material/dom\n```\n\n## Basic Usage\n\n```js\nimport * as ponyfill from '@material/dom/ponyfill';\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Ponyfill Functions\n\nThe `ponyfill` module provides the following functions:\n\nFunction Signature | Description\n--- | ---\n`closest(element: Element, selector: string) => ?Element` | Returns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or `null` if no matching ancestor is found.\n`matches(element: Element, selector: string) => boolean` | Returns true if the given element matches the given CSS selector.\n`estimateScrollWidth(element: Element) => number`  | Returns the true optical width of the element if visible or an estimation if hidden by a parent element with `display: none;`.\n\n## Event Functions\n\nExternal frameworks and libraries can use the following event utility methods.\n\nMethod Signature | Description\n--- | ---\n`util.applyPassive(globalObj = window) => object` | Determine whether the current browser supports passive event listeners\n\n## Focus Trap\n\nThe `FocusTrap` utility traps focus within a given element. It is intended for usage from MDC-internal\ncomponents like dialog and modal drawer.\n\nMethod Signature | Description\n--- | ---\n`trapFocus() => void` | Traps focus in the root element. Also focuses on `initialFocusEl` if set; otherwise, sets initial focus to the first focusable child element.\n`releaseFocus() => void` | Releases focus from the root element. Also restores focus to the previously focused element.\n\n## Announce\n\nThe `announce` utility file contains a single helper method for announcing a message via an `aria-live` region. It is intended for usage from MDC-internal components.\n\nMethod Signature | Description\n--- | ---\n`announce(message: string, options?: AnnouncerMessageOptions) => void` | Announces the message via an `aria-live` region with the given options. `AnnouncerMessageOptions.priority` defaults to polite and `AnnouncerMessageOptions.ownerDocument` defaults to the global document.\n<!-- TODO(b/148462294): Remove once only exported members are required in docs `say()` --> <!-- | --> <!-- DO NOT USE -->\n\n## Keyboard\n\nThe `keyboard` utility provides helper methods for normalizing `KeyboardEvent` keys across browsers. It is intended for usage from MDC-internal components.\n\nMethod Signature | Description\n--- | ---\n`normalizeKey(event: KeyboardEvent) => string` | Returns a normalized string derived from `KeyboardEvent`'s `keyCode` property to be standard across browsers.\n`isNavigationEvent(event: KeyboardEvent) => boolean` | Returns `true` if the event is a navigation event (Page Up, Page Down, Home, End, Left, Up, Right, Down).\n\n## Mixins\n\nThe module provides a single SASS mixin which helps improves a DOM element's UX for high-contrast mode users.\n\nMixin | Description\n--- | ---\n`transparent-border` | Emits necessary layout styles to set a transparent border around an element without interfering with the rest of its component layout. The border is only visible in high-contrast mode. The target element should be a child of a relatively positioned top-level element (i.e. a ::before pseudo-element).\n"
  },
  {
    "path": "packages/mdc-dom/_dom.scss",
    "content": "// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n  $border-width: 1px,\n  $border-style: solid,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    @include rtl.ignore-next-line();\n    left: 0;\n    border: $border-width $border-style transparent;\n    border-radius: inherit;\n    content: '';\n    pointer-events: none;\n  }\n\n  // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n  @include forced-colors-mode($exclude-ie11: true) {\n    @include feature-targeting.targets($feat-structure) {\n      border-color: CanvasText;\n    }\n  }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    clip: rect(1px, 1px, 1px, 1px);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap; /* added line */\n    width: 1px;\n  }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    @content;\n  }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n  @if $exclude-ie11 {\n    @media screen and (forced-colors: active) {\n      @content;\n    }\n  } @else {\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      @content;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dom/_index.scss",
    "content": "@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-dom/_mixins.scss",
    "content": "// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n/// @deprecated Import '_dom.scss' instead.\n@forward './dom' show transparent-border, visually-hidden, forced-colors-mode;\n"
  },
  {
    "path": "packages/mdc-dom/announce.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Priorities for the announce function.\n */\nexport enum AnnouncerPriority {\n  POLITE = 'polite',\n  ASSERTIVE = 'assertive',\n}\n\n/**\n * Options for the announce function.\n */\nexport interface AnnouncerMessageOptions {\n  priority?: AnnouncerPriority;\n  ownerDocument?: Document;\n}\n\n/**\n * Data attribute added to live region element.\n */\nexport const DATA_MDC_DOM_ANNOUNCE = 'data-mdc-dom-announce';\n\n/**\n * Announces the given message with optional priority, defaulting to \"polite\"\n */\nexport function announce(message: string, options?: AnnouncerMessageOptions) {\n  Announcer.getInstance().say(message, options);\n}\n\nclass Announcer {\n  private static instance: Announcer;\n  private readonly liveRegions: Map<Document, Map<AnnouncerPriority, Element>>;\n\n  static getInstance(): Announcer {\n    if (!Announcer.instance) {\n      Announcer.instance = new Announcer();\n    }\n\n    return Announcer.instance;\n  }\n\n  // Constructor made private to ensure only the singleton is used\n  private constructor() {\n    this.liveRegions = new Map();\n  }\n\n  say(message: string, options?: AnnouncerMessageOptions) {\n    const priority = options?.priority ?? AnnouncerPriority.POLITE;\n    const ownerDocument = options?.ownerDocument ?? document;\n    const liveRegion = this.getLiveRegion(priority, ownerDocument);\n    // Reset the region to pick up the message, even if the message is the\n    // exact same as before.\n    liveRegion.textContent = '';\n    // Timeout is necessary for screen readers like NVDA and VoiceOver.\n    setTimeout(() => {\n      liveRegion.textContent = message;\n      ownerDocument.addEventListener('click', clearLiveRegion);\n    }, 1);\n\n    function clearLiveRegion() {\n      liveRegion.textContent = '';\n      ownerDocument.removeEventListener('click', clearLiveRegion);\n    }\n  }\n\n  private getLiveRegion(priority: AnnouncerPriority, ownerDocument: Document):\n      Element {\n    let documentLiveRegions = this.liveRegions.get(ownerDocument);\n    if (!documentLiveRegions) {\n      documentLiveRegions = new Map();\n      this.liveRegions.set(ownerDocument, documentLiveRegions);\n    }\n\n    const existingLiveRegion = documentLiveRegions.get(priority);\n    if (existingLiveRegion && ownerDocument.body.contains(existingLiveRegion)) {\n      return existingLiveRegion;\n    }\n\n    const liveRegion = this.createLiveRegion(priority, ownerDocument);\n    documentLiveRegions.set(priority, liveRegion);\n    return liveRegion;\n  }\n\n  private createLiveRegion(\n      priority: AnnouncerPriority, ownerDocument: Document): HTMLDivElement {\n    const el = ownerDocument.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '-9999px';\n    el.style.left = '-9999px';\n    el.style.height = '1px';\n    el.style.overflow = 'hidden';\n    el.setAttribute('aria-atomic', 'true');\n    el.setAttribute('aria-live', priority);\n    el.setAttribute(DATA_MDC_DOM_ANNOUNCE, 'true');\n    ownerDocument.body.appendChild(el);\n    return el;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dom/events.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Determine whether the current browser supports passive event listeners, and\n * if so, use them.\n */\nexport function applyPassive(globalObj: Window = window): boolean|\n    EventListenerOptions {\n  return supportsPassiveOption(globalObj) ?\n      {passive: true} as AddEventListenerOptions :\n      false;\n}\n\nfunction supportsPassiveOption(globalObj: Window = window): boolean {\n  // See\n  // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\n  let passiveSupported = false;\n\n  try {\n    const options = {\n      // This function will be called when the browser\n      // attempts to access the passive property.\n      get passive() {\n        passiveSupported = true;\n        return false;\n      }\n    };\n\n    const handler = () => {};\n    globalObj.document.addEventListener('test', handler, options);\n    globalObj.document.removeEventListener(\n        'test', handler, options as EventListenerOptions);\n  } catch (err) {\n    passiveSupported = false;\n  }\n\n  return passiveSupported;\n}\n"
  },
  {
    "path": "packages/mdc-dom/focus-trap.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';\n\n/**\n * Utility to trap focus in a given root element, e.g. for modal components such\n * as dialogs. The root should have at least one focusable child element,\n * for setting initial focus when trapping focus.\n * Also tracks the previously focused element, and restores focus to that\n * element when releasing focus.\n */\nexport class FocusTrap {\n  // Previously focused element before trapping focus.\n  private elFocusedBeforeTrapFocus: HTMLElement|null = null;\n\n  constructor(\n      private readonly root: HTMLElement,\n      private readonly options: FocusOptions = {}) {}\n\n  /**\n   * Traps focus in `root`. Also focuses on either `initialFocusEl` if set;\n   * otherwises sets initial focus to the first focusable child element.\n   */\n  trapFocus() {\n    const focusableEls = this.getFocusableElements(this.root);\n    if (focusableEls.length === 0) {\n      throw new Error(\n          'FocusTrap: Element must have at least one focusable child.');\n    }\n\n    this.elFocusedBeforeTrapFocus =\n        document.activeElement instanceof HTMLElement ? document.activeElement :\n                                                        null;\n    this.wrapTabFocus(this.root);\n\n    if (!this.options.skipInitialFocus) {\n      this.focusInitialElement(focusableEls, this.options.initialFocusEl);\n    }\n  }\n\n  /**\n   * Releases focus from `root`. Also restores focus to the previously focused\n   * element.\n   */\n  releaseFocus() {\n    Array\n        .from(\n            this.root.querySelectorAll<HTMLElement>(`.${FOCUS_SENTINEL_CLASS}`))\n        .forEach((sentinelEl: HTMLElement) => {\n          sentinelEl.parentElement!.removeChild(sentinelEl);\n        });\n\n    if (!this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus) {\n      this.elFocusedBeforeTrapFocus.focus();\n    }\n  }\n\n  /**\n   * Wraps tab focus within `el` by adding two hidden sentinel divs which are\n   * used to mark the beginning and the end of the tabbable region. When\n   * focused, these sentinel elements redirect focus to the first/last\n   * children elements of the tabbable region, ensuring that focus is trapped\n   * within that region.\n   */\n  private wrapTabFocus(el: HTMLElement) {\n    const sentinelStart = this.createSentinel();\n    const sentinelEnd = this.createSentinel();\n\n    sentinelStart.addEventListener('focus', () => {\n      const focusableEls = this.getFocusableElements(el);\n      if (focusableEls.length > 0) {\n        focusableEls[focusableEls.length - 1].focus();\n      }\n    });\n    sentinelEnd.addEventListener('focus', () => {\n      const focusableEls = this.getFocusableElements(el);\n      if (focusableEls.length > 0) {\n        focusableEls[0].focus();\n      }\n    });\n\n    el.insertBefore(sentinelStart, el.children[0]);\n    el.appendChild(sentinelEnd);\n  }\n\n  /**\n   * Focuses on `initialFocusEl` if defined and a child of the root element.\n   * Otherwise, focuses on the first focusable child element of the root.\n   */\n  private focusInitialElement(\n      focusableEls: HTMLElement[], initialFocusEl?: HTMLElement) {\n    let focusIndex = 0;\n    if (initialFocusEl) {\n      focusIndex = Math.max(focusableEls.indexOf(initialFocusEl), 0);\n    }\n    focusableEls[focusIndex].focus();\n  }\n\n  private getFocusableElements(root: HTMLElement): HTMLElement[] {\n    const focusableEls = Array.from(root.querySelectorAll<HTMLElement>(\n        '[autofocus], [tabindex], a, input, textarea, select, button'));\n    return focusableEls.filter((el) => {\n      const isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||\n          el.getAttribute('disabled') != null ||\n          el.getAttribute('hidden') != null ||\n          el.getAttribute('aria-hidden') === 'true';\n      const isTabbableAndVisible = el.tabIndex >= 0 &&\n          el.getBoundingClientRect().width > 0 &&\n          !el.classList.contains(FOCUS_SENTINEL_CLASS) && !isDisabledOrHidden;\n\n      let isProgrammaticallyHidden = false;\n      if (isTabbableAndVisible) {\n        const style = getComputedStyle(el);\n        isProgrammaticallyHidden =\n            style.display === 'none' || style.visibility === 'hidden';\n      }\n      return isTabbableAndVisible && !isProgrammaticallyHidden;\n    });\n  }\n\n  private createSentinel() {\n    const sentinel = document.createElement('div');\n    sentinel.setAttribute('tabindex', '0');\n    // Don't announce in screen readers.\n    sentinel.setAttribute('aria-hidden', 'true');\n    sentinel.classList.add(FOCUS_SENTINEL_CLASS);\n    return sentinel;\n  }\n}\n\n/** Customization options. */\nexport interface FocusOptions {\n  // The element to focus initially when trapping focus.\n  //  Must be a child of the root element.\n  initialFocusEl?: HTMLElement;\n\n  // Whether to skip initially focusing on any element when trapping focus.\n  // By default, focus is set on the first focusable child element of the root.\n  // This is useful if the caller wants to handle setting initial focus.\n  skipInitialFocus?: boolean;\n\n  // Whether to restore focus on the previously focused element when releasing\n  // focus. This is useful if the caller wants to handle restoring focus.\n  skipRestoreFocus?: boolean;\n}\n"
  },
  {
    "path": "packages/mdc-dom/index.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as events from './events';\nimport * as focusTrap from './focus-trap';\nimport * as keyboard from './keyboard';\nimport * as ponyfill from './ponyfill';\n\nexport {events, focusTrap, keyboard, ponyfill};\n"
  },
  {
    "path": "packages/mdc-dom/keyboard.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * KEY provides normalized string values for keys.\n */\nexport const KEY = {\n  UNKNOWN: 'Unknown',\n  BACKSPACE: 'Backspace',\n  ENTER: 'Enter',\n  SPACEBAR: 'Spacebar',\n  PAGE_UP: 'PageUp',\n  PAGE_DOWN: 'PageDown',\n  END: 'End',\n  HOME: 'Home',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_UP: 'ArrowUp',\n  ARROW_RIGHT: 'ArrowRight',\n  ARROW_DOWN: 'ArrowDown',\n  DELETE: 'Delete',\n  ESCAPE: 'Escape',\n  TAB: 'Tab',\n};\n\nconst normalizedKeys = new Set<string>();\n// IE11 has no support for new Map with iterable so we need to initialize this\n// by hand.\nnormalizedKeys.add(KEY.BACKSPACE);\nnormalizedKeys.add(KEY.ENTER);\nnormalizedKeys.add(KEY.SPACEBAR);\nnormalizedKeys.add(KEY.PAGE_UP);\nnormalizedKeys.add(KEY.PAGE_DOWN);\nnormalizedKeys.add(KEY.END);\nnormalizedKeys.add(KEY.HOME);\nnormalizedKeys.add(KEY.ARROW_LEFT);\nnormalizedKeys.add(KEY.ARROW_UP);\nnormalizedKeys.add(KEY.ARROW_RIGHT);\nnormalizedKeys.add(KEY.ARROW_DOWN);\nnormalizedKeys.add(KEY.DELETE);\nnormalizedKeys.add(KEY.ESCAPE);\nnormalizedKeys.add(KEY.TAB);\n\nconst KEY_CODE = {\n  BACKSPACE: 8,\n  ENTER: 13,\n  SPACEBAR: 32,\n  PAGE_UP: 33,\n  PAGE_DOWN: 34,\n  END: 35,\n  HOME: 36,\n  ARROW_LEFT: 37,\n  ARROW_UP: 38,\n  ARROW_RIGHT: 39,\n  ARROW_DOWN: 40,\n  DELETE: 46,\n  ESCAPE: 27,\n  TAB: 9,\n};\n\nconst mappedKeyCodes = new Map<number, string>();\n// IE11 has no support for new Map with iterable so we need to initialize this\n// by hand.\nmappedKeyCodes.set(KEY_CODE.BACKSPACE, KEY.BACKSPACE);\nmappedKeyCodes.set(KEY_CODE.ENTER, KEY.ENTER);\nmappedKeyCodes.set(KEY_CODE.SPACEBAR, KEY.SPACEBAR);\nmappedKeyCodes.set(KEY_CODE.PAGE_UP, KEY.PAGE_UP);\nmappedKeyCodes.set(KEY_CODE.PAGE_DOWN, KEY.PAGE_DOWN);\nmappedKeyCodes.set(KEY_CODE.END, KEY.END);\nmappedKeyCodes.set(KEY_CODE.HOME, KEY.HOME);\nmappedKeyCodes.set(KEY_CODE.ARROW_LEFT, KEY.ARROW_LEFT);\nmappedKeyCodes.set(KEY_CODE.ARROW_UP, KEY.ARROW_UP);\nmappedKeyCodes.set(KEY_CODE.ARROW_RIGHT, KEY.ARROW_RIGHT);\nmappedKeyCodes.set(KEY_CODE.ARROW_DOWN, KEY.ARROW_DOWN);\nmappedKeyCodes.set(KEY_CODE.DELETE, KEY.DELETE);\nmappedKeyCodes.set(KEY_CODE.ESCAPE, KEY.ESCAPE);\nmappedKeyCodes.set(KEY_CODE.TAB, KEY.TAB);\n\nconst navigationKeys = new Set<string>();\n// IE11 has no support for new Set with iterable so we need to initialize this\n// by hand.\nnavigationKeys.add(KEY.PAGE_UP);\nnavigationKeys.add(KEY.PAGE_DOWN);\nnavigationKeys.add(KEY.END);\nnavigationKeys.add(KEY.HOME);\nnavigationKeys.add(KEY.ARROW_LEFT);\nnavigationKeys.add(KEY.ARROW_UP);\nnavigationKeys.add(KEY.ARROW_RIGHT);\nnavigationKeys.add(KEY.ARROW_DOWN);\n\n/**\n * normalizeKey returns the normalized string for a navigational action.\n */\nexport function normalizeKey(event: KeyboardEvent): string {\n  const {key} = event;\n  // If the event already has a normalized key, return it\n  if (normalizedKeys.has(key)) {\n    return key;\n  }\n\n  // tslint:disable-next-line:deprecation\n  const mappedKey = mappedKeyCodes.get(event.keyCode);\n  if (mappedKey) {\n    return mappedKey;\n  }\n  return KEY.UNKNOWN;\n}\n\n/**\n * isNavigationEvent returns whether the event is a navigation event\n */\nexport function isNavigationEvent(event: KeyboardEvent): boolean {\n  return navigationKeys.has(normalizeKey(event));\n}\n"
  },
  {
    "path": "packages/mdc-dom/package.json",
    "content": "{\n  \"name\": \"@material/dom\",\n  \"description\": \"DOM manipulation utilities for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.dom.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-dom\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-dom/ponyfill.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview A \"ponyfill\" is a polyfill that doesn't modify the global\n * prototype chain. This makes ponyfills safer than traditional polyfills,\n * especially for libraries like MDC.\n */\n\nexport function closest(element: Element, selector: string): Element|null {\n  if (element.closest) {\n    return element.closest(selector);\n  }\n\n  let el: Element|null = element;\n  while (el) {\n    if (matches(el, selector)) {\n      return el;\n    }\n    el = el.parentElement;\n  }\n  return null;\n}\n\n/** Element.matches with support for webkit and IE. */\nexport function matches(element: Element, selector: string): boolean {\n  const nativeMatches = element.matches || element.webkitMatchesSelector ||\n      (element as any).msMatchesSelector;\n  return nativeMatches.call(element, selector);\n}\n\n/**\n * Used to compute the estimated scroll width of elements. When an element is\n * hidden due to display: none; being applied to a parent element, the width is\n * returned as 0. However, the element will have a true width once no longer\n * inside a display: none context. This method computes an estimated width when\n * the element is hidden or returns the true width when the element is visble.\n * @param {Element} element the element whose width to estimate\n */\nexport function estimateScrollWidth(element: Element): number {\n  // Check the offsetParent. If the element inherits display: none from any\n  // parent, the offsetParent property will be null (see\n  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).\n  // This check ensures we only clone the node when necessary.\n  const htmlEl = element as HTMLElement;\n  if (htmlEl.offsetParent !== null) {\n    return htmlEl.scrollWidth;\n  }\n\n  const clone = htmlEl.cloneNode(true) as HTMLElement;\n  clone.style.setProperty('position', 'absolute');\n  clone.style.setProperty('transform', 'translate(-9999px, -9999px)');\n  document.documentElement.appendChild(clone);\n  const scrollWidth = clone.scrollWidth;\n  document.documentElement.removeChild(clone);\n  return scrollWidth;\n}\n"
  },
  {
    "path": "packages/mdc-dom/test/announce.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {announce, AnnouncerPriority, DATA_MDC_DOM_ANNOUNCE} from '../announce';\n\nconst LIVE_REGION_SELECTOR = `[${DATA_MDC_DOM_ANNOUNCE}=\"true\"]`;\n\ndescribe('announce', () => {\n  setUpMdcTestEnvironment();\n\n  afterEach(() => {\n    const liveRegions = document.querySelectorAll(LIVE_REGION_SELECTOR);\n    for (let i = 0; i < liveRegions.length; i++) {\n      const liveRegion = liveRegions[i];\n      if (!liveRegion.parentNode) continue;\n      liveRegion.parentNode.removeChild(liveRegion);\n    }\n  });\n\n  it('creates an aria-live=\"polite\" region by default', () => {\n    announce('Foo');\n    jasmine.clock().tick(1);\n    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);\n    expect(liveRegion!.textContent).toEqual('Foo');\n  });\n\n  it('creates an aria-live=\"assertive\" region if specified', () => {\n    announce('Bar', {priority: AnnouncerPriority.ASSERTIVE});\n    jasmine.clock().tick(1);\n    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);\n    expect(liveRegion!.textContent).toEqual('Bar');\n  });\n\n  it('uses the provided ownerDocument for announcements', () => {\n    const ownerDocument = document.implementation.createHTMLDocument('Title');\n    announce('custom ownerDocument', {ownerDocument});\n    const globalDocumentLiveRegion =\n        document.querySelector(LIVE_REGION_SELECTOR);\n    expect(globalDocumentLiveRegion).toBeNull();\n    const ownerDocumentLiveRegion =\n        ownerDocument.querySelector(LIVE_REGION_SELECTOR);\n    expect(ownerDocumentLiveRegion).toBeDefined();\n  });\n\n  it('sets live region content after a timeout', () => {\n    announce('Baz');\n    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);\n    expect(liveRegion!.textContent).toEqual('');\n    jasmine.clock().tick(1);\n    expect(liveRegion!.textContent).toEqual('Baz');\n  });\n\n  it('reuses same live region on successive calls per document', () => {\n    const secondDocument = document.implementation.createHTMLDocument('Title');\n    announce('aaa');\n    announce('aaa', {ownerDocument: secondDocument});\n    announce('bbb');\n    announce('bbb', {ownerDocument: secondDocument});\n    announce('ccc');\n    announce('ccc', {ownerDocument: secondDocument});\n\n    const globalDocumentLiveRegions =\n        document.querySelectorAll(LIVE_REGION_SELECTOR);\n    expect(globalDocumentLiveRegions.length).toEqual(1);\n    const secondDocumentLiveRegions =\n        secondDocument.querySelectorAll(LIVE_REGION_SELECTOR);\n    expect(secondDocumentLiveRegions.length).toEqual(1);\n  });\n\n  it('sets the latest message during immediate successive', () => {\n    announce('1');\n    announce('2');\n    announce('3');\n    jasmine.clock().tick(1);\n    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);\n    expect(liveRegion!.textContent).toEqual('3');\n  });\n\n  it('clears out the message on click', () => {\n    announce('hello');\n    jasmine.clock().tick(1);\n    const liveRegion = document.querySelector(LIVE_REGION_SELECTOR);\n    expect(liveRegion!.textContent).toEqual('hello');\n    document.documentElement.click();\n    expect(liveRegion!.textContent).toEqual('');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-dom/test/events.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {applyPassive} from '../events';\n\ndescribe('MDCDom - events', () => {\n  it('applyPassive returns an options object for browsers that support passive event listeners',\n     () => {\n       const mockWindow = {\n         document: {\n           addEventListener(\n               name: string, method: Function,\n               options: AddEventListenerOptions) {\n             const passive = options.passive;\n             return {passive, name, method};\n           },\n           removeEventListener() {},\n         },\n       } as unknown as Window;\n       expect(applyPassive(mockWindow)).toEqual({\n         passive: true\n       } as EventListenerOptions);\n     });\n\n  it('applyPassive returns false for browsers that do not support passive event listeners',\n     () => {\n       const mockWindow = {\n         document: {\n           addEventListener() {\n             throw new Error();\n           },\n           removeEventListener() {},\n         },\n       } as unknown as Window;\n       expect(applyPassive(mockWindow)).toBeFalsy();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-dom/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as dom;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include dom.transparent-border($query: $query);\n    @include dom.visually-hidden($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-dom/test/focus-trap.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {FocusTrap} from '../focus-trap';\n\nconst FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div id=\"root\">\n      <button>Hello</button>\n      <div id=\"container1_innerDiv\">\n        <div id=\"con1a\" tabindex=\"0\">1a</div>\n        <div id=\"inner_container\">\n          <div id=\"con1b\" tabindex=\"0\">1b</div>\n        </div>\n      </div>\n      <div id=\"container2_standard\">\n        <div id=\"con2a\" tabindex=\"0\">2a</div>\n        <div id=\"con2b\" tabindex=\"0\">2b</div>\n      </div>\n      <div id=\"container3_notVisibleElements\">\n        <div id=\"con3a\" tabindex=\"0\" style=\"display: none\">3a</div>\n        <div id=\"con3b\" tabindex=\"0\" style=\"visibility: hidden\">3b</div>\n        <div id=\"con3c\" tabindex=\"0\">3c</div>\n      </div>\n      <div id=\"container4_disabledOrHiddenElements\">\n        <input id=\"con4a\" disabled>\n        <input id=\"con4b\" aria-disabled=\"true\">\n        <input id=\"con4c\" disabled=\"false\">\n        <input id=\"con4d\" hidden>\n        <input id=\"con4d\" aria-hidden=\"true\">\n        <input id=\"con4e\" aria-disabled=\"false\">\n      </div>\n      <div id=\"container5_noFocusableChild\">\n        <div id=\"con5a\">5a</div>\n      </div>\n    </div>`);\n}\n\nfunction setUp() {\n  const root = getFixture();\n  document.body.appendChild(root);\n  const button = root.querySelector('button')!;\n  const container1 = root.querySelector<HTMLElement>('#container1_innerDiv')!;\n  const container2 = root.querySelector<HTMLElement>('#container2_standard')!;\n  const container3 =\n      root.querySelector<HTMLElement>('#container3_notVisibleElements')!;\n  const container4 =\n      root.querySelector<HTMLElement>('#container4_disabledOrHiddenElements')!;\n  const container5 =\n      root.querySelector<HTMLElement>('#container5_noFocusableChild')!;\n  return {button, container1, container2, container3, container4, container5};\n}\n\ndescribe('FocusTrap', () => {\n  afterEach(() => {\n    Array.from(document.querySelectorAll('#root')).forEach((el) => {\n      document.body.removeChild(el);\n    });\n  });\n\n  it('traps focus in the given container element', () => {\n    const {container1, container2} = setUp();\n    const focusTrap1 = new FocusTrap(container1);\n    focusTrap1.trapFocus();\n    expectFocusTrapped(container1, 'con1a', 'con1b');\n\n    const focusTrap2 = new FocusTrap(container2);\n    focusTrap2.trapFocus();\n    expectFocusTrapped(container2, 'con2a', 'con2b');\n  });\n\n  it('releases focus from the given container element', () => {\n    const {container1} = setUp();\n    const focusTrap1 = new FocusTrap(container1);\n    focusTrap1.trapFocus();\n    expectFocusTrapped(container1, 'con1a', 'con1b');\n\n    focusTrap1.releaseFocus();\n    expect(container1.querySelectorAll(`.${FOCUS_SENTINEL_CLASS}`).length)\n        .toBe(0);\n  });\n\n  it('restores focus to previously focused element', () => {\n    const {button, container2} = setUp();\n    const focusTrap = new FocusTrap(container2);\n\n    // First, set focus to button.\n    button.focus();\n    expect(document.activeElement).toBe(button);\n    // Trap focus in `container2`.\n    focusTrap.trapFocus();\n    expect(document.activeElement!.id).toBe('con2a');\n    // Expect focus to be restored to button.\n    focusTrap.releaseFocus();\n    expect(document.activeElement).toBe(button);\n  });\n\n  it('sets initial focus to first visible focusable element', () => {\n    const {container3} = setUp();\n    const focusTrap = new FocusTrap(container3);\n    focusTrap.trapFocus();\n    expect(document.activeElement!.id).toBe('con3c');\n  });\n\n  it('sets initial focus to first non-hidden/non-disabled focusable element',\n     () => {\n       const {container4} = setUp();\n       const focusTrap = new FocusTrap(container4);\n       focusTrap.trapFocus();\n       expect(document.activeElement!.id).toBe('con4e');\n     });\n\n  it('sets initial focus to initialFocusEl', () => {\n    const {container1} = setUp();\n    const initialFocusEl = container1.querySelector<HTMLElement>('#con1b')!;\n    const focusTrap = new FocusTrap(container1, {initialFocusEl});\n    focusTrap.trapFocus();\n    expect(document.activeElement!.id).toBe('con1b');\n  });\n\n  it('does not set initial focus when skipInitialFocus=true', () => {\n    const {button, container1} = setUp();\n    const focusTrap = new FocusTrap(container1, {skipInitialFocus: true});\n\n    // First, set focus to button.\n    button.focus();\n    expect(document.activeElement).toBe(button);\n\n    focusTrap.trapFocus();\n    // Focus should remain on button.\n    expect(document.activeElement).toBe(button);\n  });\n\n  it('does not restore focus when skipRestoreFocus=true', () => {\n    const {button, container2} = setUp();\n    const focusTrap = new FocusTrap(container2, {skipRestoreFocus: true});\n\n    // First, set focus to button.\n    button.focus();\n    expect(document.activeElement).toBe(button);\n    // Trap focus in `container2`.\n    focusTrap.trapFocus();\n    expect(document.activeElement!.id).toBe('con2a');\n    // Expect focus not to have changed.\n    focusTrap.releaseFocus();\n    expect(document.activeElement!.id).toBe('con2a');\n  });\n\n  it('throws an error when trapping focus in an element with 0 focusable elements',\n     () => {\n       const {container5} = setUp();\n       const focusTrap = new FocusTrap(container5);\n       expect(() => {\n         focusTrap.trapFocus();\n       })\n           .toThrow(jasmine.stringMatching(\n               /Element must have at least one focusable child/));\n     });\n});\n\nfunction expectFocusTrapped(\n    el: HTMLElement, firstElementId: string, lastElementId: string) {\n  expect(document.activeElement!.id).toBe(firstElementId);\n  const focusSentinels = el.querySelectorAll(`.${FOCUS_SENTINEL_CLASS}`);\n  const startFocusSentinel = focusSentinels[0] as HTMLElement;\n  const endFocusSentinel = focusSentinels[1] as HTMLElement;\n\n  // Patch #addEventListener to make it synchronous for `focus` events.\n  const fakeFocusHandler = (eventName: string, eventHandler: any) => {\n    if (eventName === 'focus') {\n      eventHandler();\n    }\n  };\n  startFocusSentinel.addEventListener = fakeFocusHandler;\n  endFocusSentinel.addEventListener = fakeFocusHandler;\n\n  // Focus on sentinels gets trapped inside the scope.\n  // Note that we use `emitEvent` here as calling #focus does not seem to\n  // execute the handler synchronously in IE11.\n  emitEvent(startFocusSentinel, 'focus');\n  expect(document.activeElement!.id).toBe(lastElementId);\n  emitEvent(endFocusSentinel, 'focus');\n  expect(document.activeElement!.id).toBe(firstElementId);\n}\n"
  },
  {
    "path": "packages/mdc-dom/test/keyboard.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {isNavigationEvent, KEY, normalizeKey} from '../keyboard';\n\ndescribe('normalizeKey', () => {\n  setUpMdcTestEnvironment();\n\n  const keyCodeTestTable = [\n    {\n      keyCode: 8,  // Backspace\n      key: KEY.BACKSPACE,\n    },\n    {\n      keyCode: 9,  // Tab\n      key: KEY.TAB,\n    },\n    {\n      keyCode: 13,  // Enter\n      key: KEY.ENTER,\n    },\n    {\n      keyCode: 32,  // Spacebar\n      key: KEY.SPACEBAR,\n    },\n    {\n      keyCode: 33,  // Page Up\n      key: KEY.PAGE_UP,\n    },\n    {\n      keyCode: 34,  // Page Down\n      key: KEY.PAGE_DOWN,\n    },\n    {\n      keyCode: 35,  // End\n      key: KEY.END,\n    },\n    {\n      keyCode: 36,  // Home\n      key: KEY.HOME,\n    },\n    {\n      keyCode: 37,  // Arrow Left\n      key: KEY.ARROW_LEFT,\n    },\n    {\n      keyCode: 38,  // Arrow Up\n      key: KEY.ARROW_UP,\n    },\n    {\n      keyCode: 39,  // Arrow Right\n      key: KEY.ARROW_RIGHT,\n    },\n    {\n      keyCode: 40,  // Arrow Down\n      key: KEY.ARROW_DOWN,\n    },\n    {\n      keyCode: 46,  // Delete\n      key: KEY.DELETE,\n    }\n  ];\n\n  for (const {key, keyCode} of keyCodeTestTable) {\n    it(`returns \"${key}\" for keyCode \"${keyCode}\"`, () => {\n      expect(normalizeKey({keyCode} as KeyboardEvent)).toEqual(key);\n    });\n  }\n\n  // IE11 returns non-standard key values\n  // See https://caniuse.com/#feat=keyboardevent-key\n  const nonStandardKeyTestTable = [\n    {\n      keyCode: 32,      // Spacebar\n      key: 'Spacebar',  // IE11's given key value\n      want: KEY.SPACEBAR,\n    },\n    {\n      keyCode: 37,  // Arrow Left\n      key: 'Left',  // IE11's given key value\n      want: KEY.ARROW_LEFT,\n    },\n    {\n      keyCode: 38,  // Arrow Up\n      key: 'Up',    // IE11's given key value\n      want: KEY.ARROW_UP,\n    },\n    {\n      keyCode: 39,   // Arrow Right\n      key: 'Right',  // IE11's given key value\n      want: KEY.ARROW_RIGHT,\n    },\n    {\n      keyCode: 40,  // Arrow Down\n      key: 'Down',  // IE11's given key value\n      want: KEY.ARROW_DOWN,\n    },\n    {\n      keyCode: 46,  // Delete\n      key: 'Del',   // IE11's given key value\n      want: KEY.DELETE,\n    }\n  ];\n\n  for (const {key, keyCode, want} of nonStandardKeyTestTable) {\n    it(`returns \"${want}\" for keyCode \"${keyCode}\"` +\n           ` for non-standard key \"${key}\"`,\n       () => {\n         expect(normalizeKey({keyCode, key} as KeyboardEvent)).toEqual(want);\n       });\n  }\n\n  const keyTestTable = [\n    KEY.BACKSPACE,\n    KEY.TAB,\n    KEY.ENTER,\n    KEY.SPACEBAR,\n    KEY.PAGE_UP,\n    KEY.PAGE_DOWN,\n    KEY.END,\n    KEY.HOME,\n    KEY.ARROW_LEFT,\n    KEY.ARROW_UP,\n    KEY.ARROW_RIGHT,\n    KEY.ARROW_DOWN,\n    KEY.DELETE,\n  ];\n\n  for (const key of keyTestTable) {\n    it(`returns \"${key}\" for key \"${key}\"`, () => {\n      expect(normalizeKey({key} as KeyboardEvent)).toEqual(key);\n    });\n  }\n\n  it(`returns \"${KEY.UNKNOWN}\" for unmapped keyCodes\"`, () => {\n    expect(normalizeKey({keyCode: 0} as KeyboardEvent)).toEqual(KEY.UNKNOWN);\n  });\n});\n\ndescribe('isNavigationEvent', () => {\n  setUpMdcTestEnvironment();\n\n  const navigationKeyCodeTestTable = [\n    33,  // Page Up\n    34,  // Page Down\n    35,  // End\n    36,  // Home\n    37,  // Arrow Left\n    38,  // Arrow Up\n    39,  // Arrow Right\n    40,  // Arrow Down\n  ];\n\n  for (const keyCode of navigationKeyCodeTestTable) {\n    it(`returns true for keyCode \"${keyCode}\"`, () => {\n      expect(isNavigationEvent({keyCode} as KeyboardEvent)).toBe(true);\n    });\n  }\n\n  const otherKeyCodeTestTable = [\n    8,   // Backspace\n    13,  // Enter\n    32,  // Spacebar\n    46,  // Delete\n    0,\n  ];\n\n  for (const keyCode of otherKeyCodeTestTable) {\n    it(`returns false for keyCode \"${keyCode}\"`, () => {\n      expect(isNavigationEvent({keyCode} as KeyboardEvent)).toBe(false);\n    });\n  }\n});\n"
  },
  {
    "path": "packages/mdc-dom/test/mdc-dom.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-dom.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-dom/test/ponyfill.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {closest, estimateScrollWidth, matches} from '../ponyfill';\n\ndescribe('MDCDom - ponyfill', () => {\n  it('#closest returns result from native method if available', () => {\n    const mockElement = jasmine.createSpyObj('mockElement', ['closest']);\n    const selector = '.foo';\n    mockElement.closest.withArgs(selector).and.returnValue(mockElement);\n\n    expect(closest(mockElement, selector)).toBe(mockElement);\n  });\n\n  it('#closest returns the element when the selector matches the element',\n     () => {\n       const mockElement = jasmine.createSpyObj('mockElement', ['matches']);\n       const selector = '.foo';\n       mockElement.matches.withArgs(selector).and.returnValue(true);\n\n       expect(closest(mockElement, selector)).toBe(mockElement);\n     });\n\n  it('#closest returns the parent element when the selector matches the parent element',\n     () => {\n       const mockParentMatches = jasmine.createSpy('mockParentElement.matches');\n       const mockMatches = jasmine.createSpy('mockChildElement.matches');\n       const mockParentElement = {\n         matches: mockParentMatches,\n       } as unknown as HTMLElement;\n       const mockChildElement = {\n         matches: mockMatches,\n         parentElement: mockParentElement,\n       } as unknown as HTMLElement;\n       const selector = '.foo';\n       mockMatches.withArgs(selector).and.returnValue(false);\n       mockParentMatches.withArgs(selector).and.returnValue(true);\n\n       expect(closest(mockChildElement, selector)).toBe(mockParentElement);\n     });\n\n  it('#closest returns null when there is no ancestor matching the selector',\n     () => {\n       const mockParentMatches = jasmine.createSpy('mockParentElement.matches');\n       const mockMatches = jasmine.createSpy('mockChildElement.matches');\n       const mockChildElement = {\n         matches: mockMatches,\n         parentElement: {\n           matches: mockParentMatches,\n         },\n       } as unknown as HTMLElement;\n       const selector = '.foo';\n       mockMatches.withArgs(selector).and.returnValue(false);\n       mockParentMatches.withArgs(selector).and.returnValue(false);\n\n       expect(closest(mockChildElement, selector)).toBeNull();\n     });\n\n  it('#matches returns true when the selector matches the element', () => {\n    const element = createFixture(html`<div class=\"foo\"></div>`);\n    expect(matches(element, '.foo')).toBe(true);\n  });\n\n  it('#matches returns false when the selector does not match the element',\n     () => {\n       const element = createFixture(html`<div class=\"foo\"></div>`);\n       expect(matches(element, '.bar')).toBe(false);\n     });\n\n  it('#matches supports vendor prefixes', () => {\n    expect(matches({matches: () => true} as unknown as Element, '')).toBe(true);\n    expect(\n        matches({webkitMatchesSelector: () => true} as unknown as Element, ''))\n        .toBe(true);\n    expect(matches({msMatchesSelector: () => true} as unknown as Element, ''))\n        .toBe(true);\n  });\n\n  it('#estimateScrollWidth returns the default width when the element is not hidden',\n     () => {\n       const root = createFixture(html`\n       <span>\n         <span id=\"i0\" style=\"width:10px;\"></span>\n       </span>`);\n       const el = root.querySelector<HTMLSpanElement>('#i0')!;\n       expect(estimateScrollWidth(el)).toBe(10);\n     });\n\n  it('#estimateScrollWidth returns the estimated width when the element is hidden',\n     () => {\n       const root = createFixture(html`\n       <span style=\"display:none;\">\n         <span id=\"i0\" style=\"width:10px;\"></span>\n       </span>`);\n       const el = root.querySelector<HTMLSpanElement>('#i0')!;\n       expect(estimateScrollWidth(el)).toBe(10);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-drawer/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-drawer/README.md",
    "content": "<!--docs:\ntitle: \"Drawers\"\nlayout: detail\nsection: components\nexcerpt: \"Permanent, dismissible, and modal drawers.\"\niconId: side_navigation\npath: /catalog/drawers/\n-->\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector<HTMLElement>('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector<HTMLElement>('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector<HTMLElement>('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector<HTMLElement>('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n  mainContentEl.querySelector<HTMLElement>('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n  mainContentEl.querySelector<HTMLElement>('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector<HTMLElement>('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector<HTMLElement>('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n  drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n  mainContentEl.querySelector<HTMLElement>('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n<aside class=\"mdc-drawer\">\n  <div class=\"mdc-drawer__content\">\n    <nav class=\"mdc-deprecated-list\">\n      <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n        <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n        <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n        <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n      </a>\n    </nav>\n  </div>\n</aside>\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n<body>\n  <aside class=\"mdc-drawer mdc-drawer--modal\">\n    <div class=\"mdc-drawer__content\">\n      <nav class=\"mdc-deprecated-list\">\n        <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\" tabindex=\"0\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n          <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n          <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n          <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n        </a>\n      </nav>\n    </div>\n  </aside>\n\n  <div class=\"mdc-drawer-scrim\"></div>\n  <div>Main Content</div>\n</body>\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n<aside class=\"mdc-drawer\">\n  <div class=\"mdc-drawer__content\">\n    <nav class=\"mdc-deprecated-list\">\n      <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n        <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">star</i>\n        <span class=\"mdc-deprecated-list-item__text\">Star</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n        <span class=\"mdc-deprecated-list-item__text\">Sent Mail</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n        <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n      </a>\n\n      <hr class=\"mdc-deprecated-list-divider\">\n      <h6 class=\"mdc-deprecated-list-group__subheader\">Labels</h6>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">bookmark</i>\n        <span class=\"mdc-deprecated-list-item__text\">Family</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">bookmark</i>\n        <span class=\"mdc-deprecated-list-item__text\">Friends</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">bookmark</i>\n        <span class=\"mdc-deprecated-list-item__text\">Work</span>\n      </a>\n    </nav>\n  </div>\n</aside>\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n<aside class=\"mdc-drawer\">\n  <div class=\"mdc-drawer__header\">\n    <h3 class=\"mdc-drawer__title\">Mail</h3>\n    <h6 class=\"mdc-drawer__subtitle\">email@material.io</h6>\n  </div>\n  <div class=\"mdc-drawer__content\">\n    <nav class=\"mdc-deprecated-list\">\n      <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n        <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n        <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n      </a>\n      <a class=\"mdc-deprecated-list-item\" href=\"#\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n        <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n      </a>\n    </nav>\n  </div>\n</aside>\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n<body>\n  <aside class=\"mdc-drawer mdc-drawer--dismissible\">\n    <div class=\"mdc-drawer__content\">\n      <nav class=\"mdc-deprecated-list\">\n        <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n          <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n          <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n          <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n        </a>\n      </nav>\n    </div>\n  </aside>\n\n  <div class=\"mdc-drawer-app-content\">\n    App Content\n  </div>\n</body>\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n<body>\n  <aside class=\"mdc-drawer mdc-drawer--dismissible\">\n    <div class=\"mdc-drawer__content\">\n      <div class=\"mdc-deprecated-list\">\n        <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n          <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n          <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n          <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n        </a>\n      </div>\n    </div>\n  </aside>\n\n  <div class=\"mdc-drawer-app-content\">\n    <header class=\"mdc-top-app-bar app-bar\" id=\"app-bar\">\n      <div class=\"mdc-top-app-bar__row\">\n        <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n          <button class=\"material-icons mdc-top-app-bar__navigation-icon mdc-icon-button\">menu</button>\n          <span class=\"mdc-top-app-bar__title\">Dismissible Drawer</span>\n        </section>\n      </div>\n    </header>\n\n    <main class=\"main-content\" id=\"main-content\">\n      <div class=\"mdc-top-app-bar--fixed-adjust\">\n        App Content\n      </div>\n    </main>\n  </div>\n</body>\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n<body>\n  <header class=\"mdc-top-app-bar app-bar\" id=\"app-bar\">\n    <div class=\"mdc-top-app-bar__row\">\n      <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n        <button class=\"material-icons mdc-top-app-bar__navigation-icon mdc-icon-button\">menu</button>\n        <span class=\"mdc-top-app-bar__title\">Dismissible Drawer</span>\n      </section>\n    </div>\n  </header>\n  <aside class=\"mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust\">\n    <div class=\"mdc-drawer__content\">\n      <div class=\"mdc-deprecated-list\">\n        <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>\n          <span class=\"mdc-deprecated-list-item__text\">Inbox</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">send</i>\n          <span class=\"mdc-deprecated-list-item__text\">Outgoing</span>\n        </a>\n        <a class=\"mdc-deprecated-list-item\" href=\"#\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">drafts</i>\n          <span class=\"mdc-deprecated-list-item__text\">Drafts</span>\n        </a>\n      </div>\n    </div>\n  </aside>\n\n  <div class=\"mdc-drawer-app-content mdc-top-app-bar--fixed-adjust\">\n    <main class=\"main-content\" id=\"main-content\">\n      App Content\n    </main>\n  </div>\n</body>\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n  display: flex;\n  height: 100vh;\n}\n\n.mdc-drawer-app-content {\n  flex: auto;\n  overflow: auto;\n  position: relative;\n}\n\n.main-content {\n  overflow: auto;\n  height: 100%;\n}\n\n.app-bar {\n  position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n  z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n  drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` |  Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener<K>, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener<K>, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n"
  },
  {
    "path": "packages/mdc-drawer/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-drawer/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/list\" as mdc-list-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"./index\" as mdc-drawer-*;\n"
  },
  {
    "path": "packages/mdc-drawer/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use './variables';\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define drawer\n  .mdc-drawer {\n    @include title-ink-color(variables.$title-ink-color, $query: $query);\n    @include subtitle-ink-color(variables.$subtitle-ink-color, $query: $query);\n    @include border-color(variables.$divider-color, $query: $query);\n    @include surface-fill-color(variables.$surface-fill-color, $query: $query);\n    @include item-icon-ink-color(\n      variables.$item-inactive-ink-color,\n      $query: $query\n    );\n    @include item-text-ink-color(\n      variables.$item-inactive-ink-color,\n      $query: $query\n    );\n    @include item-activated-icon-ink-color(\n      variables.$item-activated-ink-color,\n      $query: $query\n    );\n    @include item-activated-text-ink-color(\n      variables.$item-activated-ink-color,\n      $query: $query\n    );\n    @include shape-radius(variables.$shape-radius, $query: $query);\n    @include item-shape-radius(variables.$item-shape-radius, $query: $query);\n    @include z-index(variables.$z-index, $query: $query);\n    @include width(variables.$width, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      box-sizing: border-box;\n      height: 100%;\n      @include rtl.ignore-next-line();\n      border-right-width: 1px;\n      @include rtl.ignore-next-line();\n      border-right-style: solid;\n      overflow: hidden;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        border-right-width: 0;\n        @include rtl.ignore-next-line();\n        border-left-width: 1px;\n        @include rtl.ignore-next-line();\n        border-right-style: none;\n        @include rtl.ignore-next-line();\n        border-left-style: solid;\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition-property: transform;\n      transition-timing-function: animation-variables.$standard-curve-timing-function;\n    }\n\n    @include list-item_($query);\n  }\n\n  .mdc-drawer--animate {\n    @include feature-targeting.targets($feat-structure) {\n      transform: translateX(-100%);\n\n      @include rtl.rtl {\n        transform: translateX(100%);\n      }\n    }\n  }\n\n  .mdc-drawer--opening {\n    @include feature-targeting.targets($feat-structure) {\n      transform: translateX(0);\n\n      // Required to level the specificity with animate class.\n      @include rtl.rtl {\n        transform: translateX(0);\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: variables.$animation-enter;\n    }\n  }\n\n  .mdc-drawer--closing {\n    @include feature-targeting.targets($feat-structure) {\n      transform: translateX(-100%);\n\n      @include rtl.rtl {\n        transform: translateX(100%);\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: variables.$animation-exit;\n    }\n  }\n\n  .mdc-drawer__header {\n    @include feature-targeting.targets($feat-structure) {\n      flex-shrink: 0;\n      box-sizing: border-box;\n      min-height: 64px; // same as $mdc-top-app-bar-row-height\n      padding: 0 variables.$surface-padding 4px;\n    }\n  }\n\n  .mdc-drawer__title {\n    @include typography.typography(headline6, $query: $query);\n    @include typography.text-baseline(\n      $top: 36px,\n      $bottom: 20px,\n      $query: $query\n    );\n  }\n\n  .mdc-drawer__subtitle {\n    @include typography.typography(body2, $query: $query);\n    @include typography.text-baseline($top: 20px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin-bottom: 0;\n    }\n  }\n\n  .mdc-drawer__content {\n    @include feature-targeting.targets($feat-structure) {\n      height: 100%;\n      overflow-y: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n@mixin dismissible-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-drawer--dismissible {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, 0);\n\n      display: none;\n      position: absolute;\n\n      &.mdc-drawer--open {\n        display: flex;\n      }\n    }\n  }\n\n  .mdc-drawer-app-content {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, 0);\n\n      position: relative;\n    }\n  }\n}\n\n@mixin modal-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-drawer--modal {\n    @include scrim-fill-color(variables.$modal-scrim-color, $query: $query);\n    @include elevation-mixins.elevation(\n      variables.$modal-elevation,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, 0);\n\n      display: none;\n      position: fixed;\n    }\n\n    &.mdc-drawer--open {\n      @include feature-targeting.targets($feat-structure) {\n        display: flex;\n      }\n    }\n  }\n\n  .mdc-drawer-scrim {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: variables.$z-index - 1;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition-property: opacity;\n      transition-timing-function: animation-variables.$standard-curve-timing-function;\n    }\n\n    .mdc-drawer--open + & {\n      @include feature-targeting.targets($feat-structure) {\n        display: block;\n      }\n    }\n\n    .mdc-drawer--animate + & {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n\n    .mdc-drawer--opening + & {\n      @include feature-targeting.targets($feat-animation) {\n        transition-duration: variables.$animation-enter;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 1;\n      }\n    }\n\n    .mdc-drawer--closing + & {\n      @include feature-targeting.targets($feat-animation) {\n        transition-duration: variables.$animation-exit;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n@mixin activated-overlay-color($color, $query: feature-targeting.all()) {\n  :not(.mdc-deprecated-list--non-interactive) > .mdc-deprecated-list-item {\n    @include ripple-theme.states-activated($color, $query: $query);\n  }\n}\n\n@mixin border-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(border-color, $value);\n  }\n}\n\n@mixin item-shape-radius(\n  $radius,\n  $rtl-reflexive: true,\n  $query: feature-targeting.all()\n) {\n  @include list-mixins.deprecated-single-line-shape-radius(\n    $radius,\n    $rtl-reflexive,\n    $query: $query\n  );\n}\n\n@mixin shape-radius($radius, $query: feature-targeting.all()) {\n  // Check type since $radius may be a custom property Map\n  $is-list: meta.type-of($radius) == 'list';\n  @if $is-list and list.length($radius) > 2 {\n    @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n  } @else if $is-list and list.length($radius) == 2 {\n    $radius: 0 list.nth($radius, 1) list.nth($radius, 2) 0;\n  } @else {\n    $radius: 0 $radius $radius 0;\n  }\n\n  @include shape-mixins.radius($radius, $rtl-reflexive: true, $query: $query);\n}\n\n@mixin divider-color($color, $query: feature-targeting.all()) {\n  $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);\n\n  @include list-mixins.deprecated-divider-color($value, $query: $query);\n}\n\n@mixin title-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $value: rgba(theme-color.prop-value($color), variables.$title-ink-opacity);\n\n  .mdc-drawer__title {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $value);\n    }\n  }\n}\n\n@mixin subtitle-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $value: rgba(theme-color.prop-value($color), variables.$subtitle-ink-opacity);\n\n  @include list-mixins.deprecated-group-subheader-ink-color(\n    $value,\n    $query: $query\n  );\n\n  .mdc-drawer__subtitle {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $value);\n    }\n  }\n}\n\n@mixin fill-color-accessible($color, $query: feature-targeting.all()) {\n  $accessibleColor: theme-color.accessible-ink-color($color);\n\n  @include title-ink-color($accessibleColor, $query: $query);\n  @include subtitle-ink-color($accessibleColor, $query: $query);\n  @include item-text-ink-color($accessibleColor, $query: $query);\n  @include item-icon-ink-color($accessibleColor, $query: $query);\n  @include surface-fill-color($color, $query: $query);\n}\n\n@mixin item-icon-ink-color($color, $query: feature-targeting.all()) {\n  $value: rgba(\n    theme-color.prop-value($color),\n    variables.$item-inactive-icon-ink-opacity\n  );\n\n  @include list-mixins.deprecated-item-graphic-ink-color(\n    $value,\n    $query: $query\n  );\n}\n\n@mixin item-activated-icon-ink-color($color, $query: feature-targeting.all()) {\n  $value: rgba(\n    theme-color.prop-value($color),\n    variables.$item-active-icon-ink-opacity\n  );\n\n  .mdc-deprecated-list-item--activated {\n    @include list-mixins.deprecated-item-graphic-ink-color(\n      $value,\n      $query: $query\n    );\n  }\n}\n\n@mixin item-activated-text-ink-color($color, $query: feature-targeting.all()) {\n  $value: rgba(\n    theme-color.prop-value($color),\n    variables.$item-active-text-ink-opacity\n  );\n\n  .mdc-deprecated-list-item--activated {\n    @include list-mixins.deprecated-item-primary-text-ink-color(\n      $value,\n      $query: $query\n    );\n  }\n}\n\n@mixin item-text-ink-color($color, $query: feature-targeting.all()) {\n  $value: rgba(\n    theme-color.prop-value($color),\n    variables.$item-inactive-text-ink-opacity\n  );\n\n  .mdc-deprecated-list-item {\n    @include list-mixins.deprecated-item-primary-text-ink-color(\n      $value,\n      $query: $query\n    );\n  }\n}\n\n@mixin surface-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin scrim-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $value: rgba(theme-color.prop-value($color), variables.$modal-scrim-opacity);\n\n  + .mdc-drawer-scrim {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $value);\n    }\n  }\n}\n\n@mixin z-index($value, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    z-index: $value;\n  }\n}\n\n@mixin width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(width, $width);\n  }\n\n  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, left, $width);\n    }\n  }\n}\n\n//\n// Private\n//\n@mixin list-item_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-item {\n    @include typography.typography(subtitle2, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      height: calc(48px - 2 * #{variables.$list-item-spacing});\n      // To accomodate margin conflict.\n      margin: (variables.$list-item-spacing * 2) 8px;\n      padding: 0 math.div(variables.$surface-padding, 2);\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-item:nth-child(1) {\n    @include feature-targeting.targets($feat-structure) {\n      margin-top: 2px;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-item:nth-last-child(1) {\n    @include feature-targeting.targets($feat-structure) {\n      margin-bottom: 0;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-group__subheader {\n    @include typography.typography(body2, $query: $query);\n    @include typography.text-baseline($top: 24px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: 0;\n      padding: 0 variables.$surface-padding;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      margin: 3px 0 4px;\n    }\n  }\n\n  // Prevents list item children from being included in the click target.\n  // postcss-bem-linter: ignore\n  .mdc-deprecated-list-item__text,\n  .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-drawer/_variables.import.scss",
    "content": "@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-drawer-* hide mdc-drawer-core-styles, mdc-drawer-dismissible-core-styles, mdc-drawer-modal-core-styles, mdc-drawer-activated-overlay-color, mdc-drawer-border-color, mdc-drawer-item-shape-radius, mdc-drawer-shape-radius, mdc-drawer-divider-color, mdc-drawer-title-ink-color, mdc-drawer-subtitle-ink-color, mdc-drawer-fill-color-accessible, mdc-drawer-item-icon-ink-color, mdc-drawer-item-activated-icon-ink-color, mdc-drawer-item-activated-text-ink-color, mdc-drawer-item-text-ink-color, mdc-drawer-surface-fill-color, mdc-drawer-scrim-fill-color, mdc-drawer-z-index, mdc-drawer-width, mdc-drawer-list-item-;\n"
  },
  {
    "path": "packages/mdc-drawer/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/theme/theme-color';\n\n// Colors\n$title-ink-color: theme-color.prop-value(on-surface) !default;\n$subtitle-ink-color: theme-color.prop-value(on-surface) !default;\n$item-inactive-ink-color: theme-color.prop-value(on-surface) !default;\n$item-activated-ink-color: theme-color.prop-value(primary) !default;\n$divider-color: theme-color.prop-value(on-surface) !default;\n$surface-fill-color: surface !default;\n\n// Opacity\n$title-ink-opacity: theme-color.text-emphasis(high) !default;\n$subtitle-ink-opacity: theme-color.text-emphasis(medium) !default;\n$item-inactive-icon-ink-opacity: theme-color.text-emphasis(medium) !default;\n$item-inactive-text-ink-opacity: theme-color.text-emphasis(high) !default;\n$item-active-icon-ink-opacity: 1 !default;\n$item-active-text-ink-opacity: theme-color.text-emphasis(high) !default;\n$divider-opacity: 0.12 !default;\n\n// Widths\n$width: 256px !default;\n$list-item-spacing: 4px !default;\n$surface-padding: 16px !default;\n$shape-radius: large !default;\n$item-shape-radius: small !default;\n\n// Animations\n$animation-enter: 250ms !default;\n$animation-exit: 200ms !default;\n\n// Scrim\n$modal-scrim-color: theme-color.prop-value(on-surface) !default;\n$modal-scrim-opacity: 0.32 !default;\n\n$z-index: 6 !default;\n$modal-elevation: 16 !default;\n"
  },
  {
    "path": "packages/mdc-drawer/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCDrawerAdapter {\n  /**\n   * Adds a class to the root Element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the root Element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns true if the root Element contains the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Returns true if the element contains the given class.\n   * @param element target element to verify class name\n   * @param className class name\n   */\n  elementHasClass(element: Element, className: string): boolean;\n\n  /**\n   * Saves the focus of currently active element.\n   */\n  saveFocus(): void;\n\n  /**\n   * Restores focus to element previously saved with 'saveFocus'.\n   */\n  restoreFocus(): void;\n\n  /**\n   * Focuses the active / selected navigation item.\n   */\n  focusActiveNavigationItem(): void;\n\n  /**\n   * Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n   */\n  notifyClose(): void;\n\n  /**\n   * Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n   */\n  notifyOpen(): void;\n\n  /**\n   * Traps focus on root element and focuses the active navigation element.\n   */\n  trapFocus(): void;\n\n  /**\n   * Releases focus trap from root element which was set by `trapFocus`\n   * and restores focus to where it was prior to calling `trapFocus`.\n   */\n  releaseFocus(): void;\n}\n"
  },
  {
    "path": "packages/mdc-drawer/common.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/list/variables\" as mdc-list-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"variables\" as mdc-drawer-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/list/mixins\" as mdc-list-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"mixins\" as mdc-drawer-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"common\";\n"
  },
  {
    "path": "packages/mdc-drawer/common.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-drawer/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {FocusTrap} from '@material/dom/focus-trap';\nimport {MDCList, MDCListFactory} from '@material/list/component';\n\nimport {MDCDrawerAdapter} from './adapter';\nimport {MDCDismissibleDrawerFoundation} from './dismissible/foundation';\nimport {MDCModalDrawerFoundation} from './modal/foundation';\nimport * as util from './util';\nimport {MDCDrawerFocusTrapFactory} from './util';\n\nconst {cssClasses, strings} = MDCDismissibleDrawerFoundation;\n\n/**\n * @events `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n * @events `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n */\nexport class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {\n  static override attachTo(root: HTMLElement): MDCDrawer {\n    return new MDCDrawer(root);\n  }\n\n  /**\n   * @return boolean Proxies to the foundation's `open`/`close` methods.\n   * Also returns true if drawer is in the open position.\n   */\n  get open(): boolean {\n    return this.foundation.isOpen();\n  }\n\n  /**\n   * Toggles the drawer open and closed.\n   */\n  set open(isOpen: boolean) {\n    if (isOpen) {\n      this.foundation.open();\n    } else {\n      this.foundation.close();\n    }\n  }\n\n  private previousFocus?: Element|null;\n  private scrim!: HTMLElement|null;  // assigned in initialSyncWithDOM()\n  private innerList?: MDCList;       // assigned in initialize()\n\n  private focusTrap?: FocusTrap;  // assigned in initialSyncWithDOM()\n  private focusTrapFactory!:\n      MDCDrawerFocusTrapFactory;  // assigned in initialize()\n\n  private handleScrimClick?:\n      SpecificEventListener<'click'>;  // initialized in initialSyncWithDOM()\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // initialized in initialSyncWithDOM()\n  private handleTransitionEnd!:\n      SpecificEventListener<'transitionend'>;  // initialized in\n                                               // initialSyncWithDOM()\n\n  get list(): MDCList|undefined {\n    return this.innerList;\n  }\n\n  override initialize(\n      focusTrapFactory: MDCDrawerFocusTrapFactory = (el) => new FocusTrap(el),\n      listFactory: MDCListFactory = (el) => new MDCList(el),\n  ) {\n    const listEl = this.root.querySelector<HTMLElement>(strings.LIST_SELECTOR);\n    if (listEl) {\n      this.innerList = listFactory(listEl);\n      this.innerList.wrapFocus = true;\n    }\n    this.focusTrapFactory = focusTrapFactory;\n  }\n\n  override initialSyncWithDOM() {\n    const {MODAL} = cssClasses;\n    const {SCRIM_SELECTOR} = strings;\n\n    this.scrim = (this.root.parentNode as Element)\n                     .querySelector<HTMLElement>(SCRIM_SELECTOR);\n\n    if (this.scrim && this.root.classList.contains(MODAL)) {\n      this.handleScrimClick = () => {\n        (this.foundation as MDCModalDrawerFoundation).handleScrimClick();\n      };\n      this.scrim.addEventListener('click', this.handleScrimClick);\n      this.focusTrap =\n          util.createFocusTrapInstance(this.root, this.focusTrapFactory);\n    }\n\n    this.handleKeydown = (event) => {\n      this.foundation.handleKeydown(event);\n    };\n    this.handleTransitionEnd = (event) => {\n      this.foundation.handleTransitionEnd(event);\n    };\n    this.listen('keydown', this.handleKeydown);\n    this.listen('transitionend', this.handleTransitionEnd);\n  }\n\n  override destroy() {\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten('transitionend', this.handleTransitionEnd);\n\n    if (this.innerList) {\n      this.innerList.destroy();\n    }\n\n    const {MODAL} = cssClasses;\n    if (this.scrim && this.handleScrimClick &&\n        this.root.classList.contains(MODAL)) {\n      this.scrim.removeEventListener('click', this.handleScrimClick);\n      // Ensure drawer is closed to hide scrim and release focus\n      this.open = false;\n    }\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCDrawerAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      elementHasClass: (element, className) =>\n          element.classList.contains(className),\n      saveFocus: () => {\n        this.previousFocus = document.activeElement;\n      },\n      restoreFocus: () => {\n        const previousFocus = this.previousFocus as HTMLOrSVGElement | null;\n        if (previousFocus && previousFocus.focus &&\n            this.root.contains(document.activeElement)) {\n          previousFocus.focus();\n        }\n      },\n      focusActiveNavigationItem: () => {\n        const activeNavItemEl = this.root.querySelector<HTMLElement>(\n            strings.LIST_ITEM_ACTIVATED_SELECTOR);\n        if (activeNavItemEl) {\n          activeNavItemEl.focus();\n        }\n      },\n      notifyClose: () => {\n        this.emit(strings.CLOSE_EVENT, {}, true /* shouldBubble */);\n      },\n      notifyOpen: () => {\n        this.emit(strings.OPEN_EVENT, {}, true /* shouldBubble */);\n      },\n      trapFocus: () => {\n        this.focusTrap!.trapFocus();\n      },\n      releaseFocus: () => {\n        this.focusTrap!.releaseFocus();\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n\n    const {DISMISSIBLE, MODAL} = cssClasses;\n    if (this.root.classList.contains(DISMISSIBLE)) {\n      return new MDCDismissibleDrawerFoundation(adapter);\n    } else if (this.root.classList.contains(MODAL)) {\n      return new MDCModalDrawerFoundation(adapter);\n    } else {\n      throw new Error(\n          `MDCDrawer: Failed to instantiate component. Supported variants are ${\n              DISMISSIBLE} and ${MODAL}.`);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-drawer/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ANIMATE: 'mdc-drawer--animate',\n  CLOSING: 'mdc-drawer--closing',\n  DISMISSIBLE: 'mdc-drawer--dismissible',\n  MODAL: 'mdc-drawer--modal',\n  OPEN: 'mdc-drawer--open',\n  OPENING: 'mdc-drawer--opening',\n  ROOT: 'mdc-drawer',\n};\n\nconst strings = {\n  APP_CONTENT_SELECTOR: '.mdc-drawer-app-content',\n  CLOSE_EVENT: 'MDCDrawer:closed',\n  OPEN_EVENT: 'MDCDrawer:opened',\n  SCRIM_SELECTOR: '.mdc-drawer-scrim',\n  LIST_SELECTOR: '.mdc-list,.mdc-deprecated-list',\n  LIST_ITEM_ACTIVATED_SELECTOR:\n      '.mdc-list-item--activated,.mdc-deprecated-list-item--activated',\n};\n\nexport {cssClasses, strings};\n"
  },
  {
    "path": "packages/mdc-drawer/dismissible/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCDrawerAdapter} from '../adapter';\nimport {cssClasses, strings} from '../constants';\n\n/** MDC Dismissible Drawer Foundation */\nexport class MDCDismissibleDrawerFoundation extends\n    MDCFoundation<MDCDrawerAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get defaultAdapter(): MDCDrawerAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      elementHasClass: () => false,\n      notifyClose: () => undefined,\n      notifyOpen: () => undefined,\n      saveFocus: () => undefined,\n      restoreFocus: () => undefined,\n      focusActiveNavigationItem: () => undefined,\n      trapFocus: () => undefined,\n      releaseFocus: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private animationFrame = 0;\n  private animationTimer = 0;\n\n  constructor(adapter?: Partial<MDCDrawerAdapter>) {\n    super({...MDCDismissibleDrawerFoundation.defaultAdapter, ...adapter});\n  }\n\n  override destroy() {\n    if (this.animationFrame) {\n      cancelAnimationFrame(this.animationFrame);\n    }\n    if (this.animationTimer) {\n      clearTimeout(this.animationTimer);\n    }\n  }\n\n  /**\n   * Opens the drawer from the closed state.\n   */\n  open() {\n    if (this.isOpen() || this.isOpening() || this.isClosing()) {\n      return;\n    }\n\n    this.adapter.addClass(cssClasses.OPEN);\n    this.adapter.addClass(cssClasses.ANIMATE);\n\n    // Wait a frame once display is no longer \"none\", to establish basis for\n    // animation\n    this.runNextAnimationFrame(() => {\n      this.adapter.addClass(cssClasses.OPENING);\n    });\n\n    this.adapter.saveFocus();\n  }\n\n  /**\n   * Closes the drawer from the open state.\n   */\n  close() {\n    if (!this.isOpen() || this.isOpening() || this.isClosing()) {\n      return;\n    }\n\n    this.adapter.addClass(cssClasses.CLOSING);\n  }\n\n  /**\n   * Returns true if the drawer is in the open position.\n   * @return true if drawer is in open state.\n   */\n  isOpen(): boolean {\n    return this.adapter.hasClass(cssClasses.OPEN);\n  }\n\n  /**\n   * Returns true if the drawer is animating open.\n   * @return true if drawer is animating open.\n   */\n  isOpening(): boolean {\n    return this.adapter.hasClass(cssClasses.OPENING) ||\n        this.adapter.hasClass(cssClasses.ANIMATE);\n  }\n\n  /**\n   * Returns true if the drawer is animating closed.\n   * @return true if drawer is animating closed.\n   */\n  isClosing(): boolean {\n    return this.adapter.hasClass(cssClasses.CLOSING);\n  }\n\n  /**\n   * Keydown handler to close drawer when key is escape.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    const {keyCode, key} = event;\n    const isEscape = key === 'Escape' || keyCode === 27;\n    if (isEscape) {\n      this.close();\n    }\n  }\n\n  /**\n   * Handles the `transitionend` event when the drawer finishes opening/closing.\n   */\n  handleTransitionEnd(event: TransitionEvent) {\n    const {OPENING, CLOSING, OPEN, ANIMATE, ROOT} = cssClasses;\n\n    // In Edge, transitionend on ripple pseudo-elements yields a target without\n    // classList, so check for Element first.\n    const isRootElement = this.isElement(event.target) &&\n        this.adapter.elementHasClass(event.target, ROOT);\n    if (!isRootElement) {\n      return;\n    }\n\n    if (this.isClosing()) {\n      this.adapter.removeClass(OPEN);\n      this.closed();\n      this.adapter.restoreFocus();\n      this.adapter.notifyClose();\n    } else {\n      this.adapter.focusActiveNavigationItem();\n      this.opened();\n      this.adapter.notifyOpen();\n    }\n\n    this.adapter.removeClass(ANIMATE);\n    this.adapter.removeClass(OPENING);\n    this.adapter.removeClass(CLOSING);\n  }\n\n  /**\n   * Extension point for when drawer finishes open animation.\n   */\n  protected opened() {}  // tslint:disable-line:no-empty\n\n  /**\n   * Extension point for when drawer finishes close animation.\n   */\n  protected closed() {}  // tslint:disable-line:no-empty\n\n  /**\n   * Runs the given logic on the next animation frame, using setTimeout to\n   * factor in Firefox reflow behavior.\n   */\n  private runNextAnimationFrame(callback: () => void) {\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = requestAnimationFrame(() => {\n      this.animationFrame = 0;\n      clearTimeout(this.animationTimer);\n      this.animationTimer = setTimeout(callback, 0);\n    });\n  }\n\n  private isElement(element: unknown): element is Element {\n    // In Edge, transitionend on ripple pseudo-elements yields a target without\n    // classList.\n    return Boolean((element as Element).classList);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCDismissibleDrawerFoundation;\n"
  },
  {
    "path": "packages/mdc-drawer/dismissible/mdc-drawer-dismissible.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/list/variables\" as mdc-list-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"../variables\" as mdc-drawer-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/list/mixins\" as mdc-list-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"../mixins\" as mdc-drawer-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"mdc-drawer-dismissible\";\n"
  },
  {
    "path": "packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '../mixins';\n@include mixins.dismissible-core-styles;\n"
  },
  {
    "path": "packages/mdc-drawer/dismissible/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {cssClasses, strings} from '../../constants';\nimport {MDCDismissibleDrawerFoundation} from '../foundation';\n\ndescribe('MDCDismissibleDrawerFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCDismissibleDrawerFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('exports strings', () => {\n    expect('strings' in MDCDismissibleDrawerFoundation).toBe(true);\n    expect(MDCDismissibleDrawerFoundation.strings).toEqual(strings);\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCDismissibleDrawerFoundation).toBe(true);\n    expect(MDCDismissibleDrawerFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCDismissibleDrawerFoundation, [\n      'hasClass',\n      'addClass',\n      'removeClass',\n      'elementHasClass',\n      'saveFocus',\n      'restoreFocus',\n      'focusActiveNavigationItem',\n      'notifyClose',\n      'notifyOpen',\n      'trapFocus',\n      'releaseFocus',\n    ]);\n  });\n\n  it('#destroy cancels pending rAF for #open', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.destroy();\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPENING);\n  });\n\n  it('#destroy cancels pending setTimeout for #open', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(1);\n    foundation.destroy();\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPENING);\n  });\n\n  it('#open does nothing if drawer is already open', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#open does nothing if drawer is already opening', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPENING).and.returnValue(true);\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#open does nothing if drawer is closing', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(true);\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#open adds appropriate classes and saves focus', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(50);\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ANIMATE);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPENING);\n    expect(mockAdapter.saveFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('#close does nothing if drawer is already closed', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(false);\n    foundation.close();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#close does nothing if drawer is opening', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPENING).and.returnValue(true);\n    foundation.close();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#close does nothing if drawer is closing', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(true);\n    foundation.close();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(jasmine.any(String));\n  });\n\n  it('#close adds appropriate classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.close();\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it(`#isOpen returns true when it has ${cssClasses.OPEN} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    expect(foundation.isOpen()).toBe(true);\n  });\n\n  it(`#isOpen returns false when it lacks ${cssClasses.OPEN} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(false);\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it(`#isOpening returns true when it has ${cssClasses.OPENING} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.ANIMATE).and.returnValue(true);\n    mockAdapter.hasClass.withArgs(cssClasses.OPENING).and.returnValue(true);\n    expect(foundation.isOpening()).toBe(true);\n  });\n\n  it('#isOpening returns true when drawer just start animate', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.ANIMATE).and.returnValue(true);\n    mockAdapter.hasClass.withArgs(cssClasses.OPENING).and.returnValue(false);\n    expect(foundation.isOpening()).toBe(true);\n  });\n\n  it(`#isOpening returns false when it lacks ${cssClasses.OPENING} class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.ANIMATE).and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.OPENING).and.returnValue(false);\n       expect(foundation.isOpening()).toBe(false);\n     });\n\n  it(`#isClosing returns true when it has ${cssClasses.CLOSING} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(true);\n    expect(foundation.isClosing()).toBe(true);\n  });\n\n  it(`#isClosing returns false when it lacks ${cssClasses.CLOSING} class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(false);\n       expect(foundation.isClosing()).toBe(false);\n     });\n\n  it('#handleKeydown does nothing when event key is not the escape key', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.handleKeydown({key: 'Shift'} as KeyboardEvent);\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#handleKeydown does nothing when event keyCode is not 27', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.handleKeydown({keyCode: 11} as KeyboardEvent);\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#handleKeydown calls close when event key is the escape key', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.handleKeydown({key: 'Escape'} as KeyboardEvent);\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#handleKeydown calls close when event keyCode is 27', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n    foundation.handleKeydown({keyCode: 27} as KeyboardEvent);\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#handleTransitionEnd removes all animating classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockEventTarget = createFixture(html`<div class=\"foo\">bar</div>`);\n    mockAdapter.elementHasClass.withArgs(mockEventTarget, cssClasses.ROOT)\n        .and.returnValue(true);\n    foundation.handleTransitionEnd(\n        {target: mockEventTarget} as unknown as TransitionEvent);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.ANIMATE);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#handleTransitionEnd removes open class after closing, restores the focus and calls notifyClose',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockEventTarget = createFixture(html`<div>root</div>`);\n       mockAdapter.elementHasClass.withArgs(mockEventTarget, cssClasses.ROOT)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(true);\n\n       foundation.handleTransitionEnd(\n           {target: mockEventTarget} as unknown as TransitionEvent);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n       expect(mockAdapter.restoreFocus).toHaveBeenCalledTimes(1);\n       expect(mockAdapter.notifyClose).toHaveBeenCalledTimes(1);\n     });\n\n  it(`#handleTransitionEnd doesn't remove open class after opening,\n    focuses on active navigation item and calls notifyOpen`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockEventTarget = createFixture(html`<div>root</div>`);\n       mockAdapter.elementHasClass.withArgs(mockEventTarget, cssClasses.ROOT)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(false);\n\n       foundation.handleTransitionEnd(\n           {target: mockEventTarget} as unknown as TransitionEvent);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPEN);\n       expect(mockAdapter.focusActiveNavigationItem).toHaveBeenCalledTimes(1);\n       expect(mockAdapter.notifyOpen).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleTransitionEnd doesn\\'t do anything if event is not triggered by root element',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const mockEventTarget = createFixture(html`<div>child</div>`);\n       mockAdapter.elementHasClass.withArgs(mockEventTarget, cssClasses.ROOT)\n           .and.returnValue(false);\n\n       foundation.handleTransitionEnd(\n           {target: mockEventTarget} as unknown as TransitionEvent);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPEN);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.ANIMATE);\n       expect(mockAdapter.notifyOpen).not.toHaveBeenCalled();\n       expect(mockAdapter.notifyClose).not.toHaveBeenCalled();\n     });\n\n  it('#handleTransitionEnd doesn\\'t do anything if event is emitted with a non-element target',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.handleTransitionEnd({target: {}} as TransitionEvent);\n       expect(mockAdapter.elementHasClass)\n           .not.toHaveBeenCalledWith(jasmine.anything(), jasmine.any(String));\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPEN);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.ANIMATE);\n       expect(mockAdapter.notifyOpen).not.toHaveBeenCalled();\n       expect(mockAdapter.notifyClose).not.toHaveBeenCalled();\n     });\n\n  it('#handleTransitionEnd restores the focus.', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockEventTarget = createFixture(html`<div class=\"foo\">bar</div>`);\n\n    mockAdapter.elementHasClass.withArgs(mockEventTarget, cssClasses.ROOT)\n        .and.returnValue(true);\n    mockAdapter.hasClass.withArgs(cssClasses.CLOSING).and.returnValue(true);\n    foundation.handleTransitionEnd(\n        {target: mockEventTarget} as unknown as TransitionEvent);\n\n    expect(mockAdapter.restoreFocus).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-drawer/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './dismissible/foundation';\nexport * from './modal/foundation';\n"
  },
  {
    "path": "packages/mdc-drawer/mdc-drawer.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/list/variables\" as mdc-list-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"variables\" as mdc-drawer-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/list/mixins\" as mdc-list-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"mixins\" as mdc-drawer-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"mdc-drawer\";\n"
  },
  {
    "path": "packages/mdc-drawer/mdc-drawer.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './common';\n@use './dismissible/mdc-drawer-dismissible';\n@use './modal/mdc-drawer-modal';\n"
  },
  {
    "path": "packages/mdc-drawer/modal/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCDismissibleDrawerFoundation} from '../dismissible/foundation';\n\n/* istanbul ignore next: subclass is not a branch statement */\nexport class MDCModalDrawerFoundation extends MDCDismissibleDrawerFoundation {\n  /**\n   * Handles click event on scrim.\n   */\n  handleScrimClick() {\n    this.close();\n  }\n\n  /**\n   * Called when drawer finishes open animation.\n   */\n  protected override opened() {\n    this.adapter.trapFocus();\n  }\n\n  /**\n   * Called when drawer finishes close animation.\n   */\n  protected override closed() {\n    this.adapter.releaseFocus();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCModalDrawerFoundation;\n"
  },
  {
    "path": "packages/mdc-drawer/modal/mdc-drawer-modal.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/list/variables\" as mdc-list-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"../variables\" as mdc-drawer-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/list/mixins\" as mdc-list-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"../mixins\" as mdc-drawer-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"mdc-drawer-modal\";\n"
  },
  {
    "path": "packages/mdc-drawer/modal/mdc-drawer-modal.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '../mixins';\n@include mixins.modal-core-styles;\n"
  },
  {
    "path": "packages/mdc-drawer/modal/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createMockFoundation} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCModalDrawerFoundation} from '../foundation';\n\nclass MDCModalDrawerFoundationTest extends MDCModalDrawerFoundation {\n  override opened() {\n    super.opened();\n  }\n\n  override closed() {\n    super.closed();\n  }\n}\n\ndescribe('MDCModalDrawerFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCModalDrawerFoundationTest);\n    const mockFoundation = createMockFoundation(MDCModalDrawerFoundationTest);\n\n    return {foundation, mockAdapter, mockFoundation};\n  };\n\n  it('#opened traps the focus when drawer finishes animating open', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.opened();\n    expect(mockAdapter.trapFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('#closed untraps the focus when drawer finishes animating close', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.closed();\n    expect(mockAdapter.releaseFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleScrimClick closes the drawer', () => {\n    const foundation = new MDCModalDrawerFoundation();\n    foundation.close = jasmine.createSpy('close');\n    foundation.handleScrimClick();\n    expect(foundation.close).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-drawer/package.json",
    "content": "{\n  \"name\": \"@material/drawer\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components Web drawer component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"navigation\",\n    \"drawer\"\n  ],\n  \"main\": \"dist/mdc.drawer.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-drawer\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/list\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-drawer/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCList} from '../../mdc-list/index';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, strings} from '../constants';\nimport {MDCDismissibleDrawerFoundation} from '../dismissible/foundation';\nimport {MDCDrawer} from '../index';\nimport {MDCModalDrawerFoundation} from '../modal/foundation';\n\ninterface DrawerSetupOptions {\n  variantClass: string;\n  shadowRoot: boolean;\n  hasList: boolean;\n}\n\nconst defaultSetupOptions = {\n  variantClass: cssClasses.DISMISSIBLE,\n  shadowRoot: false,\n  hasList: true\n};\n\nfunction getDrawerFixture(options: Partial<DrawerSetupOptions>): HTMLElement|\n    DocumentFragment {\n  const listContent = html`\n    <div class=\"mdc-deprecated-list-group\">\n      <nav class=\"mdc-deprecated-list\">\n        <a class=\"mdc-deprecated-list-item mdc-deprecated-list-item--activated\" href=\"#\" aria-current=\"page\">\n          <i class=\"material-icons mdc-deprecated-list-item__graphic\" aria-hidden=\"true\">inbox</i>Inbox\n        </a>\n      </nav>\n    </div>\n    `;\n  const drawerContent = html`\n    <div class=\"mdc-drawer ${options.variantClass}\">\n      <div class=\"mdc-drawer__content\">\n        ${options.hasList ? listContent : ''}\n      </div>\n    </div>\n    `;\n  const scrimContent = html`<div class=\"mdc-drawer-scrim\"></div>`;\n  const isModal = options.variantClass === cssClasses.MODAL;\n  const drawerEl = createFixture(drawerContent);\n  const scrimEl = createFixture(scrimContent);\n\n  if (options.shadowRoot) {\n    const fragment = document.createDocumentFragment();\n    fragment.appendChild(drawerEl);\n    if (isModal) {\n      fragment.appendChild(scrimEl);\n    }\n    return fragment;\n  } else {\n    return createFixture(html`\n      <div class=\"body-content\">\n        ${drawerContent}\n        ${isModal ? scrimContent : ''}\n      </div>`);\n  }\n}\n\nfunction setupTest(options: Partial<DrawerSetupOptions> = defaultSetupOptions) {\n  const root = getDrawerFixture(options);\n  const drawer = root.querySelector<HTMLElement>('.mdc-drawer')!;\n  const component = new MDCDrawer(drawer);\n  return {root, drawer, component};\n}\n\nfunction setupTestWithMocks(\n    options: Partial<DrawerSetupOptions> = defaultSetupOptions) {\n  const root = getDrawerFixture(options);\n  const drawer = root.querySelector<HTMLElement>('.mdc-drawer')!;\n  const isModal = options.variantClass === cssClasses.MODAL;\n  const mockFoundation = createMockFoundation(\n      isModal ? MDCModalDrawerFoundation : MDCDismissibleDrawerFoundation);\n  const mockFocusTrapInstance =\n      jasmine.createSpyObj('FocusTrapInstance', ['trapFocus', 'releaseFocus']);\n  const mockList = jasmine.createSpyObj('MDCList', ['wrapFocus', 'destroy']);\n  const component = new MDCDrawer(\n      drawer, mockFoundation, () => mockFocusTrapInstance, () => mockList);\n  return {\n    root,\n    drawer,\n    component,\n    mockFoundation,\n    mockFocusTrapInstance,\n    mockList\n  };\n}\n\ndescribe('MDCDrawer', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCDrawer instance', () => {\n    const root = getDrawerFixture({\n                   variantClass: cssClasses.DISMISSIBLE,\n                   hasList: false\n                 }).querySelector<HTMLElement>('.mdc-drawer')!;\n    expect(MDCDrawer.attachTo(root)).toEqual(jasmine.any(MDCDrawer));\n  });\n\n  it('#get open calls foundation.isOpen', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n    component.open;\n    expect(mockFoundation.isOpen).toHaveBeenCalledTimes(1);\n  });\n\n  it('#set open true calls foundation.open', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n    component.open = true;\n    expect(mockFoundation.open).toHaveBeenCalledTimes(1);\n  });\n\n  it('#set open false calls foundation.close', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n    component.open = false;\n    expect(mockFoundation.close).toHaveBeenCalledTimes(1);\n  });\n\n  it('#get list returns MDCList instance when DOM includes list', () => {\n    const {component} = setupTest();\n    expect(component.list).toEqual(jasmine.any(MDCList));\n  });\n\n  it('click event calls foundation.handleScrimClick method', () => {\n    const {root, mockFoundation} =\n        setupTestWithMocks({variantClass: cssClasses.MODAL});\n    const scrimEl = root.querySelector<HTMLElement>('.mdc-drawer-scrim')!;\n    emitEvent(scrimEl, 'click');\n    expect((mockFoundation as jasmine.SpyObj<MDCModalDrawerFoundation>)\n               .handleScrimClick)\n        .toHaveBeenCalledTimes(1);\n  });\n\n  it('keydown event calls foundation.handleKeydown method', () => {\n    const {drawer, mockFoundation} = setupTestWithMocks();\n    // TODO(b/182902089): use list constants once code is migrated to evolution.\n    (drawer.querySelector<HTMLElement>('.mdc-deprecated-list-item') as\n     HTMLElement)\n        .focus();\n    emitEvent(drawer, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.any(Object));\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n  });\n\n  it('transitionend event calls foundation.handleTransitionEnd method', () => {\n    const {drawer, mockFoundation} = setupTestWithMocks();\n    emitEvent(drawer, 'transitionend');\n    expect(mockFoundation.handleTransitionEnd)\n        .toHaveBeenCalledWith(jasmine.any(Object));\n    expect(mockFoundation.handleTransitionEnd).toHaveBeenCalledTimes(1);\n  });\n\n  it('component should throw error when invalid variant class name is used or no variant specified',\n     () => {\n       expect(\n           () => setupTest({variantClass: 'mdc-drawer--test-invalid-variant'}))\n           .toThrow();\n       expect(() => setupTest({variantClass: ' '})).toThrow();\n     });\n\n  it('#destroy removes keydown event listener', () => {\n    const {component, drawer, mockFoundation} = setupTestWithMocks();\n    component.destroy();\n    // TODO(b/182902089): use list constants once code is migrated to evolution.\n    (drawer.querySelector<HTMLElement>('.mdc-deprecated-list-item') as\n     HTMLElement)\n        .focus();\n    emitEvent(drawer, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.any(Object));\n  });\n\n  it('#destroy removes transitionend event listener', () => {\n    const {component, drawer, mockFoundation} = setupTestWithMocks();\n    component.destroy();\n\n    emitEvent(drawer, 'transitionend');\n    expect(mockFoundation.handleTransitionEnd)\n        .not.toHaveBeenCalledWith(jasmine.any(Object));\n  });\n\n  it('#destroy calls destroy on list', () => {\n    const {component, mockList} = setupTestWithMocks();\n    component.destroy();\n\n    expect(mockList.destroy).toHaveBeenCalledTimes(1);\n  });\n\n  it('#destroy does not throw an error when list is not present', () => {\n    const {component, mockList} =\n        setupTestWithMocks({variantClass: cssClasses.MODAL, hasList: false});\n    component.destroy();\n\n    expect(mockList.destroy).not.toHaveBeenCalled();\n  });\n\n  it('adapter#addClass adds class to drawer', () => {\n    const {component, drawer} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('test-class');\n    expect(drawer).toHaveClass('test-class');\n  });\n\n  it('adapter#removeClass removes class from drawer', () => {\n    const {component, drawer} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('test-class');\n\n    (component.getDefaultFoundation() as any).adapter.removeClass('test-class');\n    expect(drawer).not.toHaveClass('test-class');\n  });\n\n  it('adapter#hasClass returns true when class is on drawer element', () => {\n    const {component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('test-class');\n    const hasClass = (component.getDefaultFoundation() as any)\n                         .adapter.hasClass('test-class');\n    expect(hasClass).toBe(true);\n  });\n\n  it('adapter#hasClass returns false when there is no class on drawer element',\n     () => {\n       const {component} = setupTest();\n       const hasClass = (component.getDefaultFoundation() as any)\n                            .adapter.hasClass('test-class');\n       expect(hasClass).toBe(false);\n     });\n\n  it('adapter#elementHasClass returns true when class is found on event target',\n     () => {\n       const {component} = setupTest();\n       const mockEventTarget = createFixture(html`<div class=\"foo\">bar</div>`);\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.elementHasClass(mockEventTarget, 'foo'))\n           .toBe(true);\n     });\n\n  it('adapter#restoreFocus restores focus to previously saved focus', () => {\n    const {component, root} = setupTest();\n    const button = createFixture(html`<button>Foo</button>`);\n    document.body.appendChild(button);\n    document.body.appendChild(root);\n    button.focus();\n\n    (component.getDefaultFoundation() as any).adapter.saveFocus();\n    (root.querySelector<HTMLElement>(strings.LIST_ITEM_ACTIVATED_SELECTOR) as\n     HTMLElement)\n        .focus();\n    (component.getDefaultFoundation() as any).adapter.restoreFocus();\n\n    expect(button).toEqual(document.activeElement as HTMLElement);\n    document.body.removeChild(button);\n    document.body.removeChild(root);\n  });\n\n  it('adapter#restoreFocus focus shouldn\\'t restore if focus is not within root element',\n     () => {\n       const {component, root} = setupTest();\n       const navButtonEl = createFixture(html`<button>Foo</button>`);\n       const otherButtonEl = createFixture(html`<button>Bar</button>`);\n       document.body.appendChild(navButtonEl);\n       document.body.appendChild(otherButtonEl);\n       document.body.appendChild(root);\n       navButtonEl.focus();\n\n       (component.getDefaultFoundation() as any).adapter.saveFocus();\n       otherButtonEl.focus();\n       (component.getDefaultFoundation() as any).adapter.restoreFocus();\n\n       expect(navButtonEl).not.toBe(document.activeElement as HTMLElement);\n       document.body.removeChild(navButtonEl);\n       document.body.removeChild(otherButtonEl);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#restoreFocus focus is not restored if saveFocus never called',\n     () => {\n       const {component, root} = setupTest();\n       const button = createFixture(html`<button>Foo</button>`);\n       document.body.appendChild(button);\n       document.body.appendChild(root);\n       button.focus();\n\n       const navItem = root.querySelector<HTMLElement>(\n           strings.LIST_ITEM_ACTIVATED_SELECTOR)!;\n       navItem.focus();\n       (component.getDefaultFoundation() as any).adapter.restoreFocus();\n\n       expect(document.activeElement).toEqual(navItem);\n       document.body.removeChild(button);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#trapFocus traps focus on root element', () => {\n    const {component, mockFocusTrapInstance} =\n        setupTestWithMocks({variantClass: cssClasses.MODAL});\n    (component.getDefaultFoundation() as any).adapter.trapFocus();\n\n    expect(mockFocusTrapInstance.trapFocus).toHaveBeenCalled();\n  });\n\n  it('adapter#releaseFocus releases focus on root element after trap focus',\n     () => {\n       const {component, mockFocusTrapInstance} =\n           setupTestWithMocks({variantClass: cssClasses.MODAL});\n       (component.getDefaultFoundation() as any).adapter.releaseFocus();\n\n       expect(mockFocusTrapInstance.releaseFocus).toHaveBeenCalled();\n     });\n\n  it('adapter#notifyOpen emits drawer open event', () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('openHandler');\n\n    component.listen(strings.OPEN_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpen();\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('adapter#notifyClose emits drawer close event', () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('closeHandler');\n\n    component.listen(strings.CLOSE_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyClose();\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('adapter#focusActiveNavigationItem focuses on active navigation item',\n     () => {\n       const {component, root} = setupTest();\n       document.body.appendChild(root);\n       (component.getDefaultFoundation() as any)\n           .adapter.focusActiveNavigationItem();\n\n       const activatedNavigationItemEl = root.querySelector<HTMLElement>(\n           strings.LIST_ITEM_ACTIVATED_SELECTOR);\n       expect(document.activeElement).toEqual(activatedNavigationItemEl);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#focusActiveNavigationItem does nothing if no active navigation item exists',\n     () => {\n       const {component, root} = setupTest();\n       const prevActiveElement = document.activeElement;\n       document.body.appendChild(root);\n       const activatedNavigationItemEl = root.querySelector<HTMLElement>(\n           strings.LIST_ITEM_ACTIVATED_SELECTOR)!;\n       // TODO(b/182902089): use list constants once code has been migrated.\n       activatedNavigationItemEl.classList.remove(\n           'mdc-deprecated-list-item--activated');\n       (component.getDefaultFoundation() as any)\n           .adapter.focusActiveNavigationItem();\n\n       expect(document.activeElement).toEqual(prevActiveElement);\n       document.body.removeChild(root);\n     });\n\n  it('#initialSyncWithDOM should not throw any errors when DOM rendered in DocumentFragment i.e., Shadow DOM',\n     () => {\n       const {component} =\n           setupTest({variantClass: cssClasses.MODAL, shadowRoot: true});\n       expect(() => component.initialSyncWithDOM).not.toThrow();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-drawer/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as drawer;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include drawer.core-styles($query: $query);\n    @include drawer.dismissible-core-styles($query: $query);\n    @include drawer.modal-core-styles($query: $query);\n    @include drawer.activated-overlay-color(red, $query: $query);\n    @include drawer.border-color(red, $query: $query);\n    @include drawer.item-shape-radius(42, $query: $query);\n    @include drawer.shape-radius(42, $query: $query);\n    @include drawer.divider-color(red, $query: $query);\n    @include drawer.title-ink-color(red, $query: $query);\n    @include drawer.subtitle-ink-color(red, $query: $query);\n    @include drawer.fill-color-accessible(red, $query: $query);\n    @include drawer.item-icon-ink-color(red, $query: $query);\n    @include drawer.item-activated-icon-ink-color(red, $query: $query);\n    @include drawer.item-activated-text-ink-color(red, $query: $query);\n    @include drawer.item-text-ink-color(red, $query: $query);\n    @include drawer.surface-fill-color(red, $query: $query);\n    @include drawer.scrim-fill-color(red, $query: $query);\n    @include drawer.z-index(1337, $query: $query);\n    @include drawer.width(1337px, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-drawer/test/mdc-drawer.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-drawer.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-drawer/test/util.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport * as util from '../util';\n\ndescribe('MDCDrawer - util', () => {\n  setUpMdcTestEnvironment();\n\n  it('createFocusTrapInstance creates a properly configured focus trap instance with all args specified',\n     () => {\n       const rootEl = createFixture(html`<div></div>`);\n       const focusTrapFactory = jasmine.createSpy('focusTrapFactory');\n       const properlyConfiguredFocusTrapInstance = {\n         trapFocus() {},\n         releaseFocus() {}\n       };\n       focusTrapFactory\n           .withArgs(rootEl, {\n             skipInitialFocus: true,\n           })\n           .and.returnValue(properlyConfiguredFocusTrapInstance);\n\n       const instance = util.createFocusTrapInstance(rootEl, focusTrapFactory);\n       expect(instance).toEqual(properlyConfiguredFocusTrapInstance);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-drawer/util.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {FocusOptions, FocusTrap} from '@material/dom/focus-trap';\n\n/** MDC Drawer Focus Trap Factory */\nexport type MDCDrawerFocusTrapFactory = (\n    element: HTMLElement,\n    options: FocusOptions,\n    ) => FocusTrap;\n\nexport function createFocusTrapInstance(\n    surfaceEl: HTMLElement,\n    focusTrapFactory: MDCDrawerFocusTrapFactory,\n    ): FocusTrap {\n  return focusTrapFactory(surfaceEl, {\n    // Component handles focusing on active nav item.\n    skipInitialFocus: true,\n  });\n}\n"
  },
  {
    "path": "packages/mdc-elevation/README.md",
    "content": "<!--docs:\ntitle: \"Elevation\"\nlayout: detail\nsection: components\nexcerpt: \"Shadows and elevation as Sass mixins and CSS classes.\"\niconId: shadow\npath: /catalog/elevation/\n-->\n\n# Elevation\n\nShadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a \"z-space\" and range from `0` to `24`.\n\n> **A note about \"z-space\"**: Within the spec, elevation is normally referred to as having a `dp` value. In other words, how many \"pixels\" above the base material is a piece of material elevated. On a computer, this is normally represented by a 3-d coordinate system. We like `z-space` (or just \"z\" for short) because it aligns with the technical definition of, and nomenclature for, a 3-d coordinate system. Therefore, we feel it makes more sense than `dp`. However, when we refer to `z-space` (or `z`), that can be used interchangeably with the spec's `dp`.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-elevation\">Material Design guidelines: Shadows & elevation</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/elevation\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/elevation\n```\n\n## Basic Usage\n\n### HTML\n\nElevation is often already included within the baseline styles of other components (e.g. raised buttons, elevated cards).\n\nHowever, you can also apply elevation to specific components using `mdc-elevation--z<N>` classes:\n\n```html\n  <div class=\"mdc-elevation--z1\">\n    <!-- ... content ... -->\n  </div>\n```\n\n#### Elevation Overlay\n\nThe elevation overlay should appear *above* the component container in the stacking context but *below* the ripple. To accomplish this, the `.mdc-elevation-overlay` element should appear *before* the `.mdc-<component>__ripple` element in the DOM context.  Here's sample markup for a button with a touch target.\n\n```html\n<button class=\"mdc-button mdc-button--raised\">\n  <div class=\"mdc-elevation-overlay\"></div>\n  <div class=\"mdc-button__ripple\"></div>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n  <span class=\"mdc-button__label\">Font Icon</span>\n</button>\n```\n\nThis ensures the ripple parts are rendered *above* the overlay.\n\n### Styles\n\n```scss\n@use \"@material/elevation/mdc-elevation\";\n```\n\n## Style Customization\n\n### CSS Classes\n\nSome components have a set elevation. For example, a raised MDC Button has elevation 2.\n\nIf you want to set the elevation of an element, which is not a Material Design component, you\ncan apply the following CSS classes.\n\nCSS Class | Description\n--- | ---\n`mdc-elevation--z<N>` | Sets the elevation to the (N)dp, where 1 <= N <= 24\n`mdc-elevation-transition` | Applies the correct css rules to transition an element between elevations\n\n### Sass Mixins, Variables, Functions, and Custom Properties\n\nMixin | Description\n--- | ---\n`elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow\n`overlay-common` | Called once per application to setup the universal elevation overlay styles\n`shadow($box-shadow)` | Sets the `box-shadow` of the closest parent selector\n`overlay-surface-position` | Sets the positioning of the overlay's surface element so that the overlay can be appropriately centered\n`overlay-dimensions($width, $height: $width, $has-content-sizing: true)` | Sets the dimensions of the elevation overlay\n`overlay-fill-color($color)` | Sets the color of the elevation overlay\n`overlay-opacity($opacity)` | Sets the opacity of the elevation overlay\n\n\nFunction | Description\n--- | ---\n`transition-value($duration, $easing)` | Returns a value for the `transition` property to transition an element between elevations\n`overlay-transition-value($duration, $easing)` | Returns a value for the `transition` property to transition the elevation overlay between elevations\n`elevation-box-shadow($z-value, $color, $opacity-boost)` | Returns the box-shadow for the elevation z-space for that given elevation z-value, and optionally sets the color and/or boosts the opacity of the shadow\n\nVariable | Description\n--- | ---\n`$property` | Default property for elevation transitions\n`$transition-duration` | Default duration value for elevation transitions\n`$transition-timing-function` | Default easing value for elevation transitions\n`$overlay-color` | Default color for the elevation overlay\n`$overlay-property` | Default property for the elevation overlay transitions\n\nIf you need more configurability over your transitions, use the `transition-value` function in conjunction with the exported sass variables.\n\nCustom Property | Default value | Description\n--- | ---\n`--mdc-elevation-overlay-opacity` | `0` | The opacity of the elevation overlay.\n`--mdc-elevation-overlay-fill-color` | `#fff` | The color of the elevation overlay\n\nIf you need more configurability over your transitions, use the `transition-value` function in conjunction with the exported sass variables.\n\n```scss\n@use \"@material/elevation\";\n\n.my-component-with-custom-transitions {\n\n  transition:\n    elevation.transition-value(),\n    /* Configure opacity to use same duration and easing values as elevation */\n    opacity elevation.$transition-duration elevation.$transition-timing-function;\n  opacity: .7;\n  will-change: elevation.$property, opacity;\n}\n```\n"
  },
  {
    "path": "packages/mdc-elevation/_elevation-theme.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/theme/theme-color';\n\n$baseline-color: black !default;\n$umbra-opacity: 0.2 !default;\n$penumbra-opacity: 0.14 !default;\n$ambient-opacity: 0.12 !default;\n\n$umbra-map: (\n  0: '0px 0px 0px 0px',\n  1: '0px 2px 1px -1px',\n  2: '0px 3px 1px -2px',\n  3: '0px 3px 3px -2px',\n  4: '0px 2px 4px -1px',\n  5: '0px 3px 5px -1px',\n  6: '0px 3px 5px -1px',\n  7: '0px 4px 5px -2px',\n  8: '0px 5px 5px -3px',\n  9: '0px 5px 6px -3px',\n  10: '0px 6px 6px -3px',\n  11: '0px 6px 7px -4px',\n  12: '0px 7px 8px -4px',\n  13: '0px 7px 8px -4px',\n  14: '0px 7px 9px -4px',\n  15: '0px 8px 9px -5px',\n  16: '0px 8px 10px -5px',\n  17: '0px 8px 11px -5px',\n  18: '0px 9px 11px -5px',\n  19: '0px 9px 12px -6px',\n  20: '0px 10px 13px -6px',\n  21: '0px 10px 13px -6px',\n  22: '0px 10px 14px -6px',\n  23: '0px 11px 14px -7px',\n  24: '0px 11px 15px -7px',\n) !default;\n\n$penumbra-map: (\n  0: '0px 0px 0px 0px',\n  1: '0px 1px 1px 0px',\n  2: '0px 2px 2px 0px',\n  3: '0px 3px 4px 0px',\n  4: '0px 4px 5px 0px',\n  5: '0px 5px 8px 0px',\n  6: '0px 6px 10px 0px',\n  7: '0px 7px 10px 1px',\n  8: '0px 8px 10px 1px',\n  9: '0px 9px 12px 1px',\n  10: '0px 10px 14px 1px',\n  11: '0px 11px 15px 1px',\n  12: '0px 12px 17px 2px',\n  13: '0px 13px 19px 2px',\n  14: '0px 14px 21px 2px',\n  15: '0px 15px 22px 2px',\n  16: '0px 16px 24px 2px',\n  17: '0px 17px 26px 2px',\n  18: '0px 18px 28px 2px',\n  19: '0px 19px 29px 2px',\n  20: '0px 20px 31px 3px',\n  21: '0px 21px 33px 3px',\n  22: '0px 22px 35px 3px',\n  23: '0px 23px 36px 3px',\n  24: '0px 24px 38px 3px',\n) !default;\n\n$ambient-map: (\n  0: '0px 0px 0px 0px',\n  1: '0px 1px 3px 0px',\n  2: '0px 1px 5px 0px',\n  3: '0px 1px 8px 0px',\n  4: '0px 1px 10px 0px',\n  5: '0px 1px 14px 0px',\n  6: '0px 1px 18px 0px',\n  7: '0px 2px 16px 1px',\n  8: '0px 3px 14px 2px',\n  9: '0px 3px 16px 2px',\n  10: '0px 4px 18px 3px',\n  11: '0px 4px 20px 3px',\n  12: '0px 5px 22px 4px',\n  13: '0px 5px 24px 4px',\n  14: '0px 5px 26px 4px',\n  15: '0px 6px 28px 5px',\n  16: '0px 6px 30px 5px',\n  17: '0px 6px 32px 5px',\n  18: '0px 7px 34px 6px',\n  19: '0px 7px 36px 6px',\n  20: '0px 8px 38px 7px',\n  21: '0px 8px 40px 7px',\n  22: '0px 8px 42px 7px',\n  23: '0px 9px 44px 8px',\n  24: '0px 9px 46px 8px',\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$property: box-shadow !default;\n\n// The default color for the elevation overlay.\n$overlay-color: #fff;\n\n// The css property used for elevation overlay transitions. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$overlay-property: opacity !default;\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: animation-variables.$standard-curve-timing-function !default;\n\n///\n/// Sets the elevation transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function transition-value(\n  $duration: $transition-duration,\n  $easing: $transition-timing-function\n) {\n  @return #{$property} #{$duration} #{$easing};\n}\n\n///\n/// Sets the elevation overlay transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function overlay-transition-value(\n  $duration: $transition-duration,\n  $easing: $transition-timing-function\n) {\n  @return #{$overlay-property} #{$duration} #{$easing};\n}\n\n///\n/// Creates a box-shadow from the Material elevation system.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @param {Number} $opacity-boost [0] - optional opacity boost for the shadow.\n/// @return {List} the complete box shadow.\n///\n@function _box-shadow($level, $color, $opacity-boost: 0) {\n  $color: theme-color.prop-value($color);\n  $umbra-z-value: map.get($umbra-map, $level);\n  $penumbra-z-value: map.get($penumbra-map, $level);\n  $ambient-z-value: map.get($ambient-map, $level);\n\n  $umbra-color: rgba($color, $umbra-opacity + $opacity-boost);\n  $penumbra-color: rgba($color, $penumbra-opacity + $opacity-boost);\n  $ambient-color: rgba($color, $ambient-opacity + $opacity-boost);\n\n  @return (\n    #{'#{$umbra-z-value} #{$umbra-color}'},\n    #{'#{$penumbra-z-value} #{$penumbra-color}'},\n    #{$ambient-z-value} $ambient-color\n  );\n}\n\n// Returns the correct box-shadow specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@function elevation-box-shadow(\n  $z-value,\n  $color: $baseline-color,\n  $opacity-boost: 0\n) {\n  @if $z-value == null {\n    @return null;\n  }\n\n  @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {\n    @error \"$z-value must be a unitless number, but received '#{$z-value}'\";\n  }\n\n  @if $z-value < 0 or $z-value > 24 {\n    @error \"$z-value must be between 0 and 24, but received '#{$z-value}'\";\n  }\n\n  @return _box-shadow($z-value, $color, $opacity-boost);\n}\n\n///\n/// Returns a shadow or null if params are invalid.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @return {List|null} the complete box shadow or null.\n///\n@function _shadow($level, $color) {\n  @if $level == null and $color == null {\n    // Do not emit a warning if both are null, which means the user did not\n    // provide tokens.\n    @return null;\n  }\n\n  @if $level == null or $color == null {\n    // If one of the tokens is null, emit a warning: the user may not realize\n    // that both are required.\n    @warn \"both $level and $color are required; received $level: '#{$level}', $color: '#{$color}'\";\n    @return null;\n  }\n\n  @if $level < 0 or $level > 24 {\n    @warn \"$level must be between 0 and 24; received '#{$level}'\";\n    @return null;\n  }\n\n  @return _box-shadow($level, $color);\n}\n\n@function get-elevation($level) {\n  @return (box-shadow: elevation-box-shadow($level));\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin shadow($box-shadow, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(box-shadow, $box-shadow);\n  }\n}\n\n///\n/// Sets the elevation overlay surface required positioning.\n///\n@mixin overlay-surface-position($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    /* @alternate */\n    position: relative;\n  }\n}\n\n///\n/// Sets the dimensions of the elevation overlay, including positioning and sizing.\n///\n/// @param {Number} $width - The width of the elevation overlay\n/// @param {Number} [$height] - The height of the elevation overlay\n/// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing\n///\n@mixin overlay-dimensions(\n  $width,\n  $height: $width,\n  $has-content-sizing: true,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-elevation-overlay {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(width, $width);\n      @include theme.property(height, $height);\n\n      @if $has-content-sizing {\n        top: 0;\n        @include rtl.ignore-next-line();\n        left: 0;\n      } @else {\n        top: 50%;\n        @include rtl.ignore-next-line();\n        left: 50%;\n        @include rtl.ignore-next-line();\n        transform: translate(-50%, -50%);\n      }\n    }\n  }\n}\n\n///\n/// Sets the elevation overlay fill color.\n/// Expected to be called directly on the elevation overlay element.\n///\n/// @param {Color} $color - The color of the elevation overlay.\n///\n@mixin overlay-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n///\n/// Applies the given color to the container of the overlay.\n/// @param {color} $color - the color of the overlay container\n///\n@mixin overlay-container-color($color, $query: feature-targeting.all()) {\n  .mdc-elevation-overlay {\n    @include overlay-fill-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets the elevation overlay opacity.\n/// Expected to be called from a parent element.\n///\n/// @param {Number} $opacity - The opacity of the elevation overlay.\n///\n@mixin overlay-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-elevation-overlay {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@mixin elevation(\n  $z-value,\n  $color: $baseline-color,\n  $opacity-boost: 0,\n  $query: feature-targeting.all()\n) {\n  $box-shadow: elevation-box-shadow(\n    $z-value,\n    $color: $color,\n    $opacity-boost: $opacity-boost\n  );\n\n  @include shadow($box-shadow, $query: $query);\n}\n\n///\n/// Represents the configurable values of the elevation theme.\n///\n$_theme-values: (\n  shadow: null,\n  overlay-opacity: null,\n  overlay-color: null,\n);\n\n///\n/// Applies the shadow theme with the given $resolver function.\n/// @param {Function} $resolver - a function that returns a valid theme config.\n///   @see resolver for an example and expected arguments and return value.\n/// Accepts the following optional keyword args:\n/// @param {Number} $elevation - the level in the elevation system.\n/// @param {String} $shadow-color - the color used for the shadow.\n///\n@mixin with-resolver($resolver, $query: feature-targeting.all(), $args...) {\n  @if $resolver {\n    @include _theme(meta.call($resolver, $args...), $query: $query);\n  }\n}\n\n///\n/// Applies the given theme with validation.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin theme-styles($theme: (), $query: feature-targeting.all()) {\n  $theme: validate.theme-styles($_theme-values, $theme, $require-all: false);\n  @include _theme($theme, $query: $query);\n}\n\n///\n/// Applies the given theme.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin _theme($theme: (), $query: feature-targeting.all()) {\n  @include shadow(map.get($theme, shadow), $query: $query);\n  @include overlay-opacity(map.get($theme, overlay-opacity), $query: $query);\n  @include overlay-container-color(\n    map.get($theme, overlay-color),\n    $query: $query\n  );\n}\n\n///\n/// Transforms the following optional parameters into a theme config.\n/// @param {Number} $elevation - the level of the elevation system in Material.\n/// @param {String} $shadow-color - the color to be used by the shadow.\n/// @return {Map} @see $_theme-values for accepted theme properties.\n///\n@function resolver($args...) {\n  $opts: meta.keywords($args);\n  $elevation: map.get($opts, elevation);\n  $shadow-color: map.get($opts, shadow-color);\n  @if custom-properties.is-custom-prop($elevation) {\n    @return _resolve-custom-props($elevation, $shadow-color);\n  }\n\n  @return (shadow: _shadow($elevation, $shadow-color));\n}\n\n@function _resolve-custom-props($elevation, $shadow-color) {\n  $fallback-dp: custom-properties.get-fallback($elevation);\n  $fallback-shadow-color: custom-properties.get-fallback($shadow-color);\n  $shadow: custom-properties.set-fallback(\n    $elevation,\n    _shadow($fallback-dp, $fallback-shadow-color)\n  );\n  @return (shadow: $shadow);\n}\n"
  },
  {
    "path": "packages/mdc-elevation/_elevation.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use './elevation-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @for $z-value from 0 through 24 {\n    .mdc-elevation--z#{$z-value} {\n      @include elevation-theme.elevation($z-value, $query: $query);\n    }\n  }\n\n  .mdc-elevation-transition {\n    @include feature-targeting.targets($feat-animation) {\n      transition: elevation-theme.transition-value();\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      will-change: elevation-theme.$property;\n    }\n  }\n}\n\n///\n/// Called once per application to set up the global default elevation styles.\n///\n@mixin overlay-common($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-elevation-overlay {\n    @include feature-targeting.targets($feat-structure) {\n      @include base-mixins.emit-once('mdc-elevation/common/structure') {\n        position: absolute;\n        border-radius: inherit;\n        pointer-events: none;\n\n        @include theme.property(\n          opacity,\n          custom-properties.create(--mdc-elevation-overlay-opacity, 0)\n        );\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      @include base-mixins.emit-once('mdc-elevation/common/animation') {\n        transition: elevation-theme.overlay-transition-value();\n      }\n    }\n\n    @include base-mixins.emit-once('mdc-elevation/common/color') {\n      $fill-color: custom-properties.create(\n        --mdc-elevation-overlay-color,\n        elevation-theme.$overlay-color\n      );\n      @include elevation-theme.overlay-fill-color($fill-color, $query: $query);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-elevation/_functions.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-elevation-* hide mdc-elevation-core-styles, mdc-elevation-overlay-common, mdc-elevation-shadow, mdc-elevation-overlay-surface-position, mdc-elevation-overlay-dimensions, mdc-elevation-overlay-fill-color, mdc-elevation-overlay-opacity, mdc-elevation-elevation, mdc-elevation-overlay-selector-;\n"
  },
  {
    "path": "packages/mdc-elevation/_functions.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_elevation-theme.scss' instead.\n@forward './elevation-theme' show transition-value, overlay-transition-value, elevation-box-shadow;\n"
  },
  {
    "path": "packages/mdc-elevation/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-elevation/_mixins.import.scss",
    "content": "@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"./index\" as mdc-* show mdc-elevation;\n"
  },
  {
    "path": "packages/mdc-elevation/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './elevation-theme' show shadow, overlay-surface-position, overlay-dimensions, overlay-fill-color, overlay-opacity, elevation;\n@forward './elevation' show core-styles, overlay-common, overlay-selector_;\n"
  },
  {
    "path": "packages/mdc-elevation/_variables.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-elevation-* hide mdc-elevation-core-styles, mdc-elevation-overlay-common, mdc-elevation-shadow, mdc-elevation-overlay-surface-position, mdc-elevation-overlay-dimensions, mdc-elevation-overlay-fill-color, mdc-elevation-overlay-opacity, mdc-elevation-elevation, mdc-elevation-overlay-selector-, mdc-elevation-transition-value, mdc-elevation-overlay-transition-value;\n"
  },
  {
    "path": "packages/mdc-elevation/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_elevation-theme.scss' instead.\n@forward './elevation-theme' show $baseline-color, $umbra-opacity, $penumbra-opacity, $ambient-opacity, $umbra-map, $penumbra-map, $ambient-map, $property, $overlay-color, $overlay-property, $transition-duration, $transition-timing-function;\n"
  },
  {
    "path": "packages/mdc-elevation/mdc-elevation.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import 'styles.scss' module instead.\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-elevation/overlay-styles.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './elevation';\n@include elevation.overlay-common;\n"
  },
  {
    "path": "packages/mdc-elevation/package.json",
    "content": "{\n  \"name\": \"@material/elevation\",\n  \"description\": \"Material Components for the web mixins + CSS Classes for Material Design elevation\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"elevation\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-elevation\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-elevation/styles.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './elevation';\n@include elevation.core-styles;\n"
  },
  {
    "path": "packages/mdc-elevation/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as elevation;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include elevation.core-styles($query: $query);\n    @include elevation.overlay-common($query: $query);\n    @include elevation.elevation(0, $query: $query);\n    @include elevation.shadow(none, $query: $query);\n    @include elevation.overlay-dimensions(100%, $query: $query);\n    @include elevation.overlay-surface-position($query: $query);\n    @include elevation.overlay-fill-color(red, $query: $query);\n    @include elevation.overlay-opacity(99%, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-elevation/test/mdc-elevation.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-elevation.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-fab/README.md",
    "content": "<!--docs:\ntitle: \"Floating Action Button\"\nlayout: detail\nsection: components\nexcerpt: \"A floating action button represents the primary action in an application\"\niconId: button\npath: /catalog/buttons/floating-action-buttons/\n-->\n\n# Floating action buttons\n\nA floating action button (FAB) represents the primary action of a screen.\n\nThere are three types of FABS:\n\n1. [Regular FABs](#regular-fabs)\n2. [Mini FABs](#mini-fabs)\n3. [Extended FABs](#extended-fabs)\n\n![Regular FAB example](images/FAB_types.png)\n\n## Using FABs\n\nA FAB performs the primary, or most common, action on a screen. It appears in\nfront of all screen content, typically as a circular shape with an icon in its\ncenter.\n\n### Installation\n\n```\nnpm install @material/fab\n```\n\n### Styles\n\n```scss\n@use \"@material/fab\";\n\n@include fab.core-styles;\n```\n\n### Loading icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\nThe FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Making FABs accessible\n\nMaterial Design spec advises that touch targets should be at least\n48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px.\nAdd the following to meet this requirement for mini FABs:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nAdditionally, to support rendering focused FABs in High Contrast Mode, add the\nfollowing `mdc-fab__focus-ring` element:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-fab mdc-fab--mini mdc-fab--touch\">\n    <div class=\"mdc-fab__ripple\"></div>\n    <div class=\"mdc-fab__focus-ring\"></div>\n    <span class=\"material-icons mdc-fab__icon\">add</span>\n    <div class=\"mdc-fab__touch\"></div>\n  </button>\n</div>\n```\n\n## Regular FABs\n\nRegular FABs are FABs that are not expanded and are a regular size.\n\n### Regular FAB example\n\n```html\n<button class=\"mdc-fab\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n**Note: The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.**\n\n**Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.**\n\n## Mini FABs\n\nA mini FAB should be used on smaller screens.\n\nMini FABs can also be used to create visual continuity with other screen elements.\n\n### Mini FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--mini\" aria-label=\"Favorite\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"mdc-fab__icon material-icons\">favorite</span>\n</button>\n```\n\n## Extended FABs\n\nThe extended FAB is wider, and it includes a text label.\n\n### Extended FAB example\n\n```html\n<button class=\"mdc-fab mdc-fab--extended\">\n  <div class=\"mdc-fab__ripple\"></div>\n  <span class=\"material-icons mdc-fab__icon\">add</span>\n  <span class=\"mdc-fab__label\">Create</span>\n</button>\n```\n\n**Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.**\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab__ripple` | Mandatory, for the element which shows the ripple.\n`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.\n`mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Sass mixins\n\n#### Basic Sass mixins\n\nMDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.\n`extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.\n\n#### Advanced Sass mixins\n\n> **A note about advanced mixins**: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`container-color($color)` | Sets the container color to the given color\n`icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`ink-color($color)` | Sets the ink color to the given color\n`extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides.\n`extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n"
  },
  {
    "path": "packages/mdc-fab/_extended-fab-theme.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/replace';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/typography/typography';\n@use './fab-theme';\n@use 'sass:math';\n@use 'sass:map';\n@use 'sass:list';\n\n$extended-icon-padding: 12px !default;\n$extended-label-padding: 20px !default;\n$extended-height: 48px !default;\n\n$extended-light-theme: (\n  container-color: theme-color.$surface,\n  container-elevation: 3,\n  container-height: 56px,\n  container-shadow-color: black,\n  container-shape: 50%,\n  container-surface-tint-layer-color: null,\n  focus-container-elevation: null,\n  focus-icon-color: null,\n  focus-label-text-color: null,\n  focus-outline-color: null,\n  focus-outline-width: null,\n  focus-state-layer-color: theme-color.$primary,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-icon-color: null,\n  hover-label-text-color: null,\n  hover-state-layer-color: theme-color.$primary,\n  hover-state-layer-opacity: null,\n  icon-color: null,\n  icon-size: 36px,\n  label-text-color: theme-color.$on-surface,\n  label-text-font: typography.get-font(button),\n  label-text-size: typography.get-size(button),\n  label-text-tracking: typography.get-tracking(button),\n  label-text-weight: typography.get-weight(button),\n  lowered-container-elevation: null,\n  lowered-focus-container-elevation: null,\n  lowered-hover-container-elevation: null,\n  lowered-pressed-container-elevation: null,\n  pressed-container-elevation: null,\n  pressed-icon-color: null,\n  pressed-label-text-color: null,\n  pressed-ripple-color: null,\n  pressed-ripple-opacity: null,\n  pressed-state-layer-color: theme-color.$primary,\n  pressed-state-layer-opacity: null,\n);\n\n$custom-property-prefix: 'extended-fab';\n\n///\n/// Applies the given theme as custom properties without any selectors.\n///\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($extended-light-theme, $theme);\n  $resolved-theme: fab-theme.resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $resolved-theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($extended-light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include fab-theme.base-theme-styles($theme, $resolvers: $resolvers);\n  $container-shape: map.get($theme, container-shape);\n  @if $container-shape {\n    @include extended-shape-radius($container-shape);\n  }\n  @include _label-color(\n    (\n      default: map.get($theme, label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n    )\n  );\n  @include _label-typography(\n    (\n      font: map.get($theme, label-text-font),\n      size: map.get($theme, label-text-size),\n      weight: map.get($theme, label-text-weight),\n      tracking: map.get($theme, label-text-tracking),\n    )\n  );\n}\n\n@mixin extended-fluid($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: 100%;\n  }\n}\n\n@mixin extended-padding(\n  $icon-padding,\n  $label-padding,\n  $focus-outline-width: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include extended-label-padding($label-padding, $query: $query);\n\n  // Offsets the outer label padding by deducting it from icon padding.\n  .mdc-fab__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include extended-icon-padding($icon-padding, $label-padding);\n    }\n  }\n\n  // For Extended FAB with text label followed by icon.\n  .mdc-fab__label + .mdc-fab__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include extended-icon-padding(\n        $icon-padding,\n        $label-padding,\n        $is-icon-at-end: true\n      );\n    }\n  }\n\n  @if $focus-outline-width {\n    @include fab-theme.focus-outline-width(\n      $focus-outline-width,\n      $padding: 0 $label-padding\n    );\n  }\n}\n\n@mixin extended-icon-padding(\n  $icon-padding,\n  $label-padding,\n  $is-icon-at-end: false\n) {\n  $start: 'calc(icon - label)';\n  $end: $icon-padding;\n\n  @if $is-icon-at-end {\n    $start: $icon-padding;\n    $end: 'calc(icon - label)';\n  }\n\n  @include rtl.reflexive-property(\n    margin,\n    $start,\n    $end,\n    $replace: (icon: $icon-padding, label: $label-padding)\n  );\n}\n\n@mixin extended-label-padding($label-padding, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(padding-left, $label-padding, $gss: (noflip: true));\n    @include theme.property(\n      padding-right,\n      $label-padding,\n      $gss: (noflip: true)\n    );\n  }\n}\n\n@mixin extended-shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  // Extended FABs _do_ need a $component-height since they are not circular.\n  // Percentage radii must be resolved.\n  @include shape-mixins.radius(\n    $radius,\n    $rtl-reflexive,\n    $component-height: $extended-height,\n    $query: $query\n  );\n\n  #{fab-theme.$ripple-target} {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $extended-height,\n      $query: $query\n    );\n  }\n}\n\n@mixin _label-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-label-color(state.get-default-state($color-or-map));\n\n    &:hover {\n      @include _set-label-color(state.get-hover-state($color-or-map));\n    }\n\n    &:focus {\n      @include _set-label-color(state.get-focus-state($color-or-map));\n    }\n\n    &:active {\n      @include _set-label-color(state.get-pressed-state($color-or-map));\n    }\n  }\n\n  &:disabled {\n    @include _set-label-color(state.get-disabled-state($color-or-map));\n  }\n}\n\n@mixin _set-label-color($color) {\n  .mdc-fab__label {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _label-typography($typography-map) {\n  @include theme.property(font-family, map.get($typography-map, font));\n  @include theme.property(font-size, map.get($typography-map, size));\n  @include theme.property(font-weight, map.get($typography-map, weight));\n  @include theme.property(letter-spacing, map.get($typography-map, tracking));\n}\n"
  },
  {
    "path": "packages/mdc-fab/_fab-custom-properties.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$extended-icon-padding: --mdc-fab-extended-icon-padding;\n$extended-label-padding: --mdc-fab-extended-label-padding;\n"
  },
  {
    "path": "packages/mdc-fab/_fab-small-theme.scss",
    "content": "// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use './fab-theme';\n@use 'sass:map';\n\n$height: 56px !default;\n$mini-height: 40px !default;\n$shape-radius: 50% !default;\n$ripple-target: '.mdc-fab__ripple';\n\n$_light-theme: (\n  container-color: secondary,\n  container-elevation: 6,\n  container-height: 40px,\n  container-shadow-color: black,\n  container-shape: $shape-radius,\n  container-width: 40px,\n  focus-container-elevation: null,\n  focus-icon-color: null,\n  focus-outline-color: null,\n  focus-outline-width: null,\n  focus-state-layer-color: theme-color.$primary,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-icon-color: null,\n  hover-state-layer-color: theme-color.$primary,\n  hover-state-layer-opacity: null,\n  icon-color: on-secondary,\n  icon-size: 24px,\n  lowered-container-elevation: null,\n  lowered-focus-container-elevation: null,\n  lowered-hover-container-elevation: null,\n  lowered-pressed-container-elevation: null,\n  pressed-container-elevation: null,\n  pressed-icon-color: null,\n  pressed-ripple-color: null,\n  pressed-ripple-opacity: null,\n  pressed-state-layer-color: theme-color.$primary,\n  pressed-state-layer-opacity: null,\n);\n\n$custom-property-prefix: 'fab-small';\n\n///\n/// Applies the given theme as custom properties without any selectors.\n///\n/// @param {Map} $theme - Theme configuration to use for theming the small fab.\n/// @param {Map} $resolvers [resolvers.$material] - map of resolver functions\n///     that resolve token names to a valid Material theme config.\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $resolved-theme: fab-theme.resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $resolved-theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n///\n/// Applies the themable styles for small fabs and exposes CSS custom properties\n/// as well as selectors.\n///\n/// @param {Map} $theme - Theme configuration to use for theming the small fab.\n/// @param {Map} $resolvers [resolvers.$material] - map of resolver functions\n///     that resolve token names to a valid Material theme config.\n///\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include fab-theme.base-theme-styles($theme, $resolvers: $resolvers);\n\n  $shape-radius: map.get($theme, container-shape);\n  @if $shape-radius {\n    @include fab-theme.shape-radius($shape-radius);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-fab/_fab-theme.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/elevation-theme';\n@use '@material/animation/functions' as animation-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/replace';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use './fab-custom-properties';\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n$height: 56px !default;\n$mini-height: 40px !default;\n$shape-radius: 50% !default;\n$ripple-target: '.mdc-fab__ripple';\n\n$light-theme: (\n  container-color: secondary,\n  container-elevation: 6,\n  container-height: 56px,\n  container-shadow-color: black,\n  container-shape: $shape-radius,\n  container-surface-tint-layer-color: null,\n  container-width: 56px,\n  focus-container-elevation: null,\n  focus-icon-color: null,\n  focus-outline-color: null,\n  focus-outline-width: null,\n  focus-state-layer-color: theme-color.$primary,\n  focus-state-layer-opacity: null,\n  hover-container-elevation: null,\n  hover-icon-color: null,\n  hover-state-layer-color: theme-color.$primary,\n  hover-state-layer-opacity: null,\n  icon-color: on-secondary,\n  icon-size: 24px,\n  lowered-container-elevation: null,\n  lowered-focus-container-elevation: null,\n  lowered-hover-container-elevation: null,\n  lowered-pressed-container-elevation: null,\n  pressed-container-elevation: null,\n  pressed-icon-color: null,\n  pressed-ripple-color: null,\n  pressed-ripple-opacity: null,\n  pressed-state-layer-color: theme-color.$primary,\n  pressed-state-layer-opacity: null,\n);\n\n$custom-property-prefix: 'fab';\n\n///\n/// Applies the given theme as custom properties without any selectors.\n///\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $resolved-theme: resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $resolved-theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include base-theme-styles($theme, $resolvers: $resolvers);\n\n  $shape-radius: map.get($theme, container-shape);\n  @if $shape-radius {\n    @include shape-radius($shape-radius);\n  }\n}\n\n///\n/// Resolves the given theme with the given resolvers.\n///\n@function resolve-theme($theme, $resolvers) {\n  $elevation-resolver: map.get($resolvers, elevation);\n  @return _resolve-theme-elevation-keys(\n    $theme,\n    $elevation-resolver,\n    (\n      container-elevation,\n      hover-container-elevation,\n      focus-container-elevation,\n      pressed-container-elevation,\n      disabled-container-elevation,\n      lowered-container-elevation,\n      lowered-focus-container-elevation,\n      lowered-hover-container-elevation,\n      lowered-pressed-container-elevation\n    )\n  );\n}\n\n///\n/// Returns the theme with the elevation keys resolved.\n///\n@function _resolve-theme-elevation-keys($theme, $resolver, $elevation-keys) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  // Shadow color is universal for the component.\n  $shadow-color: map.get($theme, container-shadow-color);\n\n  @each $key in $elevation-keys {\n    $elevation: map.get($theme, $key);\n    @if $elevation != null {\n      $resolved-value: meta.call(\n        $resolver,\n        $elevation: $elevation,\n        $shadow-color: $shadow-color\n      );\n      // Update the key with the resolved value.\n      $theme: map.set($theme, $key, $resolved-value);\n    }\n  }\n\n  @return $theme;\n}\n\n@mixin base-theme-styles($theme, $resolvers: resolvers.$material) {\n  @include container-color(map.get($theme, container-color));\n  @include _container-elevation(\n    map.get($resolvers, elevation),\n    map.get($theme, container-shadow-color),\n    map.get($theme, container-surface-tint-layer-color),\n    (\n      default: map.get($theme, container-elevation),\n      hover: map.get($theme, hover-container-elevation),\n      focus: map.get($theme, focus-container-elevation),\n      pressed: map.get($theme, pressed-container-elevation),\n    )\n  );\n  @include _container-height(map.get($theme, container-height));\n  @include _container-width(map.get($theme, container-width));\n  @include icon-size(map.get($theme, icon-size));\n  @include _icon-color(\n    (\n      default: map.get($theme, icon-color),\n      hover: map.get($theme, hover-icon-color),\n      focus: map.get($theme, focus-icon-color),\n      pressed: map.get($theme, pressed-icon-color),\n    )\n  );\n\n  $opacity-map: (\n    hover: map.get($theme, hover-state-layer-opacity),\n    focus: map.get($theme, focus-state-layer-opacity),\n    press: map.get($theme, pressed-state-layer-opacity),\n  );\n  $hover-state-layer-color: map.get($theme, hover-state-layer-color);\n  @if $hover-state-layer-color {\n    @include ripple-color($hover-state-layer-color, $opacity-map: $opacity-map);\n  }\n\n  $focus-outline-color: map.get($theme, focus-outline-color);\n  @if $focus-outline-color {\n    @include focus-outline-color($focus-outline-color);\n  }\n  $focus-outline-width: map.get($theme, focus-outline-width);\n  @if $focus-outline-width {\n    @include focus-outline-width($focus-outline-width);\n  }\n}\n\n@mixin ripple-color($color, $opacity-map: (), $query: feature-targeting.all()) {\n  @include ripple-theme.states(\n    $color,\n    $opacity-map: $opacity-map,\n    $query: $query,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin accessible($container-color, $query: feature-targeting.all()) {\n  @include container-color($container-color, $query: $query);\n\n  $fill-tone: theme-color.tone($container-color);\n\n  @if ($fill-tone == 'dark') {\n    @include ink-color(text-primary-on-dark, $query: $query);\n    @include ripple-theme.states(\n      text-primary-on-dark,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  } @else {\n    @include ink-color(text-primary-on-light, $query: $query);\n    @include ripple-theme.states(\n      text-primary-on-light,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin container-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin icon-size($width, $height: $width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-fab__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('width', $width);\n      @include theme.property('height', $height);\n      @include theme.property('font-size', $height);\n    }\n  }\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    &,\n    &:not(:disabled) .mdc-fab__icon,\n    &:not(:disabled) .mdc-fab__label,\n    &:disabled .mdc-fab__icon,\n    &:disabled .mdc-fab__label {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _container-height($height) {\n  @include theme.property('height', $height);\n}\n\n@mixin _container-width($width) {\n  @include theme.property('width', $width);\n}\n\n@mixin _icon-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-icon-color(state.get-default-state($color-or-map));\n\n    &:hover {\n      @include _set-icon-color(state.get-hover-state($color-or-map));\n    }\n\n    &:focus {\n      @include _set-icon-color(state.get-focus-state($color-or-map));\n    }\n\n    &:active {\n      @include _set-icon-color(state.get-pressed-state($color-or-map));\n    }\n  }\n\n  &:disabled {\n    @include _set-icon-color(state.get-disabled-state($color-or-map));\n  }\n}\n\n@mixin _set-icon-color($color) {\n  .mdc-fab__icon {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _container-elevation($resolver, $shadow-color, $container-color, $map) {\n  &:not(:disabled) {\n    @include elevation-theme.with-resolver(\n      $resolver,\n      $elevation: state.get-default-state($map),\n      $shadow-color: $shadow-color\n    );\n    @include elevation-theme.overlay-container-color($container-color);\n\n    &:hover {\n      @include elevation-theme.with-resolver(\n        $resolver,\n        $elevation: state.get-hover-state($map),\n        $shadow-color: $shadow-color\n      );\n      @include elevation-theme.overlay-container-color($container-color);\n    }\n\n    &:focus {\n      @include elevation-theme.with-resolver(\n        $resolver,\n        $elevation: state.get-focus-state($map),\n        $shadow-color: $shadow-color\n      );\n      @include elevation-theme.overlay-container-color($container-color);\n    }\n\n    &:active {\n      @include elevation-theme.with-resolver(\n        $resolver,\n        $elevation: state.get-pressed-state($map),\n        $shadow-color: $shadow-color\n      );\n      @include elevation-theme.overlay-container-color($container-color);\n    }\n  }\n\n  &:disabled {\n    // FAB does not have disabled state. Use default state's elevation.\n    @include elevation-theme.with-resolver(\n      $resolver,\n      $elevation: state.get-default-state($map),\n      $shadow-color: $shadow-color\n    );\n  }\n}\n\n///\n/// Sets outline width only when button is in focus. Also sets padding to\n/// include outline on focus (Helps prevent size jump on focus).\n/// @param {Number} $width - Outline (border) width.\n/// @param {Number|List} $padding [0] - Padding when button is not in focus.\n///     Offsets padding based on given outline width on focus.\n///\n@mixin focus-outline-width(\n  $width,\n  $padding: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $padding: css.unpack-value($padding);\n  $padding-fallbacks: (0 0 0 0);\n  $is-padding-custom-prop: (false false false false);\n  $is-width-custom-prop: custom-properties.is-custom-prop($width);\n  $width-fallback: if(\n    custom-properties.is-custom-prop($width),\n    custom-properties.get-fallback($width),\n    $width\n  );\n  $width: if(\n    custom-properties.is-custom-prop($width),\n    custom-properties.get-declaration-value($width),\n    $width\n  );\n\n  // conform padding values and extract custom property metadata from them\n  @for $i from 1 through list.length($padding) {\n    $value: list.nth($padding, $i);\n    $value-is-custom-prop: custom-properties.is-custom-prop($value);\n    // css max will fail to compare a bare 0 to a px value\n    $value: if($value == 0, 0px, $value);\n    $value-fallback: if(\n      $value-is-custom-prop,\n      custom-properties.get-fallback($value),\n      $value\n    );\n    $value: if(\n      $value-is-custom-prop,\n      custom-properties.get-declaration-value($value),\n      $value\n    );\n\n    $padding: list.set-nth($padding, $i, $value);\n    $padding-fallbacks: list.set-nth($padding-fallbacks, $i, $value-fallback);\n    $is-padding-custom-prop: list.set-nth(\n      $is-padding-custom-prop,\n      $i,\n      $value-is-custom-prop\n    );\n  }\n\n  // Padding should include outline width which will be set on focus.\n  // sass math required for IE since IE doesn't support css max\n  $padding-top-fallback: math.max(\n    list.nth($padding-fallbacks, 1),\n    $width-fallback\n  );\n  $padding-right-fallback: math.max(\n    list.nth($padding-fallbacks, 2),\n    $width-fallback\n  );\n  $padding-bottom-fallback: math.max(\n    list.nth($padding-fallbacks, 3),\n    $width-fallback\n  );\n  $padding-left-fallback: math.max(\n    list.nth($padding-fallbacks, 4),\n    $width-fallback\n  );\n\n  $padding-top: replace.replace-string(\n    'max(paddingval, width)',\n    (\n      paddingval: list.nth($padding, 1),\n      width: $width,\n    )\n  );\n  $padding-right: replace.replace-string(\n    'max(paddingval, width)',\n    (\n      paddingval: list.nth($padding, 2),\n      width: $width,\n    )\n  );\n  $padding-bottom: replace.replace-string(\n    'max(paddingval, width)',\n    (\n      paddingval: list.nth($padding, 3),\n      width: $width,\n    )\n  );\n  $padding-left: replace.replace-string(\n    'max(paddingval, width)',\n    (\n      paddingval: list.nth($padding, 4),\n      width: $width,\n    )\n  );\n\n  $top-has-custom-prop: $is-width-custom-prop or\n    list.nth($is-padding-custom-prop, 1);\n  @include css.declaration(padding-top, $padding-top-fallback);\n  @if $top-has-custom-prop {\n    @include css.declaration(\n      padding-top,\n      $padding-top,\n      $gss: (alternate: $top-has-custom-prop)\n    );\n  }\n\n  $right-has-custom-prop: $is-width-custom-prop or\n    list.nth($is-padding-custom-prop, 2);\n  @include css.declaration(padding-right, $padding-right-fallback);\n  @if $right-has-custom-prop {\n    @include css.declaration(\n      padding-right,\n      $padding-right,\n      $gss: (alternate: $right-has-custom-prop)\n    );\n  }\n\n  $bottom-has-custom-prop: $is-width-custom-prop or\n    list.nth($is-padding-custom-prop, 3);\n  @include css.declaration(padding-bottom, $padding-bottom-fallback);\n  @if $bottom-has-custom-prop {\n    @include css.declaration(\n      padding-bottom,\n      $padding-bottom,\n      $gss: (alternate: $bottom-has-custom-prop)\n    );\n  }\n\n  $left-has-custom-prop: $is-width-custom-prop or\n    list.nth($is-padding-custom-prop, 4);\n  @include css.declaration(padding-left, $padding-left-fallback);\n  @if $left-has-custom-prop {\n    @include css.declaration(\n      padding-left,\n      $padding-left,\n      $gss: (alternate: $left-has-custom-prop)\n    );\n  }\n\n  &:not(:disabled) {\n    @include ripple-theme.focus() {\n      @include feature-targeting.targets($feat-structure) {\n        border-style: solid;\n        @include theme.property(border-width, $width);\n\n        // sass math required for IE since IE doesn't support css max\n        $padding-top-fallback: math.abs(\n          list.nth($padding-fallbacks, 1) - $width-fallback\n        );\n        $padding-right-fallback: math.abs(\n          list.nth($padding-fallbacks, 2) - $width-fallback\n        );\n        $padding-bottom-fallback: math.abs(\n          list.nth($padding-fallbacks, 3) - $width-fallback\n        );\n        $padding-left-fallback: math.abs(\n          list.nth($padding-fallbacks, 4) - $width-fallback\n        );\n\n        // max(a, calc(a * -1)) is equivalent to math.abs\n        $padding-top: replace.replace-string(\n          'max(paddingcalc, calc(paddingcalc * -1))',\n          (\n            paddingcalc: 'calc(paddingval - width)',\n            paddingval: list.nth($padding, 1),\n            width: $width,\n          )\n        );\n        $padding-right: replace.replace-string(\n          'max(paddingcalc, calc(paddingcalc * -1))',\n          (\n            paddingcalc: 'calc(paddingval - width)',\n            paddingval: list.nth($padding, 2),\n            width: $width,\n          )\n        );\n        $padding-bottom: replace.replace-string(\n          'max(paddingcalc, calc(paddingcalc * -1))',\n          (\n            paddingcalc: 'calc(paddingval - width)',\n            paddingval: list.nth($padding, 3),\n            width: $width,\n          )\n        );\n        $padding-left: replace.replace-string(\n          'max(paddingcalc, calc(paddingcalc * -1))',\n          (\n            paddingcalc: 'calc(paddingval - width)',\n            paddingval: list.nth($padding, 4),\n            width: $width,\n          )\n        );\n\n        @include css.declaration(padding-top, $padding-top-fallback);\n        @if $top-has-custom-prop {\n          @include css.declaration(\n            padding-top,\n            $padding-top,\n            $gss: (alternate: $top-has-custom-prop)\n          );\n        }\n        @include css.declaration(padding-right, $padding-right-fallback);\n        @if $right-has-custom-prop {\n          @include css.declaration(\n            padding-right,\n            $padding-right,\n            $gss: (alternate: $right-has-custom-prop)\n          );\n        }\n        @include css.declaration(padding-bottom, $padding-bottom-fallback);\n        @if $bottom-has-custom-prop {\n          @include css.declaration(\n            padding-bottom,\n            $padding-bottom,\n            $gss: (alternate: $bottom-has-custom-prop)\n          );\n        }\n        @include css.declaration(padding-left, $padding-left-fallback);\n        @if $left-has-custom-prop {\n          @include css.declaration(\n            padding-left,\n            $padding-left,\n            $gss: (alternate: $left-has-custom-prop)\n          );\n        }\n      }\n    }\n  }\n}\n\n///\n/// Sets outline color only when button is in focus. Use `focus-outline-width()`\n/// to set appropriate outline width.\n/// @param {Color} $color - Outline (border) color.\n///\n@mixin focus-outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &:not(:disabled) {\n    @include ripple-theme.focus() {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(border-color, $color);\n      }\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  &:not(.mdc-fab--extended) {\n    // Do not specify $component-height for shape radius. FABs are circular,\n    // which means they can use percentage border radius without resolving to\n    // a component height.\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n\n    #{$ripple-target} {\n      @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-fab/_fab.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/elevation/elevation-theme';\n@use '@material/elevation/elevation';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/replace';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/typography/typography';\n@use './fab-custom-properties';\n@use './extended-fab-theme';\n@use './fab-theme';\n@use 'sass:math';\n@use 'sass:list';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  // postcss-bem-linter: define fab\n\n  @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n  // prettier-ignore\n  @include elevation.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-fab {\n    @include base_($query: $query);\n  }\n\n  .mdc-fab--mini {\n    @include mini_($query: $query);\n  }\n\n  .mdc-fab--extended {\n    @include extended_($query: $query);\n  }\n\n  .mdc-fab--touch {\n    @include touch-target-mixins.margin(\n      $component-height: fab-theme.$mini-height,\n      $component-width: fab-theme.$mini-height,\n      $query: $query\n    );\n\n    .mdc-fab__touch {\n      @include touch-target-mixins.touch-target(\n        $set-width: true,\n        $query: $query\n      );\n    }\n  }\n\n  .mdc-fab::before {\n    @include dom-mixins.transparent-border($query: $query);\n  }\n\n  .mdc-fab__label {\n    @include label_($query: $query);\n  }\n\n  .mdc-fab__icon {\n    @include icon_($query: $query);\n  }\n\n  // Increase specificity for FAB icon styles that need to override styles defined for .material-icons\n  // (which is loaded separately so the order of CSS definitions is not guaranteed)\n  .mdc-fab .mdc-fab__icon {\n    @include icon-overrides_($query: $query);\n  }\n\n  .mdc-fab--exited {\n    @include exited_($query: $query);\n  }\n  // postcss-bem-linter: end\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  @include static-styles($query: $query);\n\n  .mdc-fab {\n    @include fab-theme.container-color(secondary, $query: $query);\n    @include fab-theme.icon-size(24px, $query: $query);\n    @include fab-theme.ink-color(on-secondary, $query: $query);\n    @include fab-theme.shape-radius(fab-theme.$shape-radius, $query: $query);\n    @include elevation-theme.elevation(6, $query: $query);\n  }\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-fab {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: fab-theme.$ripple-target\n    );\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: fab-theme.$ripple-target\n    );\n    // Set `$opacity-map` to null to apply default opacity-map.\n    @include fab-theme.ripple-color(\n      on-secondary,\n      $opacity-map: null,\n      $query: $query\n    );\n\n    #{fab-theme.$ripple-target} {\n      @include ripple.target-common($query: $query);\n\n      @include feature-targeting.targets($feat-structure) {\n        overflow: hidden;\n      }\n    }\n    @include ripple-theme.behind-content(\n      fab-theme.$ripple-target,\n      $query: $query\n    );\n  }\n}\n\n$icon-enter-delay_: 90ms;\n$icon-enter-duration_: 180ms;\n\n@mixin base_($query: feature-targeting.all()) {\n  @include elevation-theme.overlay-surface-position($query: $query);\n  @include elevation-theme.overlay-dimensions(100%, $query: $query);\n\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: fab-theme.$height;\n    height: fab-theme.$height;\n    padding: 0;\n    border: none;\n    fill: currentColor;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    -moz-appearance: none;\n    -webkit-appearance: none;\n    // Even though `visible` is the default, IE 11 computes the property as\n    // `hidden` in some cases, unless it's explicitly defined here.\n    overflow: visible;\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: box-shadow elevation-theme.$transition-duration\n        elevation-theme.$transition-timing-function,\n      opacity 15ms linear 30ms,\n      animation-functions.enter(\n        transform,\n        $icon-enter-duration_ + $icon-enter-delay_\n      );\n  }\n\n  &::-moz-focus-inner {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n      border: 0;\n    }\n  }\n\n  &:hover {\n    @include elevation-theme.elevation(8, $query: $query);\n  }\n\n  @include ripple-theme.focus() {\n    @include elevation-theme.elevation(8, $query: $query);\n  }\n\n  .mdc-fab__focus-ring {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n    }\n  }\n\n  @include ripple-theme.focus() {\n    .mdc-fab__focus-ring {\n      @include focus-ring.focus-ring($query: $query);\n    }\n  }\n\n  // Increase active state specificity due to ripple-theme.focus().\n  &:active,\n  &:focus:active {\n    @include elevation-theme.elevation(12, $query: $query);\n  }\n\n  &:active,\n  &:focus {\n    // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline\n    // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the\n    // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another\n    // element will receive focus instead, they can always override this property manually in their CSS.\n    @include feature-targeting.targets($feat-structure) {\n      outline: none;\n    }\n  }\n\n  &:hover {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  // stylelint-disable selector-max-type --\n  // This allows for using SVGs within them to align properly in all browsers.\n  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.\n\n  // postcss-bem-linter: ignore\n  > svg {\n    @include feature-targeting.targets($feat-structure) {\n      width: 100%;\n    }\n  }\n  // stylelint-enable selector-max-type\n}\n\n@mixin mini_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: fab-theme.$mini-height;\n    height: fab-theme.$mini-height;\n  }\n}\n\n@mixin extended_($query: feature-targeting.all()) {\n  @include typography.typography(button, $query: $query);\n  @include extended-fab-theme.extended-shape-radius(\n    fab-theme.$shape-radius,\n    $query: $query\n  );\n  $extended-icon-padding: custom-properties.create(\n    fab-custom-properties.$extended-icon-padding,\n    extended-fab-theme.$extended-icon-padding\n  );\n  $extended-label-padding: custom-properties.create(\n    fab-custom-properties.$extended-label-padding,\n    extended-fab-theme.$extended-label-padding\n  );\n  @include extended-fab-theme.extended-padding(\n    extended-fab-theme.$extended-icon-padding,\n    extended-fab-theme.$extended-label-padding,\n    $query: $query\n  );\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: auto;\n    max-width: 100%;\n    height: extended-fab-theme.$extended-height;\n    // This allows the text within the extended fab to be centered for varying font sizes.\n    /* @alternate */\n    line-height: normal;\n  }\n}\n\n@mixin icon_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: animation-functions.enter(\n      transform,\n      $icon-enter-duration_,\n      $icon-enter-delay_\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    fill: currentColor;\n    will-change: transform;\n  }\n}\n\n@mixin label_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    justify-content: flex-start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n    overflow-y: visible;\n  }\n}\n\n@mixin icon-overrides_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n@mixin exited_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    transform: scale(0);\n    opacity: 0;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: opacity 15ms linear 150ms,\n      animation-functions.exit-permanent(transform, 180ms);\n  }\n\n  .mdc-fab__icon {\n    @include feature-targeting.targets($feat-structure) {\n      transform: scale(0);\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation-functions.exit-permanent(transform, 135ms);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-fab/_index.scss",
    "content": "@forward \"./fab\" hide theme, theme-styles;\n@forward \"./extended-fab-theme\" hide theme, theme-styles, $custom-property-prefix;\n@forward \"./fab-theme\";\n"
  },
  {
    "path": "packages/mdc-fab/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-fab-*;\n"
  },
  {
    "path": "packages/mdc-fab/_mixins.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n/// @deprecated Import '_fab.scss', '_fab-theme.scss' or '_extended-fab-theme.scss' instead.\n@forward './extended-fab-theme' show extended-fluid, extended-padding, extended-icon-padding, extended-label-padding, extended-shape-radius;\n@forward './fab-theme' show $ripple-target, ripple-color, accessible, container-color, icon-size, ink-color, focus-outline-width, focus-outline-color, shape-radius;\n@forward './fab' show core-styles, without-ripple, ripple, $icon-enter-delay_, $icon-enter-duration_, base_, mini_, extended_, icon_, label_, icon-overrides_, exited_;\n"
  },
  {
    "path": "packages/mdc-fab/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-fab-* hide $mdc-fab-ripple-target, $mdc-fab-icon-enter-delay-, $mdc-fab-icon-enter-duration-, mdc-fab-core-styles, mdc-fab-without-ripple, mdc-fab-ripple, mdc-fab-accessible, mdc-fab-container-color, mdc-fab-icon-size, mdc-fab-ink-color, mdc-fab-extended-fluid, mdc-fab-extended-padding, mdc-fab-extended-label-padding, mdc-fab-shape-radius, mdc-fab-extended-shape-radius, mdc-fab-base-, mdc-fab-mini-, mdc-fab-extended-, mdc-fab-icon-, mdc-fab-label-, mdc-fab-icon-overrides-, mdc-fab-exited-;\n"
  },
  {
    "path": "packages/mdc-fab/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_fab-theme.scss' or '_extended-fab-theme.scss' instead.\n@forward './extended-fab-theme' show $extended-icon-padding, $extended-label-padding, $extended-height;\n@forward './fab-theme' show $height, $mini-height, $shape-radius;\n"
  },
  {
    "path": "packages/mdc-fab/mdc-fab.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-fab-*;\n@forward \"mixins\" as mdc-fab-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-fab\";\n"
  },
  {
    "path": "packages/mdc-fab/mdc-fab.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-fab/package.json",
    "content": "{\n  \"name\": \"@material/fab\",\n  \"description\": \"The Material Components for the web floating action button component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"floating action button\",\n    \"fab\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-fab\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-fab/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as fab;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include fab.core-styles($query: $query);\n    @include fab.without-ripple($query: $query);\n    @include fab.ripple($query: $query);\n    @include fab.accessible(red, $query: $query);\n    @include fab.container-color(red, $query: $query);\n    @include fab.icon-size(0, $query: $query);\n    @include fab.ink-color(red, $query: $query);\n    @include fab.extended-fluid($query: $query);\n    @include fab.extended-padding(0, 0, $query: $query);\n    @include fab.extended-label-padding(0, $query: $query);\n    @include fab.shape-radius(0, $query: $query);\n    @include fab.extended-shape-radius(\n      0,\n      $rtl-reflexive: false,\n      $query: $query\n    );\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-fab/test/mdc-fab.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-fab.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-feature-targeting/README.md",
    "content": "<!--docs:\ntitle: \"Feature Targeting\"\nlayout: detail\nsection: components\nexcerpt: \"Provides infrastructure to allow CSS styles to be included or excluded categorically.\"\npath: /catalog/feature-targeting/\n-->\n\n# Feature Targeting\n\nMDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.\n\nMost of the time, you shouldn't need to depend on `mdc-feature-targeting` directly. However, understanding it can be useful if you're interested in having more control over when certain types of MDC styles are emitted.\n\n## Installation\n\n```\nnpm install @material/feature-targeting\n```\n\n## Basic Usage\n\n### Styles\n\nAuthoring component styles:\n\n```scss\n@use \"@material/feature-targeting\";\n\n@mixin my-component-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // ...\n  }\n}\n```\n\nConsuming component styles:\n\n```scss\n@use \"@material/feature-targeting\";\n@use \"my-component-mixins\";\n\n// To include all styles (using the default of mdc-feature-all() defined above):\n@include my-component-core-styles;\n\n// Or, to include a specific subset of styles:\n@include my-component-core-styles(structure);\n@include my-component-core-styles(feature-targeting.any(color, typography));\n// The above two @includes and the following @include would produce equivalent results:\n@include my-component-core-styles(feature-targeting.without(animation));\n```\n\n## Sass Mixins and Functions\n\nMixin | Description\n--- | ---\n`targets($feature-targets...)` | Conditionalizes content to only be emitted if the given feature target(s) is/are queried.\n\nFunction | Description\n--- | ---\n`create-target($feature-query, $targeted-feature)` | Returns a variable to be passed to `targets` in order to filter emitted styles.\n`all($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _all_ of the specified features. Passing no arguments results in all blocks being emitted, which is the most common use case.\n`any($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _any_ of the specified features. Passing no arguments results in no blocks being emitted.\n`without($feature-query)` | Returns a query object which will result in emitting `targets` blocks that do _not_ match the specified feature.\n\n`$feature-query` and `$feature-queries` refer to one or more of the values listed below under Supported Features.\n\n### Supported Features\n\nMDC Web's styles are currently split according to the following features:\n\n* `structure` - All baseline styles that don't fit into any other category\n* `animation` - Styles responsible for causing animations and transitions to occur\n* `color` - Color-specific styles which rely on `mdc-theme` variables\n* `typography` - Typography-specific styles which rely on `mdc-typography`\n"
  },
  {
    "path": "packages/mdc-feature-targeting/_feature-targeting.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n// ==Terminology==\n// Feature:\n//   A simple string (e.g. `color`) representing a cross-cutting feature in\n//   Material.\n// Feature query:\n//   A structure that represents a query for a feature or combination of features. This may be\n//   either a feature or a map containing `op` and `queries` fields. A single feature represents a\n//   simple query for just that feature. A map represents a complex query made up of an operator,\n//   `op`, applied to a list of sub-queries, `queries`.\n//   (e.g. `color`, `(op: any, queries: (color, typography))`).\n// Feature target:\n//   A map that contains the feature being targeted as well as the current feature query. This is\n//   the structure that is intended to be passed to the `@mdc-feature-targets` mixin.\n//   (e.g. `(target: color, query: (op: any, queries: (color, typography))`).\n\n//\n// Public\n//\n\n$all-features: (structure, color, typography, animation);\n$all-query-operators: (any, all, without);\n\n// Creates a feature target from the given feature query and targeted feature.\n@function create-target($feature-query, $targeted-feature) {\n  $feature-target: (\n    query: $feature-query,\n    target: $targeted-feature,\n  );\n  $valid: verify-target_($feature-target);\n\n  @return $feature-target;\n}\n\n// Parses a list of feature targets to produce a map containing the feature query and list of\n// available features.\n@function parse-targets($feature-targets) {\n  $valid: verify-target_($feature-targets...);\n  $available-features: ();\n\n  @each $target in $feature-targets {\n    $available-features: list.append(\n      $available-features,\n      map.get($target, target)\n    );\n  }\n\n  @return (\n    available: $available-features,\n    query: map.get(list.nth($feature-targets, 1), query)\n  );\n}\n\n// Creates a feature query that is satisfied iff all of its sub-queries are satisfied.\n@function all($feature-queries...) {\n  $valid: verify-query_($feature-queries...);\n\n  @return (op: all, queries: $feature-queries);\n}\n\n// Creates a feature query that is satisfied iff any of its sub-queries are satisfied.\n@function any($feature-queries...) {\n  $valid: verify-query_($feature-queries...);\n\n  @return (op: any, queries: $feature-queries);\n}\n\n// Creates a feature query that is satisfied iff its sub-query is not satisfied.\n@function without($feature-query) {\n  $valid: verify-query_($feature-query);\n\n  // NOTE: we need to use `append`, just putting parens around a single value doesn't make it a list in Sass.\n  @return (op: without, queries: list.append((), $feature-query));\n}\n\n//\n// Package-internal\n//\n\n// Verifies that the given feature targets are valid, throws an error otherwise.\n@function verify-target_($feature-targets...) {\n  @each $target in $feature-targets {\n    @if meta.type-of($target) != map {\n      @error \"Invalid feature target: '#{$target}'. Must be a map.\";\n    }\n\n    $targeted-feature: map.get($target, target);\n    $feature-query: map.get($target, query);\n    $valid: verify-feature_($targeted-feature) and\n      verify-query_($feature-query);\n  }\n\n  @return true;\n}\n\n// Checks whether the given feature query is satisfied by the given list of available features.\n@function is-query-satisfied_($feature-query, $available-features) {\n  $valid: verify-query_($feature-query);\n  $valid: verify-feature_($available-features...);\n\n  @if meta.type-of($feature-query) == map {\n    $op: map.get($feature-query, op);\n    $sub-queries: map.get($feature-query, queries);\n\n    @if $op == without {\n      @return not\n        is-query-satisfied_(list.nth($sub-queries, 1), $available-features);\n    }\n\n    @if $op == any {\n      @each $sub-query in $sub-queries {\n        @if is-query-satisfied_($sub-query, $available-features) {\n          @return true;\n        }\n      }\n\n      @return false;\n    }\n\n    @if $op == all {\n      @each $sub-query in $sub-queries {\n        @if not is-query-satisfied_($sub-query, $available-features) {\n          @return false;\n        }\n      }\n\n      @return true;\n    }\n  }\n\n  @return list-contains_($available-features, $feature-query);\n}\n\n//\n// Private\n//\n\n// Verifies that the given feature(s) are valid, throws an error otherwise.\n@function verify-feature_($features...) {\n  @each $feature in $features {\n    @if not list-contains_($all-features, $feature) {\n      @error \"Invalid feature: '#{$feature}'. Valid features are: #{$all-features}.\";\n    }\n  }\n\n  @return true;\n}\n\n// Verifies that the given feature queries are valid, throws an error otherwise.\n@function verify-query_($feature-queries...) {\n  @each $query in $feature-queries {\n    @if meta.type-of($query) == map {\n      $op: map.get($query, op);\n      $sub-queries: map.get($query, queries);\n      $valid: verify-query_($sub-queries...);\n\n      @if not list-contains_($all-query-operators, $op) {\n        @error \"Invalid feature query operator: '#{$op}'. \" +\n          \"Valid operators are: #{$all-query-operators}\";\n      }\n    } @else {\n      $valid: verify-feature_($query);\n    }\n  }\n\n  @return true;\n}\n\n// Checks whether the given list contains the given item.\n@function list-contains_($list, $item) {\n  @return list.index($list, $item) != null;\n}\n\n// Tracks whether the current context is inside a `mdc-feature-targets` mixin.\n$targets-context_: false;\n\n// Mixin that annotates the contained styles as applying to specific cross-cutting features\n// indicated by the given list of feature targets.\n@mixin targets($feature-targets...) {\n  // Prevent accidental nesting of this mixin, which could lead to unexpected results.\n  @if $targets-context_ {\n    @error \"mdc-feature-targets must not be used inside of another mdc-feature-targets block\";\n  }\n\n  $targets-context_: true !global;\n  $parsed-targets: parse-targets($feature-targets);\n\n  @if is-query-satisfied_(\n    map.get($parsed-targets, query),\n    map.get($parsed-targets, available)\n  )\n  {\n    @content;\n  }\n\n  $targets-context_: false !global;\n}\n"
  },
  {
    "path": "packages/mdc-feature-targeting/_functions.import.scss",
    "content": "@forward \"./index\" as mdc-feature-* hide $mdc-feature-targets-context-, mdc-feature-targets;\n"
  },
  {
    "path": "packages/mdc-feature-targeting/_functions.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_feature-targeting.scss` Sass module instead.\n@forward 'feature-targeting' show create-target, parse-targets, all, any, without;\n"
  },
  {
    "path": "packages/mdc-feature-targeting/_index.scss",
    "content": "@forward 'feature-targeting';\n"
  },
  {
    "path": "packages/mdc-feature-targeting/package.json",
    "content": "{\n  \"name\": \"@material/feature-targeting\",\n  \"description\": \"Material Components for the web Feature Targeting Scss helpers\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"feature targeting\"\n  ],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-feature-targeting\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-floating-label/README.md",
    "content": "<!--docs:\ntitle: \"Floating Label\"\nlayout: detail\nsection: components\nexcerpt: \"An animated text caption for a Text Field or Select.\"\npath: /catalog/input-controls/floating-label/\n-->\n\n# Floating Label\n\nFloating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/floating-label\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-floating-label\" id=\"my-label-id\">Hint text</span>\n```\n\n### Styles\n\n```scss\n@use \"@material/floating-label/mdc-floating-label\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCFloatingLabel} from '@material/floating-label';\n\nconst floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-floating-label` | Mandatory.\n`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.\n`mdc-floating-label--shake` | Shakes the label.\n`mdc-floating-label--required` | Indicates the label is required and adds an asterisk.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Customizes the ink color of the label.\n`fill-color($color)` | Customizes the fill color of the label.\n`shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `shake-animation` mixin.\n`shake-animation($modifier)` | Applies shake keyframe animation to label.\n`float-position($positionY, $positionX, $scale)` | Sets position of label when floating.\n`max-width($max-width)` | Sets the max width of the label.\n`float-transition($duration-ms, $timing-function)` | Customizes the duration and optional timing function for the \"float\" transition.\n\n## `MDCFloatingLabel` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.\n`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.\n`setRequired(isRequired: boolean) => void` | Proxies to the foundation's `setRequired()` method.\n`getWidth() => number` | Proxies to the foundation's `getWidth()` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFloatingLabelAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the label element.\n`removeClass(className: string) => void` | Removes a class from the label element.\n`getWidth() => number` | Returns the width of the label element.\n`registerInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(eventType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n\n### `MDCFloatingLabelFoundation`\n\nMethod Signature | Description\n--- | ---\n`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.\n`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.\n`setRequired(isRequired: boolean)` | Styles the label as required, depending on the value of `isRequired`.\n`getWidth() => number` | Returns the width of the label element.\n"
  },
  {
    "path": "packages/mdc-floating-label/_floating-label-theme.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n\n///\n/// Y-axis position of label when it is afloat.\n/// 100% of the length of label and additional 6% for scaledown.\n///\n$position-y: 106% !default;\n$transition-duration: 150ms !default;\n$float-scale: 0.75 !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define floating-label\n  .mdc-floating-label {\n    @include typography.typography(\n      subtitle1,\n      $exclude-props: (line-height),\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: transform $transition-duration\n          animation-variables.$standard-curve-timing-function,\n        color $transition-duration\n          animation-variables.$standard-curve-timing-function;\n    }\n  }\n\n  @at-root {\n    @include float-position($position-y, $query: $query);\n    @include shake-animation(standard, $query: $query);\n  }\n\n  @include shake-keyframes(standard, $position-y, $query: $query);\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n}\n\n// Used for textarea in case of scrolling\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin shake-keyframes(\n  $modifier,\n  $positionY,\n  $positionX: 0%,\n  $scale: $float-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-floating-label-shake-float-above-#{$modifier} {\n      0% {\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(0% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      33% {\n        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(4% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      66% {\n        animation-timing-function: cubic-bezier(\n          0.302435,\n          0.381352,\n          0.55,\n          0.956352\n        );\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(-4% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n\n      100% {\n        @include rtl.ignore-next-line();\n        transform: translateX(calc(0% - #{$positionX}))\n          translateY(calc(0% - #{$positionY})) scale(#{$scale});\n      }\n    }\n  }\n}\n\n@mixin float-position(\n  $positionY,\n  $positionX: 0%,\n  $scale: $float-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $translateY: if(\n    meta.type-of($positionY) == 'calculation',\n    calc(-1 * $positionY),\n    -1 * $positionY\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      @if $positionX > 0 or $positionX < 0 {\n        @include rtl.ignore-next-line();\n        transform: translateY($translateY)\n          translateX(-1 * $positionX)\n          scale($scale);\n\n        @include rtl.rtl {\n          @include rtl.ignore-next-line();\n          transform: translateY($translateY) translateX($positionX)\n            scale($scale);\n        }\n      } @else {\n        transform: translateY($translateY) scale($scale);\n      }\n    }\n  }\n}\n\n@mixin shake-animation($modifier, $query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-floating-label--shake {\n    @include feature-targeting.targets($feat-animation) {\n      animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;\n    }\n  }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    max-width: $max-width;\n  }\n}\n\n///\n/// Sets the CSS transition for the floating animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin float-transition(\n  $duration-ms,\n  $timing-function: animation-variables.$standard-curve-timing-function,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: color $duration-ms $timing-function,\n      transform $duration-ms $timing-function;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/_floating-label.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './floating-label-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include floating-label-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define floating-label\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      @include rtl.ignore-next-line();\n      left: 0;\n      @include rtl.ignore-next-line();\n      -webkit-transform-origin: left top;\n      @include rtl.ignore-next-line();\n      transform-origin: left top;\n      line-height: 1.15rem;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: text;\n      overflow: hidden;\n\n      /* @alternate */\n      // Force the label into its own layer to prevent visible layer promotion adjustments\n      // when the ripple is activated behind it.\n      will-change: transform;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        right: 0;\n        @include rtl.ignore-next-line();\n        left: auto;\n        @include rtl.ignore-next-line();\n        -webkit-transform-origin: right top;\n        @include rtl.ignore-next-line();\n        transform-origin: right top;\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: auto;\n    }\n  }\n\n  .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker) {\n    &::after {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        margin-left: 1px;\n        @include rtl.ignore-next-line();\n        margin-right: 0px;\n        content: '*';\n      }\n    }\n\n    @include rtl.rtl {\n      &::after {\n        // Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]\n        // selector and that breaks some browsers\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          margin-left: 0;\n          @include rtl.ignore-next-line();\n          margin-right: 1px;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-floating-label/_mixins.import.scss",
    "content": "@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-floating-label-*;\n"
  },
  {
    "path": "packages/mdc-floating-label/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_floating-label.scss` or `_floating-label-theme` instead.\n@forward './floating-label' show core-styles;\n@forward './floating-label-theme' show ink-color, fill-color, shake-keyframes,\n  float-position, shake-animation, max-width, float-transition;\n"
  },
  {
    "path": "packages/mdc-floating-label/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-floating-label-* hide mdc-floating-label-core-styles, mdc-floating-label-ink-color, mdc-floating-label-fill-color, mdc-floating-label-shake-keyframes, mdc-floating-label-float-position, mdc-floating-label-shake-animation, mdc-floating-label-max-width;\n"
  },
  {
    "path": "packages/mdc-floating-label/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward 'floating-label-theme' show $position-y, $transition-duration,\n  $float-scale;\n"
  },
  {
    "path": "packages/mdc-floating-label/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCFloatingLabelAdapter {\n  /**\n   * Adds a class to the label element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the label element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Checks if the label element has the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Returns the width of the label element.\n   */\n  getWidth(): number;\n\n  /**\n   * Registers an event listener on the root element for a given event.\n   */\n  registerInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the root element for a given event.\n   */\n  deregisterInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {estimateScrollWidth} from '@material/dom/ponyfill';\n\nimport {MDCFloatingLabelAdapter} from './adapter';\nimport {MDCFloatingLabelFoundation} from './foundation';\n\n/** MDC Floating Label Factory */\nexport type MDCFloatingLabelFactory =\n    (el: HTMLElement, foundation?: MDCFloatingLabelFoundation) =>\n        MDCFloatingLabel;\n\n/** MDC Floating Label */\nexport class MDCFloatingLabel extends MDCComponent<MDCFloatingLabelFoundation> {\n  static override attachTo(root: HTMLElement): MDCFloatingLabel {\n    return new MDCFloatingLabel(root);\n  }\n\n  /**\n   * Styles the label to produce the label shake for errors.\n   * @param shouldShake If true, shakes the label by adding a CSS class;\n   *     otherwise, stops shaking by removing the class.\n   */\n  shake(shouldShake: boolean) {\n    this.foundation.shake(shouldShake);\n  }\n\n  /**\n   * Styles the label to float/dock.\n   * @param shouldFloat If true, floats the label by adding a CSS class;\n   *     otherwise, docks it by removing the class.\n   */\n  float(shouldFloat: boolean) {\n    this.foundation.float(shouldFloat);\n  }\n\n  /**\n   * Styles the label as required.\n   * @param isRequired If true, adds an asterisk to the label, indicating that\n   *     it is required.\n   */\n  setRequired(isRequired: boolean) {\n    this.foundation.setRequired(isRequired);\n  }\n\n  getWidth(): number {\n    return this.foundation.getWidth();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCFloatingLabelAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      getWidth: () => estimateScrollWidth(this.root),\n      registerInteractionHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCFloatingLabelFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',\n  LABEL_REQUIRED: 'mdc-floating-label--required',\n  LABEL_HIDE_REQUIRED_MARKER: 'mdc-floating-label--hide-required-marker',\n  LABEL_SHAKE: 'mdc-floating-label--shake',\n  ROOT: 'mdc-floating-label',\n};\n"
  },
  {
    "path": "packages/mdc-floating-label/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCFloatingLabelAdapter} from './adapter';\nimport {cssClasses} from './constants';\n\n/** MDC Floating Label Foundation */\nexport class MDCFloatingLabelFoundation extends\n    MDCFoundation<MDCFloatingLabelAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  /**\n   * See {@link MDCFloatingLabelAdapter} for typing information on parameters\n   * and return types.\n   */\n  static override get defaultAdapter(): MDCFloatingLabelAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      getWidth: () => 0,\n      registerInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private readonly shakeAnimationEndHandler:\n      SpecificEventListener<'animationend'>;\n\n  constructor(adapter?: Partial<MDCFloatingLabelAdapter>) {\n    super({...MDCFloatingLabelFoundation.defaultAdapter, ...adapter});\n\n    this.shakeAnimationEndHandler = () => {\n      this.handleShakeAnimationEnd();\n    };\n  }\n\n  override init() {\n    this.adapter.registerInteractionHandler(\n        'animationend', this.shakeAnimationEndHandler);\n  }\n\n  override destroy() {\n    this.adapter.deregisterInteractionHandler(\n        'animationend', this.shakeAnimationEndHandler);\n  }\n\n  /**\n   * Returns the width of the label element.\n   */\n  getWidth(): number {\n    return this.adapter.getWidth();\n  }\n\n  /**\n   * Styles the label to produce a shake animation to indicate an error.\n   * @param shouldShake If true, adds the shake CSS class; otherwise, removes\n   *     shake class.\n   */\n  shake(shouldShake: boolean) {\n    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;\n    if (shouldShake) {\n      this.adapter.addClass(LABEL_SHAKE);\n    } else {\n      this.adapter.removeClass(LABEL_SHAKE);\n    }\n  }\n\n  /**\n   * Styles the label to float or dock.\n   * @param shouldFloat If true, adds the float CSS class; otherwise, removes\n   *     float and shake classes to dock the label.\n   */\n  float(shouldFloat: boolean) {\n    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} =\n        MDCFloatingLabelFoundation.cssClasses;\n    if (shouldFloat) {\n      this.adapter.addClass(LABEL_FLOAT_ABOVE);\n    } else {\n      this.adapter.removeClass(LABEL_FLOAT_ABOVE);\n      this.adapter.removeClass(LABEL_SHAKE);\n    }\n  }\n\n  /**\n   * Styles the label as required.\n   * @param isRequired If true, adds an asterisk to the label, indicating that\n   *     it is required.\n   */\n  setRequired(isRequired: boolean) {\n    const {LABEL_REQUIRED} = MDCFloatingLabelFoundation.cssClasses;\n    if (isRequired) {\n      this.adapter.addClass(LABEL_REQUIRED);\n    } else {\n      this.adapter.removeClass(LABEL_REQUIRED);\n    }\n  }\n\n  setHideRequiredMarker(hideRequiredMarker: boolean) {\n    const {LABEL_HIDE_REQUIRED_MARKER} = MDCFloatingLabelFoundation.cssClasses;\n    if (hideRequiredMarker) {\n      this.adapter.addClass(LABEL_HIDE_REQUIRED_MARKER);\n    } else {\n      this.adapter.removeClass(LABEL_HIDE_REQUIRED_MARKER);\n    }\n  }\n\n  getHideRequiredMarker(): boolean {\n    const {LABEL_HIDE_REQUIRED_MARKER} = MDCFloatingLabelFoundation.cssClasses;\n    return this.adapter.hasClass(LABEL_HIDE_REQUIRED_MARKER);\n  }\n\n  private handleShakeAnimationEnd() {\n    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;\n    this.adapter.removeClass(LABEL_SHAKE);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCFloatingLabelFoundation;\n"
  },
  {
    "path": "packages/mdc-floating-label/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-floating-label/mdc-floating-label.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-floating-label-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"mixins\" as mdc-floating-label-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-floating-label\";\n"
  },
  {
    "path": "packages/mdc-floating-label/mdc-floating-label.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/base/mixins' as base-mixins;\n@use './mixins';\n\n@include base-mixins.emit-once('mdc-floating-label') {\n  @include mixins.core-styles;\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/package.json",
    "content": "{\n  \"name\": \"@material/floating-label\",\n  \"description\": \"The Material Components for the web floating-label component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"floatinglabel\",\n    \"floating label\"\n  ],\n  \"main\": \"dist/mdc.floatingLabel.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-floating-label\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-floating-label/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCFloatingLabel} from '../../mdc-floating-label/index';\nimport {createFixture, html} from '../../../testing/dom';\n\nconst getFixture = () => {\n  return createFixture(html`\n    <label class=\"mdc-floating-label\"></label>\n  `);\n};\n\n\ndescribe('MDCFloatingLabel', () => {\n  it('attachTo returns an MDCFloatingLabel instance', () => {\n    expect(MDCFloatingLabel.attachTo(getFixture()) instanceof MDCFloatingLabel)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCFloatingLabel(root);\n    return {root, component};\n  }\n\n  it('#shake calls the foundation shake method', () => {\n    const {component} = setupTest();\n    component['foundation'].shake = jasmine.createSpy('');\n    component.shake(true);\n    expect(component['foundation'].shake).toHaveBeenCalledWith(true);\n    expect(component['foundation'].shake).toHaveBeenCalledTimes(1);\n  });\n\n  it('#getWidth calls the foundation getWidth method', () => {\n    const {component} = setupTest();\n    component['foundation'].getWidth = jasmine.createSpy('');\n    component.getWidth();\n    expect(component['foundation'].getWidth).toHaveBeenCalledTimes(1);\n  });\n\n  it('#float calls the foundation float method', () => {\n    const {component} = setupTest();\n    component['foundation'].float = jasmine.createSpy('');\n    component.float(true);\n    expect(component['foundation'].float).toHaveBeenCalledWith(true);\n    expect(component['foundation'].float).toHaveBeenCalledTimes(1);\n  });\n\n  it('#adapter.addClass adds a class to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.hasClass returns presence of a class', () => {\n    const {root, component} = setupTest();\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    expect(adapter.hasClass('foo')).toBe(false);\n    root.classList.add('foo');\n    expect(adapter.hasClass('foo')).toBe(true);\n  });\n\n  it('#adapter.getWidth returns the width of the label element', () => {\n    const {root, component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.getWidth())\n        .toEqual(root.offsetWidth);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-floating-label/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as floating-label;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include floating-label.core-styles($query: $query);\n    @include floating-label.ink-color(red, $query: $query);\n    @include floating-label.fill-color(red, $query: $query);\n    @include floating-label.shake-keyframes(standard, 100%, $query: $query);\n    @include floating-label.float-position(100%, $query: $query);\n    @include floating-label.shake-animation(standard, $query: $query);\n    @include floating-label.max-width(100%, $query: $query);\n    @include floating-label.float-transition(250ms, linear, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-floating-label/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCFloatingLabelFoundation} from '../../mdc-floating-label/foundation';\nimport {captureHandlers, verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {cssClasses} = MDCFloatingLabelFoundation;\n\nconst setupTest = () => {\n  const {foundation, mockAdapter} =\n      setUpFoundationTest(MDCFloatingLabelFoundation);\n  return {foundation, mockAdapter};\n};\n\ndescribe('MDCFloatingLabelFoundation', () => {\n  it('exports cssClasses', () => {\n    expect(MDCFloatingLabelFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCFloatingLabelFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'getWidth',\n      'registerInteractionHandler',\n      'deregisterInteractionHandler',\n    ]);\n  });\n\n  it('#init should register animationend event listener', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('animationend', jasmine.any(Function));\n  });\n\n  it('#destroy should deregister animationend event listener', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.destroy();\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('animationend', jasmine.any(Function));\n  });\n\n  it('#getWidth returns the width of the label element scaled by 75%', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const width = 100;\n    mockAdapter.getWidth.and.returnValue(width);\n    expect(foundation.getWidth()).toEqual(width);\n  });\n\n  it('#float called with shouldFloat is true, floats the label', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.float(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOAT_ABOVE);\n  });\n\n  it('#float called with shouldFloat is false, de-floats the label', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.float(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOAT_ABOVE);\n  });\n\n  it('#shake called with shouldShake is true, should add shake class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.shake(true);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.LABEL_SHAKE);\n  });\n\n  it('#shake called with shouldShake is false, should remove shake class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.shake(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_SHAKE);\n     });\n\n  it('#float called with shouldFloat is false, should remove shake class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.float(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_SHAKE);\n     });\n\n  it('#handleShakeAnimationEnd should remove LABEL_SHAKE class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    (foundation as any).handleShakeAnimationEnd();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_SHAKE);\n  });\n\n  it(`on animationend removes ${cssClasses.LABEL_SHAKE} class`, () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCFloatingLabelFoundation);\n    const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');\n    foundation.init();\n    handlers['animationend']();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_SHAKE);\n  });\n\n  it('#setRequired called with isRequired is true, should add required class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setRequired(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_REQUIRED);\n     });\n\n  it('#setRequired called with isRequired is false, should remove required class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setRequired(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_REQUIRED);\n     });\n\n  it('#setHideRequiredMarker called with hideRequiredMarker is true, should add hide-required-marker class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setHideRequiredMarker(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_HIDE_REQUIRED_MARKER);\n     });\n\n  it('#setHideRequiredMarker called with hideRequiredMarker is false, should remove hide-required-marker class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setHideRequiredMarker(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_HIDE_REQUIRED_MARKER);\n     });\n\n  it('#getHideRequiredMarker checks for hide-required-marker class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.and.returnValue(true);\n    expect(foundation.getHideRequiredMarker()).toBe(true);\n    expect(mockAdapter.hasClass).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-floating-label/test/mdc-floating-label.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-floating-label.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-focus/README.md",
    "content": "# Focus\n\nThis package contains focus-related utilities.\n\n## Focus rings\n\nTo add a focus ring to an element, ensure the following requirements:\n- The focus ring should be a child of the element which it is offset from.\n- The element which the focus ring is offset from should have a\n  non-static `position` CSS value. This is because the focus ring has\n  `position: absolute` and is then positioned relative to its container\n  element.\n- The focus ring can be shown in Sass via `focus-ring-theme.show-focus-ring()`.\n\n\nSee the following example:\n\n```html\n<button class=\"mdc-button\">\n\t<span>Click me!</span>\n\t<div class=\"mdc-focus-ring\"></div>\n</button>\n```\n\n```scss\n.mdc-button {\n  position: relative;\n}\n\n.mdc-focus-ring {\n  @include focus-ring-theme.static-styles();\n  @include focus-ring-theme.theme-styles(focus-ring-theme.$light-theme);\n}\n\n.mdc-button:focus-visible .mdc-focus-ring {\n  @include focus-ring-theme.show-focus-ring();\n}\n```\n"
  },
  {
    "path": "packages/mdc-focus/_focus-ring-inward-theme.scss",
    "content": "// Styles for a focus ring that animates inward.\n\n@use 'sass:map';\n@use 'sass:list';\n@use 'sass:meta';\n\n@use '@material/theme/keys';\n@use '@material/theme/validate';\n@use './focus-ring-shared-theme';\n\n$_custom-property-prefix: 'focus-ring-inward';\n$_ring-extra-offset-bottom-key: 'extra-offset-bottom';\n\n$default-inward-theme: map.merge(\n  focus-ring-shared-theme.$default-shared-theme,\n  (\n    focus-ring-shared-theme.$ring-offset-key: -1 * focus-ring-shared-theme.$track-width-value,\n    focus-ring-shared-theme.$target-shape-key: 8px,\n    // Extra offset to bottom of focus ring in addition to default ring offset\n    $_ring-extra-offset-bottom-key: 0px,\n  )\n);\n\n/// Generates CSS custom properties that are consumed by the focus ring styles.\n/// Intended to be used directly by Material Design customers, as the only\n/// formally supported means of customizing the focus ring.\n///\n/// @param {Map} $theme - A map with one or more of the keys of $default-inward-theme.\n@mixin theme($theme) {\n  $theme: validate.theme($default-inward-theme, $theme);\n  @include keys.declare-custom-properties($theme, $_custom-property-prefix);\n}\n\n@mixin theme-styles($theme: $default-inward-theme) {\n  $theme: validate.theme-styles($default-inward-theme, $theme);\n  $theme: keys.create-theme-vars($theme, $_custom-property-prefix);\n\n  $ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);\n  $ring-offset: map.get($theme, focus-ring-shared-theme.$ring-offset-key);\n  $ring-extra-offset-bottom: map.get($theme, $_ring-extra-offset-bottom-key);\n  $track-width: map.get($theme, focus-ring-shared-theme.$track-width-key);\n  $target-shape: map.get($theme, focus-ring-shared-theme.$target-shape-key);\n\n  /// Mold the focus ring to the target shape.\n  /// See the diagram for insights into why the border-radius calc is needed:\n  /// https://screenshot.googleplex.com/3cYw8Pi8WQNa3h8.png\n  border: $track-width solid $ring-color;\n  border-radius: calc($target-shape + $track-width + $ring-offset);\n  inset-block: calc(-1 * ($ring-offset + $track-width))\n    calc(-1 * ($ring-offset + $track-width + $ring-extra-offset-bottom));\n  inset-inline: calc(-1 * ($ring-offset + $track-width));\n\n  @include _focus-ring-animation-keyframes();\n  @include focus-ring-shared-theme.focus-ring-animation(\n    $grow-animation-name: focus-ring-inward-grows,\n    $shrink-animation-name: focus-ring-inward-shrinks\n  );\n}\n\n@mixin _focus-ring-animation-keyframes() {\n  $start-border-width: 0;\n  $midpoint-border-width: 8px;\n\n  @keyframes focus-ring-inward-grows {\n    from {\n      border-width: $start-border-width;\n    }\n    to {\n      border-width: $midpoint-border-width;\n    }\n  }\n\n  @keyframes focus-ring-inward-shrinks {\n    from {\n      border-width: $midpoint-border-width;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-focus/_focus-ring-outward-theme.scss",
    "content": "// Styles for a focus ring that animates outwards.\n\n@use 'sass:map';\n@use 'sass:list';\n@use 'sass:meta';\n\n@use '@material/theme/keys';\n@use '@material/theme/validate';\n@use '@material/shape/shape';\n@use './focus-ring-shared-theme';\n\n$_custom-property-prefix: 'focus-ring-outward';\n\n$default-outward-theme: focus-ring-shared-theme.$default-shared-theme;\n$default-outward-theme: map.merge(\n  focus-ring-shared-theme.$default-shared-theme,\n  (\n    focus-ring-shared-theme.$ring-offset-key: 2px,\n    // Target shape can be provided as a single value, or as a list with\n    // 1-4 values where each value would correspond to border radius of one\n    // or more corners.\n    focus-ring-shared-theme.$target-shape-key: 0px,\n  )\n);\n\n/// Generates CSS custom properties that are consumed by the focus ring styles.\n/// Intended to be used directly by Material Design customers, as the only\n/// formally supported means of customizing the focus ring.\n///\n/// @param {Map} $theme - A map with one or more of the keys of $default-outward-theme.\n@mixin theme($theme) {\n  $theme: validate.theme($default-outward-theme, $theme);\n  $theme: _expand-target-shape-value($theme);\n  @include keys.declare-custom-properties($theme, $_custom-property-prefix);\n}\n\n@mixin theme-styles($theme: $default-outward-theme) {\n  $theme: validate.theme-styles($default-outward-theme, $theme);\n  $theme: _expand-target-shape-value($theme);\n  $theme: keys.create-theme-vars($theme, $_custom-property-prefix);\n\n  $ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);\n  $ring-offset: map.get($theme, focus-ring-shared-theme.$ring-offset-key);\n  $track-width: map.get($theme, focus-ring-shared-theme.$track-width-key);\n  $target-shape-start-start: map.get(\n    $theme,\n    '#{focus-ring-shared-theme.$target-shape-key}-start-start'\n  );\n  $target-shape-start-end: map.get(\n    $theme,\n    '#{focus-ring-shared-theme.$target-shape-key}-start-end'\n  );\n  $target-shape-end-end: map.get(\n    $theme,\n    '#{focus-ring-shared-theme.$target-shape-key}-end-end'\n  );\n  $target-shape-end-start: map.get(\n    $theme,\n    '#{focus-ring-shared-theme.$target-shape-key}-end-start'\n  );\n\n  /// Mold the focus ring to the target shape.\n  /// See the diagram for insights into why the border-radius calc is needed:\n  /// http://screen/9J9CzpCxJxxDHCb.png\n  border-start-start-radius: calc($target-shape-start-start + $ring-offset);\n  border-start-end-radius: calc($target-shape-start-end + $ring-offset);\n  border-end-end-radius: calc($target-shape-end-end + $ring-offset);\n  border-end-start-radius: calc($target-shape-end-start + $ring-offset);\n  inset: calc(-1 * $ring-offset);\n  box-shadow: 0 0 0 $track-width $ring-color;\n  // HCM ignores box-shadow, so a transparent outline is added to ensure\n  // focus ring is shown in HCM.\n  outline: $track-width solid transparent;\n\n  @include _focus-ring-animation-keyframes($theme);\n  @include focus-ring-shared-theme.focus-ring-animation(\n    $grow-animation-name: focus-ring-outward-grows,\n    $shrink-animation-name: focus-ring-outward-shrinks\n  );\n}\n\n@mixin _focus-ring-animation-keyframes($theme) {\n  $ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);\n\n  $start-border-width: 0;\n  $midpoint-border-width: 8px;\n\n  @keyframes focus-ring-outward-grows {\n    from {\n      box-shadow: 0 0 0 $start-border-width $ring-color;\n    }\n    to {\n      box-shadow: 0 0 0 $midpoint-border-width $ring-color;\n    }\n  }\n\n  @keyframes focus-ring-outward-shrinks {\n    from {\n      box-shadow: 0 0 0 $midpoint-border-width $ring-color;\n    }\n  }\n}\n\n/// Replaces target shape value or list provided in theme with four key-value\n/// pairs corresponding to four corners' border radiuses.\n///\n/// @example:\n/// _expand-target-shape-value(('target-shape': 4px)) =>\n///  (\n///    'target-shape-start-start': 4px,\n///    'target-shape-start-end': 4px,\n///    'target-shape-end-end': 4px,\n///    'target-shape-end-start': 4px\n///  )\n///\n@function _expand-target-shape-value($theme) {\n  @return shape.resolve-theme(\n    $theme,\n    meta.get-function('resolver', $module: 'shape'),\n    focus-ring-shared-theme.$target-shape-key\n  );\n}\n"
  },
  {
    "path": "packages/mdc-focus/_focus-ring-shared-theme.scss",
    "content": "@use 'sass:map';\n\n@use '@material/tokens/v0_132' as tokens;\n\n$ring-offset-key: 'offset';\n$ring-color-key: 'color';\n$track-width-key: 'track-width';\n$target-shape-key: 'target-shape';\n$track-width-value: 3px;\n$_grow-animation-duration: 150ms;\n$_shrink-animation-duration: 450ms;\n$_animation-timing: cubic-bezier(0.2, 0, 0, 1);\n\n$_color-sys: tokens.md-sys-color-values-light();\n\n$default-shared-theme: (\n  $track-width-key: $track-width-value,\n  $ring-color-key: map.get($_color-sys, 'secondary'),\n);\n\n@mixin focus-ring-animation($grow-animation-name, $shrink-animation-name) {\n  animation-name: $grow-animation-name, $shrink-animation-name;\n  animation-duration: $_grow-animation-duration, $_shrink-animation-duration;\n  animation-delay: 0s, $_grow-animation-duration;\n  animation-timing-function: $_animation-timing, $_animation-timing;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n/// This should be applied to the focus ring element when the focus ring\n/// should be shown (e.g. based on `:focus-visible` pseudoclass).\n@mixin show-focus-ring() {\n  display: block;\n}\n"
  },
  {
    "path": "packages/mdc-focus/_focus-ring-test-helper.scss",
    "content": "/// Stop the animation half way to see the maximum size of the focus ring.\n@mixin focus-ring-half-animation {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-duration: 0s;\n}\n"
  },
  {
    "path": "packages/mdc-focus/_focus-ring.scss",
    "content": "@mixin static-styles() {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n\n  // Focus rings should render above other elements by default (although\n  // note that this does not guarantee that focus rings *always* render\n  // above other elements, due to how z-index and stacking contexts work).\n  // See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n  z-index: 1;\n}\n"
  },
  {
    "path": "packages/mdc-focus/package.json",
    "content": "{\n  \"name\": \"@material/focus\",\n  \"description\": \"The Material Components Web focus ring utilities\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\"material components\", \"material design\", \"focus\", \"focusring\"],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-focus\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-focus/test/focus-ring-inward-theme.test.scss",
    "content": "@use 'true' as test;\n@use 'third_party/javascript/material_components_web/focus/focus-ring-inward-theme';\n\n@include test.describe('Calling focus-ring-inward-theme') {\n  @include test.describe('.theme') {\n    @include test.it('returns nothing when no theme is provided.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-inward-theme.theme(());\n        }\n\n        @include test.expect {\n          // No content. This is testing that an error isn't thrown.\n        }\n      }\n    }\n\n    @include test.it('returns the expected custom property declarations.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-inward-theme.theme(\n            (\n              'color': blue,\n              'offset': 2px,\n              'track-width': 3px,\n              'target-shape': 5px,\n              'extra-offset-bottom': 4px,\n            )\n          );\n        }\n\n        @include test.expect {\n          --mdc-focus-ring-inward-color: blue;\n          --mdc-focus-ring-inward-offset: 2px;\n          --mdc-focus-ring-inward-track-width: 3px;\n          --mdc-focus-ring-inward-target-shape: 5px;\n          --mdc-focus-ring-inward-extra-offset-bottom: 4px;\n        }\n      }\n    }\n  }\n\n  @include test.describe('.theme-styles') {\n    // TODO(b/263502978): Do not remove this first test until a more\n    // deterministic way to test sass output with @keyframes is found.\n    @include test.it('returns CSS for the underlying focus-ring structure.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-inward-theme.theme-styles(\n            (\n              'color': blue,\n              'offset': 2px,\n              'track-width': 3px,\n              'target-shape': 5px,\n              'extra-offset-bottom': 0px,\n            )\n          );\n        }\n\n        @include test.contains {\n          border: var(--mdc-focus-ring-inward-track-width, 3px) solid\n            var(--mdc-focus-ring-inward-color, blue);\n          border-radius: calc(\n            var(--mdc-focus-ring-inward-target-shape, 5px) +\n              var(--mdc-focus-ring-inward-track-width, 3px) +\n              var(--mdc-focus-ring-inward-offset, 2px)\n          );\n          inset-block: calc(\n              -1 * (var(--mdc-focus-ring-inward-offset, 2px) +\n                    var(--mdc-focus-ring-inward-track-width, 3px))\n            )\n            calc(\n              -1 * (var(--mdc-focus-ring-inward-offset, 2px) +\n                    var(--mdc-focus-ring-inward-track-width, 3px) +\n                    var(--mdc-focus-ring-inward-extra-offset-bottom, 0px))\n            );\n          inset-inline: calc(\n            -1 * (var(--mdc-focus-ring-inward-offset, 2px) +\n                  var(--mdc-focus-ring-inward-track-width, 3px))\n          );\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-focus/test/focus-ring-outward-theme.test.scss",
    "content": "@use 'true' as test;\n@use 'third_party/javascript/material_components_web/focus/focus-ring-outward-theme';\n\n@include test.describe('Calling focus-ring-theme-outward') {\n  @include test.describe('.theme') {\n    @include test.it('returns nothing when no theme is provided.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-outward-theme.theme(());\n        }\n\n        @include test.expect {\n          // No content. This is testing that an error isn't thrown.\n        }\n      }\n    }\n\n    @include test.it('returns the expected custom property declarations.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-outward-theme.theme(\n            (\n              'color': blue,\n              'offset': 2px,\n              'track-width': 3px,\n              'target-shape': 5px,\n            )\n          );\n        }\n\n        @include test.expect {\n          --mdc-focus-ring-outward-target-shape-start-start: 5px;\n          --mdc-focus-ring-outward-target-shape-start-end: 5px;\n          --mdc-focus-ring-outward-target-shape-end-end: 5px;\n          --mdc-focus-ring-outward-target-shape-end-start: 5px;\n          --mdc-focus-ring-outward-color: blue;\n          --mdc-focus-ring-outward-offset: 2px;\n          --mdc-focus-ring-outward-track-width: 3px;\n        }\n      }\n    }\n  }\n\n  @include test.describe('.theme-styles') {\n    // TODO(b/263502978): Do not remove this first test until a more\n    // deterministic way to test sass output with @keyframes is found.\n    @include test.it('returns CSS for the underlying focus-ring structure.') {\n      @include test.assert {\n        @include test.output {\n          @include focus-ring-outward-theme.theme-styles(\n            (\n              'color': blue,\n              'offset': 2px,\n              'track-width': 3px,\n              'target-shape': 5px,\n            )\n          );\n        }\n\n        @include test.contains {\n          border-start-start-radius: calc(\n            var(--mdc-focus-ring-outward-target-shape-start-start, 5px) +\n              var(--mdc-focus-ring-outward-offset, 2px)\n          );\n          border-start-end-radius: calc(\n            var(--mdc-focus-ring-outward-target-shape-start-end, 5px) +\n              var(--mdc-focus-ring-outward-offset, 2px)\n          );\n          border-end-end-radius: calc(\n            var(--mdc-focus-ring-outward-target-shape-end-end, 5px) +\n              var(--mdc-focus-ring-outward-offset, 2px)\n          );\n          border-end-start-radius: calc(\n            var(--mdc-focus-ring-outward-target-shape-end-start, 5px) +\n              var(--mdc-focus-ring-outward-offset, 2px)\n          );\n          inset: calc(-1 * var(--mdc-focus-ring-outward-offset, 2px));\n          box-shadow: 0 0 0 var(--mdc-focus-ring-outward-track-width, 3px)\n            var(--mdc-focus-ring-outward-color, blue);\n          outline: var(--mdc-focus-ring-outward-track-width, 3px) solid\n            transparent;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-focus-ring/_focus-ring.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n@use 'sass:list';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n@use '@material/shape/shape';\n@use '@material/theme/gss';\n\n$ring-radius-default: 8px !default;\n$inner-ring-width-default: 2px !default;\n$inner-ring-color-default: transparent !default;\n$outer-ring-width-default: 2px !default;\n$outer-ring-color-default: transparent !default;\n$container-outer-padding-default: 2px !default;\n\n/// Styles applied to the component's inner focus ring element.\n///\n/// @param $ring-radius [$ring-radius-default] - Focus ring radius, either a\n////     single value or a list of radius values to apply.\n/// @param $inner-ring-width [$inner-ring-width-default] - Inner focus ring width.\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.\n/// @param $container-outer-padding-vertical [$container-outer-padding-default]\n////    - The vertical distance between the focus ring and the container.\n/// @param $container-outer-padding-horizontal [$container-outer-padding-default]\n////    - The horizontal distance between the focus ring and the container.\n/// @param $rtl-reflexive [false] - Whether to flip ring radius corners in RTL.\n@mixin focus-ring(\n  $query: feature-targeting.all(),\n  $ring-radius: $ring-radius-default,\n  $inner-ring-width: $inner-ring-width-default,\n  $inner-ring-color: $inner-ring-color-default,\n  $outer-ring-width: $outer-ring-width-default,\n  $outer-ring-color: $outer-ring-color-default,\n  $container-outer-padding-vertical: $container-outer-padding-default,\n  $container-outer-padding-horizontal: $container-outer-padding-default,\n  $rtl-reflexive: false\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $outer-ring-size: 100%;\n  @if $outer-ring-width > 0 {\n    $outer-ring-size: calc(100% + #{$outer-ring-width * 2});\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    pointer-events: none;\n    border: $inner-ring-width solid $inner-ring-color;\n    @include _border-radius(\n      _inner-ring-radius($ring-radius, $outer-ring-width),\n      $rtl-reflexive: $rtl-reflexive\n    );\n    box-sizing: content-box;\n    position: absolute;\n    top: 50%;\n    @include rtl.ignore-next-line();\n    left: 50%;\n    @include rtl.ignore-next-line();\n    transform: translate(-50%, -50%);\n\n    @include dom.forced-colors-mode($exclude-ie11: true) {\n      border-color: CanvasText;\n    }\n\n    &::after {\n      content: '';\n      border: $outer-ring-width solid $outer-ring-color;\n      @include _border-radius($ring-radius, $rtl-reflexive: $rtl-reflexive);\n      display: block;\n      position: absolute;\n      top: 50%;\n      @include rtl.ignore-next-line();\n      left: 50%;\n      @include rtl.ignore-next-line();\n      transform: translate(-50%, -50%);\n      height: $outer-ring-size;\n      width: $outer-ring-size;\n\n      @include dom.forced-colors-mode($exclude-ie11: true) {\n        border-color: CanvasText;\n      }\n    }\n  }\n\n  @include focus-ring-offset(\n    $container-outer-padding-vertical,\n    $container-outer-padding-horizontal,\n    $query: $query\n  );\n}\n\n/// Customizes the color of the focus ring.\n///\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n@mixin focus-ring-color(\n  $inner-ring-color: $inner-ring-color-default,\n  $outer-ring-color: $outer-ring-color-default,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    border-color: $inner-ring-color;\n\n    &::after {\n      border-color: $outer-ring-color;\n    }\n  }\n}\n\n/// Customizes the offset of the focus ring.\n///\n/// @param $container-outer-padding-vertical [$container-outer-padding-default]\n////    - The vertical distance between the focus ring and the container.\n/// @param $container-outer-padding-horizontal [$container-outer-padding-default]\n////    - The horizontal distance between the focus ring and the container.\n@mixin focus-ring-offset(\n  $container-outer-padding-vertical: $container-outer-padding-default,\n  $container-outer-padding-horizontal: $container-outer-padding-default,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $container-size-vertical: 100%;\n  $container-size-vertical-offset: $container-outer-padding-vertical + $offset *\n    2;\n  @if $container-size-vertical-offset != 0 {\n    $container-size-vertical: calc(100% + $container-size-vertical-offset * 2);\n  }\n  $container-size-horizontal: 100%;\n  $container-size-horizontal-offset: $container-outer-padding-horizontal +\n    $offset * 2;\n  @if $container-size-horizontal-offset != 0 {\n    $container-size-horizontal: calc(\n      100% + $container-size-horizontal-offset * 2\n    );\n  }\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $container-size-vertical;\n    width: $container-size-horizontal;\n  }\n}\n\n/// Customizes the border radius of the button focus ring.\n///\n/// @param {Number|List} $ring-radius - The border radius of the focus ring,\n///     either a single value or a list of radius values to apply.\n/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer\n///     ring, required to compute the radius for the inner ring.\n/// @param $rtl-reflexive [false] - Whether to flip ring radius corners in RTL.\n@mixin focus-ring-radius(\n  $ring-radius,\n  $outer-ring-width: $outer-ring-width-default,\n  $query: feature-targeting.all(),\n  $rtl-reflexive: false\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include _border-radius(\n      _inner-ring-radius($ring-radius, $outer-ring-width),\n      $rtl-reflexive: $rtl-reflexive\n    );\n    &::after {\n      @include _border-radius($ring-radius, $rtl-reflexive: $rtl-reflexive);\n    }\n  }\n}\n\n/// Generates a border radius property.\n/// @param $radius - The border radius\n/// @param $rtl-reflexive - Whether to generate an RTL border radius if needed.\n@mixin _border-radius($radius, $rtl-reflexive) {\n  $has-multiple-corners: meta.type-of($radius) == 'list' and\n    list.length($radius) > 1;\n  // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily\n  // tell that the given radius is symmetrical\n  $needs-flip: $rtl-reflexive and $has-multiple-corners;\n  @include gss.annotate(\n    (\n      noflip: $needs-flip,\n    )\n  );\n  border-radius: $radius;\n  @if $needs-flip {\n    @include rtl.rtl {\n      @include gss.annotate(\n        (\n          noflip: true,\n        )\n      );\n      border-radius: shape.flip-radius($radius);\n    }\n  }\n}\n\n/// Returns the inner focus ring's border radius given the outer ring's radius.\n///\n/// @param {Number|List} $ring-radius - The border radius of the focus ring,\n///.    either a single value or a list of radius values to apply.\n/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer\n///     ring, required to compute the radius for the inner ring.\n/// @return {Number|List} the inner focus ring's border radius.\n@function _inner-ring-radius($ring-radius, $outer-ring-width) {\n  $inner-ring-radius: null;\n  @if meta.type-of($ring-radius) == 'list' {\n    $inner-ring-radius: ();\n    @each $radius in $ring-radius {\n      $inner-radius: math.max($radius - $outer-ring-width, 0);\n      $inner-ring-radius: list.append(\n        $inner-ring-radius,\n        $inner-radius,\n        $separator: space\n      );\n    }\n  } @else {\n    $inner-ring-radius: calc($ring-radius - $outer-ring-width);\n  }\n  @return $inner-ring-radius;\n}\n"
  },
  {
    "path": "packages/mdc-focus-ring/package.json",
    "content": "{\n  \"name\": \"@material/focus-ring\",\n  \"description\": \"The Material Components Web focus ring utilities\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"focus\",\n    \"focusring\"\n  ],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-focus-ring\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-form-field/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-form-field/README.md",
    "content": "<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n"
  },
  {
    "path": "packages/mdc-form-field/_form-field-theme.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/typography/typography';\n\n$item-spacing: 4px !default;\n\n$_custom-property-prefix: 'form-field';\n\n$light-theme: (\n  'label-text-color': 'text-primary-on-background',\n  'label-text-font': string.unquote('Roboto, sans-serif'),\n  'label-text-line-height': typography.px-to-rem(20px),\n  'label-text-size': typography.px-to-rem(14px),\n  'label-text-tracking': typography.get-letter-spacing_(0.25, 0.875),\n  'label-text-weight': 400,\n);\n\n@mixin theme($theme) {\n  $theme: validate.theme($light-theme, $theme);\n\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $query: feature-targeting.all()) {\n  $theme: validate.theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties($theme, $_custom-property-prefix);\n\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  .mdc-form-field {\n    @include feature-targeting.targets($feat-typography) {\n      @include typography.theme-styles(\n        (\n          'font': map.get($theme, 'label-text-font'),\n          'line-height': map.get($theme, 'label-text-line-height'),\n          'size': map.get($theme, 'label-text-size'),\n          'tracking': map.get($theme, 'label-text-tracking'),\n          'weight': map.get($theme, 'label-text-weight'),\n        )\n      );\n    }\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, map.get($theme, 'label-text-color'));\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-form-field/_form-field.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use './form-field-theme';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include static-styles($query);\n\n  // TODO: Replace with call to theme-styles after Angular moves to Theming API\n  .mdc-form-field {\n    @include typography.typography(body2, $query);\n\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, text-primary-on-background);\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-form-field {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      &[hidden] {\n        display: none;\n      }\n      align-items: center;\n      vertical-align: middle;\n    }\n\n    > label {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(margin, 0, auto);\n        @include rtl.reflexive-property(padding, variables.$item-spacing, 0);\n\n        order: 0;\n      }\n    }\n  }\n\n  .mdc-form-field--nowrap {\n    > label {\n      @include feature-targeting.targets($feat-structure) {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n    }\n  }\n\n  .mdc-form-field--align-end {\n    > label {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(margin, auto, 0);\n        @include rtl.reflexive-property(padding, 0, variables.$item-spacing);\n\n        order: -1;\n      }\n    }\n  }\n\n  .mdc-form-field--space-between {\n    @include feature-targeting.targets($feat-structure) {\n      justify-content: space-between;\n    }\n\n    > label {\n      @include feature-targeting.targets($feat-structure) {\n        margin: 0;\n\n        @include rtl.rtl {\n          // RTL needed for specificity\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-form-field/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-form-field/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-form-field-*;\n"
  },
  {
    "path": "packages/mdc-form-field/_mixins.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_form-field.scss` instead.\n@forward './form-field' show core-styles;\n"
  },
  {
    "path": "packages/mdc-form-field/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-form-field-* hide mdc-form-field-core-styles;\n"
  },
  {
    "path": "packages/mdc-form-field/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_form-field-theme.scss` instead.\n@forward './form-field-theme' show $item-spacing;\n"
  },
  {
    "path": "packages/mdc-form-field/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCFormFieldAdapter {\n  activateInputRipple(): void;\n  deactivateInputRipple(): void;\n  deregisterInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n  registerInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-form-field/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCRipple} from '@material/ripple/component';\n\nimport {MDCFormFieldAdapter} from './adapter';\nimport {MDCFormFieldFoundation} from './foundation';\n\n/** MDC Form Field Input */\nexport interface MDCFormFieldInput {\n  readonly ripple: MDCRipple|undefined;\n}\n\n/** MDC Form Field */\nexport class MDCFormField extends MDCComponent<MDCFormFieldFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCFormField(root);\n  }\n\n  input?: MDCFormFieldInput;\n\n  private labelEl() {\n    const {LABEL_SELECTOR} = MDCFormFieldFoundation.strings;\n    return this.root.querySelector<HTMLElement>(LABEL_SELECTOR);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCFormFieldAdapter = {\n      activateInputRipple: () => {\n        if (this.input && this.input.ripple) {\n          this.input.ripple.activate();\n        }\n      },\n      deactivateInputRipple: () => {\n        if (this.input && this.input.ripple) {\n          this.input.ripple.deactivate();\n        }\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.labelEl()?.removeEventListener(eventType, handler);\n      },\n      registerInteractionHandler: (eventType, handler) => {\n        this.labelEl()?.addEventListener(eventType, handler);\n      },\n    };\n    return new MDCFormFieldFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-form-field/constants.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  ROOT: 'mdc-form-field',\n};\n\nexport const strings = {\n  LABEL_SELECTOR: '.mdc-form-field > label',\n};\n"
  },
  {
    "path": "packages/mdc-form-field/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCFormFieldAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Form Field Foundation */\nexport class MDCFormFieldFoundation extends MDCFoundation<MDCFormFieldAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCFormFieldAdapter {\n    return {\n      activateInputRipple: () => undefined,\n      deactivateInputRipple: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      registerInteractionHandler: () => undefined,\n    };\n  }\n\n  private readonly click: () => void;\n\n  constructor(adapter?: Partial<MDCFormFieldAdapter>) {\n    super({...MDCFormFieldFoundation.defaultAdapter, ...adapter});\n\n    this.click = () => {\n      this.handleClick();\n    };\n  }\n\n  override init() {\n    this.adapter.registerInteractionHandler('click', this.click);\n  }\n\n  override destroy() {\n    this.adapter.deregisterInteractionHandler('click', this.click);\n  }\n\n  private handleClick() {\n    this.adapter.activateInputRipple();\n    requestAnimationFrame(() => {\n      this.adapter.deactivateInputRipple();\n    });\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCFormFieldFoundation;\n"
  },
  {
    "path": "packages/mdc-form-field/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-form-field/mdc-form-field.import.scss",
    "content": "@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-form-field-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"mixins\" as mdc-form-field-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-form-field\";\n"
  },
  {
    "path": "packages/mdc-form-field/mdc-form-field.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './form-field';\n@use './form-field-theme';\n\n@include form-field.static-styles();\n@include form-field-theme.theme-styles(form-field-theme.$light-theme);\n"
  },
  {
    "path": "packages/mdc-form-field/package.json",
    "content": "{\n  \"name\": \"@material/form-field\",\n  \"description\": \"Material Components for the web wrapper for laying out form fields and labels next to one another\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"form\"\n  ],\n  \"main\": \"dist/mdc.formField.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-form-field\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-form-field/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFormField} from '../../mdc-form-field/index';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-form-field\">\n      <input type=\"radio\" id=\"radio\" checked name=\"radio\">\n      <label class=\"mdc-label\" for=\"radio\">Foo</label>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCFormField(root);\n  return {root, component};\n}\n\ndescribe('MDCFormField', () => {\n  it('attachTo initializes and returns an MDCFormField instance', () => {\n    expect(MDCFormField.attachTo(getFixture()) instanceof MDCFormField)\n        .toBeTruthy();\n  });\n\n  it('get/set input', () => {\n    const {component} = setupTest();\n    const input = {\n      ripple: undefined,\n    };\n\n    component.input = input;\n\n    expect(component.input === input).toBeTruthy();\n  });\n\n  it('adapter#registerInteractionHandler adds an event listener to the label element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('eventHandler');\n       const label = root.querySelector('label')!;\n\n       (component.getDefaultFoundation() as any)\n           .adapter.registerInteractionHandler('click', handler);\n       emitEvent(label, 'click');\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#deregisterInteractionHandler removes an event listener from the root element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('eventHandler');\n       const label = root.querySelector('label')!;\n       label.addEventListener('click', handler);\n\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterInteractionHandler('click', handler);\n       emitEvent(label, 'click');\n\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#activateInputRipple calls activate on the input ripple', () => {\n    const {component} = setupTest();\n    const ripple: any = {activate: jasmine.createSpy('activate')};\n    const input = {ripple};\n\n    component.input = input;\n    (component.getDefaultFoundation() as any).adapter.activateInputRipple();\n\n    expect(ripple.activate).toHaveBeenCalled();\n  });\n\n  it('adapter#activateInputRipple does not throw if there is no input', () => {\n    const {component} = setupTest();\n\n    expect(\n        () => (component.getDefaultFoundation() as any)\n                  .adapter.activateInputRipple)\n        .not.toThrow();\n  });\n\n  it('adapter#activateInputRipple does not throw if the input has no ripple getter',\n     () => {\n       const {component} = setupTest();\n       const input = {ripple: undefined};\n\n       component.input = input;\n\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.activateInputRipple)\n           .not.toThrow();\n     });\n\n  it('adapter#deactivateInputRipple calls deactivate on the input ripple',\n     () => {\n       const {component} = setupTest();\n       const ripple: any = {deactivate: jasmine.createSpy('deactivate')};\n       const input = {ripple};\n\n       component.input = input;\n       (component.getDefaultFoundation() as any)\n           .adapter.deactivateInputRipple();\n\n       expect(ripple.deactivate).toHaveBeenCalled();\n     });\n\n  it('adapter#deactivateInputRipple does not throw if there is no input',\n     () => {\n       const {component} = setupTest();\n\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.deactivateInputRipple)\n           .not.toThrow();\n     });\n\n  it('adapter#deactivateInputRipple does not throw if the input has no ripple getter',\n     () => {\n       const {component} = setupTest();\n       const input = {ripple: undefined};\n\n       component.input = input;\n\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.deactivateInputRipple)\n           .not.toThrow();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-form-field/test/feature-targeting-any.test.scss",
    "content": "@use '../form-field';\n@use '../form-field-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include form-field.static-styles($query: $query);\n    @include form-field-theme.theme-styles(\n      form-field-theme.$light-theme,\n      $query\n    );\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-form-field/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {cssClasses, strings} from '../../mdc-form-field/constants';\nimport {MDCFormFieldFoundation} from '../../mdc-form-field/foundation';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\ndescribe('MDCFormFieldFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCFormFieldFoundation).toBeTruthy();\n    expect(MDCFormFieldFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCFormFieldFoundation).toBeTruthy();\n    expect(MDCFormFieldFoundation.strings).toEqual(strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCFormFieldFoundation, [\n      'registerInteractionHandler',\n      'deregisterInteractionHandler',\n      'activateInputRipple',\n      'deactivateInputRipple',\n    ]);\n  });\n\n  function setupTest() {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCFormFieldFoundation);\n    return {foundation, mockAdapter};\n  }\n\n  it('#init calls event registrations', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.init();\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n  });\n\n  it('#destroy calls event deregistrations', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.init();\n    foundation.destroy();\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n  });\n});\n"
  },
  {
    "path": "packages/mdc-form-field/test/mdc-form-field.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-form-field.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-icon-button/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-icon-button/README.md",
    "content": "<!--docs:\ntitle: \"Icon buttons\"\nlayout: detail\nsection: components\nexcerpt: \"Web icon buttons\"\niconId: button\npath: /catalog/buttons/icon-buttons/\n-->\n\n# Icon buttons\n\n[Icon buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\n**Note**: For buttons with both icons and text, use the `mdc-button` component. For more information, see the `mdc-button` [docs](../mdc-button).\n\n## Using icon buttons\n\n### Installation\n\n```\nnpm install @material/icon-button\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button/styles\";\n```\n\n### JavaScript instantiation\n\nThe icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element.\nSee [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));\niconButtonRipple.unbounded = true;\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Icon button\n\n```html\n<button class=\"mdc-icon-button\">\n  <div class=\"mdc-icon-button__ripple\"></div>\n  <span class=\"mdc-icon-button__focus-ring\"></span>\n  <i class=\"material-icons\">favorite</i>\n</button>\n```\n\n**Note**: The MDC Icon Button can be used with both `<button>` and `<a>` tags.\n\n**Note**: IE11 will not center the icon properly if there is a newline or space after the material icon text.\n\n### Making icon buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-icon-button\">\n    <div class=\"mdc-icon-button__ripple\"></div>\n    <span class=\"mdc-icon-button__focus-ring\"></span>\n    <i class=\"material-icons\">favorite</i>\n    <div class=\"mdc-icon-button__touch\"></div>\n  </button>\n</div>\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\nThe `mdc-icon-button__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused icon button.\n\n## Icon button toggle\n\nThe icon button can be used to toggle between an on and off icon.\n\nTo style an icon button as an icon button toggle, add\nboth icons as child elements and place the `mdc-icon-button__icon--on` class on the icon that represents the on element.\nIf the button should be initialized in the \"on\" state, then add the `mdc-icon-button--on` class to the parent `button`.\n\n```html\n<button id=\"add-to-favorites\"\n   class=\"mdc-icon-button\"\n   aria-label=\"Add to favorites\"\n   aria-pressed=\"false\">\n   <div class=\"mdc-icon-button__ripple\"></div>\n   <span class=\"mdc-icon-button__focus-ring\"></span>\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n</button>\n```\n\nThen, instantiate an `MDCIconButtonToggle` on the root element.\n\n```js\nimport {MDCIconButtonToggle} from '@material/icon-button';\nconst iconToggle = new MDCIconButtonToggle(document.querySelector('.mdc-icon-button'));\n```\n\n### Icon button toggle with SVG\n\nThe icon button toggle can be used with SVGs.\n\n```html\n<button id=\"star-this-item\"\n   class=\"mdc-icon-button mdc-icon-button--on\"\n   aria-label=\"Unstar this item\"\n   aria-pressed=\"true\">\n   <div class=\"mdc-icon-button__ripple\"></div>\n   <span class=\"mdc-icon-button__focus-ring\"></span>\n   <svg class=\"mdc-icon-button__icon\">\n     ...\n   </svg>\n   <svg class=\"mdc-icon-button__icon mdc-icon-button__icon--on\">\n     ...\n  </svg>\n</button>\n```\n\n### Icon button toggle with an image\n\nThe icon button toggle can be used with `img` tags.\n\n```html\n<button id=\"star-this-item\"\n   class=\"mdc-icon-button mdc-icon-button--on\"\n   aria-label=\"Unstar this item\"\n   aria-pressed=\"true\">\n   <div class=\"mdc-icon-button__ripple\"></div>\n   <span class=\"mdc-icon-button__focus-ring\"></span>\n   <img src=\"\" class=\"mdc-icon-button__icon\"/>\n   <img src=\"\" class=\"mdc-icon-button__icon mdc-icon-button__icon--on\"/>\n</button>\n```\n\n### Icon button toggle with toggled aria label\n\nSome designs may call for the aria label to change depending on the icon button\nstate. In this case, specify the `data-aria-label-on` (aria label in on state)\nand `aria-data-label-off` (aria label in off state) attributes, and omit the\n`aria-pressed` attribute.\n\n```html\n<button id=\"add-to-favorites\"\n   class=\"mdc-icon-button\"\n   aria-label=\"Add to favorites\"\n   data-aria-label-on=\"Remove from favorites\"\n   data-aria-label-off=\"Add to favorites\">\n   <div class=\"mdc-icon-button__ripple\"></div>\n   <span class=\"mdc-icon-button__focus-ring\"></span>\n   <i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n   <i class=\"material-icons mdc-icon-button__icon\">favorite_border</i>\n</button>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-icon-button` | Mandatory.\n`mdc-icon-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the \"on\" state.\n`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.\n`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the \"on\" icon.\n`mdc-icon-button__focus-ring` | Recommended. Indicates the element which shows the high contrast mode focus ring styling.\n\n### Sass mixins\n\nTo customize an icon button's color and properties, you can use the following mixins.\n\nMixin | Description\n--- | ---\n`density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default).\n`size($size)` | Sets the padding for the icon button based on overall size.\n`ink-color($color)` | Sets the font color and the ripple color to the provided color value.\n`disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.\n`flip-icon-in-rtl()` | Flips icon only in RTL context.\n\n### `MDCIconButtonToggle` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`on` | Boolean | Sets the toggle state to the provided `isOn` value.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCIconButtonToggle:change` | `{\"detail\": {\"isOn\": boolean}}` | Emits when the icon is toggled.\n\n### `MDCIconButtonToggleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.\n`notifyChange(eventData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `eventData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.\n\n### `MDCIconButtonToggleFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.\n"
  },
  {
    "path": "packages/mdc-icon-button/_icon-button-all-deprecated.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-icon-button/_icon-button-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n\n$ripple-target: '.mdc-icon-button__ripple';\n\n$icon-size: 24px !default;\n$size: 48px !default;\n$minimum-height: 28px !default;\n$maximum-height: $size !default;\n$container-shape: 50%;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  size: (\n    default: $size,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n\n$_custom-property-prefix: 'icon-button';\n\n$light-theme: (\n  disabled-icon-color: theme-color.$on-surface,\n  disabled-icon-opacity: 0.38,\n  icon-color: theme-color.$primary,\n  icon-size: $icon-size,\n  focus-icon-color: theme-color.$primary,\n  focus-state-layer-color: theme-color.$primary,\n  focus-state-layer-opacity: 0.12,\n  hover-icon-color: theme-color.$primary,\n  hover-state-layer-color: theme-color.$primary,\n  hover-state-layer-opacity: 0.08,\n  pressed-icon-color: theme-color.$primary,\n  pressed-state-layer-color: theme-color.$primary,\n  pressed-state-layer-opacity: 0.12,\n  state-layer-size: $size,\n  focus-ring-color: null,\n  focus-ring-offset: 0,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $_custom-property-prefix\n  );\n\n  @include _state-layer-size($size: map.get($theme, state-layer-size));\n  @include _icon-size(map.get($theme, icon-size));\n  @include _disabled-icon-opacity(map.get($theme, disabled-icon-opacity));\n  @include _icon-color-with-map(\n    (\n      default: map.get($theme, icon-color),\n      disabled: map.get($theme, disabled-icon-color),\n      focus: map.get($theme, focus-icon-color),\n      hover: map.get($theme, hover-icon-color),\n      pressed: map.get($theme, pressed-icon-color),\n    )\n  );\n\n  // States styles\n  @include ripple-theme.theme-styles(\n    (\n      focus-state-layer-color: map.get($theme, focus-state-layer-color),\n      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),\n      hover-state-layer-color: map.get($theme, hover-state-layer-color),\n      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),\n      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),\n      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),\n    ),\n    $ripple-target: $ripple-target\n  );\n\n  @include ripple-theme.states-colors(\n    (\n      hover: map.get($theme, hover-state-layer-color),\n      press: map.get($theme, pressed-state-layer-color),\n    ),\n    $ripple-target: $ripple-target\n  );\n\n  @include _focus-ring-color(map.get($theme, 'focus-ring-color'));\n  @include _focus-ring-offset(map.get($theme, 'focus-ring-offset'));\n}\n\n///\n/// Sets the density scale for icon button.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n///     Supported density scale values range from `-5` to `0`, with `0` being the default.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $size: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: size,\n  );\n\n  @include size($size, $query: $query);\n}\n\n///\n/// Sets the size of the icon-button.\n///\n/// @param {Number} $size - Size value for icon-button.\n///     Size will set the width, height, and padding for the overall component.\n///\n@mixin size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: $size;\n    height: $size;\n    padding: calc(($size - $icon-size) / 2);\n  }\n\n  &.mdc-icon-button--reduced-size {\n    $component-size: $size;\n    // Icon button ripple size is capped at 40px for icon buttons with\n    // densities -1 and 0 (icon buttons with sizes 44x44 and 48x48px).\n    // See http://b/192353968 for more info.\n    @if math.unit($size) == 'px' and ($size >= 40px and $size <= 48px) {\n      $component-size: 40px;\n    }\n\n    .mdc-icon-button__ripple {\n      @include feature-targeting.targets($feat-structure) {\n        width: $component-size;\n        height: $component-size;\n      }\n\n      @include touch-target-mixins.margin(\n        $component-height: $component-size,\n        $component-width: $component-size,\n        $touch-target-height: $size,\n        $touch-target-width: $size,\n        $query: $query\n      );\n    }\n\n    .mdc-icon-button__focus-ring {\n      @include feature-targeting.targets($feat-structure) {\n        max-height: $component-size;\n        max-width: $component-size;\n      }\n    }\n  }\n\n  .mdc-icon-button__touch {\n    @include touch-target-mixins.touch-target(\n      $set-width: true,\n      $query: $query,\n      $height: $size,\n      $width: $size\n    );\n  }\n}\n\n///\n/// Sets the width, height and padding of icon button. Also changes the size of\n/// the icon itself based on button size.\n///\n/// @param {Number} $width - Width value for icon-button.\n/// @param {Number} $height - Height value for icon-button. (default: $width)\n/// @param {Number} $padding - Padding value for icon-button. (default: max($width, $height) / 2)\n/// @deprecated\n///     This mixin provides too much of low level customization.\n///     Please use mdc-icon-button-size instead.\n///\n@mixin icon-size(\n  $width,\n  $height: $width,\n  $padding: math.div(math.max($width, $height), 2),\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $component-width: $width + $padding * 2;\n  $component-height: $height + $padding * 2;\n\n  @include feature-targeting.targets($feat-structure) {\n    width: $component-width;\n    height: $component-height;\n    padding: $padding;\n    font-size: math.max($width, $height);\n  }\n\n  svg,\n  img {\n    @include feature-targeting.targets($feat-structure) {\n      width: $width;\n      height: $height;\n    }\n  }\n}\n\n///\n/// Sets the font color and the ripple color to the provided color value.\n/// @param {Color} $color - The desired font and ripple color.\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    @include ink-color_($color, $query: $query);\n    @include ripple-theme.states(\n      $color,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n///\n/// Flips icon only in RTL context.\n///\n@mixin flip-icon-in-rtl($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-button__icon {\n    @include rtl.rtl {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        transform: rotate(180deg);\n      }\n    }\n  }\n}\n\n///\n/// Sets the font color to the provided color value for a disabled icon button.\n/// @param {Color} $color - The desired font color.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // TODO(b/175806874): Use the DOM border mixin after the ripple is moved\n    // away from :before to a dedicated element.\n    outline: solid 3px transparent;\n\n    &:focus {\n      outline: double 5px transparent;\n    }\n  }\n}\n\n///\n/// Sets the font color to the provided color value. This can be wrapped in\n/// a state qualifier such as `mdc-icon-button-if-disabled_`.\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _state-layer-size($size) {\n  @include theme.property(height, $size);\n  @include theme.property(width, $size);\n\n  @if $size {\n    $value: custom-properties.get-declaration-value($size);\n    @if type-of($value) == 'number' {\n      @include size($value);\n    }\n  }\n}\n\n@mixin _icon-size($size) {\n  .mdc-button__icon {\n    @include theme.property(font-size, $size);\n  }\n  svg,\n  img {\n    @include theme.property(width, $size);\n    @include theme.property(height, $size);\n  }\n}\n\n///\n/// Sets the icon opacity to the given opacity.\n/// @access private\n///\n@mixin _disabled-icon-opacity($opacity) {\n  &:disabled {\n    @include theme.property(opacity, $opacity);\n  }\n}\n\n///\n/// Sets the icon color to the given color.\n/// @param {map} $color-map - The desired icon color, specified as a map of\n///     colors with states {default, disabled, focus, hover, pressed} as keys.\n/// @access private\n///\n@mixin _icon-color-with-map($color-map) {\n  @include ink-color_(state.get-default-state($color-map));\n\n  $focus: state.get-focus-state($color-map);\n  @if $focus {\n    @include ripple-theme.focus {\n      @include ink-color_($focus);\n    }\n  }\n\n  $hover: state.get-hover-state($color-map);\n  @if $hover {\n    &:hover {\n      @include ink-color_($hover);\n    }\n  }\n\n  $pressed: state.get-pressed-state($color-map);\n  @if $pressed {\n    @include ripple-theme.active {\n      @include ink-color_($pressed);\n    }\n  }\n\n  $disabled: state.get-disabled-state($color-map);\n  @if $disabled {\n    &:disabled {\n      @include ink-color_($disabled);\n    }\n  }\n}\n\n@mixin _states-colors($color-map) {\n  // TODO(b/191298796): support focused & pressed key colors.\n\n  $hover: map.get($color-map, hover);\n  @if $hover {\n    @include ripple-theme.states-base-color(\n      $color: $hover,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin _focus-ring-color($color, $query: feature-targeting.all()) {\n  $color-value: if(\n    custom-properties.is-custom-prop($color),\n    custom-properties.get-declaration-value($color),\n    $color\n  );\n\n  @if $color != null {\n    .mdc-icon-button__focus-ring {\n      @include focus-ring.focus-ring-color(\n        $inner-ring-color: $color-value,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _focus-ring-offset($offset, $query: feature-targeting.all()) {\n  $offset-value: if(\n    custom-properties.is-custom-prop($offset),\n    custom-properties.get-declaration-value($offset),\n    $offset\n  );\n\n  @if meta.type-of($offset-value) == 'number' {\n    .mdc-icon-button__focus-ring {\n      @include focus-ring.focus-ring-offset(\n        $offset: $offset-value,\n        $query: $query\n      );\n    }\n  }\n}\n\n///\n/// Helps style the icon button in its disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n  &:disabled {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-icon-button/_icon-button.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use './icon-button-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define icon-button\n  .mdc-icon-button {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n      position: relative;\n      box-sizing: border-box;\n      border: none;\n      outline: none;\n      background-color: transparent;\n      fill: currentColor;\n      color: inherit;\n      text-decoration: none;\n      cursor: pointer;\n      user-select: none;\n      z-index: 0; // Added to render above the container in IE11 tests.\n      overflow: visible; // Added to fix IE11 touch target tests.\n    }\n\n    .mdc-icon-button__touch {\n      @include touch-target-mixins.touch-target(\n        $set-width: true,\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus {\n      .mdc-icon-button__focus-ring {\n        @include dom.forced-colors-mode($exclude-ie11: true) {\n          @include feature-targeting.targets($feat-structure) {\n            display: block;\n          }\n        }\n      }\n    }\n\n    @include if-disabled_ {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: default;\n        pointer-events: none;\n      }\n    }\n\n    &[hidden] {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n\n  .mdc-icon-button--display-flex {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n  }\n\n  .mdc-icon-button__focus-ring {\n    @include focus-ring.focus-ring(\n      $query: $query,\n      $container-outer-padding-vertical: 0,\n      $container-outer-padding-horizontal: 0\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n    }\n  }\n\n  .mdc-icon-button__icon {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n    }\n\n    &.mdc-icon-button__icon--on {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n\n  .mdc-icon-button--on {\n    .mdc-icon-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n\n      &.mdc-icon-button__icon--on {\n        @include feature-targeting.targets($feat-structure) {\n          display: inline-block;\n        }\n      }\n    }\n  }\n  // postcss-bem-linter: end\n\n  .mdc-icon-button__link {\n    @include feature-targeting.targets($feat-structure) {\n      height: 100%;\n      left: 0;\n      outline: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-icon-button {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: icon-button-theme.$icon-size;\n    }\n\n    @include icon-button-theme.density(0, $query: $query);\n\n    @include icon-button-theme.disabled-ink-color(\n      text-disabled-on-light,\n      $query: $query\n    );\n\n    svg,\n    img {\n      @include feature-targeting.targets($feat-structure) {\n        width: icon-button-theme.$icon-size;\n        height: icon-button-theme.$icon-size;\n      }\n    }\n  }\n\n  @include static-styles($query: $query);\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-icon-button {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: icon-button-theme.$ripple-target\n    );\n    @include ripple.radius-unbounded(\n      $query: $query,\n      $ripple-target: icon-button-theme.$ripple-target\n    );\n    @include ripple-theme.states(\n      $query: $query,\n      $ripple-target: icon-button-theme.$ripple-target\n    );\n\n    &:disabled {\n      @include ripple-theme.states-opacities(\n        (\n          hover: 0,\n          focus: 0,\n          press: 0,\n        ),\n        $ripple-target: icon-button-theme.$ripple-target,\n        $query: $query\n      );\n    }\n\n    .mdc-icon-button__ripple {\n      $feat-structure: feature-targeting.create-target($query, structure);\n      @include feature-targeting.targets($feat-structure) {\n        height: 100%;\n        left: 0px;\n        pointer-events: none;\n        position: absolute;\n        top: 0px;\n        width: 100%;\n        z-index: -1;\n      }\n    }\n  }\n}\n\n///\n/// Helps style the icon button in its disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n  &:disabled {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-icon-button/_index.scss",
    "content": "@forward \"./icon-button-theme\";\n"
  },
  {
    "path": "packages/mdc-icon-button/_mixins.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"./icon-button-all-deprecated\" as mdc-icon-button-*;\n"
  },
  {
    "path": "packages/mdc-icon-button/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './icon-button' or './icon-button-theme' instead.\n@forward './icon-button' show core-styles, without-ripple, ripple;\n@forward './icon-button-theme' show $ripple-target, density, size, icon-size, ink-color, ink-color_, flip-icon-in-rtl, disabled-ink-color, high-contrast-mode-shim;\n"
  },
  {
    "path": "packages/mdc-icon-button/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"./icon-button-all-deprecated\" as mdc-icon-button-* hide mdc-icon-button-core-styles, mdc-icon-button-without-ripple, mdc-icon-button-ripple, mdc-icon-button-density, mdc-icon-button-size, mdc-icon-button-icon-size, mdc-icon-button-ink-color, mdc-icon-button-disabled-ink-color, mdc-icon-button-base-, mdc-icon-button-ink-color-, mdc-icon-button-if-disabled-;\n"
  },
  {
    "path": "packages/mdc-icon-button/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './icon-button-theme' module instead.\n@forward './icon-button-theme' show $icon-size, $size, $minimum-height, $maximum-height, $density-scale, $density-config;\n"
  },
  {
    "path": "packages/mdc-icon-button/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCIconButtonToggleEventDetail} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCIconButtonToggleAdapter {\n  addClass(className: string): void;\n\n  removeClass(className: string): void;\n\n  hasClass(className: string): boolean;\n\n  /** Returns the given attribute value on the root element. */\n  getAttr(attrName: string): string|null;\n\n  setAttr(attrName: string, attrValue: string): void;\n\n  notifyChange(eventData: MDCIconButtonToggleEventDetail): void;\n}\n"
  },
  {
    "path": "packages/mdc-icon-button/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCRipple} from '@material/ripple/component';\n\nimport {MDCIconButtonToggleAdapter} from './adapter';\nimport {MDCIconButtonToggleFoundation} from './foundation';\nimport {MDCIconButtonToggleEventDetail} from './types';\n\nconst {strings} = MDCIconButtonToggleFoundation;\n\n/** MDC Icon Button Toggle */\nexport class MDCIconButtonToggle extends\n    MDCComponent<MDCIconButtonToggleFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCIconButtonToggle(root);\n  }\n\n  private readonly rippleComponent: MDCRipple = this.createRipple();\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n\n  override initialSyncWithDOM() {\n    this.handleClick = () => {\n      this.foundation.handleClick();\n    };\n    this.listen('click', this.handleClick);\n  }\n\n  override destroy() {\n    this.unlisten('click', this.handleClick);\n    this.ripple.destroy();\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCIconButtonToggleAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      notifyChange: (eventData) => {\n        this.emit<MDCIconButtonToggleEventDetail>(\n            strings.CHANGE_EVENT, eventData);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      getAttr: (attrName) => this.root.getAttribute(attrName),\n      setAttr: (attrName, attrValue) => {\n        this.safeSetAttribute(this.root, attrName, attrValue);\n      },\n    };\n    return new MDCIconButtonToggleFoundation(adapter);\n  }\n\n  get ripple(): MDCRipple {\n    return this.rippleComponent;\n  }\n\n  get on(): boolean {\n    return this.foundation.isOn();\n  }\n\n  set on(isOn: boolean) {\n    this.foundation.toggle(isOn);\n  }\n\n  private createRipple(): MDCRipple {\n    const ripple = new MDCRipple(this.root);\n    ripple.unbounded = true;\n    return ripple;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-icon-button/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  ICON_BUTTON_ON: 'mdc-icon-button--on',\n  ROOT: 'mdc-icon-button',\n};\n\nexport const strings = {\n  ARIA_LABEL: 'aria-label',\n  ARIA_PRESSED: 'aria-pressed',\n  DATA_ARIA_LABEL_OFF: 'data-aria-label-off',\n  DATA_ARIA_LABEL_ON: 'data-aria-label-on',\n  CHANGE_EVENT: 'MDCIconButtonToggle:change',\n};\n"
  },
  {
    "path": "packages/mdc-icon-button/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCIconButtonToggleAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Icon Button Toggle Foundation */\nexport class MDCIconButtonToggleFoundation extends\n    MDCFoundation<MDCIconButtonToggleAdapter> {\n  /**\n   * Whether the icon button has an aria-label that changes depending on\n   * toggled state.\n   */\n  private hasToggledAriaLabel = false;\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCIconButtonToggleAdapter {\n    return {\n      addClass: () => undefined,\n      hasClass: () => false,\n      notifyChange: () => undefined,\n      removeClass: () => undefined,\n      getAttr: () => null,\n      setAttr: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCIconButtonToggleAdapter>) {\n    super({...MDCIconButtonToggleFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    const ariaLabelOn = this.adapter.getAttr(strings.DATA_ARIA_LABEL_ON);\n    const ariaLabelOff = this.adapter.getAttr(strings.DATA_ARIA_LABEL_OFF);\n    if (ariaLabelOn && ariaLabelOff) {\n      if (this.adapter.getAttr(strings.ARIA_PRESSED) !== null) {\n        throw new Error(\n            'MDCIconButtonToggleFoundation: Button should not set ' +\n            '`aria-pressed` if it has a toggled ARIA label.');\n      }\n\n      this.hasToggledAriaLabel = true;\n    } else {\n      this.adapter.setAttr(strings.ARIA_PRESSED, String(this.isOn()));\n    }\n  }\n\n  handleClick() {\n    this.toggle();\n    this.adapter.notifyChange({isOn: this.isOn()});\n  }\n\n  isOn(): boolean {\n    return this.adapter.hasClass(cssClasses.ICON_BUTTON_ON);\n  }\n\n  toggle(isOn: boolean = !this.isOn()) {\n    // Toggle UI based on state.\n    if (isOn) {\n      this.adapter.addClass(cssClasses.ICON_BUTTON_ON);\n    } else {\n      this.adapter.removeClass(cssClasses.ICON_BUTTON_ON);\n    }\n\n    // Toggle aria attributes based on state.\n    if (this.hasToggledAriaLabel) {\n      const ariaLabel = isOn ?\n          this.adapter.getAttr(strings.DATA_ARIA_LABEL_ON) :\n          this.adapter.getAttr(strings.DATA_ARIA_LABEL_OFF);\n      this.adapter.setAttr(strings.ARIA_LABEL, ariaLabel || '');\n    } else {\n      this.adapter.setAttr(strings.ARIA_PRESSED, `${isOn}`);\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCIconButtonToggleFoundation;\n"
  },
  {
    "path": "packages/mdc-icon-button/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-icon-button/mdc-icon-button.import.scss",
    "content": "@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"variables\" as mdc-icon-button-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"mixins\" as mdc-icon-button-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"mdc-icon-button\";\n"
  },
  {
    "path": "packages/mdc-icon-button/mdc-icon-button.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-icon-button/package.json",
    "content": "{\n  \"name\": \"@material/icon-button\",\n  \"description\": \"The Material Components for the web icon button component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.iconButton.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"button\",\n    \"icon button\",\n    \"icon toggle\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-icon-button\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-icon-button/styles.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './icon-button';\n\n@include icon-button.core-styles;\n"
  },
  {
    "path": "packages/mdc-icon-button/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCIconButtonToggle, MDCIconButtonToggleFoundation} from '../../mdc-icon-button/index';\nimport {cssClasses} from '../../mdc-ripple/constants';\nimport {MDCRipple} from '../../mdc-ripple/index';\nimport {supportsCssVariables} from '../../mdc-ripple/util';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation as mockFoundationCreator} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nfunction getFixture() {\n  return createFixture(html`\n    <button></button>\n  `);\n}\n\nfunction setupTest({createMockFoundation = false} = {}) {\n  const root = getFixture();\n\n  let mockFoundation;\n  if (createMockFoundation) {\n    mockFoundation = mockFoundationCreator(MDCIconButtonToggleFoundation);\n  }\n  const component = new MDCIconButtonToggle(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCIconButtonToggle', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCIconButtonToggle instance', () => {\n    expect(\n        MDCIconButtonToggle.attachTo(document.createElement('i')) instanceof\n        MDCIconButtonToggle)\n        .toBe(true);\n  });\n\n  if (supportsCssVariables(window)) {\n    it('#constructor initializes the ripple on the root element', () => {\n      const {root} = setupTest();\n      jasmine.clock().tick(1);\n      expect(root).toHaveClass('mdc-ripple-upgraded');\n    });\n\n    it('#destroy removes the ripple', () => {\n      const {root, component} = setupTest();\n      jasmine.clock().tick(1);\n      component.destroy();\n      jasmine.clock().tick(1);\n      expect(root).not.toHaveClass('mdc-ripple-upgraded');\n    });\n  }\n\n  it('set/get on', () => {\n    const {root, component} = setupTest();\n    component.on = true;\n    expect(component.on).toBe(true);\n    expect(root.getAttribute('aria-pressed')).toEqual('true');\n\n    component.on = false;\n    expect(component.on).toBe(false);\n    expect(root.getAttribute('aria-pressed')).toEqual('false');\n  });\n\n  it('get ripple returns a MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBe(true);\n  });\n\n  it('#adapter.addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.setAttr sets an attribute on the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.setAttr('aria-label', 'hello');\n    expect(root.getAttribute('aria-label')).toEqual('hello');\n  });\n\n  it(`#adapter.notifyChange broadcasts a ${\n         MDCIconButtonToggleFoundation.strings.CHANGE_EVENT} custom event`,\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('custom event handler');\n       root.addEventListener(\n           MDCIconButtonToggleFoundation.strings.CHANGE_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyChange({});\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('assert keydown does not trigger ripple', () => {\n    const {root} = setupTest();\n    emitEvent(root, 'keydown');\n    expect(root).not.toHaveClass(cssClasses.FG_ACTIVATION);\n  });\n\n  it('assert keyup does not trigger ripple', () => {\n    const {root} = setupTest();\n    emitEvent(root, 'keyup');\n    expect(root).not.toHaveClass(cssClasses.FG_ACTIVATION);\n  });\n\n  it('click handler is added to root element', () => {\n    const {root, mockFoundation} = setupTest({createMockFoundation: true});\n    emitEvent(root, 'click');\n    expect(mockFoundation!.handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  it('click handler is removed from the root element on destroy', () => {\n    const {root, component, mockFoundation} =\n        setupTest({createMockFoundation: true});\n    component.destroy();\n    emitEvent(root, 'click');\n    expect(mockFoundation!.handleClick).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-icon-button/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as icon-button;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include icon-button.core-styles($query: $query);\n    @include icon-button.density(0, $query: $query);\n    @include icon-button.size(0, $query: $query);\n    @include icon-button.icon-size(0, $query: $query);\n    @include icon-button.ink-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-icon-button/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCIconButtonToggleFoundation} from '../../mdc-icon-button/foundation';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {strings, cssClasses} = MDCIconButtonToggleFoundation;\n\ndescribe('MDCIconButtonToggleFoundation', () => {\n  it('exports strings', () => {\n    expect('strings' in MDCIconButtonToggleFoundation).toBe(true);\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCIconButtonToggleFoundation).toBe(true);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCIconButtonToggleFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'getAttr',\n      'setAttr',\n      'notifyChange',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCIconButtonToggleFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#isOn is false if hasClass(${cssClasses.ICON_BUTTON_ON}) returns false`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.ICON_BUTTON_ON)\n           .and.returnValue(false);\n       expect(foundation.isOn()).toBe(false);\n     });\n\n  it(`#isOn is true if hasClass(${cssClasses.ICON_BUTTON_ON}) returns true`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.ICON_BUTTON_ON)\n           .and.returnValue(true);\n       expect(foundation.isOn()).toBe(true);\n     });\n\n  it('#handleClick calls #toggle', () => {\n    const {foundation} = setupTest();\n    foundation.init();\n    foundation.toggle = jasmine.createSpy('');\n    foundation.handleClick();\n    expect(foundation.toggle).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleClick calls notifyChange', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.ICON_BUTTON_ON)\n        .and.returnValue(true);\n    foundation.init();\n    foundation.handleClick();\n    expect(mockAdapter.notifyChange).toHaveBeenCalledWith({isOn: true});\n    expect(mockAdapter.notifyChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('#toggle flips on', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.hasClass.withArgs(cssClasses.ICON_BUTTON_ON)\n        .and.returnValues(true, false);\n\n    foundation.toggle();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.ICON_BUTTON_ON);\n    expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n    foundation.toggle();\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.ICON_BUTTON_ON);\n    expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n  });\n\n  it('#toggle accepts boolean argument denoting toggle state', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n\n    foundation.toggle(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.ICON_BUTTON_ON);\n    expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n    foundation.toggle(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.ICON_BUTTON_ON);\n    expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n  });\n\n  it('#toggle sets \"aria-pressed\" to true when toggled on', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.toggle(true);\n    expect(mockAdapter.setAttr)\n        .toHaveBeenCalledWith(strings.ARIA_PRESSED, 'true');\n  });\n\n  it('#toggle sets \"aria-pressed\" to false when toggled off', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.toggle(false);\n    expect(mockAdapter.setAttr)\n        .toHaveBeenCalledWith(strings.ARIA_PRESSED, 'false');\n    expect(mockAdapter.setAttr).toHaveBeenCalledTimes(1);\n  });\n\n  describe('Variant with toggled aria label', () => {\n    it('#init throws an error if `aria-label-on` and `aria-label-off` are ' +\n           'set, but `aria-pressed` is also set',\n       () => {\n         const {foundation, mockAdapter} = setupTest();\n\n         mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_ON)\n             .and.returnValue('on label');\n         mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_OFF)\n             .and.returnValue('off label');\n         mockAdapter.getAttr.withArgs(strings.ARIA_PRESSED)\n             .and.returnValue('false');\n\n         expect(foundation.init).toThrow();\n       });\n\n    it('#toggle sets aria label correctly when toggled on', () => {\n      const {foundation, mockAdapter} = initWithToggledAriaLabel({isOn: false});\n\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_ON)\n          .and.returnValue('on label');\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_OFF)\n          .and.returnValue('off label');\n      foundation.toggle(true);\n      expect(mockAdapter.setAttr)\n          .toHaveBeenCalledWith(strings.ARIA_LABEL, 'on label');\n    });\n\n    it('#toggle sets aria label correctly when toggled off', () => {\n      const {foundation, mockAdapter} = initWithToggledAriaLabel({isOn: false});\n\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_ON)\n          .and.returnValue('on label');\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_OFF)\n          .and.returnValue('off label');\n      foundation.toggle(false);\n      expect(mockAdapter.setAttr)\n          .toHaveBeenCalledWith(strings.ARIA_LABEL, 'off label');\n    });\n\n    const initWithToggledAriaLabel = ({isOn}: {isOn: boolean}) => {\n      const {foundation, mockAdapter} = setupTest();\n\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_ON)\n          .and.returnValue('on label');\n      mockAdapter.getAttr.withArgs(strings.DATA_ARIA_LABEL_OFF)\n          .and.returnValue('off label');\n      mockAdapter.getAttr.withArgs(strings.ARIA_PRESSED).and.returnValue(null);\n      mockAdapter.hasClass.withArgs(cssClasses.ICON_BUTTON_ON)\n          .and.returnValue(isOn);\n      foundation.init();\n\n      return {foundation, mockAdapter};\n    };\n  });\n});\n"
  },
  {
    "path": "packages/mdc-icon-button/test/mdc-icon-button.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-icon-button.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-icon-button/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCIconButtonToggleEventDetail {\n  isOn: boolean;\n}\n"
  },
  {
    "path": "packages/mdc-image-list/README.md",
    "content": "<!--docs:\ntitle: \"Image List\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design image list component.\"\niconId: card\npath: /catalog/image-lists/\n-->\n\n# Image List\n\nMDC Image List provides a RTL-aware Material Design image list component. An Image List consists of several items,\neach containing an image and optionally supporting content (i.e. a text label).\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-image-list\">Material Design guidelines: Image list</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/image-list\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/image-list\n```\n\n## Basic Usage\n\n### HTML Structure\n\nThe HTML structure for a Standard Image List is as follows:\n\n```html\n<ul class=\"mdc-image-list my-image-list\">\n  <li class=\"mdc-image-list__item\">\n    <div class=\"mdc-image-list__image-aspect-container\">\n      <img class=\"mdc-image-list__image\" src=\"...\">\n    </div>\n    <div class=\"mdc-image-list__supporting\">\n      <span class=\"mdc-image-list__label\">Text label</span>\n    </div>\n  </li>\n  ...\n</ul>\n```\n\n### Styles\n\n```scss\n@use \"@material/image-list/mdc-image-list\";\n```\n\nThe HTML structure above would be combined with an invocation of the `standard-columns` mixin,\nto establish how many columns should be displayed per line:\n\n```scss\n@use \"@material/image-list\";\n\n.my-image-list {\n  @include image-list.standard-columns(5);\n}\n```\n\nImages in a Standard Image list are constrained to 1:1 aspect ratio by default; this can be overridden using the\n`aspect` mixin documented below.\n\n## Variants\n\n### Masonry Image List\n\nThe Masonry Image List variant presents images vertically arranged into several columns, using\n[CSS Columns](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns). In this layout, images may be any\ncombination of aspect ratios.\n\n```html\n<ul class=\"mdc-image-list mdc-image-list--masonry my-masonry-image-list\">\n  <li class=\"mdc-image-list__item\">\n    <img class=\"mdc-image-list__image\" src=\"...\">\n    <div class=\"mdc-image-list__supporting\">\n      <span class=\"mdc-image-list__label\">Text label</span>\n    </div>\n  </li>\n  ...\n</ul>\n```\n\n> **Note:** Masonry Image List items _do not_ include the `mdc-image-list__image-aspect-container` element, since\nimages in the list are not expected to be locked to a common aspect ratio.\n\nThis would be combined with an invocation of the `mdc-image-list-masonry-columns` mixin, to establish how many columns\nshould be displayed:\n\n```scss\n.my-masonry-image-list {\n  @include image-list.masonry-columns(5);\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-image-list` | Mandatory. Indicates the root Image List element.\n`mdc-image-list--masonry` | Optional. Indicates that this Image List should use the Masonry variant.\n`mdc-image-list--with-text-protection` | Optional. Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image).\n`mdc-image-list__item` | Mandatory. Indicates each item in an Image List.\n`mdc-image-list__image-aspect-container` | Optional. Parent of each item's image element, responsible for constraining aspect ratio. This element may be omitted entirely if images are already sized to the correct aspect ratio.\n`mdc-image-list__image` | Mandatory. Indicates the image element in each item.\n`mdc-image-list__supporting` | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels.\n`mdc-image-list__label` | Optional. Indicates the text label in each item, if the Image List contains text labels.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`aspect($width-height-ratio)` | Styles the aspect container elements within an Image List to conform to the given ratio, where 1 is 1:1, greater than 1 is wider, and less than 1 is taller.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to image list item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`standard-columns($column-count, $gutter-size)` | Styles a Standard Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.\n`masonry-columns($column-count, $gutter-size)` | Styles a Masonry Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.\n\n> **Note:** Only one of the `*-columns` mixins should be used for any given Image List.\n> Use the mixin appropriate to the variant being used.\n\n### Additional Information\n\n#### Constraining width\n\nThe `*-columns` mixins will grow and shrink items based on the Image List's overall width. Depending on\nplacement, this could be directly related to the viewport width, and images could become exceedingly large compared to\ntheir actual rendered size. This can be restricted by using any of `min-width`, `width`, or `max-width` on the Image\nList:\n\n```scss\n@use \"@material/image-list\";\n\n.my-image-list {\n  @include image-list.standard-columns(5);\n\n  max-width: 960px;\n}\n```\n\n> **Note:** Remember that any specified width will apply to the _entire_ list, so be sure to account for the gutters\nas well.\n\n#### Changing number of columns across breakpoints\n\nPresenting a different number of columns for different viewport sizes is straightforward, since the only thing that\nneeds to be changed are styles:\n\n```scss\n.my-image-list {\n  @include image-list.standard-columns(5);\n}\n\n@media (max-width: 599px) {\n  .my-image-list {\n    @include image-list.standard-columns(3);\n  }\n}\n```\n\n#### Using div in place of img to enforce aspect ratio\n\n> **Note:** This advice is not applicable to Masonry Image List, where images do not share a common aspect ratio.\n\nImages in an Image List typically use the `img` element. However, if your assets don't have the same aspect ratio as\nspecified for list items, they will become distorted. In these cases, you can use a `div` element in place of `img`,\nand set the `background-image` of each.\n\n> **Note:** Ensuring your images are appropriately-sized prior to serving them to browsers is the most efficient and\nideal approach to using MDC Image List. The `div` alternative is provided as a convenience. If you use this alternative,\nmake sure to also include the `mdc-image-list__image-aspect-container` element around each item's image.\n"
  },
  {
    "path": "packages/mdc-image-list/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-image-list/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-image-list-*;\n"
  },
  {
    "path": "packages/mdc-image-list/_mixins.scss",
    "content": "// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define image-list\n  .mdc-image-list {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-wrap: wrap;\n      // Margin and padding are set to override default user agent styles for lists, and also to center the Image List\n      margin: 0 auto;\n      padding: 0;\n    }\n  }\n\n  .mdc-image-list__item,\n  .mdc-image-list__image-aspect-container {\n    @include feature-targeting.targets($feat-structure) {\n      // Supports absolute positioning of protected supporting content for item, and image for image-aspect-container\n      position: relative;\n      box-sizing: border-box;\n    }\n  }\n\n  .mdc-image-list__item {\n    @include feature-targeting.targets($feat-structure) {\n      list-style-type: none;\n    }\n  }\n\n  .mdc-image-list__image {\n    @include feature-targeting.targets($feat-structure) {\n      width: 100%;\n    }\n  }\n\n  // Descendant selector allows image-aspect-container to be optional in DOM structure\n  .mdc-image-list__image-aspect-container .mdc-image-list__image {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      height: 100%;\n      // Background styles to support div instead of img\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: cover;\n    }\n  }\n\n  @include aspect(1, $query: $query);\n  @include shape-radius(variables.$shape-radius, $query: $query);\n\n  .mdc-image-list__supporting {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, text-primary-on-background);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      box-sizing: border-box;\n      padding: 8px 0;\n      line-height: variables.$icon-size;\n    }\n  }\n\n  .mdc-image-list__label {\n    @include typography.typography(subtitle1, $query: $query);\n    @include typography.overflow-ellipsis($query: $query);\n  }\n\n  // Modifier for labels/icons with text protection, overlaying images.\n\n  .mdc-image-list--with-text-protection .mdc-image-list__supporting {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      bottom: 0;\n      width: 100%;\n      height: variables.$text-protection-height;\n      padding: 0 variables.$text-protection-horizontal-padding;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      background: variables.$text-protection-background-color;\n      color: #fff;\n    }\n  }\n\n  // Masonry Image List, using CSS columns (i.e. renders down then across)\n\n  .mdc-image-list--masonry {\n    @include feature-targeting.targets($feat-structure) {\n      display: block; // Override flex\n    }\n\n    .mdc-image-list__item {\n      @include feature-targeting.targets($feat-structure) {\n        break-inside: avoid-column;\n      }\n    }\n\n    .mdc-image-list__image {\n      @include feature-targeting.targets($feat-structure) {\n        display: block;\n        height: auto;\n      }\n    }\n  }\n  // postcss-bem-linter: end\n}\n\n@mixin aspect($width-height-ratio, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-image-list__image-aspect-container {\n    @include feature-targeting.targets($feat-structure) {\n      padding-bottom: calc(100% / #{$width-height-ratio});\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  .mdc-image-list__image {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n\n  $selector: if(\n    &,\n    '&.mdc-image-list--with-text-protection',\n    '.mdc-image-list--with-text-protection'\n  );\n\n  #{$selector} .mdc-image-list__supporting {\n    $masked-radius: shape-functions.mask-radius($radius, 0 0 1 1);\n\n    @include shape-mixins.radius(\n      $masked-radius,\n      $rtl-reflexive,\n      $query: $query\n    );\n  }\n}\n\n// Standard Image List\n\n@mixin standard-columns(\n  $column-count,\n  $gutter-size: variables.$standard-gutter-size,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // This uses margin rather than padding to facilitate properly positioning the supporting content element when\n  // --with-text-protection is used.\n  .mdc-image-list__item {\n    @include feature-targeting.targets($feat-structure) {\n      // Subtract extra fraction from each item's width to ensure correct wrapping in IE/Edge which round differently\n      width: calc(\n        100% / #{$column-count} - #{$gutter-size + math.div(1, $column-count)}\n      );\n      margin: math.div($gutter-size, 2);\n    }\n  }\n}\n\n// Masonry Image List\n\n@mixin masonry-columns(\n  $column-count,\n  $gutter-size: variables.$masonry-gutter-size,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    column-count: $column-count;\n    column-gap: $gutter-size;\n  }\n\n  .mdc-image-list__item {\n    @include feature-targeting.targets($feat-structure) {\n      margin-bottom: $gutter-size;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-image-list/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-image-list-* hide mdc-image-list-core-styles, mdc-image-list-aspect, mdc-image-list-shape-radius, mdc-image-list-standard-columns, mdc-image-list-masonry-columns;\n"
  },
  {
    "path": "packages/mdc-image-list/_variables.scss",
    "content": "// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n$standard-gutter-size: 4px !default;\n$masonry-gutter-size: 16px !default;\n$icon-size: 24px !default;\n$text-protection-background-color: rgba(0, 0, 0, 0.6) !default;\n$text-protection-height: 48px !default;\n$text-protection-horizontal-padding: 16px !default;\n$shape-radius: 0 !default;\n"
  },
  {
    "path": "packages/mdc-image-list/mdc-image-list.scss",
    "content": "// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-image-list/package.json",
    "content": "{\n  \"name\": \"@material/image-list\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web image list component\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-image-list\"\n  },\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"image list\"\n  ],\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-image-list/test/feature-targeting-all.test.scss",
    "content": "@use './feature-targeting-any.test' as feature-targeting-test;\n@use '@material/feature-targeting/feature-targeting';\n\n// Verify that the Sass compiles when we ask for all features.\n@include feature-targeting-test.test(feature-targeting.all());\n"
  },
  {
    "path": "packages/mdc-image-list/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as image-list;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include image-list.core-styles($query: $query);\n    @include image-list.aspect(1, $query: $query);\n    @include image-list.shape-radius(0, $query: $query);\n    @include image-list.standard-columns(4, 4px, $query: $query);\n    @include image-list.masonry-columns(4, 4px, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-image-list/test/mdc-image-list.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-image-list.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-layout-grid/README.md",
    "content": "<!--docs:\ntitle: \"Layout Grid\"\nlayout: detail\nsection: components\nexcerpt: \"A CSS only responsive grid.\"\niconId: responsive_layout\npath: /catalog/layout-grid/\n-->\n\n# Layout Grid\n\nMaterial design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.\n\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid\">Material Design guidelines: Layout grid</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/layout-grid\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/layout-grid\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-layout-grid\">\n  <div class=\"mdc-layout-grid__inner\">\n    <div class=\"mdc-layout-grid__cell\"></div>\n    <div class=\"mdc-layout-grid__cell\"></div>\n    <div class=\"mdc-layout-grid__cell\"></div>\n  </div>\n</div>\n```\n\n#### Nested grid\n\nWhen your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, add a new `mdc-layout-grid__inner` to wrap around nested `mdc-layout-grid__cell` within an existing `mdc-layout-grid__cell`.\n\nThe nested layout grid behaves exactly like when they are not nested, e.g, they have 12 columns on desktop, 8 columns on tablet and 4 columns on phone. They also use the **same gutter size** as their parents, but margins are not re-introduced since they are living within another cell.\n\nHowever, the Material Design guidelines do not recommend having a deeply nested grid as it might mean an over complicated UX.\n\n```html\n<div class=\"mdc-layout-grid\">\n  <div class=\"mdc-layout-grid__inner\">\n    <div class=\"mdc-layout-grid__cell\">\n      <div class=\"mdc-layout-grid__inner\">\n        <div class=\"mdc-layout-grid__cell\"><span>Second level</span></div>\n        <div class=\"mdc-layout-grid__cell\"><span>Second level</span></div>\n      </div>\n    </div>\n    <div class=\"mdc-layout-grid__cell\">First level</div>\n    <div class=\"mdc-layout-grid__cell\">First level</div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/layout-grid/mdc-layout-grid\";\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-layout-grid` | Mandatory, for the layout grid element\n`mdc-layout-grid__inner` | Mandatory, for wrapping grid cell\n`mdc-layout-grid__cell` | Mandatory, for the layout grid cell\n`mdc-layout-grid__cell--span-<NUMBER_OF_COLUMNS>` | Optional, specifies the number of columns the cell spans\n`mdc-layout-grid__cell--span-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE>` | Optional, specifies the number of columns the cell spans on a type of device (desktop, tablet, phone)\n`mdc-layout-grid__cell--order-<INDEX>` | Optional, specifies the order of the cell\n`mdc-layout-grid__cell--align-<POSITION>` | Optional, specifies the alignment of cell\n`mdc-layout-grid--fixed-column-width` | Optional, specifies the grid should have fixed column width\n`mdc-layout-grid--align-<GRID_POSITION>` | Optional, specifies the alignment of the whole grid\n\n#### `mdc-layout-grid__cell--span-<NUMBER_OF_COLUMNS>`\n\nYou can set the cells span by applying one of the span classes, of the form `mdc-layout-grid__cell--span-{columns}`, where `{columns}` is an integer between 1 and 12. If the chosen span size is larger than the available number of columns at the current screen size, the cell behaves as if its chosen span size were equal to the available number of columns at that screen size. If the span classes are not set, `mdc-layout-grid__cell` will fallback to a default span size of 4 columns.\n\n\n#### `mdc-layout-grid__cell--span-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE>`\n\nThe same as `mdc-layout-grid__cell--span-<NUMBER_OF_COLUMNS>` but for a specific type of device(`desktop`, `tablet` or `phone`).\n\n\n#### `mdc-layout-grid__cell--order-<INDEX>`\n\nBy default, items are positioned in the source order. However, you can reorder them by using the\n`mdc-layout-grid__cell--order-<INDEX>` classes, where `<INDEX>` is an integer between 1 and 12.\nPlease bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow\nsource order.\n\n#### `mdc-layout-grid__cell--align-<POSITION>`\n\nItems are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different\nbehavior by using one of the `mdc-layout-grid__cell--align-<POSITION>` alignment classes, where `<POSITION>` is one of\n`top`, `middle` or `bottom`.\n\n\n#### `mdc-layout-grid--fixed-column-width`\n\nYou can designate each column to have a certain width by using `mdc-layout-grid--fixed-column-width` modifier. The column width can be specified through sass map `$mdc-layout-grid-column-width` or css custom properties `--mdc-layout-grid-column-width-{screen_size}`. The column width is set to 72px on all devices by default.\n\n\n#### `mdc-layout-grid--align-<GRID_POSITION>`\n\nThe grid is by default center aligned. You can add `mdc-layout-grid--align-left`\nor `mdc-layout-grid--align-right` modifier class to change this behavior. Note, these\nmodifiers will have no effect when the grid already fills its container.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-layout-grid($size, $margin, $max-width)` | Generates CSS for a grid container on certain device type\n`mdc-layout-grid-inner($size, $margin, $gutter)` | Generates CSS for a grid cell wrapper on certain device type\n`mdc-layout-grid-cell($size, $default-span, $gutter)` | Generates CSS for a grid cell on certain device type\n`mdc-layout-grid-fixed-column-width($size, $margin, $gutter, $column-width)` | Generates CSS for a fixed column width container on certain device type\n`mdc-layout-grid-cell-order($order)` | Reorders a cell inside a grid\n`mdc-layout-grid-cell-align($position)` | Aligns a cell vertically inside a grid\n\n\n#### `mdc-layout-grid($size, $margin, $max-width)`\n\nGenerates CSS for a grid container on certain device type. The mixin takes three parameters:\n\n- `$size`: the target platform: `desktop`, `tablet` or `phone`.\n- `$margin`: the size of the grid margin.\n- `$max-width` (optional): the maximum width of the grid, at which point space stops being distributed by the columns.\n\n#### `mdc-layout-grid-inner($size, $margin, $gutter)`\n\nGenerates CSS for a grid cell wrapper on certain device type. The mixin takes three parameters:\n- `$size`: the target platform: `desktop`, `tablet` or `phone`.\n- `$margin`: the size of the grid margin.\n- `$gutter`: the size of the gutter between cells.\n\n#### `mdc-layout-grid-cell($size, $default-span, $gutter)`\n\nGenerates CSS for a grid cell on certain device type. The mixin takes three parameters:\n- `$size`: the target platform: `desktop`, `tablet` or `phone`.\n- `$default-span` (optional, default 4): how many columns this cell should span (1 to 12).\n- `$gutter`: the size of the gutter between cells. Be sure to use the same value as for the parent grid.\n\n> Note even though size is passed in as one of the arguments, it won't apply any `media-query` rules. It is set for using the correct CSS custom properties to overriden the margin and gutter at runtime (See [Margins and gutters](#margins-and-gutters) section for detail).\n\n#### `mdc-layout-grid-fixed-column-width($size, $margin, $gutter, $column-width)`\n\nGenerates CSS for a fixed column width container on certain device type. The mixin takes four parameters:\n- `$size`: the target platform: `desktop`, `tablet` or `phone`.\n- `$margin`: the size of the grid margin.\n- `$gutter`: the size of the gutter between cells.\n- `$column-width`: the width of the column within the grid.\n\n### Sass Variables\n\nVariables | Description\n--- | ---\n`mdc-layout-grid-breakpoints` | A SASS Map specifies the breakpoints width\n`mdc-layout-grid-columns` | A SASS Map specifies the number of columns\n`mdc-layout-grid-default-margin` | A SASS Map specifies the space between the edge of the grid and the edge of the first cell\n`mdc-layout-grid-default-gutter` | A SASS Map specifies the space between edges of adjacent cells\n`mdc-layout-grid-column-width` | A SASS Map specifies the column width of grid columns\n`mdc-layout-grid-default-column-span` | Specifies a cell's default span\n`mdc-layout-grid-max-width` | Restricts max width of the layout grid\n\n\n### CSS Custom Properties\n\nCSS Custom Properties | Description\n--- | ---\n`mdc-layout-grid-margin-<TYPE_OF_DEVICE>` | Specifies the space between the edge of the grid and the edge of the first cell\n`mdc-layout-grid-gutter-<TYPE_OF_DEVICE>` | Specifies the space between edges of adjacent cells\n"
  },
  {
    "path": "packages/mdc-layout-grid/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-layout-grid/_mixins.import.scss",
    "content": "@forward \"./index\" as mdc-layout-grid-* hide mdc-layout-grid-layout-grid;\n@forward \"./index\" as mdc-* show mdc-layout-grid;\n"
  },
  {
    "path": "packages/mdc-layout-grid/_mixins.scss",
    "content": "// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use './variables';\n\n// returns the lower grid boundary or null if the smallest grid is selected\n@function breakpoint-min($size) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n  $min: map.get(variables.$breakpoints, $size);\n\n  @return if($min > 0, $min, null);\n}\n\n// returns the upper grid boundary or null if the largest grid is selected\n@function breakpoint-max($size) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n  $names: map.keys(variables.$columns);\n  $n: list.index($names, $size);\n  $prev: if($n > 1, list.nth($names, $n - 1), null);\n\n  @return if($prev, (breakpoint-min($prev) - 1px), null);\n}\n\n// Private mixins, meant for internal use.\n@mixin media-query_($size) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  $min: breakpoint-min($size);\n  $max: breakpoint-max($size);\n\n  @if $min == null and $max != null {\n    // Phone\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else if $min != null and $max != null {\n    // Tablet\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $min != null and $max == null {\n    // Desktop\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    // Fallback - no breakpoints defined\n    @content;\n  }\n}\n\n@mixin cell-span_($size, $span, $gutter) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  $percent: math.percentage(\n    math.div($span, map.get(variables.$columns, $size))\n  );\n\n  @if $percent > 100% {\n    $percent: 100%;\n  }\n\n  width: calc(#{$percent} - #{$gutter});\n  width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));\n\n  @supports (display: grid) {\n    width: auto;\n    grid-column-end: span math.min($span, map.get(variables.$columns, $size));\n  }\n}\n\n// Public mixins, meant for developer usage.\n@mixin layout-grid($size, $margin, $max-width: null) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  box-sizing: border-box;\n  margin: 0 auto;\n  padding: $margin;\n  padding: var(--mdc-layout-grid-margin-#{$size}, #{$margin});\n\n  @if $max-width {\n    max-width: $max-width;\n  }\n}\n\n@mixin inner($size, $margin, $gutter) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  display: flex;\n  flex-flow: row wrap;\n  align-items: stretch;\n  margin: math.div(-$gutter, 2);\n  margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2 * -1);\n\n  @supports (display: grid) {\n    display: grid;\n    margin: 0;\n    grid-gap: $gutter;\n    grid-gap: var(--mdc-layout-grid-gutter-#{$size}, $gutter);\n    grid-template-columns: repeat(\n      map.get(variables.$columns, $size),\n      minmax(0, 1fr)\n    );\n  }\n}\n\n@mixin cell($size, $default-span, $gutter) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  @include cell-span_($size, $default-span, $gutter);\n\n  box-sizing: border-box;\n  margin: math.div($gutter, 2);\n  margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);\n\n  @supports (display: grid) {\n    margin: 0;\n  }\n}\n\n@mixin cell-order($order) {\n  order: $order;\n}\n\n@mixin cell-align($position) {\n  @if $position == 'top' {\n    align-self: flex-start;\n\n    @supports (display: grid) {\n      align-self: start;\n    }\n  }\n\n  @if $position == 'middle' {\n    align-self: center;\n  }\n\n  @if $position == 'bottom' {\n    align-self: flex-end;\n\n    @supports (display: grid) {\n      align-self: end;\n    }\n  }\n\n  @if $position == 'stretch' {\n    align-self: stretch;\n  }\n}\n\n@mixin fixed-column-width($size, $margin, $gutter, $column-width) {\n  @if not map.has-key(variables.$columns, $size) {\n    @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n  }\n\n  $columnCount: map.get(variables.$columns, $size);\n  $gutter-number: $columnCount - 1;\n  $margin-number: 2;\n\n  width: $column-width * $columnCount + $gutter * $gutter-number + $margin *\n    $margin-number;\n  width: calc(\n    var(--mdc-layout-grid-column-width-#{$size}, #{$column-width}) * #{$columnCount} +\n      var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) * #{$gutter-number} +\n      var(--mdc-layout-grid-margin-#{$size}, #{$margin}) * #{$margin-number}\n  );\n}\n"
  },
  {
    "path": "packages/mdc-layout-grid/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-layout-grid-* hide mdc-layout-grid-media-query-, mdc-layout-grid-cell-span-, mdc-layout-grid-layout-grid, mdc-layout-grid-inner, mdc-layout-grid-cell, mdc-layout-grid-cell-order, mdc-layout-grid-cell-align, mdc-layout-grid-fixed-column-width, mdc-layout-grid-breakpoint-min, mdc-layout-grid-breakpoint-max;\n"
  },
  {
    "path": "packages/mdc-layout-grid/_variables.scss",
    "content": "// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n$breakpoints: (\n  desktop: 840px,\n  tablet: 600px,\n  phone: 0px,\n) !default;\n\n$columns: (\n  desktop: 12,\n  tablet: 8,\n  phone: 4,\n) !default;\n\n$default-margin: (\n  desktop: 24px,\n  tablet: 16px,\n  phone: 16px,\n) !default;\n\n$default-gutter: (\n  desktop: 24px,\n  tablet: 16px,\n  phone: 16px,\n) !default;\n\n$column-width: (\n  desktop: 72px,\n  tablet: 72px,\n  phone: 72px,\n) !default;\n\n$default-column-span: 4 !default;\n\n$max-width: null !default;\n"
  },
  {
    "path": "packages/mdc-layout-grid/mdc-layout-grid.import.scss",
    "content": "@forward \"variables\" as mdc-layout-grid-*;\n@forward \"mixins\" as mdc-* hide mdc-breakpoint-max, mdc-breakpoint-min, mdc-cell, mdc-cell-align, mdc-cell-order, mdc-cell-span-, mdc-fixed-column-width, mdc-inner, mdc-media-query-;\n@forward \"mixins\" as mdc-layout-grid-* hide mdc-layout-grid-layout-grid;\n@forward \"mdc-layout-grid\";\n"
  },
  {
    "path": "packages/mdc-layout-grid/mdc-layout-grid.scss",
    "content": "// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:map';\n@use './variables';\n@use './mixins';\n\n:root {\n  @each $size in map.keys(variables.$columns) {\n    --mdc-layout-grid-margin-#{$size}: #{map.get(\n        variables.$default-margin,\n        $size\n      )};\n    --mdc-layout-grid-gutter-#{$size}: #{map.get(\n        variables.$default-gutter,\n        $size\n      )};\n    --mdc-layout-grid-column-width-#{$size}: #{map.get(\n        variables.$column-width,\n        $size\n      )};\n  }\n}\n\n// postcss-bem-linter: define layout-grid\n.mdc-layout-grid {\n  @each $size in map.keys(variables.$columns) {\n    @include mixins.media-query_($size) {\n      $margin: map.get(variables.$default-margin, $size);\n\n      @include mixins.layout-grid($size, $margin, variables.$max-width);\n    }\n  }\n}\n\n.mdc-layout-grid__inner {\n  @each $size in map.keys(variables.$columns) {\n    @include mixins.media-query_($size) {\n      $margin: map.get(variables.$default-margin, $size);\n      $gutter: map.get(variables.$default-gutter, $size);\n\n      @include mixins.inner($size, $margin, $gutter);\n    }\n  }\n}\n\n.mdc-layout-grid__cell {\n  // select the upper breakpoint\n  $upper-breakpoint: list.nth(map.keys(variables.$columns), 1);\n\n  @each $size in map.keys(variables.$columns) {\n    @include mixins.media-query_($size) {\n      $gutter: map.get(variables.$default-gutter, $size);\n\n      @include mixins.cell($size, variables.$default-column-span, $gutter);\n\n      @for $span from 1 through map.get(variables.$columns, $upper-breakpoint) {\n        // Span classes.\n        @at-root .mdc-layout-grid__cell--span-#{$span},\n          .mdc-layout-grid__cell--span-#{$span}-#{$size} {\n          @include mixins.cell-span_($size, $span, $gutter);\n        }\n      }\n    }\n  }\n\n  // Order override classes.\n  @for $i from 1 through map.get(variables.$columns, $upper-breakpoint) {\n    &--order-#{$i} {\n      @include mixins.cell-order($i);\n    }\n  }\n\n  // Alignment classes.\n  &--align-top {\n    @include mixins.cell-align(top);\n  }\n\n  &--align-middle {\n    @include mixins.cell-align(middle);\n  }\n\n  &--align-bottom {\n    @include mixins.cell-align(bottom);\n  }\n}\n\n.mdc-layout-grid--fixed-column-width {\n  @each $size in map.keys(variables.$columns) {\n    @include mixins.media-query_($size) {\n      $margin: map.get(variables.$default-margin, $size);\n      $gutter: map.get(variables.$default-gutter, $size);\n      $column-width: map.get(variables.$column-width, $size);\n\n      @include mixins.fixed-column-width(\n        $size,\n        $margin,\n        $gutter,\n        $column-width\n      );\n    }\n  }\n}\n\n.mdc-layout-grid--align-left {\n  margin-right: auto;\n  margin-left: 0;\n}\n\n.mdc-layout-grid--align-right {\n  margin-right: 0;\n  margin-left: auto;\n}\n// postcss-bem-linter: end\n"
  },
  {
    "path": "packages/mdc-layout-grid/package.json",
    "content": "{\n  \"name\": \"@material/layout-grid\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web layout grid component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"grid\",\n    \"layout\"\n  ],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-layout-grid\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-line-ripple/README.md",
    "content": "<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\n"
  },
  {
    "path": "packages/mdc-line-ripple/_functions.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-line-ripple-* hide mdc-line-ripple-core-styles, mdc-line-ripple-color;\n"
  },
  {
    "path": "packages/mdc-line-ripple/_functions.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/animation/variables';\n\n@function transition-value($property) {\n  @return #{$property} 180ms variables.$standard-curve-timing-function;\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/_index.scss",
    "content": "@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-line-ripple/_line-ripple-theme.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define line-ripple\n  .mdc-line-ripple {\n    @include feature-targeting.targets($feat-structure) {\n      @include height(1px);\n      @include active-height(2px);\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      &::after {\n        transition: functions.transition-value(transform),\n          functions.transition-value(opacity);\n      }\n    }\n  }\n}\n\n@mixin height($height) {\n  &::before {\n    @include theme.property(border-bottom-width, $height);\n  }\n}\n\n@mixin active-height($height) {\n  &::after {\n    @include theme.property(border-bottom-width, $height);\n  }\n}\n\n@mixin active-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    &::after {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin inactive-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    &::before {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/_line-ripple.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use './functions';\n@use './line-ripple-theme';\n\n// Public\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include line-ripple-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define line-ripple\n  .mdc-line-ripple {\n    @include feature-targeting.targets($feat-structure) {\n      &::before,\n      &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        border-bottom-style: solid;\n        content: '';\n      }\n\n      &::before {\n        z-index: 1;\n      }\n\n      &::after {\n        transform: scaleX(0);\n        opacity: 0;\n        z-index: 2;\n      }\n    }\n  }\n\n  .mdc-line-ripple--active::after {\n    @include feature-targeting.targets($feat-structure) {\n      transform: scaleX(1);\n      opacity: 1;\n    }\n  }\n\n  .mdc-line-ripple--deactivating::after {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-line-ripple-*;\n"
  },
  {
    "path": "packages/mdc-line-ripple/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_line-ripple.scss` or `_line-ripple-theme.scss` instead.\n@forward './line-ripple' show core-styles;\n@forward './line-ripple-theme' show height, active-height, active-color,\n  inactive-color;\n"
  },
  {
    "path": "packages/mdc-line-ripple/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCLineRippleAdapter {\n  /**\n   * Adds a class to the line ripple element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the line ripple element.\n   */\n  removeClass(className: string): void;\n\n  hasClass(className: string): boolean;\n\n  /**\n   * Sets the style property with propertyName to value on the root element.\n   */\n  setStyle(propertyName: string, value: string): void;\n\n  /**\n   * Registers an event listener on the line ripple element for a given event.\n   */\n  registerEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the line ripple element for a given event.\n   */\n  deregisterEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCLineRippleAdapter} from './adapter';\nimport {MDCLineRippleFoundation} from './foundation';\n\n/** MDC Line Ripple Factory */\nexport type MDCLineRippleFactory =\n    (el: HTMLElement, foundation?: MDCLineRippleFoundation) => MDCLineRipple;\n\n/** MDC Line Ripple */\nexport class MDCLineRipple extends MDCComponent<MDCLineRippleFoundation> {\n  static override attachTo(root: HTMLElement): MDCLineRipple {\n    return new MDCLineRipple(root);\n  }\n\n  /**\n   * Activates the line ripple\n   */\n  activate() {\n    this.foundation.activate();\n  }\n\n  /**\n   * Deactivates the line ripple\n   */\n  deactivate() {\n    this.foundation.deactivate();\n  }\n\n  /**\n   * Sets the transform origin given a user's click location.\n   * The `rippleCenter` is the x-coordinate of the middle of the ripple.\n   */\n  setRippleCenter(xCoordinate: number) {\n    this.foundation.setRippleCenter(xCoordinate);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCLineRippleAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      setStyle: (propertyName, value) => {\n        this.root.style.setProperty(propertyName, value);\n      },\n      registerEventHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterEventHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCLineRippleFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  LINE_RIPPLE_ACTIVE: 'mdc-line-ripple--active',\n  LINE_RIPPLE_DEACTIVATING: 'mdc-line-ripple--deactivating',\n};\n\nexport {cssClasses};\n"
  },
  {
    "path": "packages/mdc-line-ripple/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCLineRippleAdapter} from './adapter';\nimport {cssClasses} from './constants';\n\n/** MDC Line Ripple Foundation */\nexport class MDCLineRippleFoundation extends\n    MDCFoundation<MDCLineRippleAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  /**\n   * See {@link MDCLineRippleAdapter} for typing information on parameters and\n   * return types.\n   */\n  static override get defaultAdapter(): MDCLineRippleAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      setStyle: () => undefined,\n      registerEventHandler: () => undefined,\n      deregisterEventHandler: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private readonly transitionEndHandler: SpecificEventListener<'transitionend'>;\n\n  constructor(adapter?: Partial<MDCLineRippleAdapter>) {\n    super({...MDCLineRippleFoundation.defaultAdapter, ...adapter});\n\n    this.transitionEndHandler = (event) => {\n      this.handleTransitionEnd(event);\n    };\n  }\n\n  override init() {\n    this.adapter.registerEventHandler(\n        'transitionend', this.transitionEndHandler);\n  }\n\n  override destroy() {\n    this.adapter.deregisterEventHandler(\n        'transitionend', this.transitionEndHandler);\n  }\n\n  activate() {\n    this.adapter.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);\n    this.adapter.addClass(cssClasses.LINE_RIPPLE_ACTIVE);\n  }\n\n  setRippleCenter(xCoordinate: number) {\n    this.adapter.setStyle('transform-origin', `${xCoordinate}px center`);\n  }\n\n  deactivate() {\n    this.adapter.addClass(cssClasses.LINE_RIPPLE_DEACTIVATING);\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    // Wait for the line ripple to be either transparent or opaque\n    // before emitting the animation end event\n    const isDeactivating =\n        this.adapter.hasClass(cssClasses.LINE_RIPPLE_DEACTIVATING);\n\n    if (event.propertyName === 'opacity') {\n      if (isDeactivating) {\n        this.adapter.removeClass(cssClasses.LINE_RIPPLE_ACTIVE);\n        this.adapter.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);\n      }\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCLineRippleFoundation;\n"
  },
  {
    "path": "packages/mdc-line-ripple/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-line-ripple/mdc-line-ripple.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"mixins\" as mdc-line-ripple-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"functions\" as mdc-line-ripple-*;\n@forward \"mdc-line-ripple\";\n"
  },
  {
    "path": "packages/mdc-line-ripple/mdc-line-ripple.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/base/mixins' as base-mixins;\n@use './mixins';\n\n// Line Ripple is intended for use by multiple components, but its styles should only be emitted once when bundled\n@include base-mixins.emit-once('mdc-line-ripple') {\n  @include mixins.core-styles;\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/package.json",
    "content": "{\n  \"name\": \"@material/line-ripple\",\n  \"description\": \"The Material Components for the web line-ripple component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"lineripple\",\n    \"line-ripple\"\n  ],\n  \"main\": \"dist/mdc.lineRipple.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-line-ripple\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-line-ripple/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCLineRipple, MDCLineRippleFoundation} from '../../mdc-line-ripple/index';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\n\nconst getFixture = () => {\n  return createFixture(html`\n    <span class=\"mdc-line-ripple\"></span>\n  `);\n};\n\ndescribe('MDCLineRipple', () => {\n  it('attachTo returns an MDCLineRipple instance', () => {\n    expect(MDCLineRipple.attachTo(getFixture()) instanceof MDCLineRipple)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCLineRipple(root);\n    return {root, component};\n  }\n\n  it('#adapter.addClass adds a class to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the element', () => {\n    const {root, component} = setupTest();\n\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n  it('#adapter.hasClass returns true if a class is on the element', () => {\n    const {root, component} = setupTest();\n\n    root.classList.add('foo');\n    const hasClass =\n        (component.getDefaultFoundation() as any).adapter.hasClass('foo');\n    expect(hasClass).toBe(true);\n  });\n\n  it('#adapter.setStyle adds a given style property to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.setStyle('color', 'blue');\n    expect(root.getAttribute('style')).toEqual('color: blue;');\n  });\n\n  it('#adapter.registerEventHandler adds event listener for a given event to the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('transitionend handler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerEventHandler('transitionend', handler);\n       emitEvent(root, 'transitionend');\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.deregisterEventHandler removes event listener for a given event from the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('transitionend handler');\n\n       root.addEventListener('transitionend', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterEventHandler('transitionend', handler);\n       emitEvent(root, 'transitionend');\n\n       expect(handler).not.toHaveBeenCalled();\n     });\n\n  function setupMockFoundationTest(root = getFixture()) {\n    const mockFoundation = createMockFoundation(MDCLineRippleFoundation);\n    const component = new MDCLineRipple(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  it('activate', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.activate();\n    expect(mockFoundation.activate).toHaveBeenCalledTimes(1);\n  });\n\n  it('deactivate', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.deactivate();\n    expect(mockFoundation.deactivate).toHaveBeenCalledTimes(1);\n  });\n\n  it('setRippleCenter', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.setRippleCenter(100);\n    expect(mockFoundation.setRippleCenter).toHaveBeenCalledWith(100);\n    expect(mockFoundation.setRippleCenter).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-line-ripple/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as line-ripple;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include line-ripple.core-styles($query: $query);\n    @include line-ripple.active-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-line-ripple/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCLineRippleFoundation} from '../../mdc-line-ripple/foundation';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {cssClasses} = MDCLineRippleFoundation;\n\ndescribe('MDCLineRippleFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCLineRippleFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCLineRippleFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCLineRippleFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'setStyle',\n      'registerEventHandler',\n      'deregisterEventHandler',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCLineRippleFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#init adds event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n\n    expect(mockAdapter.registerEventHandler)\n        .toHaveBeenCalledWith('transitionend', jasmine.any(Function));\n  });\n\n  it('#destroy removes event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('transitionend', jasmine.any(Function));\n  });\n\n  it(`activate adds ${cssClasses.LINE_RIPPLE_ACTIVE} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.activate();\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_ACTIVE);\n  });\n\n  it(`deactivate adds ${cssClasses.LINE_RIPPLE_DEACTIVATING} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.init();\n    foundation.deactivate();\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_DEACTIVATING);\n  });\n\n  it('opacity event after adding deactivating class triggers triggers removal of activation classes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.LINE_RIPPLE_DEACTIVATING)\n           .and.returnValue(true);\n       const event = {\n         propertyName: 'opacity',\n       } as TransitionEvent;\n\n       foundation.init();\n       foundation.handleTransitionEnd(event);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_DEACTIVATING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_ACTIVE);\n     });\n\n  it(`non opacity transition event doesn't remove ${\n         cssClasses.LINE_RIPPLE_DEACTIVATING} class`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.LINE_RIPPLE_DEACTIVATING)\n           .and.returnValue(true);\n       const event = {\n         propertyName: 'not-opacity',\n       } as TransitionEvent;\n       foundation.init();\n\n       foundation.handleTransitionEnd(event);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_DEACTIVATING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_ACTIVE);\n     });\n\n  it(`opacity transition event doesn't remove ${\n         cssClasses.LINE_RIPPLE_DEACTIVATING} class if not deactivating`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.LINE_RIPPLE_DEACTIVATING)\n           .and.returnValue(false);\n       const event = {\n         propertyName: 'opacity',\n       } as TransitionEvent;\n       foundation.init();\n       foundation.handleTransitionEnd(event);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_DEACTIVATING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.LINE_RIPPLE_ACTIVE);\n     });\n\n  it('setRippleCenter sets style attribute', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const transformOriginValue = 100;\n\n    foundation.init();\n    foundation.setRippleCenter(transformOriginValue);\n\n    expect(mockAdapter.setStyle)\n        .toHaveBeenCalledWith('transform-origin', jasmine.any(String));\n  });\n});\n"
  },
  {
    "path": "packages/mdc-line-ripple/test/mdc-line-ripple.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-line-ripple.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-linear-progress/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-linear-progress/README.md",
    "content": "<!--docs:\ntitle: \"Linear Progress\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design-styled linear progress indicators.\"\niconId: progress_linear\npath: /catalog/linear-progress/\n-->\n\n# Linear Progress\n\nThe MDC Linear Progress component is a spec-aligned linear progress indicator component adhering to the\n[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-progress-indicators\">Guidelines</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/linear-progress-indicator\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/linear-progress\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div role=\"progressbar\" class=\"mdc-linear-progress\" aria-label=\"Example Progress Bar\" aria-valuemin=\"0\" aria-valuemax=\"1\" aria-valuenow=\"0\">\n  <div class=\"mdc-linear-progress__buffer\">\n    <div class=\"mdc-linear-progress__buffer-bar\"></div>\n    <div class=\"mdc-linear-progress__buffer-dots\"></div>\n  </div>\n  <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n    <span class=\"mdc-linear-progress__bar-inner\"></span>\n  </div>\n  <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n    <span class=\"mdc-linear-progress__bar-inner\"></span>\n  </div>\n</div>\n```\n\n### Accessibility\n\nProgress bars conform to the [WAI-ARIA Progressbar Specification](https://www.w3.org/TR/wai-aria/#progressbar). The supported ARIA attributes for this progress bar are:\n\n| Attribute | Description |\n| --------- | ----------- |\n| `aria-label` | Label indicating how the progress bar should be announced to the user. |\n| `aria-valuemin` | The minimum numeric value of the progress bar, which should always be `0`. |\n| `aria-valuemax` | The maximum numeric value of the progress bar, which should always be `1`. |\n| `aria-valuenow` | A numeric value between `aria-valuemin` and `aria-valuemax` indicating the progress value of the primary progress bar. This attribute is removed in indeterminate progress bars. |\n\nNote that `aria-label`, `aria-valuemin`, and `aria-valuemax` are static and must be configured in the HTML. `aria-valuenow` is updated dynamically by the foundation when the progress value is updated in determinate progress bars.\n\n### RTL Localization\n\nThe direction of the progress bar follows the `dir` attribute on its nearest ancestor. For example, setting `dir=\"rtl\"` on the progress root reverses the direction of the indicator.\nWhere multiple `dir` attributes are specified in the tree, the one on the progress bar root takes precedence.\n\n### Styles\n```scss\n@use \"@material/linear-progress\";\n\n@include linear-progress.core-styles;\n```\n\n### JavaScript Instantiation\n\n```js\nimport { MDCLinearProgress } from '@material/linear-progress';\n\nconst linearProgress = new MDCLinearProgress(document.querySelector('.mdc-linear-progress'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n### CSS Modifiers\n\nThe provided modifiers are:\n\n| Class                 | Description                                             |\n| --------------------- | ------------------------------------------------------- |\n| `mdc-linear-progress--indeterminate`   | Puts the linear progress indicator in an indeterminate state. |\n| `mdc-linear-progress--closed`  | Hides the linear progress indicator. |\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`bar-color($color)` | Sets the color of the progress bar\n`buffer-color($color)` | Sets the color of the buffer bar and dots\n\n### Using the Foundation Class\n\nMDC Linear Progress ships with an `MDCLinearProgressFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for linear progress must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeAttribute(attributeName: string) => void` | Removes the specified attribute from the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `hasClass(className: string) => boolean` | Returns boolean indicating whether the root element has a given class. |\n| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. |\n| `setAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the root element. |\n| `setBufferBarStyle(styleProperty: string, value: string) => void` | Sets the inline style on the buffer bar. |\n| `setPrimaryBarStyle(styleProperty: string, value: string) => void` | Sets the inline style on the primary bar. |\n| `attachResizeObserver(callback: ResizeObserverCallback) => ResizeObserver \\| null` | Returns a `ResizeObserver` that has had `observe` called on the root with the given callback (for animation performance gains on modern browsers). `null` if `ResizeObserver` is not implemented or polyfilled. |\n| `setStyle(styleProperty: string, value: string) => void` | Sets the inline style on the root element. |\n| `getWidth() => number` | Returns the width of the root. |\n\n### MDCLinearProgressFoundation API\n\nMDC Linear Progress Foundation exposes the following methods:\n\n| Method Signature | Description |\n| --- | --- |\n| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |\n| `isDeterminate() => boolean` | Whether or not the component is in determinate state. |\n| `setProgress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |\n| `getProgress() => number` | The current progress value in the interval [0,1]. |\n| `setBuffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |\n| `getBuffer() => number` | The current buffer value in the interval [0,1]. |\n| `open() => void` | Puts the component in the open state. |\n| `close() => void` | Puts the component in the closed state. |\n| `isClosed() => boolean` | Whether or not the progress indicator is closed. |\n### MDCLinearProgress API\n\nMDC Linear Progress exposes the following methods:\n\n| Method Signature | Description |\n| --- | --- |\n| `set determinate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |\n| `set progress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |\n| `set buffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |\n| `open() => void` | Puts the component in the open state. |\n| `close() => void` | Puts the component in the closed state. |\n"
  },
  {
    "path": "packages/mdc-linear-progress/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./keyframes\";\n"
  },
  {
    "path": "packages/mdc-linear-progress/_keyframes.import.scss",
    "content": "@forward \"./index\" as mdc-linear-progress-* hide $mdc-linear-progress-baseline-buffer-color, $mdc-linear-progress-height, mdc-linear-progress-core-styles, mdc-linear-progress-bar-color, mdc-linear-progress-buffer-color, mdc-linear-progress-indeterminate-, mdc-linear-progress-reversed-, mdc-linear-progress-str-replace-;\n"
  },
  {
    "path": "packages/mdc-linear-progress/_keyframes.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './linear-progress' module instead.\n@forward './linear-progress' show exit;\n"
  },
  {
    "path": "packages/mdc-linear-progress/_linear-progress-theme.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:string';\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/keys';\n\n$baseline-buffer-color: #e6e6e6 !default;\n$height: 4px;\n\n$custom-property-prefix: 'linear-progress';\n\n// TODO(b/254889918): Support all linear progress tokens.\n$light-theme: (\n  active-indicator-color: theme-color.$primary,\n  active-indicator-height: 4px,\n  track-color: $baseline-buffer-color,\n  track-height: 4px,\n  track-shape: 0px,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include buffering-keyframes(map.get($theme, track-height), $query);\n  @include bar-color(map.get($theme, active-indicator-color), $query);\n  @include buffer-color(map.get($theme, track-color), $query);\n\n  .mdc-linear-progress {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        height,\n        'max(track-height, bar-height)',\n        $replace: (\n          track-height: map.get($theme, track-height),\n          bar-height: map.get($theme, active-indicator-height)\n        )\n      );\n\n      @include dom.ie11-support() {\n        $track-height: map.get($theme, track-height);\n        $track-height: if(\n          custom-properties.is-custom-prop($track-height),\n          custom-properties.get-fallback($track-height),\n          $track-height\n        );\n\n        $bar-height: map.get($theme, active-indicator-height);\n        $bar-height: if(\n          custom-properties.is-custom-prop($bar-height),\n          custom-properties.get-fallback($bar-height),\n          $bar-height\n        );\n\n        @if ($track-height != null) and\n          ($bar-height != null) and\n          (not custom-properties.is-custom-prop-string($track-height)) and\n          (not custom-properties.is-custom-prop-string($bar-height))\n        {\n          @include theme.property(height, math.max($track-height, $bar-height));\n        }\n      }\n    }\n  }\n\n  @include _bar-height(map.get($theme, active-indicator-height), $query);\n  @include _track-height(map.get($theme, track-height), $query);\n  @include _track-shape(map.get($theme, track-shape), $query);\n\n  // TODO(b/155129310): Add styles for 4-color linear progress once this variant\n  // is supported.\n}\n\n@mixin bar-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-linear-progress__bar-inner {\n    @include feature-targeting.targets($feat-color) {\n      // Border is used rather than background-color to ensure that the\n      // bar is visible in Windows High Contrast Mode.\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin buffer-color($color, $query: feature-targeting.all()) {\n  // We need to escape the '#' character as \"%23\" for SVG because '#' is a reserved character in URIs.\n  $concrete-color: $color;\n  @if custom-properties.is-custom-prop($color) {\n    $concrete-color: custom-properties.get-fallback($color);\n  }\n  $concrete-color-for-svg: str-replace_(\n    string.unquote('#{$concrete-color}'),\n    '#',\n    '%23'\n  );\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-linear-progress__buffer-dots {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n\n      @media (forced-colors: active) {\n        background-color: ButtonBorder;\n      }\n\n      @include dom.ie11-support() {\n        background-color: transparent;\n        // stylelint-disable function-url-quotes -- SVG data URI\n        // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)\n        @include theme.property(\n          background-image,\n          url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='concrete-color-for-svg'/%3E%3C/svg%3E\"),\n          $replace: (concrete-color-for-svg: $concrete-color-for-svg)\n        );\n        // stylelint-enable function-url-quotes\n      }\n    }\n  }\n\n  .mdc-linear-progress__buffer-bar {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n/// @deprecated Use Theming API instead.\n@mixin bar-and-track-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-linear-progress {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $height);\n    }\n  }\n\n  @include _bar-height($height, $query);\n  @include _track-height($height, $query);\n}\n\n@mixin buffering-keyframes($track-height, $query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    @keyframes mdc-linear-progress-buffering {\n      from {\n        // Normally the buffer dots start from the left and overflow to the right.\n        // We rotate by 180deg so that the buffer dots start on the right when\n        // in non-reversed mode and overflow to the left.\n        @include rtl.ignore-next-line();\n        @include theme.property(\n          transform,\n          'rotate(180deg) translateX(calc(track-height * -2.5))',\n          $replace: (track-height: $track-height)\n        );\n      }\n    }\n  }\n}\n\n// Based on https://css-tricks.com/snippets/sass/str-replace-function/\n@function str-replace_($string, $search, $replace) {\n  $index: string.index($string, $search);\n\n  @if $index {\n    $head: string.slice($string, 1, $index - 1);\n    $tail: str-replace_(\n      string.slice($string, $index + string.length($search)),\n      $search,\n      $replace\n    );\n\n    @return $head + $replace + $tail;\n  }\n\n  @return $string;\n}\n\n@mixin _bar-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-linear-progress__bar {\n      @include theme.property(height, $height);\n    }\n\n    .mdc-linear-progress__bar-inner {\n      @include theme.property(border-top-width, $height);\n    }\n  }\n}\n\n@mixin _track-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-linear-progress__buffer {\n      @include theme.property(height, $height);\n    }\n\n    .mdc-linear-progress__buffer-dots {\n      @include dom.ie11-support() {\n        @include theme.property(\n          background-size,\n          10px height,\n          $replace: (height: $height)\n        );\n      }\n    }\n  }\n}\n\n@mixin _track-shape($shape, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-linear-progress__buffer {\n      @include theme.property(border-radius, $shape);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-linear-progress/_linear-progress.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use './linear-progress-theme';\n\n/// @deprecated Use static-styles() and theme-styles() instead.\n@mixin core-styles($query: feature-targeting.all()) {\n  @include linear-progress-theme.bar-color(primary, $query: $query);\n  @include linear-progress-theme.buffer-color(\n    linear-progress-theme.$baseline-buffer-color,\n    $query: $query\n  );\n  @include linear-progress-theme.bar-and-track-height(\n    linear-progress-theme.$height,\n    $query: $query\n  );\n  @include linear-progress-theme.buffering-keyframes(\n    linear-progress-theme.$height,\n    $query: $query\n  );\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    @include primary-indeterminate-translate-keyframes_;\n    @include primary-indeterminate-scale-keyframes_;\n    @include secondary-indeterminate-translate-keyframes_;\n    @include secondary-indeterminate-scale-keyframes_;\n    @include primary-indeterminate-translate-reverse-keyframes_;\n    @include secondary-indeterminate-translate-reverse-keyframes_;\n    @include buffering-reverse-keyframes_;\n  }\n\n  .mdc-linear-progress {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      width: 100%;\n      transform: translateZ(0);\n      // Create a border around the bar in Windows High Contrast Mode.\n      outline: 1px solid transparent;\n      overflow-x: hidden;\n\n      @include dom.forced-colors-mode($exclude-ie11: true) {\n        outline-color: CanvasText;\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation-functions.exit-temporary(opacity, 250ms);\n    }\n\n    &__bar {\n      @include feature-targeting.targets($feat-structure) {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        margin: auto 0; // Vertically center\n        width: 100%;\n        animation: none;\n        transform-origin: top left;\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation-functions.exit-temporary(transform, 250ms);\n      }\n    }\n\n    &__bar-inner {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        position: absolute;\n        width: 100%;\n        animation: none;\n        // border-top is used rather than background-color to ensure that the\n        // bar is visible in Windows High Contrast Mode.\n        border-top-style: solid;\n      }\n    }\n\n    &__buffer {\n      @include feature-targeting.targets($feat-structure) {\n        display: flex;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        margin: auto 0; // Vertically center\n        width: 100%;\n        overflow: hidden;\n      }\n    }\n\n    &__buffer-dots {\n      @include feature-targeting.targets($feat-structure) {\n        background-repeat: repeat-x;\n        flex: auto;\n        @include rtl.ignore-next-line();\n        transform: rotate(180deg);\n\n        // Use SVG mask for non-IE11 browsers\n        // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)\n        $svg: \"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\";\n        -webkit-mask-image: url($svg);\n        mask-image: url($svg);\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        // stylelint-disable-next-line no-unknown-animations --\n        // animation is in _linear-progress-theme.scss\n        animation: mdc-linear-progress-buffering 250ms infinite linear;\n      }\n    }\n\n    &__buffer-bar {\n      @include feature-targeting.targets($feat-structure) {\n        flex: 0 1 100%;\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation-functions.exit-temporary(flex-basis, 250ms);\n      }\n    }\n\n    &__primary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scaleX(0);\n      }\n    }\n\n    &__secondary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n\n    @include indeterminate_($query: $query);\n\n    @include rtl.rtl() {\n      // The rtl() mixin does not account for nested `dir` attributes. Set\n      // `dir` attribute on root to take highest priority.\n      &:not([dir='ltr']) {\n        @include _rtl-styles($query: $query);\n      }\n    }\n\n    &--closed {\n      @include feature-targeting.targets($feat-structure) {\n        opacity: 0;\n      }\n    }\n\n    &--closed-animation-off {\n      .mdc-linear-progress__buffer-dots {\n        @include feature-targeting.targets($feat-animation) {\n          animation: none;\n        }\n      }\n\n      &.mdc-linear-progress--indeterminate {\n        .mdc-linear-progress__bar,\n        .mdc-linear-progress__bar .mdc-linear-progress__bar-inner {\n          @include feature-targeting.targets($feat-animation) {\n            animation: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n// Private mixins.\n\n@mixin indeterminate_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  &--indeterminate {\n    .mdc-linear-progress__bar {\n      @include feature-targeting.targets($feat-structure) {\n        transition: none;\n      }\n    }\n\n    .mdc-linear-progress__primary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        left: -145.166611%;\n      }\n    }\n\n    .mdc-linear-progress__secondary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        left: -54.888891%;\n        display: block;\n      }\n    }\n\n    &.mdc-linear-progress--animation-ready {\n      .mdc-linear-progress__primary-bar {\n        @include feature-targeting.targets($feat-animation) {\n          animation: mdc-linear-progress-primary-indeterminate-translate 2s\n            infinite linear;\n        }\n\n        > .mdc-linear-progress__bar-inner {\n          @include feature-targeting.targets($feat-animation) {\n            animation: mdc-linear-progress-primary-indeterminate-scale 2s\n              infinite linear;\n          }\n        }\n      }\n\n      .mdc-linear-progress__secondary-bar {\n        @include feature-targeting.targets($feat-animation) {\n          animation: mdc-linear-progress-secondary-indeterminate-translate 2s\n            infinite linear;\n        }\n\n        > .mdc-linear-progress__bar-inner {\n          @include feature-targeting.targets($feat-animation) {\n            animation: mdc-linear-progress-secondary-indeterminate-scale 2s\n              infinite linear;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin _rtl-styles($query: $query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-linear-progress__bar {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      right: 0;\n      @include rtl.ignore-next-line();\n      -webkit-transform-origin: center right;\n      @include rtl.ignore-next-line();\n      transform-origin: center right;\n    }\n  }\n\n  &.mdc-linear-progress--animation-ready {\n    .mdc-linear-progress__primary-bar {\n      @include feature-targeting.targets($feat-animation) {\n        animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;\n      }\n    }\n\n    .mdc-linear-progress__secondary-bar {\n      @include feature-targeting.targets($feat-animation) {\n        animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;\n      }\n    }\n  }\n\n  .mdc-linear-progress__buffer-dots {\n    @include feature-targeting.targets($feat-animation) {\n      animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      transform: rotate(0);\n    }\n  }\n\n  &.mdc-linear-progress--indeterminate {\n    .mdc-linear-progress__primary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        right: -145.166611%;\n        @include rtl.ignore-next-line();\n        left: auto;\n      }\n    }\n\n    .mdc-linear-progress__secondary-bar {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        right: -54.888891%;\n        @include rtl.ignore-next-line();\n        left: auto;\n      }\n    }\n  }\n}\n\n// Keyframes.\n\n@mixin primary-indeterminate-translate-keyframes_ {\n  @keyframes mdc-linear-progress-primary-indeterminate-translate {\n    0% {\n      transform: translateX(0);\n    }\n\n    20% {\n      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n      transform: translateX(0);\n    }\n\n    59.15% {\n      animation-timing-function: cubic-bezier(\n        0.302435,\n        0.381352,\n        0.55,\n        0.956352\n      );\n\n      $primary-half: custom-properties.create(\n        --mdc-linear-progress-primary-half,\n        83.67142%\n      );\n      @include apply-translate_($primary-half);\n    }\n\n    100% {\n      $primary-full: custom-properties.create(\n        --mdc-linear-progress-primary-full,\n        200.611057%\n      );\n      @include apply-translate_($primary-full);\n    }\n  }\n}\n\n@mixin primary-indeterminate-scale-keyframes_ {\n  @keyframes mdc-linear-progress-primary-indeterminate-scale {\n    0% {\n      transform: scaleX(0.08);\n    }\n\n    36.65% {\n      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);\n      transform: scaleX(0.08);\n    }\n\n    69.15% {\n      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);\n      transform: scaleX(0.661479);\n    }\n\n    100% {\n      transform: scaleX(0.08);\n    }\n  }\n}\n\n@mixin secondary-indeterminate-translate-keyframes_ {\n  @keyframes mdc-linear-progress-secondary-indeterminate-translate {\n    0% {\n      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);\n      transform: translateX(0);\n    }\n\n    25% {\n      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);\n      $secondary-quarter: custom-properties.create(\n        --mdc-linear-progress-secondary-quarter,\n        37.651913%\n      );\n      @include apply-translate_($secondary-quarter);\n    }\n\n    48.35% {\n      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);\n      $secondary-half: custom-properties.create(\n        --mdc-linear-progress-secondary-half,\n        84.386165%\n      );\n      @include apply-translate_($secondary-half);\n    }\n\n    100% {\n      $secondary-full: custom-properties.create(\n        --mdc-linear-progress-secondary-full,\n        160.277782%\n      );\n      @include apply-translate_($secondary-full);\n    }\n  }\n}\n\n@mixin secondary-indeterminate-scale-keyframes_ {\n  @keyframes mdc-linear-progress-secondary-indeterminate-scale {\n    0% {\n      animation-timing-function: cubic-bezier(\n        0.205028,\n        0.057051,\n        0.57661,\n        0.453971\n      );\n      transform: scaleX(0.08);\n    }\n\n    19.15% {\n      animation-timing-function: cubic-bezier(\n        0.152313,\n        0.196432,\n        0.648374,\n        1.004315\n      );\n      transform: scaleX(0.457104);\n    }\n\n    44.15% {\n      animation-timing-function: cubic-bezier(\n        0.257759,\n        -0.003163,\n        0.211762,\n        1.38179\n      );\n      transform: scaleX(0.72796);\n    }\n\n    100% {\n      transform: scaleX(0.08);\n    }\n  }\n}\n\n@mixin primary-indeterminate-translate-reverse-keyframes_ {\n  @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {\n    0% {\n      transform: translateX(0);\n    }\n\n    20% {\n      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n      transform: translateX(0);\n    }\n\n    59.15% {\n      animation-timing-function: cubic-bezier(\n        0.302435,\n        0.381352,\n        0.55,\n        0.956352\n      );\n      $primary-half: custom-properties.create(\n        --mdc-linear-progress-primary-half-neg,\n        -83.67142%\n      );\n      @include apply-translate_($primary-half);\n    }\n\n    100% {\n      $primary-full: custom-properties.create(\n        --mdc-linear-progress-primary-full-neg,\n        -200.611057%\n      );\n      @include apply-translate_($primary-full);\n    }\n  }\n}\n\n@mixin secondary-indeterminate-translate-reverse-keyframes_ {\n  @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {\n    0% {\n      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);\n      transform: translateX(0);\n    }\n\n    25% {\n      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);\n      $secondary-quarter: custom-properties.create(\n        --mdc-linear-progress-secondary-quarter-neg,\n        -37.651913%\n      );\n      @include apply-translate_($secondary-quarter);\n    }\n\n    48.35% {\n      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);\n      $secondary-half: custom-properties.create(\n        --mdc-linear-progress-secondary-half-neg,\n        -84.386165%\n      );\n      @include apply-translate_($secondary-half);\n    }\n\n    100% {\n      $secondary-full: custom-properties.create(\n        --mdc-linear-progress-secondary-full-neg,\n        -160.277782%\n      );\n      @include apply-translate_($secondary-full);\n    }\n  }\n}\n\n@mixin buffering-reverse-keyframes_ {\n  @keyframes mdc-linear-progress-buffering-reverse {\n    from {\n      @include rtl.ignore-next-line();\n      transform: translateX(-10px);\n    }\n  }\n}\n\n@mixin apply-translate_($value) {\n  @include theme.property(\n    transform,\n    translateX(value),\n    $replace: (value: $value),\n    $gss: (noflip: true)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-linear-progress/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-linear-progress-*;\n"
  },
  {
    "path": "packages/mdc-linear-progress/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './linear-progress' or './linear-progress-theme' instead.\n@forward './linear-progress' show core-styles;\n@forward './linear-progress-theme' show bar-color, buffer-color, track-height;\n"
  },
  {
    "path": "packages/mdc-linear-progress/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-linear-progress-* hide mdc-linear-progress-core-styles, mdc-linear-progress-bar-color, mdc-linear-progress-buffer-color, mdc-linear-progress-indeterminate-, mdc-linear-progress-reversed-, mdc-linear-progress-str-replace-, mdc-linear-progress-primary-indeterminate-translate-keyframes-, mdc-linear-progress-primary-indeterminate-scale-keyframes-, mdc-linear-progress-secondary-indeterminate-translate-keyframes-, mdc-linear-progress-secondary-indeterminate-scale-keyframes-, mdc-linear-progress-buffering-keyframes-, mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes-, mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes-, mdc-linear-progress-buffering-reverse-keyframes-;\n"
  },
  {
    "path": "packages/mdc-linear-progress/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './linear-progress-theme' module instead.\n@forward './linear-progress-theme' show $baseline-buffer-color, $height;\n"
  },
  {
    "path": "packages/mdc-linear-progress/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\n\nimport {MDCResizeObserver, MDCResizeObserverCallback} from './types';\n\nexport interface MDCLinearProgressAdapter {\n  addClass(className: string): void;\n  /**\n   * If available, creates a `ResizeObserver` object, invokes the `#observe`\n   * method on the root element. This is used for an optional performance gains\n   * for the indeterminate animation on modern browsers.\n   *\n   * @param callback The callback to apply to the constructor of the\n   *    `ResizeObserver`\n   * @return Returns a `ResizeObserver` that has had `observe` called on the\n   *    root element with the given callback. `null` if `ResizeObserver` is not\n   *    implemented or polyfilled.\n   */\n  attachResizeObserver(callback: MDCResizeObserverCallback): MDCResizeObserver\n      |null;\n  forceLayout(): void;\n  setBufferBarStyle(styleProperty: string, value: string): void;\n  setPrimaryBarStyle(styleProperty: string, value: string): void;\n  /**\n   * Sets the inline style on the root element.\n   * @param styleProperty The style property to set.\n   * @param value The value the style property should be set to.\n   */\n  setStyle(styleProperty: string, value: string): void;\n  /**\n   * @return The width of the root element.\n   */\n  getWidth(): number;\n  hasClass(className: string): boolean;\n  removeClass(className: string): void;\n  removeAttribute(name: string): void;\n  setAttribute(name: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-linear-progress/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCProgressIndicator} from '@material/progress-indicator/component';\n\nimport {MDCLinearProgressAdapter} from './adapter';\nimport {MDCLinearProgressFoundation} from './foundation';\nimport {WithMDCResizeObserver} from './types';\n\n/** MDC Linear Progress */\nexport class MDCLinearProgress extends\n    MDCComponent<MDCLinearProgressFoundation> implements MDCProgressIndicator {\n  static override attachTo(root: HTMLElement) {\n    return new MDCLinearProgress(root);\n  }\n\n  set determinate(value: boolean) {\n    this.foundation.setDeterminate(value);\n  }\n\n  set progress(value: number) {\n    this.foundation.setProgress(value);\n  }\n\n  set buffer(value: number) {\n    this.foundation.setBuffer(value);\n  }\n\n  open() {\n    this.foundation.open();\n  }\n\n  close() {\n    this.foundation.close();\n  }\n\n  override initialSyncWithDOM() {\n    this.root.addEventListener('transitionend', () => {\n      this.foundation.handleTransitionEnd();\n    });\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCLinearProgressAdapter = {\n      addClass: (className: string) => {\n        this.root.classList.add(className);\n      },\n      forceLayout: () => {\n        this.root.getBoundingClientRect();\n      },\n      setBufferBarStyle: (styleProperty: string, value: string) => {\n        const bufferBar = this.root.querySelector<HTMLElement>(\n            MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR);\n        if (bufferBar) {\n          bufferBar.style.setProperty(styleProperty, value);\n        }\n      },\n      setPrimaryBarStyle: (styleProperty: string, value: string) => {\n        const primaryBar = this.root.querySelector<HTMLElement>(\n            MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR);\n        if (primaryBar) {\n          primaryBar.style.setProperty(styleProperty, value);\n        }\n      },\n      hasClass: (className: string) => this.root.classList.contains(className),\n      removeAttribute: (attributeName: string) => {\n        this.root.removeAttribute(attributeName);\n      },\n      removeClass: (className: string) => {\n        this.root.classList.remove(className);\n      },\n      setAttribute: (attributeName: string, value: string) => {\n        this.safeSetAttribute(this.root, attributeName, value);\n      },\n      setStyle: (name: string, value: string) => {\n        this.root.style.setProperty(name, value);\n      },\n      attachResizeObserver: (callback) => {\n        const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;\n        if (RO) {\n          const ro = new RO(callback);\n          ro.observe(this.root);\n          return ro;\n        }\n\n        return null;\n      },\n      getWidth: () => this.root.offsetWidth,\n    };\n    return new MDCLinearProgressFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-linear-progress/constants.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  CLOSED_CLASS: 'mdc-linear-progress--closed',\n  CLOSED_ANIMATION_OFF_CLASS: 'mdc-linear-progress--closed-animation-off',\n  INDETERMINATE_CLASS: 'mdc-linear-progress--indeterminate',\n  REVERSED_CLASS: 'mdc-linear-progress--reversed',\n  ANIMATION_READY_CLASS: 'mdc-linear-progress--animation-ready',\n};\n\nexport const strings = {\n  ARIA_HIDDEN: 'aria-hidden',\n  ARIA_VALUEMAX: 'aria-valuemax',\n  ARIA_VALUEMIN: 'aria-valuemin',\n  ARIA_VALUENOW: 'aria-valuenow',\n  BUFFER_BAR_SELECTOR: '.mdc-linear-progress__buffer-bar',\n  FLEX_BASIS: 'flex-basis',\n  PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',\n};\n\n// these are percentages pulled from keyframes.scss\nexport const animationDimensionPercentages = {\n  PRIMARY_HALF: .8367142,\n  PRIMARY_FULL: 2.00611057,\n  SECONDARY_QUARTER: .37651913,\n  SECONDARY_HALF: .84386165,\n  SECONDARY_FULL: 1.60277782,\n};\n"
  },
  {
    "path": "packages/mdc-linear-progress/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {getCorrectPropertyName} from '@material/animation/util';\nimport {MDCFoundation} from '@material/base/foundation';\nimport {MDCProgressIndicatorFoundation} from '@material/progress-indicator/foundation';\n\nimport {MDCLinearProgressAdapter} from './adapter';\nimport {animationDimensionPercentages as percents, cssClasses, strings} from './constants';\nimport {MDCResizeObserver} from './types';\n\nexport class MDCLinearProgressFoundation extends\n    MDCFoundation<MDCLinearProgressAdapter> implements\n        MDCProgressIndicatorFoundation {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCLinearProgressAdapter {\n    return {\n      addClass: () => undefined,\n      attachResizeObserver: () => null,\n      forceLayout: () => undefined,\n      getWidth: () => 0,\n      hasClass: () => false,\n      setBufferBarStyle: () => null,\n      setPrimaryBarStyle: () => null,\n      setStyle: () => undefined,\n      removeAttribute: () => undefined,\n      removeClass: () => undefined,\n      setAttribute: () => undefined,\n    };\n  }\n\n  private determinate!: boolean;\n  private progress!: number;\n  private buffer!: number;\n  private observer: MDCResizeObserver|null = null;\n\n  constructor(adapter?: Partial<MDCLinearProgressAdapter>) {\n    super({...MDCLinearProgressFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    this.determinate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);\n    this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);\n    this.progress = 0;\n    this.buffer = 1;\n\n    this.observer = this.adapter.attachResizeObserver((entries) => {\n      if (this.determinate) {\n        return;\n      }\n\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          this.calculateAndSetDimensions(entry.contentRect.width);\n        }\n      }\n    });\n\n    if (!this.determinate && this.observer) {\n      this.calculateAndSetDimensions(this.adapter.getWidth());\n    }\n  }\n\n  setDeterminate(isDeterminate: boolean) {\n    this.determinate = isDeterminate;\n\n    if (this.determinate) {\n      this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);\n      this.adapter.setAttribute(\n          strings.ARIA_VALUENOW, this.progress.toString());\n      this.adapter.setAttribute(strings.ARIA_VALUEMAX, '1');\n      this.adapter.setAttribute(strings.ARIA_VALUEMIN, '0');\n      this.setPrimaryBarProgress(this.progress);\n      this.setBufferBarProgress(this.buffer);\n\n      return;\n    }\n\n    if (this.observer) {\n      this.calculateAndSetDimensions(this.adapter.getWidth());\n    }\n\n    this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);\n    this.adapter.removeAttribute(strings.ARIA_VALUENOW);\n    this.adapter.removeAttribute(strings.ARIA_VALUEMAX);\n    this.adapter.removeAttribute(strings.ARIA_VALUEMIN);\n    this.setPrimaryBarProgress(1);\n    this.setBufferBarProgress(1);\n  }\n\n  isDeterminate() {\n    return this.determinate;\n  }\n\n  setProgress(value: number) {\n    this.progress = value;\n    if (this.determinate) {\n      this.setPrimaryBarProgress(value);\n      this.adapter.setAttribute(strings.ARIA_VALUENOW, value.toString());\n    }\n  }\n\n  getProgress() {\n    return this.progress;\n  }\n\n  setBuffer(value: number) {\n    this.buffer = value;\n    if (this.determinate) {\n      this.setBufferBarProgress(value);\n    }\n  }\n\n  getBuffer() {\n    return this.buffer;\n  }\n\n  open() {\n    this.adapter.removeClass(cssClasses.CLOSED_CLASS);\n    this.adapter.removeClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n    this.adapter.removeAttribute(strings.ARIA_HIDDEN);\n  }\n\n  close() {\n    this.adapter.addClass(cssClasses.CLOSED_CLASS);\n    this.adapter.setAttribute(strings.ARIA_HIDDEN, 'true');\n  }\n\n  isClosed() {\n    return this.adapter.hasClass(cssClasses.CLOSED_CLASS);\n  }\n\n  /**\n   * Handles the transitionend event emitted after `close()` is called and the\n   * opacity fades out. This is so that animations are removed only after the\n   * progress indicator is completely hidden.\n   */\n  handleTransitionEnd() {\n    if (this.adapter.hasClass(cssClasses.CLOSED_CLASS)) {\n      this.adapter.addClass(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n    }\n  }\n\n  override destroy() {\n    super.destroy();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  restartAnimation() {\n    this.adapter.removeClass(cssClasses.ANIMATION_READY_CLASS);\n    this.adapter.forceLayout();\n    this.adapter.addClass(cssClasses.ANIMATION_READY_CLASS);\n  }\n\n  private setPrimaryBarProgress(progressValue: number) {\n    const value = `scaleX(${progressValue})`;\n\n    // Accessing `window` without a `typeof` check will throw on Node\n    // environments.\n    const transformProp = typeof window !== 'undefined' ?\n        getCorrectPropertyName(window, 'transform') :\n        'transform';\n    this.adapter.setPrimaryBarStyle(transformProp, value);\n  }\n\n  private setBufferBarProgress(progressValue: number) {\n    const value = `${progressValue * 100}%`;\n    this.adapter.setBufferBarStyle(strings.FLEX_BASIS, value);\n  }\n\n  private calculateAndSetDimensions(width: number) {\n    const primaryHalf = width * percents.PRIMARY_HALF;\n    const primaryFull = width * percents.PRIMARY_FULL;\n    const secondaryQuarter = width * percents.SECONDARY_QUARTER;\n    const secondaryHalf = width * percents.SECONDARY_HALF;\n    const secondaryFull = width * percents.SECONDARY_FULL;\n\n    this.adapter.setStyle(\n        '--mdc-linear-progress-primary-half', `${primaryHalf}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-primary-half-neg', `${- primaryHalf}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-primary-full', `${primaryFull}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-primary-full-neg', `${- primaryFull}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-quarter', `${secondaryQuarter}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-quarter-neg',\n        `${- secondaryQuarter}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-half', `${secondaryHalf}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-half-neg', `${- secondaryHalf}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-full', `${secondaryFull}px`);\n    this.adapter.setStyle(\n        '--mdc-linear-progress-secondary-full-neg', `${- secondaryFull}px`);\n\n    // need to restart animation for custom props to apply to keyframes\n    this.restartAnimation();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCLinearProgressFoundation;\n"
  },
  {
    "path": "packages/mdc-linear-progress/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-linear-progress/mdc-linear-progress.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"variables\" as mdc-linear-progress-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"keyframes\" as mdc-linear-progress-*;\n@forward \"mixins\" as mdc-linear-progress-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"mdc-linear-progress\";\n"
  },
  {
    "path": "packages/mdc-linear-progress/mdc-linear-progress.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-linear-progress/package.json",
    "content": "{\n  \"name\": \"@material/linear-progress\",\n  \"description\": \"The Material Components for the web linear progress indicator component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.linearProgress.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"linear progress\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-linear-progress\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/progress-indicator\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-linear-progress/styles.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './linear-progress';\n@use './linear-progress-theme';\n\n@include linear-progress.static-styles();\n@include linear-progress-theme.theme-styles(linear-progress-theme.$light-theme);\n"
  },
  {
    "path": "packages/mdc-linear-progress/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {animationDimensionPercentages as percentages} from '../../mdc-linear-progress/constants';\nimport {MDCLinearProgress, MDCLinearProgressFoundation} from '../../mdc-linear-progress/index';\nimport {MDCResizeObserver, MDCResizeObserverCallback, MDCResizeObserverEntry, WithMDCResizeObserver} from '../../mdc-linear-progress/types';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\ninterface WithObserverFoundation {\n  foundation: {observer: null|MDCResizeObserver};\n}\n\nconst RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;\n\nfunction roundPixelsToTwoDecimals(val: string) {\n  const numberVal = Number(val.split('px')[0]);\n  return Math.floor(numberVal * 100) / 100;\n}\n\nfunction getFixture() {\n  return createFixture(html`\n    <div role=\"progressbar\" class=\"mdc-linear-progress\" aria-label=\"Unit Test Progress Bar\" aria-valuemin=\"0\"\n      aria-valuemax=\"1\" aria-valuenow=\"0\" style=\"width: 100px\">\n      <div class=\"mdc-linear-progress__buffer\">\n        <div class=\"mdc-linear-progress__buffer-bar\"></div>\n        <div class=\"mdc-linear-progress__buffer-dots\"></div>\n      </div>\n      <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n        <span class=\"mdc-linear-progress__bar-inner\"></span>\n      </div>\n      <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n        <span class=\"mdc-linear-progress__bar-inner\"></span>\n      </div>\n    </div>\n  `);\n}\n\nconst originalResizeObserver = RO;\n\nfunction setupTest(hasMockFoundation = false) {\n  const root = getFixture();\n  const mockFoundation = createMockFoundation(MDCLinearProgressFoundation);\n  const component = new MDCLinearProgress(\n      root, hasMockFoundation ? mockFoundation : undefined);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCLinearProgress', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCLinearProgress instance', () => {\n    expect(\n        MDCLinearProgress.attachTo(getFixture()) instanceof MDCLinearProgress)\n        .toBeTruthy();\n  });\n\n  it('transitionend event calls foundation transitionend handler', () => {\n    const {root, mockFoundation} = setupTest(true);\n    emitEvent(root, 'transitionend');\n    expect(mockFoundation.handleTransitionEnd).toHaveBeenCalledTimes(1);\n  });\n\n  it('set indeterminate', () => {\n    const {root, component} = setupTest();\n\n    component.determinate = false;\n    expect(root).toHaveClass('mdc-linear-progress--indeterminate');\n    expect(root.getAttribute(MDCLinearProgressFoundation.strings.ARIA_VALUENOW))\n        .toEqual(null);\n    expect(root.getAttribute(MDCLinearProgressFoundation.strings.ARIA_VALUEMAX))\n        .toEqual(null);\n    expect(root.getAttribute(MDCLinearProgressFoundation.strings.ARIA_VALUEMIN))\n        .toEqual(null);\n  });\n\n  it('set progress', () => {\n    const {root, component} = setupTest();\n\n    component.progress = 0.5;\n    const primaryBar = root.querySelector<HTMLElement>(\n        MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR)!;\n    // External GitHub TS compiler insists that `buffer.style.transform` could\n    // be null\n    // tslint:disable-next-line:no-unnecessary-type-assertion\n    expect('scaleX(0.5)').toEqual(primaryBar.style.transform as string);\n    expect(root.getAttribute(MDCLinearProgressFoundation.strings.ARIA_VALUENOW))\n        .toEqual('0.5');\n  });\n\n  it('set buffer', () => {\n    const {root, component} = setupTest();\n\n    component.buffer = 0.5;\n    const buffer = root.querySelector<HTMLElement>(\n        MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR)!;\n    // External GitHub TS compiler insists that `buffer.style.transform` could\n    // be null\n    // tslint:disable-next-line:no-unnecessary-type-assertion\n    expect('50%').toEqual(buffer.style.flexBasis as string);\n  });\n\n  it('open and close', () => {\n    const {root, component} = setupTest();\n\n    component.close();\n    expect(root).toHaveClass('mdc-linear-progress--closed');\n    emitEvent(root, 'transitionend');\n    expect(root).toHaveClass('mdc-linear-progress--closed-animation-off');\n\n    component.open();\n    expect(root).not.toHaveClass('mdc-linear-progress--closed');\n    expect(root).not.toHaveClass('mdc-linear-progress--closed-animation-off');\n  });\n\n  describe('attach to dom', () => {\n    let root: HTMLElement|undefined;\n    let component: MDCLinearProgress|undefined;\n\n    beforeEach(() => {\n      root = undefined;\n      component = undefined;\n    });\n\n    afterEach(() => {\n      if (root) {\n        document.body.removeChild(root);\n      }\n      (window as unknown as WithMDCResizeObserver).ResizeObserver =\n          originalResizeObserver;\n    });\n\n    it('will not error if there is no resize observer', () => {\n      ((window as unknown as WithMDCResizeObserver).ResizeObserver as unknown as\n       null) = null;\n      component = setupTest().component;\n\n      const foundation =\n          (component as unknown as WithObserverFoundation).foundation;\n      const observer = foundation.observer;\n\n      expect(observer).toBeNull();\n    });\n\n    it('will update size on resize', async () => {\n      if (!RO) {\n        // skip tests on IE which wouldn't run these anyway\n        return;\n      }\n\n      let mockObserverInstance: MockObserver|null = null;\n      // we need to mock resize observer to prevent external test infrastructure\n      // flakyness as resize observer is not very consistent in timings and\n      // calls across browsers and dom structures\n      class MockObserver {\n        observedElement: HTMLElement|null = null;\n\n        constructor(public callback: MDCResizeObserverCallback) {\n          this.callback = callback;\n        }\n\n        observe(element: HTMLElement) {\n          this.observedElement = element;\n          this.triggerResize(element.offsetWidth);\n          mockObserverInstance = this;\n        }\n\n        disconnect() {}\n\n        triggerResize(width: number) {\n          const fakeEntry = {contentRect: {width}};\n          this.callback(\n              [fakeEntry as unknown as MDCResizeObserverEntry],\n              this as unknown as MDCResizeObserver);\n        }\n      }\n\n      (window as unknown as WithMDCResizeObserver).ResizeObserver =\n          MockObserver as unknown as typeof RO;\n      ({root, component} = setupTest());\n      document.body.appendChild(root);\n      component.determinate = false;\n\n      expect(root.style.width).toBe('100px');\n\n      let actualRounded = roundPixelsToTwoDecimals(\n          root.style.getPropertyValue('--mdc-linear-progress-primary-half'));\n      let expected =\n          roundPixelsToTwoDecimals(`${percentages.PRIMARY_HALF * 100}px`);\n      expect(actualRounded).toEqual(expected);\n      expect(mockObserverInstance).toBeTruthy();\n\n      root.style.setProperty('width', '200px');\n\n      mockObserverInstance!.triggerResize(200);\n      actualRounded = roundPixelsToTwoDecimals(\n          root.style.getPropertyValue('--mdc-linear-progress-primary-half'));\n      expected =\n          roundPixelsToTwoDecimals(`${percentages.PRIMARY_HALF * 200}px`);\n      expect(actualRounded).toEqual(expected);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-linear-progress/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as linear-progress;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include linear-progress.core-styles($query: $query);\n    @include linear-progress.bar-color(red, $query: $query);\n    @include linear-progress.buffer-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-linear-progress/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {animationDimensionPercentages as percentages} from '../../mdc-linear-progress/constants';\nimport {MDCLinearProgressFoundation} from '../../mdc-linear-progress/foundation';\nimport {WithMDCResizeObserver} from '../../mdc-linear-progress/types';\nimport {checkNumTimesSpyCalledWithArgs, verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {cssClasses, strings} = MDCLinearProgressFoundation;\n\nconst RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;\n\nconst multiplyPercentages = (multipler: number) => {\n  return {\n    PRIMARY_HALF: percentages.PRIMARY_HALF * multipler,\n    PRIMARY_FULL: percentages.PRIMARY_FULL * multipler,\n    SECONDARY_QUARTER: percentages.SECONDARY_QUARTER * multipler,\n    SECONDARY_HALF: percentages.SECONDARY_HALF * multipler,\n    SECONDARY_FULL: percentages.SECONDARY_FULL * multipler,\n  };\n};\n\ndescribe('MDCLinearProgressFoundation', () => {\n  it('exports strings', () => {\n    expect('strings' in MDCLinearProgressFoundation).toBeTruthy();\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCLinearProgressFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCLinearProgressFoundation, [\n      'addClass',\n      'attachResizeObserver',\n      'forceLayout',\n      'getWidth',\n      'hasClass',\n      'removeAttribute',\n      'removeClass',\n      'setAttribute',\n      'setBufferBarStyle',\n      'setPrimaryBarStyle',\n      'setStyle',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCLinearProgressFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#setDeterminate false updates state, adds class, resets transforms, and removes aria-valuenow',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n           .and.returnValue(false);\n       foundation.init();\n       foundation.setDeterminate(false);\n       expect(foundation.isDeterminate()).toBe(false);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.INDETERMINATE_CLASS);\n       expect(mockAdapter.setPrimaryBarStyle)\n           .toHaveBeenCalledWith('transform', 'scaleX(1)');\n       expect(mockAdapter.setBufferBarStyle)\n           .toHaveBeenCalledWith('flex-basis', '100%');\n       expect(mockAdapter.removeAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUENOW);\n       expect(mockAdapter.removeAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUEMAX);\n       expect(mockAdapter.removeAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUEMIN);\n     });\n\n  it('#setDeterminate false updates custom props', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getWidth.and.returnValue(100);\n    mockAdapter.attachResizeObserver.and.returnValue(RO);\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    expect(mockAdapter.attachResizeObserver).toHaveBeenCalled();\n    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(0);\n    foundation.setDeterminate(false);\n    expect(foundation.isDeterminate()).toBe(false);\n\n    if (!RO) {\n      expect(mockAdapter.setStyle).toHaveBeenCalledTimes(0);\n      return;\n    }\n\n    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(10);\n    const testPercentages = multiplyPercentages(100);\n    expect(mockAdapter.setStyle.calls.allArgs()).toEqual([\n      [\n        '--mdc-linear-progress-primary-half',\n        `${testPercentages.PRIMARY_HALF}px`\n      ],\n      [\n        '--mdc-linear-progress-primary-half-neg',\n        `-${testPercentages.PRIMARY_HALF}px`\n      ],\n      [\n        '--mdc-linear-progress-primary-full',\n        `${testPercentages.PRIMARY_FULL}px`\n      ],\n      [\n        '--mdc-linear-progress-primary-full-neg',\n        `-${testPercentages.PRIMARY_FULL}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-quarter',\n        `${testPercentages.SECONDARY_QUARTER}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-quarter-neg',\n        `-${testPercentages.SECONDARY_QUARTER}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-half',\n        `${testPercentages.SECONDARY_HALF}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-half-neg',\n        `-${testPercentages.SECONDARY_HALF}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-full',\n        `${testPercentages.SECONDARY_FULL}px`\n      ],\n      [\n        '--mdc-linear-progress-secondary-full-neg',\n        `-${testPercentages.SECONDARY_FULL}px`\n      ]\n    ]);\n  });\n\n  it('#setDeterminate updates state and removes class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setDeterminate(true);\n    expect(foundation.isDeterminate()).toBe(true);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.INDETERMINATE_CLASS);\n  });\n\n  it('#setDeterminate restores previous progress value after toggled from false to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.setProgress(0.123);\n       foundation.setDeterminate(false);\n       foundation.setDeterminate(true);\n\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.setPrimaryBarStyle, ['transform', 'scaleX(0.123)'], 2);\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.setAttribute, [strings.ARIA_VALUENOW, '0.123'], 2);\n     });\n\n  it('#setDeterminate restores previous buffer value after toggled from false to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.setBuffer(0.123);\n       foundation.setDeterminate(false);\n       foundation.setDeterminate(true);\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.setBufferBarStyle, ['flex-basis', '12.3%'], 2);\n     });\n\n  it('#setDeterminate updates progress value set while determinate is false after determinate is true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.setDeterminate(false);\n       foundation.setProgress(0.123);\n       foundation.setDeterminate(true);\n       expect(mockAdapter.setPrimaryBarStyle)\n           .toHaveBeenCalledWith('transform', 'scaleX(0.123)');\n       expect(mockAdapter.setAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUENOW, '0.123');\n       expect(mockAdapter.setAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUEMAX, '1');\n       expect(mockAdapter.setAttribute)\n           .toHaveBeenCalledWith(strings.ARIA_VALUEMIN, '0');\n     });\n\n  it('#calculateAndSetDimensions called on initialization with indeterminate class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n           .and.returnValue(true);\n       mockAdapter.attachResizeObserver.and.returnValue(RO);\n       foundation.init();\n       expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);\n     });\n\n  it('#calculateAndSetDimensions called only on setDeterminate(false)', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(true);\n    mockAdapter.attachResizeObserver.and.returnValue(RO);\n    foundation.init();\n    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);\n\n    foundation.setDeterminate(true);\n\n    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);\n\n    foundation.setDeterminate(false);\n\n    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 20 : 0);\n  });\n\n  it('#calculateAndSetDimensions restarts animation with a forced reflow',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n           .and.returnValue(true);\n       mockAdapter.attachResizeObserver.and.returnValue(RO);\n       foundation.init();\n       if (RO) {\n         expect(mockAdapter.addClass)\n             .toHaveBeenCalledWith(cssClasses.ANIMATION_READY_CLASS);\n         expect(mockAdapter.forceLayout).toHaveBeenCalledTimes(1);\n         expect(mockAdapter.removeClass)\n             .toHaveBeenCalledWith(cssClasses.ANIMATION_READY_CLASS);\n       } else {\n         expect(mockAdapter.setStyle).toHaveBeenCalledTimes(0);\n       }\n     });\n\n  it('#setProgress updates state, sets transform and aria-valuenow', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setProgress(0.5);\n    expect(foundation.getProgress()).toEqual(0.5);\n    expect(mockAdapter.setPrimaryBarStyle)\n        .toHaveBeenCalledWith('transform', 'scaleX(0.5)');\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_VALUENOW, '0.5');\n    expect(foundation.getProgress()).toEqual(0.5);\n  });\n\n  it('#setProgress on indeterminate does nothing', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(true);\n    foundation.init();\n    foundation.setProgress(0.5);\n    expect(mockAdapter.setPrimaryBarStyle).not.toHaveBeenCalled();\n    expect(mockAdapter.setAttribute).not.toHaveBeenCalled();\n  });\n\n  it('#setBuffer sets flex-basis', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setBuffer(0.5);\n    expect(mockAdapter.setBufferBarStyle)\n        .toHaveBeenCalledWith('flex-basis', '50%');\n    expect(foundation.getBuffer()).toEqual(0.5);\n  });\n\n  it('#setBuffer on indeterminate does nothing', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)\n        .and.returnValue(true);\n    foundation.init();\n    foundation.setBuffer(0.5);\n    expect(mockAdapter.setBufferBarStyle).not.toHaveBeenCalled();\n  });\n\n  it('#open removes class and aria-hidden', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.open();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.CLOSED_CLASS);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n    expect(mockAdapter.removeAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_HIDDEN);\n  });\n\n  it('#close adds class and aria-hidden', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.close();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSED_CLASS);\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith(strings.ARIA_HIDDEN, 'true');\n    mockAdapter.hasClass.withArgs(cssClasses.CLOSED_CLASS)\n        .and.returnValue(true);\n    foundation.handleTransitionEnd();\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.CLOSED_ANIMATION_OFF_CLASS);\n    expect(foundation.isClosed()).toBeTrue();\n  });\n\n  it('#destroy disconnects the resize observer', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let disconnected = false;\n    const mockedObserver = {\n      disconnect: () => {\n        disconnected = true;\n      }\n    };\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ disconnect:\n    //  () => void; }' is not assignable to parameter of type\n    //  'MDCResizeObserver'.\n    mockAdapter.attachResizeObserver.and.returnValue(mockedObserver);\n    foundation.init();\n    const withObserver =\n        foundation as unknown as {observer: typeof mockedObserver};\n\n    expect(withObserver.observer).toEqual(mockedObserver);\n    expect(disconnected).toBeFalse();\n\n    foundation.destroy();\n\n    expect(disconnected).toBeTrue();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-linear-progress/test/mdc-linear-progress.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-linear-progress.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-linear-progress/types.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n// Opt-in resize observer types\n\nexport interface MDCResizeObserverEntry {\n  contentRect: DOMRectReadOnly;\n}\n\nexport interface MDCResizeObserver {\n  new(callback: MDCResizeObserverCallback): MDCResizeObserver;\n  disconnect(): void;\n  observe(target: Element): void;\n}\n\nexport interface WithMDCResizeObserver {\n  ResizeObserver: MDCResizeObserver;\n}\n\nexport type MDCResizeObserverCallback =\n    (entries: MDCResizeObserverEntry[], observer: MDCResizeObserver) => void;\n"
  },
  {
    "path": "packages/mdc-list/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-list/README.md",
    "content": "<!--docs:\ntitle: \"Lists\"\nlayout: detail\nsection: components\nexcerpt: \"Lists are continuous, vertical indexes of text or images.\"\niconId: list\npath: /catalog/lists/\n-->\n\n# Lists\n\n[Lists](https://material.io/components/lists/) are continuous, vertical indexes of text or images.\n\nThere are three list types:\n1. [Single-line list](#single-line-list)\n1. [Two-line list](#two-line-list)\n1. [Three-line list](#three-line-list)\n\n![Composite image of the three list types](images/lists-types.png)\n\n## List is being updated\n\nList is currently being updated to better match the Material spec. As a result,\nthere are two versions of List available: the deprecated old version\n(documented below) and the new, future-proof version (documented [here](https://github.com/material-components/material-components-web/files/6955906/New.List.Public.Documentation.PUBLIC.DRAFT.pdf)).\n\nComponents that require a List (e.g., Menu, Select, Navigation Drawer) still use\nthe deprecated version. Otherwise, we encourage you to use the new version in\nyour projects.\n\nNote that both new and old versions share the same JavaScript component and \nimports. *However, there are differences in class names and DOM structure:* the\nold version uses class names with a `mdc-deprecated-list` prefix (e.g.,\n`mdc-deprecated-list-item`) whereas the new version uses the typical `mdc-list`\nprefix (e.g., `mdc-list-item`).\n\n## Using lists\n\n### Installation\n\n```\nnpm install @material/list\n```\n\n### Styles\n\n```scss\n@use \"@material/list\";\n\n@include list.deprecated-core-styles;\n```\n\n### JavaScript\n\nMDC List includes an optional JavaScript component which can be used for keyboard interaction and accessibility.\n\n```js\nimport {MDCList} from '@material/list';\n\nconst list = new MDCList(document.querySelector('.mdc-deprecated-list'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nNote that the JS component does _not_ automatically instantiate ripples on list items. If you wish to include the\nfully-upgraded ripple effect on list items, you must instantiate `MDCRipple` on each item:\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst listItemRipples = list.listElements.map((listItemEl) => new MDCRipple(listItemEl));\n```\n\n### Making lists accessible\n\nThe MDCList JavaScript component implements the WAI-ARIA best practices for\n[listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox). This includes overriding the default tab behavior\nwithin the list component.\n\nThe `tabindex` should be set to `0` for first list item element or selected list item element, remaining list item elements should not have `tabindex` set.\n\nUse `role=\"listbox\"` only for single selection list, without this role the `ul` element is implicitely `role=\"list\"`.\nDo not use `aria-orientation` attribute for standard list (i.e., `role=\"list\"`), use component's `vertical` property to set the orientation\nto vertical.\n\nSingle selection list supports `aria-selected` and `aria-current` attributes. List automatically detects the presence of these attributes\nand sets it to next selected list item based on which ARIA attribute you use (i.e., `aria-selected` or `aria-current`). Please see WAI-ARIA [aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current) article for recommended usage and available attribute values.\n\nAs the user navigates through the list, any `button` and `a` elements within the list will receive `tabindex=\"-1\"` when\nthe list item is not focused. When the list item receives focus, the aforementioned elements will receive\n`tabIndex=\"0\"`. This allows for the user to tab through list item elements and then tab to the first element after the\nlist. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements. If\n`singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect a list\nitem. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio\nbutton or checkbox within the list item, the list will not toggle `tabindex` for those elements.\n\nDisabled list item will be included in the keyboard navigation. Please see [Focusability of disabled controls](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls) section in ARIA practices article.\n\nKey | Action\n--- | ---\n`ArrowUp` | When the list is in a vertical orientation (default), it will cause the previous list item to receive focus.\n`ArrowDown` | When the list is in a vertical orientation (default), it will cause the next list item to receive focus.\n`ArrowLeft` | When the list is in a horizontal orientation, it will cause the previous list item to receive focus.\n`ArrowRight` | When the list is in a horizontal orientation, it will cause the next list item to receive focus.\n`Home` | Will cause the first list item in the list to receive focus.\n`End` | Will cause the last list item in the list to receive focus.\n`Space` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.\n`Enter` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.\n\n## Single-line list\n\nSingle-line list items contain a maximum of one line of text.\n\n### Single-line list example\n\n```html\n<ul class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n## Two-line list\n\nTwo-line list items contain a maximum of two lines of text.\n\n### Two-line list example\n\nUse the `mdc-deprecated-list--two-line` combined with some extra markup around the\ntext to style a two-line list.\n\n```html\n<ul class=\"mdc-deprecated-list mdc-deprecated-list--two-line\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">\n      <span class=\"mdc-deprecated-list-item__primary-text\">Two-line item</span>\n      <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary text</span>\n    </span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">\n      <span class=\"mdc-deprecated-list-item__primary-text\">Two-line item</span>\n      <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary text</span>\n    </span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">\n      <span class=\"mdc-deprecated-list-item__primary-text\">Two-line item</span>\n      <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary text</span>\n    </span>\n  </li>\n</ul>\n```\n\n**Note: Make sure there are no white-space characters before primary and secondary text content.**\n\n### Three-line list\n\nThree-line list items contains a maximum of three lines of text.\n\nMDC Web does not currently support three-line lists.\n\n## Other Variants\n\n### List Groups\n\nMultiple related lists can be grouped together using the `mdc-deprecated-list-group` class on a containing element.\n\n```html\n<div class=\"mdc-deprecated-list-group\">\n  <h3 class=\"mdc-deprecated-list-group__subheader\">List 1</h3>\n  <ul class=\"mdc-deprecated-list\">\n    <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n  </ul>\n  <h3 class=\"mdc-deprecated-list-group__subheader\">List 2</h3>\n  <ul class=\"mdc-deprecated-list\">\n    <li class=\"mdc-deprecated-list-item\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">line item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### List Dividers\n\nMDC List contains an `mdc-deprecated-list-divider` class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content.\n\n```html\n<ul class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Item 1 - Division 1</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Item 2 - Division 1</span>\n  </li>\n  <li role=\"separator\" class=\"mdc-deprecated-list-divider\"></li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Item 1 - Division 2</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Item 2 - Division 2</span>\n  </li>\n</ul>\n```\n\n**Note: The role=\"separator\" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements.**\n\nOR\n\n```html\n<ul class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__text\">Item 1 - List 1</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__text\">Item 2 - List 1</span>\n  </li>\n</ul>\n<hr class=\"mdc-deprecated-list-divider\">\n<ul class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__text\">Item 1 - List 2</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__text\">Item 2 - List 2</span>\n  </li>\n</ul>\n```\n\n### Single Selection List\n\nMDC List can handle selecting/deselecting list elements based on click or keyboard actions. When enabled, the `space` and `enter` keys (or `click` event) will trigger a\nsingle list item to become selected and any other previously selected element to become deselected.\n\n```html\n<ul id=\"my-list\" class=\"mdc-deprecated-list\" role=\"listbox\">\n  <li class=\"mdc-deprecated-list-item\" role=\"option\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"option\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"option\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n```js\nconst list = new MDCList(document.getElementById('my-list'));\nlist.singleSelection = true;\n```\n\n#### Pre-selected list item\n\nWhen rendering the list with a pre-selected list item, the list item that needs to be selected should contain\nthe `mdc-deprecated-list-item--selected` or `mdc-deprecated-list-item--activated` class before creating the list. Please see\n[Accessibility](#Accessibility) section for appropriate aria attributes.\n\n```html\n<ul id=\"my-list\" class=\"mdc-deprecated-list\" role=\"listbox\">\n  <li class=\"mdc-deprecated-list-item\" role=\"option\" aria-selected=\"false\">\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" role=\"option\" aria-selected=\"true\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"option\" aria-selected=\"false\">\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n```js\nconst list = new MDCList(document.getElementById('my-list'));\nlist.singleSelection = true;\n```\n\n### List with radio group\n\nWhen rendering list radio group with pre-selected radio button the selected list item should contain `aria-checked` set to `true` and the native radio input element contains `checked` attribute, all other list items should have `aria-checked` set to `false`. The list root contains `role=\"radiogroup\"` whereas each list item within radio group contains `role=\"radio\"`.\n\n```html\n<ul class=\"mdc-deprecated-list\" role=\"radiogroup\">\n  <li class=\"mdc-deprecated-list-item\" role=\"radio\" aria-checked=\"false\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n      <div class=\"mdc-radio\">\n        <input class=\"mdc-radio__native-control\"\n              type=\"radio\"\n              id=\"demo-list-radio-item-1\"\n              name=\"demo-list-radio-item-group\"\n              value=\"1\">\n        <div class=\"mdc-radio__background\">\n          <div class=\"mdc-radio__outer-circle\"></div>\n          <div class=\"mdc-radio__inner-circle\"></div>\n        </div>\n      </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-radio-item-1\">Option 1</label>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"radio\" aria-checked=\"true\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n      <div class=\"mdc-radio\">\n        <input class=\"mdc-radio__native-control\"\n              type=\"radio\"\n              id=\"demo-list-radio-item-2\"\n              name=\"demo-list-radio-item-group\"\n              value=\"2\"\n              checked>\n        <div class=\"mdc-radio__background\">\n          <div class=\"mdc-radio__outer-circle\"></div>\n          <div class=\"mdc-radio__inner-circle\"></div>\n        </div>\n      </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-radio-item-2\">Option 2</label>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"radio\" aria-checked=\"false\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n      <div class=\"mdc-radio\">\n        <input class=\"mdc-radio__native-control\"\n              type=\"radio\"\n              id=\"demo-list-radio-item-3\"\n              name=\"demo-list-radio-item-group\"\n              value=\"3\">\n        <div class=\"mdc-radio__background\">\n          <div class=\"mdc-radio__outer-circle\"></div>\n          <div class=\"mdc-radio__inner-circle\"></div>\n        </div>\n      </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-radio-item-3\">Option 3</label>\n  </li>\n</ul>\n```\n\n### List with checkbox items\n\nWhen rendering list with checkbox items all pre-selected list items should contain `aria-checked` set to `true` and the native checkbox input element should contain `checked` attribute, all other list items should have `aria-checked` set to `false`. Each list item in checkbox list contains `role=\"checkbox\"` attribute and the list root should contain `role=\"group\"` and `aria-label` attributes.\n\n```html\n<ul class=\"mdc-deprecated-list\" role=\"group\" aria-label=\"List with checkbox items\">\n  <li class=\"mdc-deprecated-list-item\" role=\"checkbox\" aria-checked=\"false\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n      <div class=\"mdc-checkbox\">\n        <input type=\"checkbox\"\n                class=\"mdc-checkbox__native-control\"\n                id=\"demo-list-checkbox-item-1\"  />\n        <div class=\"mdc-checkbox__background\">\n          <svg class=\"mdc-checkbox__checkmark\"\n                viewBox=\"0 0 24 24\">\n            <path class=\"mdc-checkbox__checkmark-path\"\n                  fill=\"none\"\n                  d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n          </svg>\n          <div class=\"mdc-checkbox__mixedmark\"></div>\n        </div>\n      </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-checkbox-item-1\">Option 1</label>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"checkbox\" aria-checked=\"true\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n        <div class=\"mdc-checkbox\">\n            <input type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id=\"demo-list-checkbox-item-2\"\n                    checked />\n            <div class=\"mdc-checkbox__background\">\n              <svg class=\"mdc-checkbox__checkmark\"\n                    viewBox=\"0 0 24 24\">\n                <path class=\"mdc-checkbox__checkmark-path\"\n                      fill=\"none\"\n                      d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n              </svg>\n              <div class=\"mdc-checkbox__mixedmark\"></div>\n            </div>\n          </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-checkbox-item-2\">Option 2</label>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" role=\"checkbox\" aria-checked=\"false\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__graphic\">\n        <div class=\"mdc-checkbox\">\n            <input type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id=\"demo-list-checkbox-item-3\" />\n            <div class=\"mdc-checkbox__background\">\n              <svg class=\"mdc-checkbox__checkmark\"\n                    viewBox=\"0 0 24 24\">\n                <path class=\"mdc-checkbox__checkmark-path\"\n                      fill=\"none\"\n                      d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n              </svg>\n              <div class=\"mdc-checkbox__mixedmark\"></div>\n            </div>\n          </div>\n    </span>\n    <label class=\"mdc-deprecated-list-item__text\" for=\"demo-list-checkbox-item-3\">Option 3</label>\n  </li>\n</ul>\n```\n\nThe `selectedIndex` (that proxies foundation's `setSelectedState()`) accepts list of indexes in array format for list with checkbox items to set the selection state. It overwrites the current state with new selected state.\n\n### Multilevel list\n\nWhen rendering multilevel list (for example submenu), sublist should be rendered inside a wrapper `<li>` item. The rest of item layout should\nremain the same as all examples above. In this case `<li>` element should be marked with `role=\"presentation\"`.\n\n```html\n<ul class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item__wrapper\" role=\"presentation\">\n    <div class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n    </div>\n    <!-- Child list can be placed here. -->\n  </li>\n  <li class=\"mdc-deprecated-list-item\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-deprecated-list` | Mandatory, for the list element.\n`mdc-deprecated-list--dense` | Optional, styles the density of the list, making it appear more compact.\n`mdc-deprecated-list--textual-list` | Optional, configures lists that start with text\n(e.g., do not have a leading tile).\n`mdc-deprecated-list--avatar-list` | Optional, configures the leading tile of each row to \ndisplay avatars.\n`mdc-deprecated-list--icon-list` | Optional, configures the leading tile of each row to \ndisplay icons.\n`mdc-deprecated-list--image-list` | Optional, configures the leading tile of each row to \ndisplay images.\n`mdc-deprecated-list--thumbnail-list` | Optional, configures the leading tile of each row to\ndisplay smaller images (this is analogous to an avatar list but the image will\nnot be rounded).\n`mdc-deprecated-list--video-list` | Optional, configures the leading tile of each row to \ndisplay videos.\n`mdc-deprecated-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines).\n`mdc-deprecated-list-item` | Mandatory, for the list item element.\n`mdc-deprecated-list-item__text` |\tMandatory. Wrapper for list item text content (displayed as middle column of the list item).\n`mdc-deprecated-list-item__primary-text` | Optional, primary text for the list item. Should be the child of `mdc-deprecated-list-item__text`.\n`mdc-deprecated-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-deprecated-list-item__text`.\n`mdc-deprecated-list-item--disabled` | Optional, styles the row in the disabled state.\n`mdc-deprecated-list-item--selected` | Optional, styles the row in the selected* state.\n`mdc-deprecated-list-item--activated` | Optional, styles the row in the activated* state.\n`mdc-deprecated-list-item__graphic` | Optional, the first tile in the row (in LTR\nlanguages, the first column of the list item). Defaults to an icon, but renders\nas an avatar in an avatar list, or an image or video in the corresponding list.\n`mdc-deprecated-list-item__meta`\t| Optional, the last tile in the row (in LTR languages, \nthe last column of the list item). Typically small text, icon, or image.\n`mdc-deprecated-list-group` | Optional, wrapper around two or more mdc-deprecated-list elements to be grouped together.\n`mdc-deprecated-list-group__subheader` |\tOptional, heading text displayed above each list in a group.\n`mdc-deprecated-list-divider` | Optional, for list divider element.\n`mdc-deprecated-list-divider--padded` | Optional, leaves gaps on each side of divider to\nmatch padding of `list-item__meta`. Deprecated: use the more flexible \"inset-\" \nclasses, instead.\n`mdc-deprecated-list-divider--inset` | Optional, increases the leading and trailing margins\nof the divider so that it doesn't intersect with an avatar. Deprecated: use the\nmore flexible \"inset-\" classes instead.\n`mdc-deprecated-list-divider--inset-leading` | Optional, increases the leading margin of\nthe divider so that it does not intersect the graphics column.\n`mdc-deprecated-list-divider--inset-trailing` | Optional, increases the trailing margin of\nthe divider so that it coincides with the item's padding.\n`mdc-deprecated-list-divider--inset-padding` | Optional, alters the inset to correspond to\nthe item's padding rather than the leading graphics column.\n\n**Note: The `mdc-deprecated-list-divider` class can be used between list items *OR* between two lists (see respective examples under [List Dividers](#list-dividers)).**\n\n**Note: In Material Design, the selected and activated states apply in different, mutually-exclusive situations:**\n* *Selected* state should be applied on the `.mdc-deprecated-list-item` when it is likely to frequently change due to user choice. E.g., selecting one or more photos to share in Google Photos.\n* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page. Common examples are navigation components such as the list within a navigation drawer.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`deprecated-item-primary-text-ink-color($color)` | Sets the ink color of the primary text of the list item.\n`deprecated-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text of the list item.\n`deprecated-item-graphic-fill-color($color)` | Sets background ink color of the graphic element within list item.\n`deprecated-item-graphic-ink-color($color)` | Sets ink color of the graphic element within list item.\n`deprecated-item-meta-ink-color($color)` | Sets ink color of the meta element within list item.\n`deprecated-single-line-shape-radius($radius, $rtl-reflexive, $density-scale)` | Sets the rounded shape to list item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false. Set `$density-scale` only when custom density is applied, defaults to `$mdc-deprecated-list-single-line-density-scale`.\n`deprecated-divider-color($color)` | Sets divider ink color.\n`deprecated-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group.\n`deprecated-item-selected-text-color($color)` | Sets the color of the text when the list item is selected/activated.\n`deprecated-item-disabled-text-color($color)` | Sets the color of the text when the list item is disabled.\n`deprecated-item-disabled-text-opacity($opacity)` | Sets the opacity of the text when the list item is disabled.\n`deprecated-single-line-density($density-scale)` | Sets density scale to single line list variant. Supported density scales are `-4`, `-3`, `-2`, `-1` and  `0`.\n`deprecated-single-line-height($height)` | Sets height to single line list variant.\n`deprecated-list-item-padding($leading-padding)` | Sets the padding used by each list item.\n`deprecated-list-item-height($height)` | Sets the height used by each list item.\n`deprecated-icon-margin($margin)` | Sets the trailing margin used by icons.\n`deprecated-divider-insets($leading-padding, $text-offset)` | Creates the full set of\ndivider inset styles using the provided padding and text offset.\n`deprecated-divider-insets($leading-padding, $text-offset)` | Sets a single divider's inset\nusing the provided padding, text offset, and configuration.\n`deprecated-graphic-size($leading-padding, $text-offset, $width, $height)` | Sets the size\nand trailing margin of a leading graphic.\n\n## `MDCList` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`vertical` | `boolean` (write-only) | Proxies to the foundation's `setVerticalOrientation()` method.\n`listElements` | `Array<Element>` (read-only) | Returns all list item elements including disabled list items.\n`wrapFocus` | `boolean` (write-only) | Proxies to the foundation's `setWrapFocus()` method.\n`typeaheadInProgress` | `boolean` (read-only) | Proxies to foundation's `isTypeaheadInProgress` method.\n`hasTypeahead` | `boolean` (write-only) | Proxies to the foundation's `setHasTypeahead()` method.\n`singleSelection` | `boolean` (write-only) | Proxies to the foundation's `setSingleSelection()` method.\n`selectedIndex` | `MDCListIndex` | Proxies to the foundation's `getSelectedIndex()` and `setSelectedIndex()` methods.\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Recalculates layout and orientation.\n`getPrimaryText(item: Element) => string` | Fetches the primary text in the given element.\n`initializeListType() => void` | Initialize `selectedIndex` value based on pre-selected checkbox list items, single selection or radio.\n`setEnabled(itemIndex: number, isEnabled: boolean) => void` | Updates the list item at `itemIndex` to the desired `isEnabled` state.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCList:action` | `{index: number}` | Indicates that a list item with the specified index has been activated.\n`MDCList:selectionChange` | `{changedIndices: number[]}` | Emitted whenever the selection of list items has changed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a List for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Considerations for Advanced Approach\n\nThe `MDCListFoundation` expects the HTML to be setup a certain way before being used. This setup is a part of the `layout()` and `singleSelection()` functions within the `index.js`.\n\n#### Setup in `layout()`\n\nThe default component requires that every list item receives a `tabindex` value so that it can receive focus\n(`li` elements cannot receive focus at all without a `tabindex` value). Any element not already containing a\n`tabindex` attribute will receive `tabindex=-1`. The first list item should have `tabindex=\"0\"` so that the\nuser can find the first element using the `tab` key, but subsequent `tab` keys strokes will cause focus to\nskip over the entire list. If the list items contain sub-elements that are focusable (`button` and `a` elements),\nthese should also receive `tabIndex=\"-1\"`.\n\n```html\n<ul id=\"my-list\" class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n    <button tabindex=\"-1\"></button>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"-1\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"-1\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n#### Setup in `singleSelection()`\n\nWhen implementing a component that will use the single selection variant, the HTML should be modified to include\nthe `mdc-deprecated-list-item--selected` or `mdc-deprecated-list-item--activated` class name,\nand the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated\nto `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately\nafter the foundation is instantiated. Please see [Accessibility](#Accessibility) section for appropriate aria attributes.\n\n```html\n<ul id=\"my-list\" class=\"mdc-deprecated-list\">\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"-1\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n    <button tabindex=\"-1\"></button>\n    </li>\n  <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" aria-selected=\"true\" tabindex=\"0\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n  <li class=\"mdc-deprecated-list-item\" tabindex=\"-1\">\n    <span class=\"mdc-deprecated-list-item__ripple\"></span>\n    <span class=\"mdc-deprecated-list-item__text\">Single-line item</span>\n  </li>\n</ul>\n```\n\n### `MDCListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getListItemCount() => Number` | Returns the total number of list items (elements with `mdc-deprecated-list-item` class) that are direct children of the `root_` element.\n`getFocusedElementIndex() => Number` | Returns the `index` value of the currently focused element.\n`getAttributeForElementIndex(index: number, attribute: string) => string | null` | Returns the attribute value of list item at given `index`.\n`setAttributeForElementIndex(index: Number, attr: String, value: String) => void` | Sets the `attr` attribute to `value` for the list item at `index`.\n`addClassForElementIndex(index: Number, className: String) => void` | Adds the `className` class to the list item at `index`.\n`removeClassForElementIndex(index: Number, className: String) => void` | Removes the `className` class to the list item at `index`.\n`focusItemAtIndex(index: Number) => void` | Focuses the list item at the `index` value specified.\n`setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child button or anchor element in the list item at the `index` specified.\n`hasRadioAtIndex(index: number) => boolean` | Returns true if radio button is present at given list item index.\n`hasCheckboxAtIndex(index: number) => boolean` | Returns true if checkbox is present at given list item index.\n`isCheckboxCheckedAtIndex(index: number) => boolean` | Returns true if checkbox inside a list item is checked.\n`setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean) => void` | Sets the checked status of checkbox or radio at given list item index.\n`notifyAction(index: number) => void` | Notifies user action on list item including keyboard and mouse actions.\n`notifySelectionChange(changedIndices: number[]) => void` | Notifies when the selection of list items has changed through user interaction. Selection could change upon on <kbd>SPACE</kbd>, a click on an item, or through key combinations like `CTRL + A`. \n`isFocusInsideList() => boolean` | Returns true if the current focused element is inside list root.\n`isRootFocused() => boolean` | Returns true if root element is focused.\n`listItemAtIndexHasClass(index: number, className: string) => boolean` | Returns true if list item at `index` has class `className`.\n`getPrimaryTextAtIndex(index: number)` | Returns the primary text content of the list item at index.\n\n### `MDCListFoundation`\n\nMethod Signature | Description\n--- | ---\n`setWrapFocus(value: Boolean) => void` | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa.\n`setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used.\n`setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item.\n`getSelectedIndex() => MDCListIndex` | Gets the current selection state by returning selected index or list of indexes for checkbox based list. See [types.ts](./types.ts) for `MDCListIndex` type definition.\n`setSelectedIndex(index: MDCListIndex) => void` | Sets the selection state to given index or list of indexes if it is checkbox based list. See [types.ts](./types.ts) for `MDCListIndex` type definition.\n`setUseActivatedClass(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-deprecated-list-item--activated` class.\n`handleFocusIn(event: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.\n`handleFocusOut(event: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.\n`handleKeydown(event: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.\n`handleClick(event: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.\n`focusNextElement(index: number) => number` | Handles focusing the next element using the current `index`. Returns focused element index.\n`focusPrevElement(index: number) => number` | Handles focusing the previous element using the current `index`. Returns focused element index.\n`focusFirstElement() => number` | Handles focusing the first element in a list. Returns focused element index.\n`focusLastElement() => number` | Handles focusing the last element in a list. Returns focused element index.\n`setEnabled(itemIndex: number, isEnabled: Boolean) => void` | Updates the list item's disabled state.\n`setHasTypeahead(hasTypeahead: Boolean) => void` | Sets whether typeahead is enabled on the list.\n`isTypeaheadInProgress() => Boolean` | Returns whether typeahead is currently matching a user-specified prefix.\n`typeaheadMatchItem(nextChar: string) => number` | Adds a character to the typeahead buffer and returns index of the next item in the list matching the buffer.\n`clearTypeaheadBuffer() => void` | Clears the typeahead buffer.\n"
  },
  {
    "path": "packages/mdc-list/_evolution-mixins.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './list' show core-styles, without-ripple, with-ripple, absorb-overflow, one-line-item-height, two-line-item-height, three-line-item-height, list-item-height, item-spacing, two-line-item-start-alignment, three-line-item-start-alignment, one-line-item-end-alignment,two-line-item-end-alignment, three-line-item-end-alignment,item-start-spacing, item-end-spacing, item-start-size, item-end-size, list-item-selected-container-color,  list-primary-text-typography, list-primary-text-ink-color, list-secondary-text-ink-color, list-secondary-text-typography, list-overline-text-ink-color, list-meta-text-ink-color, list-icon-ink-color, list-selected-ink-color, list-selected-meta-text-ink-color, list-disabled-ink-color, list-disabled-opacity, one-line-list-radius, two-line-list-radius, three-line-list-radius, divider-color, divider-height, divider-leading-inset, divider-trailing-inset, one-line-item-density, two-line-item-density, three-line-item-density, list-base, item-base, item-meta-text-ink-color, $ripple-target;\n"
  },
  {
    "path": "packages/mdc-list/_evolution-variables.scss",
    "content": "@use '@material/theme/theme-color';\n@use '@material/density/variables' as density-variables;\n\n$ripple-target: '.mdc-list-item__ripple';\n$divider-color-on-light-bg: rgba(0, 0, 0, 0.12) !default;\n$divider-color-on-dark-bg: rgba(255, 255, 255, 0.2) !default;\n$content-disabled-opacity: theme-color.text-emphasis(disabled) !default;\n$content-disabled-color: on-surface !default;\n$content-selected-color: primary !default;\n$side-padding: 16px !default;\n\n$one-line-item-density-scale: density-variables.$default-scale !default;\n$two-line-item-density-scale: density-variables.$default-scale !default;\n$three-line-item-density-scale: density-variables.$default-scale !default;\n$one-line-item-density-config: (\n  height: (\n    default: 48px,\n    maximum: 48px,\n    minimum: 24px,\n  ),\n) !default;\n$one-line-item-tall-density-config: (\n  height: (\n    default: 56px,\n    maximum: 56px,\n    minimum: 40px,\n  ),\n) !default;\n$one-line-item-taller-density-config: (\n  height: (\n    default: 72px,\n    maximum: 72px,\n    minimum: 56px,\n  ),\n) !default;\n$two-line-item-density-config: (\n  height: (\n    default: 64px,\n    maximum: 64px,\n    minimum: 48px,\n  ),\n) !default;\n$two-line-item-tall-density-config: (\n  height: (\n    default: 72px,\n    maximum: 72px,\n    minimum: 56px,\n  ),\n) !default;\n$two-line-item-taller-density-config: (\n  height: (\n    default: 88px,\n    maximum: 88px,\n    minimum: 72px,\n  ),\n) !default;\n$three-line-item-density-config: (\n  height: (\n    default: 88px,\n    maximum: 88px,\n    minimum: 56px,\n  ),\n) !default;\n"
  },
  {
    "path": "packages/mdc-list/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-list/_list-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern -- Selector '.mdc-*' should only be\n// used in this project.\n\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:map';\n@use '@material/tokens/resolvers';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/validate';\n@use '@material/typography/typography';\n@use './evolution-mixins' as list;\n@use 'sass:meta';\n\n$custom-property-prefix: 'list';\n$light-theme: (\n  list-item-container-color: null,\n  list-item-container-shape: null,\n  list-item-container-height: null,\n  list-item-one-line-container-height: null,\n  list-item-two-line-container-height: null,\n  list-item-three-line-container-height: null,\n  list-item-container-elevation: null,\n  list-item-label-text-color: null,\n  list-item-label-text-font: null,\n  list-item-label-text-line-height: null,\n  list-item-label-text-size: null,\n  list-item-label-text-tracking: null,\n  list-item-label-text-weight: null,\n  list-item-supporting-text-color: null,\n  list-item-supporting-text-font: null,\n  list-item-supporting-text-line-height: null,\n  list-item-supporting-text-size: null,\n  list-item-supporting-text-tracking: null,\n  list-item-supporting-text-weight: null,\n  list-item-overline-color: null,\n  list-item-overline-font: null,\n  list-item-overline-line-height: null,\n  list-item-overline-size: null,\n  list-item-overline-tracking: null,\n  list-item-overline-weight: null,\n  list-item-leading-icon-color: null,\n  list-item-leading-icon-size: null,\n  list-item-leading-video-shape: null,\n  list-item-leading-video-width: null,\n  list-item-leading-video-height: null,\n  list-item-leading-avatar-color: null,\n  list-item-leading-avatar-shape: null,\n  list-item-leading-avatar-size: null,\n  list-item-leading-avatar-label-color: null,\n  list-item-leading-avatar-label-font: null,\n  list-item-leading-avatar-label-line-height: null,\n  list-item-leading-avatar-label-size: null,\n  list-item-leading-avatar-label-tracking: null,\n  list-item-leading-avatar-label-weight: null,\n  list-item-leading-image-width: null,\n  list-item-leading-image-height: null,\n  list-item-leading-image-shape: null,\n  list-item-trailing-supporting-text-color: null,\n  list-item-trailing-supporting-text-font: null,\n  list-item-trailing-supporting-text-line-height: null,\n  list-item-trailing-supporting-text-size: null,\n  list-item-trailing-supporting-text-tracking: null,\n  list-item-trailing-supporting-text-weight: null,\n  list-item-trailing-icon-color: null,\n  list-item-trailing-icon-size: null,\n  list-item-selected-trailing-icon-color: null,\n  list-item-unselected-trailing-icon-color: null,\n  divider-color: null,\n  divider-height: null,\n  list-item-disabled-label-text-color: null,\n  list-item-disabled-label-text-opacity: null,\n  list-item-disabled-state-layer-color: null,\n  list-item-disabled-state-layer-opacity: null,\n  list-item-disabled-leading-icon-color: null,\n  list-item-disabled-leading-icon-opacity: null,\n  list-item-disabled-trailing-icon-color: null,\n  list-item-disabled-trailing-icon-opacity: null,\n  list-item-hover-state-layer-color: null,\n  list-item-hover-state-layer-opacity: null,\n  list-item-hover-label-text-color: null,\n  list-item-hover-leading-icon-color: null,\n  list-item-hover-trailing-icon-color: null,\n  list-item-focus-label-text-color: null,\n  list-item-focus-state-layer-color: null,\n  list-item-focus-state-layer-opacity: null,\n  list-item-selected-container-color: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-elevation(\n      $theme,\n      map.get($resolvers, elevation),\n      list-item-container-elevation\n    )\n  );\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-typography($theme, map.get($resolvers, typography))\n  );\n  @return $theme;\n}\n\n@function _resolve-theme-elevation($theme, $resolver, $keys...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $key in $keys {\n    // Resolve the value for each state key.\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: map.get($theme, $key),\n      $shadow-color: map.get($theme, container-shadow-color)\n    );\n\n    // Update the theme with the resolved value.\n    $theme: map.set($theme, $key, $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@function _resolve-theme-typography($theme, $resolver) {\n  @return typography.resolve-theme(\n    $theme,\n    $resolver,\n    list-item-label-text,\n    list-item-supporting-text,\n    list-item-overline,\n    list-item-leading-avatar-label,\n    list-item-trailing-supporting-text\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme-styles($light-theme, $theme, $require-all: false);\n  $theme: _resolve-theme($theme, $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include _list-item-container-color(\n    map.get($theme, list-item-container-color)\n  );\n  @include _list-item-selected-container-color(\n    map.get($theme, list-item-selected-container-color)\n  );\n  @include _list-item-container-shape(\n    map.get($theme, list-item-container-shape)\n  );\n  @include _list-item-container-height(\n    map.get($theme, list-item-container-height),\n    map.get($theme, list-item-one-line-container-height),\n    map.get($theme, list-item-two-line-container-height),\n    map.get($theme, list-item-three-line-container-height)\n  );\n  @include _list-item-label-text-color(\n    map.get($theme, list-item-label-text-color)\n  );\n  @include _list-item-label-text-typography(\n    (\n      font: map.get($theme, list-item-label-text-font),\n      line-height: map.get($theme, list-item-label-text-line-height),\n      size: map.get($theme, list-item-label-text-size),\n      tracking: map.get($theme, list-item-label-text-tracking),\n      weight: map.get($theme, list-item-label-text-weight),\n    )\n  );\n  @include _list-item-supporting-text-color(\n    map.get($theme, list-item-supporting-text-color)\n  );\n  @include _list-item-supporting-text-typography(\n    (\n      font: map.get($theme, list-item-supporting-text-font),\n      line-height: map.get($theme, list-item-supporting-text-line-height),\n      size: map.get($theme, list-item-supporting-text-size),\n      tracking: map.get($theme, list-item-supporting-text-tracking),\n      weight: map.get($theme, list-item-supporting-text-weight),\n    )\n  );\n  @include _list-item-overline-color(map.get($theme, list-item-overline-color));\n  @include _list-item-overline-typography(\n    (\n      font: map.get($theme, list-item-overline-font),\n      line-height: map.get($theme, list-item-overline-line-height),\n      size: map.get($theme, list-item-overline-size),\n      tracking: map.get($theme, list-item-overline-tracking),\n      weight: map.get($theme, list-item-overline-weight),\n    )\n  );\n  @include _list-item-leading-icon-color(\n    map.get($theme, list-item-leading-icon-color)\n  );\n  @include _list-item-leading-icon-size(\n    map.get($theme, list-item-leading-icon-size)\n  );\n  @include _list-item-leading-video-shape(\n    map.get($theme, list-item-leading-video-shape)\n  );\n  @include _list-item-leading-video-height(\n    map.get($theme, list-item-leading-video-height)\n  );\n  @include _list-item-leading-video-width(\n    map.get($theme, list-item-leading-video-width)\n  );\n  @include _list-item-leading-avatar-color(\n    map.get($theme, list-item-leading-avatar-color)\n  );\n  @include _list-item-leading-avatar-shape(\n    map.get($theme, list-item-leading-avatar-shape)\n  );\n  @include _list-item-leading-avatar-size(\n    map.get($theme, list-item-leading-avatar-size)\n  );\n  @include _list-item-leading-image-width(\n    map.get($theme, list-item-leading-image-width)\n  );\n  @include _list-item-leading-image-height(\n    map.get($theme, list-item-leading-image-height)\n  );\n  @include _list-item-leading-image-shape(\n    map.get($theme, list-item-leading-image-shape)\n  );\n  @include _list-item-trailing-supporting-text-color(\n    map.get($theme, list-item-trailing-supporting-text-color)\n  );\n  @include _list-item-trailing-supporting-text-typography(\n    (\n      font: map.get($theme, list-item-trailing-supporting-text-font),\n      line-height:\n        map.get($theme, list-item-trailing-supporting-text-line-height),\n      size: map.get($theme, list-item-trailing-supporting-text-size),\n      tracking: map.get($theme, list-item-trailing-supporting-text-tracking),\n      weight: map.get($theme, list-item-trailing-supporting-text-weight),\n    )\n  );\n  @include _list-item-trailing-icon-color(\n    map.get($theme, list-item-trailing-icon-color)\n  );\n  @include _list-item-trailing-icon-size(\n    map.get($theme, list-item-trailing-icon-size)\n  );\n  @include _list-item-selected-trailing-icon-color(\n    map.get($theme, list-item-selected-trailing-icon-color)\n  );\n  @include _divider-color(map.get($theme, divider-color));\n  @include _divider-height(map.get($theme, divider-height));\n  @include _list-item-disabled-label-text-color(\n    map.get($theme, list-item-disabled-label-text-color)\n  );\n  @include _list-item-disabled-label-text-opacity(\n    map.get($theme, list-item-disabled-label-text-opacity)\n  );\n  @include _list-item-disabled-state-layer-color(\n    map.get($theme, list-item-disabled-state-layer-color)\n  );\n  @include _list-item-disabled-state-layer-opacity(\n    map.get($theme, list-item-disabled-state-layer-opacity)\n  );\n  @include _list-item-disabled-leading-icon-color(\n    map.get($theme, list-item-disabled-leading-icon-color)\n  );\n  @include _list-item-disabled-leading-icon-opacity(\n    map.get($theme, list-item-disabled-leading-icon-opacity)\n  );\n  @include _list-item-disabled-trailing-icon-color(\n    map.get($theme, list-item-disabled-trailing-icon-color)\n  );\n  @include _list-item-disabled-trailing-icon-opacity(\n    map.get($theme, list-item-disabled-trailing-icon-opacity)\n  );\n  @include _list-item-hover-state-layer-color(\n    map.get($theme, list-item-hover-state-layer-color)\n  );\n  @include _list-item-hover-state-layer-opacity(\n    map.get($theme, list-item-hover-state-layer-opacity)\n  );\n  @include _list-item-hover-label-text-color(\n    map.get($theme, list-item-hover-label-text-color)\n  );\n  @include _list-item-hover-leading-icon-color(\n    map.get($theme, list-item-hover-leading-icon-color)\n  );\n  @include _list-item-hover-trailing-icon-color(\n    map.get($theme, list-item-hover-trailing-icon-color)\n  );\n  @include _list-item-focus-state-layer-color(\n    map.get($theme, list-item-focus-state-layer-color)\n  );\n  @include _list-item-focus-state-layer-opacity(\n    map.get($theme, list-item-focus-state-layer-opacity)\n  );\n  @include _list-item-focus-label-text-color(\n    map.get($theme, list-item-focus-label-text-color)\n  );\n}\n\n@mixin _list-item-container-color($color) {\n  .mdc-list-item {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin _list-item-selected-container-color($color) {\n  .mdc-list-item.mdc-list-item--selected {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin _list-item-container-shape($shape) {\n  @include list.one-line-list-radius($shape);\n  @include list.two-line-list-radius($shape);\n  @include list.three-line-list-radius($shape);\n}\n\n@mixin _list-item-container-height(\n  $height,\n  $one-line-height,\n  $two-line-height,\n  $three-line-height\n) {\n  .mdc-list-item {\n    @include list.list-item-height($height);\n\n    &.mdc-list-item--with-one-line {\n      @include theme.property(height, $one-line-height);\n    }\n    &.mdc-list-item--with-two-lines {\n      @include theme.property(height, $two-line-height);\n    }\n    &.mdc-list-item--with-three-lines {\n      @include theme.property(height, $three-line-height);\n    }\n  }\n}\n\n@mixin _list-item-label-text-color($color) {\n  @include list.list-primary-text-ink-color($color);\n}\n\n@mixin _list-item-label-text-typography($typography) {\n  .mdc-list-item__primary-text {\n    @include typography.theme-styles($typography);\n  }\n}\n\n@mixin _list-item-supporting-text-color($color) {\n  @include list.list-secondary-text-ink-color($color);\n}\n\n@mixin _list-item-supporting-text-typography($typography) {\n  .mdc-list-item__secondary-text {\n    @include typography.theme-styles($typography);\n  }\n}\n\n@mixin _list-item-overline-color($color) {\n  @include list.list-overline-text-ink-color($color);\n}\n\n@mixin _list-item-overline-typography($typography) {\n  .mdc-list-item__overline-text {\n    @include typography.theme-styles($typography);\n  }\n}\n\n@mixin _list-item-leading-icon-color($color) {\n  .mdc-list-item--with-leading-icon .mdc-list-item__start {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-leading-icon-size($size) {\n  .mdc-list-item--with-leading-icon {\n    @include list.item-start-size($size);\n\n    .mdc-list-item__start > i {\n      @include theme.property('font-size', $size);\n    }\n    .mdc-list-item__start .mdc-list-item__icon {\n      @include theme.property('font-size', $size);\n      @include theme.property('width', $size);\n      @include theme.property('height', $size);\n    }\n    .mdc-list-item__start .mdc-list-item__icon,\n    .mdc-list-item__start\n      .mdc-list-item__icon\n      > .materialdesignWizIconSvgsSvgIcon {\n      display: block;\n    }\n  }\n}\n\n@mixin _list-item-leading-video-shape($shape) {\n  .mdc-list-item--with-leading-video .mdc-list-item__start {\n    @include theme.property('border-radius', $shape);\n\n    @if $shape {\n      overflow: hidden;\n    }\n  }\n}\n\n@mixin _list-item-leading-video-height($height) {\n  .mdc-list-item--with-leading-video .mdc-list-item__start {\n    @include theme.property('height', $height);\n  }\n}\n\n@mixin _list-item-leading-video-width($width) {\n  .mdc-list-item--with-leading-video .mdc-list-item__start {\n    @include theme.property('width', $width);\n  }\n}\n\n@mixin _list-item-leading-avatar-color($color) {\n  .mdc-list-item--with-leading-avatar .mdc-list-item__start > img {\n    @include theme.property('background-color', $color);\n  }\n}\n\n@mixin _list-item-leading-avatar-shape($shape) {\n  .mdc-list-item--with-leading-avatar .mdc-list-item__start > img {\n    @include theme.property('border-radius', $shape);\n  }\n}\n\n@mixin _list-item-leading-avatar-size($size) {\n  .mdc-list-item--with-leading-avatar {\n    @include list.item-start-size($size);\n  }\n}\n\n@mixin _list-item-leading-image-height($height) {\n  .mdc-list-item--with-leading-image .mdc-list-item__start {\n    @include theme.property('height', $height);\n  }\n}\n\n@mixin _list-item-leading-image-width($width) {\n  .mdc-list-item--with-leading-image .mdc-list-item__start {\n    @include theme.property('width', $width);\n  }\n}\n\n@mixin _list-item-leading-image-shape($shape) {\n  .mdc-list-item--with-leading-image .mdc-list-item__start {\n    > img {\n      @include theme.property('border-radius', $shape);\n    }\n\n    @if $shape {\n      overflow: hidden;\n    }\n  }\n}\n\n@mixin _list-item-trailing-supporting-text-color($color) {\n  .mdc-list-item {\n    @include list.item-meta-text-ink-color($color);\n  }\n}\n\n@mixin _list-item-trailing-supporting-text-typography($typography) {\n  .mdc-list-item--with-trailing-meta .mdc-list-item__end {\n    @include typography.theme-styles($typography);\n  }\n}\n\n@mixin _list-item-trailing-icon-color($color) {\n  .mdc-list-item--with-trailing-icon .mdc-list-item__end {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-selected-trailing-icon-color($color) {\n  .mdc-list-item--selected.mdc-list-item--with-trailing-icon\n    .mdc-list-item__end {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-trailing-icon-size($size) {\n  .mdc-list-item--with-trailing-icon {\n    @include list.item-end-size($size);\n\n    .mdc-list-item__end > i {\n      @include theme.property('font-size', $size);\n    }\n    .mdc-list-item__end .mdc-list-item__icon {\n      @include theme.property('font-size', $size);\n      @include theme.property('width', $size);\n      @include theme.property('height', $size);\n    }\n    .mdc-list-item__end .mdc-list-item__icon,\n    .mdc-list-item__end\n      .mdc-list-item__icon\n      > .materialdesignWizIconSvgsSvgIcon {\n      display: block;\n    }\n  }\n}\n\n@mixin _divider-color($color) {\n  @include list.divider-color($color);\n}\n\n@mixin _divider-height($height) {\n  @include list.divider-height($height);\n}\n\n@mixin _list-item-disabled-label-text-color($color) {\n  .mdc-list-item--disabled {\n    @include list.list-primary-text-ink-color($color);\n  }\n}\n\n@mixin _list-item-disabled-label-text-opacity($opacity) {\n  // Reset opacity on the wrapper block elements and apply to specific inner\n  // block elements below.\n  @if $opacity {\n    @include list.list-disabled-opacity(1);\n  }\n\n  .mdc-list-item--disabled {\n    .mdc-list-item__primary-text,\n    .mdc-list-item__secondary-text,\n    .mdc-list-item__overline-text {\n      @include theme.property('opacity', $opacity);\n    }\n  }\n}\n\n@mixin _list-item-disabled-state-layer-color($color) {\n  .mdc-list-item--disabled {\n    &:hover,\n    &:focus {\n      #{list.$ripple-target}::before {\n        @include theme.property('background-color', $color);\n      }\n    }\n  }\n}\n\n@mixin _list-item-disabled-state-layer-opacity($opacity) {\n  .mdc-list-item--disabled {\n    &:hover,\n    &:focus {\n      #{list.$ripple-target}::before {\n        @include theme.property('opacity', $opacity);\n      }\n    }\n  }\n}\n\n@mixin _list-item-disabled-leading-icon-color($color) {\n  .mdc-list-item--disabled.mdc-list-item--with-leading-icon\n    .mdc-list-item__start {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-disabled-leading-icon-opacity($opacity) {\n  .mdc-list-item--disabled.mdc-list-item--with-leading-icon\n    .mdc-list-item__start {\n    @include theme.property('opacity', $opacity);\n  }\n}\n\n@mixin _list-item-disabled-trailing-icon-color($color) {\n  .mdc-list-item--disabled.mdc-list-item--with-trailing-icon\n    .mdc-list-item__end {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-disabled-trailing-icon-opacity($opacity) {\n  .mdc-list-item--disabled.mdc-list-item--with-trailing-icon\n    .mdc-list-item__end {\n    @include theme.property('opacity', $opacity);\n  }\n}\n\n@mixin _list-item-hover-state-layer-color($color) {\n  .mdc-list-item:not(.mdc-list-item--disabled):hover\n    #{list.$ripple-target}::before {\n    @include theme.property('background-color', $color);\n  }\n}\n\n@mixin _list-item-hover-state-layer-opacity($opacity) {\n  .mdc-list-item:not(.mdc-list-item--disabled):hover\n    #{list.$ripple-target}::before {\n    @include theme.property('opacity', $opacity);\n  }\n}\n\n@mixin _list-item-hover-label-text-color($color) {\n  .mdc-list-item:hover {\n    @include list.list-primary-text-ink-color($color);\n  }\n}\n\n@mixin _list-item-focus-label-text-color($color) {\n  .mdc-list-item:focus {\n    @include list.list-primary-text-ink-color($color);\n  }\n}\n\n@mixin _list-item-hover-leading-icon-color($color) {\n  .mdc-list-item--with-leading-icon:hover .mdc-list-item__start {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-hover-trailing-icon-color($color) {\n  .mdc-list-item--with-trailing-icon:hover .mdc-list-item__end {\n    @include theme.property('color', $color);\n  }\n}\n\n@mixin _list-item-focus-state-layer-color($color) {\n  .mdc-list-item:not(.mdc-list-item--disabled):focus\n    #{list.$ripple-target}::before {\n    @include theme.property('background-color', $color);\n  }\n}\n\n@mixin _list-item-focus-state-layer-opacity($opacity) {\n  .mdc-list-item:not(.mdc-list-item--disabled):focus\n    #{list.$ripple-target}::before {\n    @include theme.property('opacity', $opacity);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/_list.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Internal stylesheet for material list component. Selector '.mdc-*' should\n// only be used in this project.\n\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/ripple/ripple';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use './evolution-variables' as variables;\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n\n$ripple-target: variables.$ripple-target;\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _high-contrast-mode($query: $query);\n  .mdc-list {\n    @include _static-list-base($query: $query);\n  }\n\n  .mdc-list-item__wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      display: block;\n    }\n  }\n\n  .mdc-list-item {\n    @include item-base($query: $query);\n    @include _list-item-baseline-height($query: $query);\n    @include one-line-item-start-alignment(center, $query: $query);\n    @include two-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: 16px,\n      $query: $query\n    );\n    @include three-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: 16px,\n      $query: $query\n    );\n\n    @include one-line-item-end-alignment(center, $query: $query);\n    @include two-line-item-end-alignment(center, $query: $query);\n    @include three-line-item-end-alignment(\n      $alignment: flex-start,\n      $offset: 16px,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      align-items: stretch;\n      cursor: pointer;\n    }\n\n    // Reset mouse cursor for disabled and non-interactive items.\n    &.mdc-list-item--disabled,\n    &.mdc-list-item--non-interactive {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: auto;\n      }\n    }\n\n    // TODO(b/254711887): Likely need to update this to adhere to a HCM focus\n    // ring spec.\n    // For components using aria-activedescendant, the focus pseudoclass is\n    // never applied and use `.mdc-ripple-upgraded--background-focused` instead.\n    &:not(.mdc-list-item--selected):focus::before,\n    &.mdc-ripple-upgraded--background-focused::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n\n    &.mdc-list-item--selected::before {\n      @include dom-mixins.transparent-border(\n        $border-width: 3px,\n        $border-style: double,\n        $query: $query\n      );\n    }\n\n    &.mdc-list-item--selected:focus::before {\n      @include dom-mixins.transparent-border(\n        $border-width: 3px,\n        $query: $query\n      );\n    }\n  }\n\n  // stylelint-disable selector-max-type --\n  // Override anchor tag styles for the use-case of a list being used for navigation\n  a.mdc-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  .mdc-list-item__start {\n    @include feature-targeting.targets($feat-structure) {\n      fill: currentColor;\n      flex-shrink: 0;\n      pointer-events: none;\n    }\n  }\n\n  .mdc-list-item__end {\n    @include feature-targeting.targets($feat-structure) {\n      flex-shrink: 0;\n      pointer-events: none;\n    }\n  }\n\n  .mdc-list-item__content {\n    @include typography.overflow-ellipsis($query);\n    @include feature-targeting.targets($feat-structure) {\n      align-self: center;\n      flex: 1;\n      pointer-events: none;\n    }\n\n    .mdc-list-item--with-two-lines &,\n    .mdc-list-item--with-three-lines & {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: stretch;\n      }\n    }\n\n    // Disable interaction on label elements that may automatically\n    // toggle corresponding checkbox / radio input.\n    &[for] {\n      @include feature-targeting.targets($feat-structure) {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .mdc-list-item__primary-text {\n    @include typography.overflow-ellipsis($query);\n\n    .mdc-list-item--with-two-lines &,\n    .mdc-list-item--with-three-lines & {\n      @include typography.text-baseline(\n        $top: 28px,\n        $bottom: 20px,\n        $query: $query\n      );\n    }\n  }\n\n  .mdc-list-item__secondary-text {\n    @include typography.overflow-ellipsis($query);\n    @include typography.text-baseline(\n      $top: 20px,\n      $display: block,\n      $query: $query\n    );\n\n    .mdc-list-item--with-three-lines & {\n      @include feature-targeting.targets($feat-structure) {\n        white-space: normal;\n        line-height: 20px;\n      }\n    }\n\n    .mdc-list-item--with-overline & {\n      @include feature-targeting.targets($feat-structure) {\n        white-space: nowrap;\n        line-height: auto;\n      }\n    }\n  }\n\n  .mdc-list-item__overline-text {\n    @include typography.overflow-ellipsis($query);\n\n    .mdc-list-item--with-two-lines & {\n      @include typography.text-baseline(\n        $top: 24px,\n        $bottom: 20px,\n        $query: $query\n      );\n    }\n\n    .mdc-list-item--with-three-lines & {\n      @include typography.text-baseline(\n        $top: 28px,\n        $bottom: 20px,\n        $query: $query\n      );\n    }\n  }\n\n  .mdc-list-item--with-leading-avatar {\n    @include item-start-spacing(16px, $query: $query);\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n\n    .mdc-list-item__start {\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .mdc-list-item--with-leading-icon {\n    @include item-start-spacing(\n      $leading: 16px,\n      $trailing: 32px,\n      $query: $query\n    );\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n  }\n\n  .mdc-list-item--with-leading-thumbnail {\n    @include item-start-spacing(16px, $query: $query);\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n  }\n\n  .mdc-list-item--with-leading-image {\n    @include item-start-spacing(16px, $query: $query);\n    @include _two-line-item-text-baseline($query: $query);\n    @include _one-line-item-taller-density(\n      variables.$one-line-item-density-scale,\n      $query: $query\n    );\n    @include _two-line-item-tall-density(\n      variables.$two-line-item-density-scale,\n      $query: $query\n    );\n  }\n\n  .mdc-list-item--with-leading-video {\n    @include two-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: 8px,\n      $query: $query\n    );\n    @include item-start-spacing($leading: 0, $trailing: 16px, $query: $query);\n    @include _two-line-item-text-baseline($query: $query);\n    @include _one-line-item-taller-density(\n      variables.$one-line-item-density-scale,\n      $query: $query\n    );\n    @include _two-line-item-tall-density(\n      variables.$two-line-item-density-scale,\n      $query: $query\n    );\n  }\n\n  .mdc-list-item--with-leading-checkbox {\n    $leading: absorb-overflow(16px, $actual: 40px, $available: 24px);\n    $trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);\n    $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n    @include item-start-spacing($leading, $trailing, $query: $query);\n    @include two-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: $top,\n      $query: $query\n    );\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n  }\n\n  .mdc-list-item--with-leading-radio {\n    $leading: absorb-overflow(16px, $actual: 40px, $available: 24px);\n    $trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);\n    $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n    @include item-start-spacing($leading, $trailing, $query: $query);\n    @include two-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: $top,\n      $query: $query\n    );\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n  }\n\n  .mdc-list-item--with-leading-switch {\n    @include item-start-spacing(16px, $query: $query);\n    @include two-line-item-start-alignment(\n      $alignment: flex-start,\n      $offset: 16px,\n      $query: $query\n    );\n    @include _two-line-item-text-baseline($query: $query);\n    @include _tall-list-item-baseline-height($query: $query);\n  }\n\n  .mdc-list-item--with-trailing-icon {\n    @include item-end-spacing(16px, $query: $query);\n  }\n\n  .mdc-list-item--with-trailing-meta {\n    @include two-line-item-end-alignment(flex-start, $query: $query);\n    @include three-line-item-end-alignment(flex-start, $query: $query);\n    @include item-end-spacing($leading: 28px, $trailing: 16px, $query: $query);\n    @include _multi-line-item-end-text-baseline($query: $query);\n\n    .mdc-list-item__end {\n      @include typography.typography(caption, $query);\n    }\n  }\n\n  .mdc-list-item--with-trailing-checkbox {\n    $leading: absorb-overflow(32px, $actual: 40px, $available: 24px);\n    $trailing: absorb-overflow(16px, $actual: 40px, $available: 24px);\n    $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n    @include item-end-spacing($leading, $trailing, $query: $query);\n    @include three-line-item-end-alignment(\n      $alignment: flex-start,\n      $offset: $top,\n      $query: $query\n    );\n  }\n\n  .mdc-list-item--with-trailing-radio {\n    $leading: absorb-overflow(32px, $actual: 40px, $available: 24px);\n    $trailing: absorb-overflow(16px, $actual: 40px, $available: 24px);\n    $top: absorb-overflow(16px, $actual: 40px, $available: 24px);\n\n    @include item-end-spacing($leading, $trailing, $query: $query);\n    @include three-line-item-end-alignment(\n      $alignment: flex-start,\n      $offset: $top,\n      $query: $query\n    );\n  }\n\n  .mdc-list-item--with-trailing-switch {\n    @include item-end-spacing(16px, $query: $query);\n    @include three-line-item-end-alignment(\n      $alignment: flex-start,\n      $offset: 16px,\n      $query: $query\n    );\n  }\n\n  .mdc-list-item--with-overline {\n    @include _two-line-item-primary-text-baseline(20px, 0px, $query: $query);\n    @include _three-line-item-primary-baseline(20px, 0px, $query: $query);\n  }\n\n  // This must be specified last to ensure that RTL padding takes priority over\n  // LTR padding in the cascade.\n  .mdc-list-item {\n    @include item-spacing(16px, $query: $query);\n  }\n\n  //\n  // Grouping\n  //\n  .mdc-list-group {\n    @include feature-targeting.targets($feat-structure) {\n      // Cancel top/bottom padding on individual lists within group\n      .mdc-deprecated-list {\n        padding: 0;\n      }\n    }\n  }\n  .mdc-list-group__subheader {\n    @include _list-group-subheader-margin($query: $query);\n  }\n\n  //\n  // Dividers\n  //\n\n  .mdc-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n\n      // Allows the use of padding to specify leading and trailing insets\n      // independently.\n      background-clip: content-box;\n    }\n  }\n\n  // The base inset variant corresponds to the item's padding.\n  .mdc-list-divider,\n  .mdc-list-divider--with-leading-text,\n  .mdc-list-divider--with-leading-icon,\n  .mdc-list-divider--with-leading-image,\n  .mdc-list-divider--with-leading-thumbnail,\n  .mdc-list-divider--with-leading-avatar,\n  .mdc-list-divider--with-leading-checkbox,\n  .mdc-list-divider--with-leading-switch,\n  .mdc-list-divider--with-leading-radio {\n    @include divider-leading-inset(16px, $query: $query);\n    @include divider-trailing-inset(16px, $query: $query);\n  }\n\n  .mdc-list-divider--with-leading-video {\n    @include divider-leading-inset(0px, $query: $query);\n  }\n\n  // This is needed to ensure that default padding isn't applied in RTL locales.\n  .mdc-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.rtl {\n        padding: 0;\n      }\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include with-ripple($query);\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  //\n  // Items\n  //\n\n  @include list-primary-text-ink-color(text-primary-on-background, $query);\n  @include list-secondary-text-ink-color(text-secondary-on-background, $query);\n  @include list-overline-text-ink-color(text-hint-on-background, $query);\n  @include list-icon-fill-color(transparent, $query);\n  @include list-icon-ink-color(text-icon-on-background, $query);\n  @include list-meta-text-ink-color(text-hint-on-background, $query);\n  @include list-disabled-opacity(variables.$content-disabled-opacity, $query);\n  @include list-disabled-ink-color(variables.$content-disabled-color, $query);\n  @include list-selected-ink-color(variables.$content-selected-color, $query);\n\n  @include group-subheader-ink-color(text-primary-on-background, $query);\n\n  @include _high-contrast-mode-border-color($query);\n\n  .mdc-list {\n    @include _typography-list-base($query: $query);\n  }\n\n  .mdc-list-item__primary-text {\n    @include typography.typography(subtitle1, $query);\n  }\n\n  .mdc-list-item__secondary-text {\n    @include typography.typography(body2, $query);\n  }\n\n  .mdc-list-item__overline-text {\n    @include typography.typography(overline, $query);\n  }\n\n  .mdc-list-item--with-leading-avatar {\n    @include item-start-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-icon {\n    @include item-start-size(24px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-thumbnail {\n    @include item-start-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-image {\n    @include item-start-size(56px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-video {\n    @include item-start-size($width: 100px, $height: 56px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-checkbox {\n    @include item-start-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-radio {\n    @include item-start-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-leading-switch {\n    @include item-start-size($width: 36px, $height: 20px, $query: $query);\n  }\n\n  .mdc-list-item--with-trailing-icon {\n    @include item-end-size(24px, $query: $query);\n  }\n\n  .mdc-list-item--with-trailing-meta {\n    .mdc-list-item__end {\n      @include typography.typography(caption, $query);\n    }\n  }\n\n  .mdc-list-item--with-trailing-checkbox {\n    @include item-end-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-trailing-radio {\n    @include item-end-size(40px, $query: $query);\n  }\n\n  .mdc-list-item--with-trailing-switch {\n    @include item-end-size($width: 36px, $height: 20px, $query: $query);\n  }\n\n  .mdc-list-group__subheader {\n    @include typography.typography(subtitle1, $query);\n  }\n\n  //\n  // Dividers\n  //\n\n  $divider-color: if(\n    theme-color.tone(theme-color.$background) == 'dark',\n    variables.$divider-color-on-dark-bg,\n    variables.$divider-color-on-light-bg\n  );\n\n  @include divider-color($divider-color, $query: $query);\n  @include divider-height(1px, $query: $query);\n  @include static-styles($query: $query);\n} // end of without-ripple\n\n@mixin with-ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  :not(.mdc-list-item--disabled).mdc-list-item {\n    @include _item-interactive-ripple($query);\n  }\n}\n\n///\n/// Adjusts an offset (i.e., margin) to accomodate contents that are larger than\n/// the space allocated by the specification.\n///\n/// For instance, the specification provides 24x24dp for a checkbox with a 16dp\n/// margin. However, checkboxes are actually 40x40dp. To ensure that the\n/// checkbox is positioned correctly, the margin is reduced by 8dp to reflect\n/// that the margin is already \"baked into\" the checkbox.\n///\n/// Concretely, 40dp - 24dp = 16dp. Assuming that the control is symmetrical,\n/// half of the overflow (8dp) is on the leading side and half on the trailing\n/// side. Therefore, the leading and trailing margins are reduced by 8dp.\n///\n/// Note: this might be more useful if it's added into the leading/trailing\n/// margin mixins as a parameter.\n///\n@function absorb-overflow($offset, $actual, $available, $symmetric: true) {\n  @if $actual <= $available {\n    @return $offset;\n  }\n  $overflow: $actual - $available;\n  @return $offset - math.div($overflow, if($symmetric, 2, 1));\n}\n\n@mixin one-line-item-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-one-line {\n    @include feature-targeting.targets($feat-structure) {\n      height: $height;\n    }\n  }\n}\n\n@mixin two-line-item-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-two-lines {\n    @include feature-targeting.targets($feat-structure) {\n      height: $height;\n    }\n  }\n}\n@mixin three-line-item-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-three-lines {\n    @include feature-targeting.targets($feat-structure) {\n      height: $height;\n    }\n  }\n}\n\n@mixin list-item-height($height) {\n  &.mdc-list-item--with-one-line,\n  &.mdc-list-item--with-two-lines,\n  &.mdc-list-item--with-three-lines {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin item-spacing(\n  $leading,\n  $trailing: $leading,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(padding, $leading, $trailing);\n  }\n}\n\n@mixin one-line-item-start-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-one-line {\n    .mdc-list-item__start {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin two-line-item-start-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-two-lines {\n    .mdc-list-item__start {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin three-line-item-start-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-three-lines {\n    .mdc-list-item__start {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin one-line-item-end-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-one-line {\n    .mdc-list-item__end {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin two-line-item-end-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-two-lines {\n    .mdc-list-item__end {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin three-line-item-end-alignment(\n  $alignment,\n  $offset: 0,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-item--with-three-lines {\n    .mdc-list-item__end {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: $alignment;\n        margin-top: $offset;\n      }\n    }\n  }\n}\n\n@mixin item-start-spacing(\n  $leading,\n  $trailing: $leading,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    // Extra specificity needed to override default customizations.\n    &.mdc-list-item {\n      // We rely on auto to avoid clobbering the opposite padding.\n      @include rtl.reflexive-property(padding, 0, auto);\n    }\n\n    .mdc-list-item__start {\n      @include rtl.reflexive-property(margin, $leading, $trailing);\n    }\n  }\n}\n\n@mixin item-end-spacing(\n  $leading,\n  $trailing: $leading,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    // Extra specificity needed to override default customizations.\n    &.mdc-list-item {\n      // We rely on auto to avoid clobbering the opposite padding.\n      @include rtl.reflexive-property(padding, auto, 0);\n    }\n\n    .mdc-list-item__end {\n      @include rtl.reflexive-property(margin, $leading, $trailing);\n    }\n  }\n}\n\n@mixin item-start-size(\n  $width,\n  $height: $width,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-list-item__start {\n      @include theme.property(width, $width);\n      @include theme.property(height, $height);\n    }\n  }\n}\n\n@mixin item-end-size($width, $height: $width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-list-item__end {\n      @include theme.property(width, $width);\n      @include theme.property(height, $height);\n    }\n  }\n}\n\n@mixin list-item-selected-container-color($color) {\n  &.mdc-list-item.mdc-list-item--selected {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin list-primary-text-typography($typography-theme) {\n  .mdc-list-item__primary-text {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin list-primary-text-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item__content,\n  .mdc-list-item__primary-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin list-secondary-text-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item__secondary-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin list-secondary-text-typography($typography-theme) {\n  .mdc-list-item__secondary-text {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin list-overline-text-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item__overline-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin list-meta-text-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item__end {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin list-icon-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--with-leading-icon .mdc-list-item__start,\n  .mdc-list-item--with-trailing-icon .mdc-list-item__end {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin list-icon-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--with-leading-icon .mdc-list-item__start,\n  .mdc-list-item--with-trailing-icon .mdc-list-item__end {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin list-selected-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--selected,\n  .mdc-list-item--activated {\n    @include list-primary-text-ink-color($color, $query);\n    @include _item-icon-ink-color($color, $leading-only: true, $query: $query);\n  }\n}\n\n@mixin list-selected-meta-text-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--selected,\n  .mdc-list-item--activated {\n    @include list-meta-text-ink-color($color, $query);\n  }\n}\n\n@mixin list-disabled-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--disabled {\n    @include list-primary-text-ink-color($color, $query);\n    @include list-secondary-text-ink-color($color, $query);\n    @include list-overline-text-ink-color($color, $query);\n    @include _item-icon-ink-color($color, $query: $query);\n    @include item-meta-text-ink-color($color, $query);\n  }\n}\n\n@mixin list-disabled-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-item--disabled {\n    .mdc-list-item__start,\n    .mdc-list-item__content,\n    .mdc-list-item__end {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(opacity, $opacity);\n      }\n    }\n  }\n}\n\n@mixin group-subheader-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-group__subheader {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Sets shape radius (rounded) to single line list variant.\n///\n/// @param {Number | List<Number>} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.\n///     Set to `50%` for rounded shape.\n/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.\n/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.\n///     Defaults to `$mdc-deprecated-list-single-line-density-scale`.\n///\n/// @access public\n///\n@mixin one-line-list-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: variables.$one-line-item-density-scale,\n  $query: feature-targeting.all()\n) {\n  .mdc-list-item--with-one-line {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height:\n        density-functions.prop-value(\n          $density-config: variables.$one-line-item-density-config,\n          $density-scale: $density-scale,\n          $property-name: height\n        ),\n      $query: $query\n    );\n\n    &.mdc-list-item--with-leading-avatar,\n    &.mdc-list-item--with-leading-icon,\n    &.mdc-list-item--with-leading-thumbnail,\n    &.mdc-list-item--with-leading-checkbox,\n    &.mdc-list-item--with-leading-radio,\n    &.mdc-list-item--with-leading-switch {\n      @include shape-mixins.radius(\n        $radius,\n        $rtl-reflexive,\n        $component-height:\n          density-functions.prop-value(\n            $density-config: variables.$one-line-item-tall-density-config,\n            $density-scale: $density-scale,\n            $property-name: height\n          ),\n        $query: $query\n      );\n    }\n\n    &.mdc-list-item--with-leading-image,\n    &.mdc-list-item--with-leading-video {\n      @include shape-mixins.radius(\n        $radius,\n        $rtl-reflexive,\n        $component-height:\n          density-functions.prop-value(\n            $density-config: variables.$one-line-item-taller-density-config,\n            $density-scale: $density-scale,\n            $property-name: height\n          ),\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin two-line-list-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: variables.$two-line-item-density-scale,\n  $query: feature-targeting.all()\n) {\n  .mdc-list-item--with-two-lines {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height:\n        density-functions.prop-value(\n          $density-config: variables.$two-line-item-density-config,\n          $density-scale: $density-scale,\n          $property-name: height\n        ),\n      $query: $query\n    );\n\n    &.mdc-list-item--with-leading-avatar,\n    &.mdc-list-item--with-leading-icon,\n    &.mdc-list-item--with-leading-thumbnail,\n    &.mdc-list-item--with-leading-checkbox,\n    &.mdc-list-item--with-leading-radio,\n    &.mdc-list-item--with-leading-switch,\n    &.mdc-list-item--with-leading-image,\n    &.mdc-list-item--with-leading-video {\n      @include shape-mixins.radius(\n        $radius,\n        $rtl-reflexive,\n        $component-height:\n          density-functions.prop-value(\n            $density-config: variables.$two-line-item-tall-density-config,\n            $density-scale: $density-scale,\n            $property-name: height\n          ),\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin three-line-list-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: variables.$three-line-item-density-scale,\n  $query: feature-targeting.all()\n) {\n  .mdc-list-item--with-three-lines {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height:\n        density-functions.prop-value(\n          $density-config: variables.$three-line-item-density-config,\n          $density-scale: $density-scale,\n          $property-name: height\n        ),\n      $query: $query\n    );\n  }\n}\n\n@mixin divider-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-list-divider {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin divider-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $height);\n    }\n  }\n}\n\n@mixin divider-leading-inset($inset, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-divider--with-leading-inset {\n    @include feature-targeting.targets($feat-structure) {\n      // We rely on auto to avoid clobbering the opposite padding.\n      @include rtl.reflexive-property(padding, $inset, auto);\n    }\n  }\n}\n\n@mixin divider-trailing-inset($inset, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  &.mdc-list-divider--with-trailing-inset {\n    @include feature-targeting.targets($feat-structure) {\n      // We rely on auto to avoid clobbering the opposite padding.\n      @include rtl.reflexive-property(padding, auto, $inset);\n    }\n  }\n}\n\n// The public density mixins apply the appropriate density styles regardless of\n// the item's start contents.\n@mixin one-line-item-density(\n  $density-scale,\n  $exclude-variants: false,\n  $query: feature-targeting.all()\n) {\n  @include _one-line-item-density($density-scale, $query: $query);\n\n  @if not $exclude-variants {\n    &.mdc-list-item--with-leading-avatar,\n    &.mdc-list-item--with-leading-icon,\n    &.mdc-list-item--with-leading-thumbnail,\n    &.mdc-list-item--with-leading-checkbox,\n    &.mdc-list-item--with-leading-radio,\n    &.mdc-list-item--with-leading-switch {\n      @include _one-line-item-tall-density($density-scale, $query: $query);\n    }\n\n    &.mdc-list-item--with-leading-image,\n    &.mdc-list-item--with-leading-video {\n      @include _one-line-item-taller-density($density-scale, $query: $query);\n    }\n  }\n}\n\n@mixin two-line-item-density($density-scale, $query: feature-targeting.all()) {\n  @include _two-line-item-density($density-scale, $query: $query);\n\n  &.mdc-list-item--with-leading-avatar,\n  &.mdc-list-item--with-leading-icon,\n  &.mdc-list-item--with-leading-thumbnail,\n  &.mdc-list-item--with-leading-checkbox,\n  &.mdc-list-item--with-leading-radio,\n  &.mdc-list-item--with-leading-switch,\n  &.mdc-list-item--with-leading-image,\n  &.mdc-list-item--with-leading-video {\n    @include _two-line-item-tall-density($density-scale, $query: $query);\n  }\n}\n\n@mixin three-line-item-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  @include _three-line-item-density($density-scale, $query: $query);\n}\n\n//\n// Private\n//\n\n// Mixins that apply baseline height for one-, two-, and three- line item\n// container heights. This mixin calls the density mixins so that the styles\n// can be overwritten by future density mixin calls.\n@mixin _list-item-baseline-height($query: feature-targeting.all()) {\n  @include _one-line-item-density(\n    variables.$one-line-item-density-scale,\n    $query: $query\n  );\n\n  @include _two-line-item-density(\n    variables.$two-line-item-density-scale,\n    $query: $query\n  );\n\n  @include _three-line-item-density(\n    variables.$three-line-item-density-scale,\n    $query: $query\n  );\n}\n\n@mixin _tall-list-item-baseline-height($query: feature-targeting.all()) {\n  @include _one-line-item-tall-density(\n    variables.$one-line-item-density-scale,\n    $query: $query\n  );\n  @include _two-line-item-tall-density(\n    variables.$two-line-item-density-scale,\n    $query: $query\n  );\n}\n\n// The private density mixins allow density properties to be overridden\n// individually to avoid increasing specificity.\n\n@mixin _one-line-item-density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$one-line-item-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _one-line-item-tall-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$one-line-item-tall-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _one-line-item-taller-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$one-line-item-taller-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include one-line-item-height($height, $query: $query);\n}\n\n@mixin _two-line-item-density($density-scale, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $height: density-functions.prop-value(\n    $density-config: variables.$two-line-item-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include two-line-item-height($height, $query: $query);\n\n  @if ($density-scale and $density-scale != 0) {\n    &.mdc-list-item--with-two-lines {\n      .mdc-list-item__content {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n      .mdc-list-item__primary-text,\n      .mdc-list-item__secondary-text {\n        margin-top: 0px;\n        margin-bottom: 0px;\n        line-height: 1.4;\n        &::before,\n        &::after {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n@mixin _two-line-item-tall-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$two-line-item-tall-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include two-line-item-height($height, $query: $query);\n}\n\n@mixin _three-line-item-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$three-line-item-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include three-line-item-height($height, $query: $query);\n}\n\n// Split the list-base mixin into two sub-mixins, one holding the\n// structural/static styles (static-list-base) and the other holding styles\n// that are themable (typography-list-base). However, the existing list-base\n// mixin need to be preserved as Angular calls this mixin for autocomplete\n// base styling.\n@mixin _typography-list-base($query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n  @include typography.typography(subtitle1, $query);\n  @include feature-targeting.targets($feat-typography) {\n    // According to the mocks and stickersheet, the line-height is\n    // adjusted to 24px for text content, same as for body1.\n    /* @alternate */\n    line-height: map.get(map.get(typography.$styles, body1), line-height);\n  }\n}\n\n@mixin _static-list-base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin: 0;\n    padding: 8px 0;\n    list-style-type: none;\n\n    &:focus // lint-disable-focus-psuedo-selector\n    {\n      outline: none;\n    }\n  }\n}\n\n@mixin list-base($query: feature-targeting.all()) {\n  @include _typography-list-base($query: $query);\n  @include _static-list-base($query: $query);\n}\n\n@mixin item-base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    overflow: hidden;\n    padding: 0;\n\n    &:focus // lint-disable-focus-psuedo-selector\n    {\n      outline: none;\n    }\n  }\n}\n\n@mixin _item-interactive-ripple($query: feature-targeting.all()) {\n  @include ripple.surface(\n    $ripple-target: variables.$ripple-target,\n    $query: $query\n  );\n  @include ripple.radius-bounded(\n    $ripple-target: variables.$ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states(\n    theme-color.prop-value(on-surface),\n    false,\n    $ripple-target: variables.$ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-activated(\n    primary,\n    false,\n    $ripple-target: variables.$ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-selected(\n    primary,\n    false,\n    $ripple-target: variables.$ripple-target,\n    $query: $query\n  );\n\n  #{variables.$ripple-target} {\n    @include ripple.surface-styles($query: $query);\n    @include ripple.target-common($query: $query);\n  }\n}\n\n@mixin _two-line-item-text-baseline($query: feature-targeting.all()) {\n  @include _two-line-item-primary-text-baseline(32px, 20px, $query: $query);\n  @include _two-line-item-overline-text-baseline(28px, 20px, $query: $query);\n  @include _two-line-item-meta-text-baseline($top: 32px, $query: $query);\n}\n\n@mixin _two-line-item-primary-text-baseline(\n  $top,\n  $bottom,\n  $query: feature-targeting.all()\n) {\n  &.mdc-list-item--with-two-lines {\n    .mdc-list-item__primary-text {\n      @include typography.text-baseline(\n        $top: $top,\n        $bottom: $bottom,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _three-line-item-primary-baseline(\n  $top,\n  $bottom,\n  $query: feature-targeting.all()\n) {\n  &.mdc-list-item--with-three-lines {\n    .mdc-list-item__primary-text {\n      @include typography.text-baseline(\n        $top: $top,\n        $bottom: $bottom,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _two-line-item-overline-text-baseline(\n  $top,\n  $bottom,\n  $query: feature-targeting.all()\n) {\n  &.mdc-list-item--with-two-lines {\n    .mdc-list-item__overline-text {\n      @include typography.text-baseline(\n        $top: $top,\n        $bottom: $bottom,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _three-line-item-overline-baseline(\n  $top,\n  $bottom,\n  $query: feature-targeting.all()\n) {\n  &.mdc-list-item--with-three-lines {\n    .mdc-list-item__overline-text {\n      @include typography.text-baseline(\n        $top: $top,\n        $bottom: $bottom,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _multi-line-item-end-text-baseline($query: feature-targeting.all()) {\n  &.mdc-list-item--with-two-lines {\n    .mdc-list-item__end {\n      @include typography.text-baseline(\n        $display: block,\n        $top: 28px,\n        $query: $query\n      );\n    }\n  }\n\n  &.mdc-list-item--with-three-lines {\n    .mdc-list-item__end {\n      @include typography.text-baseline(\n        $display: block,\n        $top: 28px,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _two-line-item-meta-text-baseline(\n  $top,\n  $query: feature-targeting.all()\n) {\n  &.mdc-list-item--with-two-lines {\n    &.mdc-list-item--with-trailing-meta {\n      .mdc-list-item__end {\n        @include typography.text-baseline(\n          $display: block,\n          $top: $top,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin item-meta-text-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-list-item--with-trailing-meta {\n    .mdc-list-item__end {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin _item-icon-ink-color(\n  $color,\n  $leading-only: false,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-list-item--with-leading-icon {\n    .mdc-list-item__start {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n\n  @if (not $leading-only) {\n    &.mdc-list-item--with-trailing-icon {\n      .mdc-list-item__end {\n        @include feature-targeting.targets($feat-color) {\n          @include theme.property(color, $color);\n        }\n      }\n    }\n  }\n}\n\n@mixin _high-contrast-mode-border-color($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  .mdc-list-divider::after {\n    @include feature-targeting.targets($feat-color) {\n      // Color ensures border is shown, but will be overridden by the browser.\n      @include theme.property(border-bottom-color, white);\n    }\n  }\n}\n\n@mixin _high-contrast-mode($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include dom-mixins.forced-colors-mode {\n    .mdc-list-divider::after {\n      @include feature-targeting.targets($feat-structure) {\n        content: '';\n        display: block;\n        border-bottom-width: 1px;\n        border-bottom-style: solid;\n      }\n    }\n  }\n}\n\n@mixin _list-group-subheader-margin($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $mdc-list-subheader-virtual-height: 3rem;\n  $mdc-list-subheader-leading: map.get(\n    map.get(typography.$styles, body1),\n    line-height\n  );\n  $mdc-list-subheader-margin: calc(\n    (#{$mdc-list-subheader-virtual-height} - #{$mdc-list-subheader-leading}) / 2\n  );\n\n  @include feature-targeting.targets($feat-structure) {\n    margin: $mdc-list-subheader-margin variables.$side-padding;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/_mixins.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"./index\" as mdc-list-*;\n"
  },
  {
    "path": "packages/mdc-list/_mixins.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:map';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n@use '@material/theme/theme-color';\n@use './evolution-mixins';\n\n@mixin deprecated-core-styles($query: feature-targeting.all()) {\n  @include deprecated-without-ripple($query);\n  @include deprecated-ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other list styles. It is recommended that most\n// users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-without-ripple($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $divider-color: if(\n    theme-color.tone(theme-color.$background) == 'dark',\n    variables.$deprecated-divider-color-on-dark-bg,\n    variables.$deprecated-divider-color-on-light-bg\n  );\n\n  .mdc-deprecated-list {\n    @include deprecated-base_($query);\n  }\n\n  @include deprecated-single-line-density(\n    variables.$deprecated-single-line-density-scale,\n    $query: $query\n  );\n  @include deprecated-item-secondary-text-ink-color(\n    text-secondary-on-background,\n    $query\n  );\n  @include deprecated-item-graphic-fill-color(transparent, $query);\n  @include deprecated-item-graphic-ink-color(text-icon-on-background, $query);\n  @include deprecated-item-meta-ink-color(text-hint-on-background, $query);\n  @include deprecated-group-subheader-ink-color(\n    text-primary-on-background,\n    $query\n  );\n  @include deprecated-item-disabled-text-opacity(\n    variables.$deprecated-text-disabled-opacity,\n    $query\n  );\n  @include deprecated-item-disabled-text-color(\n    variables.$deprecated-text-disabled-color,\n    $query\n  );\n  @include deprecated-item-selected-text-color(\n    variables.$deprecated-text-selected-color,\n    $query\n  );\n\n  .mdc-deprecated-list--dense {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: 4px;\n      padding-bottom: 4px;\n      font-size: 0.812rem;\n    }\n  }\n\n  .mdc-deprecated-list-item__wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      display: block;\n    }\n  }\n\n  // Always remove the focus ring element from flexbox layout; even if it's\n  // not visible initially.\n  .mdc-deprecated-list-item__focus-ring {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n    }\n  }\n\n  .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      @include deprecated-item-base_;\n    }\n\n    // For components using aria-activedescendant, the focus pseudoclass is\n    // never applied and use `.mdc-ripple-upgraded--background-focused` instead.\n    &:not(.mdc-deprecated-list-item--selected):focus::before,\n    &.mdc-ripple-upgraded--background-focused::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n\n    &.mdc-deprecated-list-item--selected::before {\n      @include dom-mixins.transparent-border(\n        $border-width: 3px,\n        $border-style: double,\n        $query: $query\n      );\n    }\n\n    @include deprecated-list-item-padding-variant(\n      variables.$deprecated-textual-variant-config,\n      $query\n    );\n    @include deprecated-list-item-height-variant(\n      variables.$deprecated-textual-variant-config,\n      $query\n    );\n\n    .mdc-deprecated-list--icon-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--avatar-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--thumbnail-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--image-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--video-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n    }\n  }\n\n  // This is included here to preserve expected specificity behavior (avatar\n  // graphic styles must take priority).\n  // TODO(b/157038316): regroup this with density styles when nesting is fixed.\n  .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic {\n    @include deprecated-graphic-size-dense_(20px, $query);\n  }\n\n  .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      fill: currentColor;\n      object-fit: cover;\n    }\n\n    // TODO(b/156624966): this retains legacy spacing but should be updated.\n    @include deprecated-graphic-size-variant(\n      variables.$deprecated-deprecated-graphic-config,\n      $query\n    );\n\n    .mdc-deprecated-list--icon-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--avatar-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: 50%;\n      }\n    }\n\n    .mdc-deprecated-list--thumbnail-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--image-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--video-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n    }\n  }\n\n  // Extra specificity is to override .material-icons display style if used in\n  // conjunction with mdc-deprecated-list-item__graphic\n  .mdc-deprecated-list .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n    }\n  }\n\n  .mdc-deprecated-list-item__meta {\n    &:not(.material-icons) {\n      @include typography.typography(caption, $query);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      margin-left: auto;\n      @include rtl.ignore-next-line();\n      margin-right: 0;\n\n      @at-root {\n        .mdc-deprecated-list-item[dir='rtl'] &,\n        [dir='rtl'] .mdc-deprecated-list-item & {\n          @include rtl.ignore-next-line();\n          margin-left: 0;\n          @include rtl.ignore-next-line();\n          margin-right: auto;\n        }\n      }\n    }\n  }\n\n  .mdc-deprecated-list-item__text {\n    @include typography.overflow-ellipsis($query);\n  }\n\n  // Disable interaction on label elements that may automatically\n  // toggle corresponding checkbox / radio input.\n  .mdc-deprecated-list-item__text[for] {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n\n  .mdc-deprecated-list-item__primary-text {\n    @include typography.overflow-ellipsis($query);\n    @include typography.text-baseline(\n      $top: variables.$deprecated-item-primary-text-baseline-height,\n      $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n      $display: block,\n      $query: $query\n    );\n\n    .mdc-deprecated-list--video-list &,\n    .mdc-deprecated-list--image-list &,\n    .mdc-deprecated-list--thumbnail-list &,\n    .mdc-deprecated-list--avatar-list &,\n    .mdc-deprecated-list--icon-list & {\n      @include typography.text-baseline(\n        $top:\n          variables.$deprecated-item-primary-text-baseline-height-with-graphic,\n        $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n        $query: $query\n      );\n    }\n\n    .mdc-deprecated-list--dense & {\n      @include typography.text-baseline(\n        $top: variables.$deprecated-dense-item-primary-text-baseline-height,\n        $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n        $query: $query\n      );\n    }\n  }\n\n  .mdc-deprecated-list-item__secondary-text {\n    @include typography.typography(body2, $query);\n    @include typography.overflow-ellipsis($query);\n    @include typography.text-baseline(\n      $top: variables.$deprecated-item-secondary-text-baseline-height,\n      $display: block,\n      $query: $query\n    );\n\n    .mdc-deprecated-list--dense & {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: inherit;\n      }\n    }\n  }\n\n  .mdc-deprecated-list--dense .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      height: 40px;\n    }\n  }\n\n  .mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-start;\n    }\n  }\n\n  .mdc-deprecated-list--two-line {\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        height: variables.$deprecated-two-line-height;\n      }\n    }\n\n    &.mdc-deprecated-list--video-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--image-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        height: variables.$deprecated-two-line-graphic-height;\n      }\n    }\n\n    // Icons in multiline lists are the only graphic that isn't centered.\n    &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: flex-start;\n        margin-top: variables.$deprecated-two-line-icon-top-margin;\n      }\n    }\n  }\n\n  .mdc-deprecated-list--two-line.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item,\n  .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      height: 60px;\n    }\n  }\n\n  .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item__graphic {\n    @include deprecated-graphic-size-dense_(36px, $query);\n  }\n\n  // Only change mouse cursor for list items which are not disabled.\n  :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  // stylelint-disable selector-max-type --\n  // Override anchor tag styles for the use-case of a list being used for navigation\n  a.mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  .mdc-deprecated-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      height: 0;\n      margin: 0;\n      border: none;\n      border-bottom-width: 1px;\n      border-bottom-style: solid;\n    }\n  }\n\n  // Note: ideally we'd be able to hoist this to the top-level `$feat-color`,\n  // but doing so will cause the `border` declaration on\n  // `.mdc-deprecated-list-divider` above to override it.\n  @include deprecated-divider-color($divider-color, $query);\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Items are fully inset using padding.\n  .mdc-deprecated-list-divider--padded {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-textual-variant-config,\n      $use-padding: true,\n      $query: $query\n    );\n  }\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Items's leading, but not trailing, edge is inset to account for *avatar*\n  // width.\n  .mdc-deprecated-list-divider--inset {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-avatar-variant-config,\n      $trailing: false,\n      $query: $query\n    );\n  }\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Item's leading and trailing edges are inset to account for *avatar* width.\n  .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-avatar-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-textual-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--icon-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-icon-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--avatar-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-avatar-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--thumbnail-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-thumbnail-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--image-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-image-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--video-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-video-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-group {\n    @include feature-targeting.targets($feat-structure) {\n      // Cancel top/bottom padding on individual lists within group\n      .mdc-deprecated-list {\n        padding: 0;\n      }\n    }\n  }\n\n  .mdc-deprecated-list-group__subheader {\n    $list-subheader-virtual-height: 3rem;\n    $list-subheader-leading: map.get(\n      map.get(typography.$styles, body1),\n      line-height\n    );\n    $list-subheader-margin: calc(\n      (#{$list-subheader-virtual-height} - #{$list-subheader-leading}) / 2\n    );\n\n    @include typography.typography(subtitle1, $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: $list-subheader-margin variables.$deprecated-side-padding;\n    }\n  }\n\n  @include evolution-mixins.without-ripple($query: $query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// list styles. It is recommended that most users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // List items should support states by default, but it should be possible to opt out.\n  :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n    @include deprecated-item-interactive-ripple_($query);\n  }\n\n  @include evolution-mixins.with-ripple($query: $query);\n}\n\n///\n/// Sets ripple color for a list item.\n///\n@mixin deprecated-ripple-states($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states(\n    $color: $color,\n    $query: $query,\n    $ripple-target: variables.$deprecated-ripple-target\n  );\n  @include ripple-theme.states(\n    $color: $color,\n    $query: $query,\n    $ripple-target: variables.$deprecated-temporary-ripple-target\n  );\n}\n\n/// Sets the text color of the list item in selected or activated state.\n/// @param {color} $color - The desired text color.\n@mixin deprecated-item-selected-text-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  // \"Selected\" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.\n  // \"Activated\" is more permanent. E.g., the currently highlighted navigation destination in a drawer.\n  .mdc-deprecated-list-item--selected,\n  .mdc-deprecated-list-item--activated {\n    @include deprecated-item-primary-text-ink-color($color, $query: $query);\n    @include deprecated-item-graphic-ink-color($color, $query: $query);\n  }\n}\n\n@mixin deprecated-item-primary-text-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin deprecated-item-secondary-text-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item__secondary-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin deprecated-item-graphic-fill-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin deprecated-item-graphic-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin deprecated-item-meta-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item__meta {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Sets shape radius (rounded) to single line list variant.\n///\n/// @param {Number | List<Number>} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.\n///     Set to `50%` for rounded shape.\n/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.\n/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.\n///     Defaults to `$mdc-deprecated-list-single-line-density-scale`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: variables.$deprecated-single-line-density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$deprecated-single-line-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-deprecated-list-item {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n}\n\n@mixin deprecated-divider-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-divider {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin deprecated-group-subheader-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-group__subheader {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin deprecated-item-disabled-text-opacity(\n  $opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text {\n    @include feature-targeting.targets($feat-color) {\n      opacity: $opacity;\n    }\n  }\n}\n\n@mixin deprecated-item-disabled-text-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-deprecated-list-item--disabled {\n    .mdc-deprecated-list-item__text,\n    .mdc-deprecated-list-item__primary-text,\n    .mdc-deprecated-list-item__secondary-text {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Establishes each list item's padding using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-list-item-padding-variant(\n  $variant-config,\n  $query: feature-targeting.all()\n) {\n  $leading-padding: map.get($variant-config, leading-padding);\n  @include deprecated-list-item-padding($leading-padding, $query);\n}\n\n///\n/// Establishes each list item's padding.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n///\n/// @access public\n///\n@mixin deprecated-list-item-padding(\n  $leading-padding,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(\n      padding,\n      $leading-padding,\n      variables.$deprecated-trailing-padding\n    );\n  }\n}\n\n///\n/// Establishes each list item's single line height using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-list-item-height-variant(\n  $variant-config,\n  $query: feature-targeting.all()\n) {\n  $single-line-height: map.get($variant-config, single-line-height);\n  @include deprecated-list-item-height($single-line-height, $query);\n}\n\n///\n/// Establishes each list item's height.\n///\n/// @param {Number} $height The item's height.\n///\n/// @access public\n///\n@mixin deprecated-list-item-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n///\n/// Sets the trailing margin used by icons.\n///\n/// @param {Number} $margin The trailing margin applied to icons.\n///\n/// @access public\n///\n@mixin deprecated-icon-margin($margin, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-deprecated-list-item__graphic {\n      @include rtl.reflexive-box(margin, right, $margin);\n    }\n  }\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin deprecated-divider-insets-variant(\n  $variant-config,\n  $query: feature-targeting.all()\n) {\n  $leading-padding: map.get($variant-config, leading-padding);\n  $text-offset: map.get($variant-config, text-offset);\n  @include deprecated-divider-insets($leading-padding, $text-offset, $query);\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n/// @param {Number} $text-offset The item's text offset.\n///\n/// @access public\n///\n@mixin deprecated-divider-insets(\n  $leading-padding,\n  $text-offset,\n  $query: feature-targeting.all()\n) {\n  .mdc-deprecated-list-divider--inset-leading {\n    @include deprecated-divider-inset(\n      $leading-padding,\n      $text-offset,\n      $trailing: false,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-divider--inset-trailing {\n    @include deprecated-divider-inset(\n      $leading-padding,\n      $text-offset,\n      $leading: false,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing {\n    @include deprecated-divider-inset(\n      $leading-padding,\n      $text-offset,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding {\n    @include deprecated-divider-inset(\n      $leading-padding,\n      $text-offset,\n      $trailing: false,\n      $use-padding: true,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding {\n    @include deprecated-divider-inset(\n      $leading-padding,\n      $text-offset,\n      $use-padding: true,\n      $query: $query\n    );\n  }\n}\n\n// Sets the width and height of the graphic element using a variant config.\n@mixin deprecated-graphic-size-variant(\n  $variant-config,\n  $query: feature-targeting.all()\n) {\n  $leading-padding: map.get($variant-config, leading-padding);\n  $text-offset: map.get($variant-config, text-offset);\n  $width: map.get(map.get($variant-config, graphic-size), width);\n  $height: map.get(map.get($variant-config, graphic-size), height);\n\n  @include deprecated-graphic-size(\n    $leading-padding,\n    $text-offset,\n    $width,\n    $height,\n    $query\n  );\n}\n\n// Sets the width and height of the graphic element, as well as calculates the\n// trailing margin for the graphic element such that the text is always offset\n// from the item's leading edge by 72px, which is defined within the spec. If\n// height isn't specified, the graphic is assumed to be square.\n// TODO(b/155397992): restructure to use symmetric margins.\n@mixin deprecated-graphic-size(\n  $leading-padding,\n  $text-offset,\n  $width,\n  $height,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $margin-value: max(\n    $text-offset - $leading-padding - $width,\n    $leading-padding\n  );\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(margin, right, $margin-value);\n    width: $width;\n    height: $height;\n  }\n}\n\n// Deprecated. Supports legacy density styles.\n@mixin deprecated-graphic-size-dense_($size, $query: feature-targeting.all()) {\n  @include deprecated-graphic-size(\n    $leading-padding: 16px,\n    $text-offset: 16px,\n    $width: $size,\n    $height: $size,\n    $query: $query\n  );\n}\n\n///\n/// Computes the appropriate leading inset for a divider based on list type.\n///\n/// @param {String}  $variant-config The list variant configuration.\n/// @param {Boolean} $leading Whether to apply the leading inset.\n/// @param {Boolean} $trailing Whether to apply the trailing inset.\n/// @param {Boolean} $use-padding Whether to align with padding vs. text offset.\n///\n/// @access private\n///\n@mixin deprecated-divider-inset-variant(\n  $variant-config,\n  $leading: true,\n  $trailing: true,\n  $use-padding: false,\n  $query: feature-targeting.all()\n) {\n  $leading-padding: map.get($variant-config, leading-padding);\n  $text-offset: map.get($variant-config, text-offset);\n\n  @include deprecated-divider-inset(\n    $leading-padding,\n    $text-offset,\n    $leading,\n    $trailing,\n    $use-padding,\n    $query\n  );\n}\n\n@mixin deprecated-divider-inset(\n  $leading-padding,\n  $text-offset,\n  $leading: true,\n  $trailing: true,\n  $use-padding: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $trailing-inset: if($trailing, variables.$deprecated-trailing-padding, 0);\n  $leading-inset: if(\n    $leading,\n    if($use-padding, $leading-padding, $text-offset),\n    0\n  );\n\n  @include feature-targeting.targets($feat-structure) {\n    @if $leading {\n      @include rtl.reflexive-box(margin, left, $leading-inset);\n    }\n    width: calc(100% - #{$leading-inset + $trailing-inset});\n  }\n}\n\n///\n/// Sets density scale to single line list variant.\n///\n/// @param {Number} $density-scale Density scale for list. Supported density scales are `-4`, `-3`, `-2`, `-1` and  `0`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$deprecated-single-line-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-deprecated-list-item {\n    @include deprecated-single-line-height($height, $query: $query);\n  }\n}\n\n///\n/// Sets height to single line list variant.\n///\n/// @param {Number} $height Height value in `px`.\n///\n/// @access public\n///\n@mixin deprecated-single-line-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n//\n// Private\n//\n\n@mixin deprecated-base_($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include typography.typography(subtitle1, $query);\n\n  @include feature-targeting.targets($feat-typography) {\n    // According to the mocks and stickersheet, the line-height is\n    // adjusted to 24px for text content, same as for body1.\n    /* @alternate */\n    line-height: map.get(map.get(typography.$styles, body1), line-height);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    margin: 0;\n    padding: 8px 0;\n    list-style-type: none;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  @include deprecated-item-primary-text-ink-color(\n    text-primary-on-background,\n    $query\n  );\n}\n\n@mixin deprecated-item-base_ {\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: 0;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ripple styles for an interactive list item (one that is enabled and inside an interactive list).\n@mixin deprecated-item-interactive-ripple_($query: feature-targeting.all()) {\n  @include ripple.surface(\n    $ripple-target: variables.$deprecated-ripple-target,\n    $query: $query\n  );\n  @include ripple.surface(\n    $ripple-target: variables.$deprecated-temporary-ripple-target,\n    $query: $query\n  );\n  @include ripple.radius-bounded(\n    $ripple-target: variables.$deprecated-ripple-target,\n    $query: $query\n  );\n  @include ripple.radius-bounded(\n    $ripple-target: variables.$deprecated-temporary-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states(\n    theme-color.prop-value(on-surface),\n    false,\n    $ripple-target: variables.$deprecated-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states(\n    theme-color.prop-value(on-surface),\n    false,\n    $ripple-target: variables.$deprecated-temporary-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-activated(\n    primary,\n    false,\n    $ripple-target: variables.$deprecated-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-activated(\n    primary,\n    false,\n    $ripple-target: variables.$deprecated-temporary-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-selected(\n    primary,\n    false,\n    $ripple-target: variables.$deprecated-ripple-target,\n    $query: $query\n  );\n  @include ripple-theme.states-selected(\n    primary,\n    false,\n    $ripple-target: variables.$deprecated-temporary-ripple-target,\n    $query: $query\n  );\n\n  #{variables.$deprecated-ripple-target},\n  #{variables.$deprecated-temporary-ripple-target} {\n    @include ripple.target-common($query: $query);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-list-* hide mdc-list-core-styles, mdc-list-without-ripple, mdc-list-ripple, mdc-list-item-primary-text-ink-color, mdc-list-item-secondary-text-ink-color, mdc-list-item-graphic-fill-color, mdc-list-item-graphic-ink-color, mdc-list-item-meta-ink-color, mdc-list-single-line-shape-radius, mdc-list-divider-color, mdc-list-group-subheader-ink-color, mdc-list-item-disabled-text-opacity, mdc-list-item-disabled-text-color, mdc-list-single-line-density, mdc-list-single-line-height, mdc-list-base-, mdc-list-item-base-, mdc-list-item-interactive-ripple-, mdc-list-graphic-size-;\n"
  },
  {
    "path": "packages/mdc-list/_variables.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/density/variables' as density-variables;\n@use '@material/theme/theme-color';\n\n$deprecated-ripple-target: '.mdc-deprecated-list-item__ripple';\n$deprecated-temporary-ripple-target: '.mdc-list-item__ripple';\n\n$deprecated-divider-color-on-light-bg: rgba(0, 0, 0, 0.12) !default;\n$deprecated-divider-color-on-dark-bg: rgba(255, 255, 255, 0.2) !default;\n$deprecated-side-padding: 16px !default;\n$deprecated-trailing-padding: 16px !default;\n$deprecated-text-offset: 72px !default;\n$deprecated-text-disabled-opacity: theme-color.text-emphasis(disabled) !default;\n$deprecated-text-disabled-color: on-surface !default;\n$deprecated-text-selected-color: primary !default;\n\n$deprecated-single-line-height: 48px !default;\n$deprecated-single-line-minimum-height: 24px !default;\n$deprecated-single-line-maximum-height: $deprecated-single-line-height !default;\n$deprecated-single-line-density-scale: density-variables.$default-scale !default;\n$deprecated-single-line-density-config: (\n  height: (\n    default: $deprecated-single-line-height,\n    maximum: $deprecated-single-line-maximum-height,\n    minimum: $deprecated-single-line-minimum-height,\n  ),\n) !default;\n\n$deprecated-item-primary-text-baseline-height: 28px !default;\n$deprecated-item-primary-text-baseline-height-with-graphic: 32px !default;\n$deprecated-item-secondary-text-baseline-height: 20px !default;\n$deprecated-dense-item-primary-text-baseline-height: 24px !default;\n\n$deprecated-two-line-height: 64px !default;\n$deprecated-two-line-graphic-height: 72px !default;\n$deprecated-two-line-icon-top-margin: 16px !default;\n\n// TODO(b/156624966): this is used to support legacy usage of embedded graphics.\n$deprecated-deprecated-graphic-config: (\n  graphic-size: (\n    width: 24px,\n    height: 24px,\n  ),\n  leading-padding: 16px,\n  text-offset: 72px,\n) !default;\n\n$deprecated-textual-variant-config: (\n  single-line-height: $deprecated-single-line-height,\n  graphic-size: (\n    width: 24px,\n    height: 24px,\n  ),\n  leading-padding: 16px,\n  text-offset: 16px,\n) !default;\n\n$deprecated-icon-variant-config: (\n  single-line-height: 56px,\n  graphic-size: (\n    width: 24px,\n    height: 24px,\n  ),\n  leading-padding: 16px,\n  text-offset: 72px,\n) !default;\n\n$deprecated-avatar-variant-config: (\n  single-line-height: 56px,\n  graphic-size: (\n    width: 40px,\n    height: 40px,\n  ),\n  leading-padding: 16px,\n  text-offset: 72px,\n) !default;\n\n$deprecated-thumbnail-variant-config: (\n  single-line-height: 56px,\n  graphic-size: (\n    width: 40px,\n    height: 40px,\n  ),\n  leading-padding: 16px,\n  text-offset: 72px,\n) !default;\n\n$deprecated-image-variant-config: (\n  single-line-height: 72px,\n  graphic-size: (\n    width: 56px,\n    height: 56px,\n  ),\n  leading-padding: 16px,\n  text-offset: 88px,\n) !default;\n\n$deprecated-video-variant-config: (\n  single-line-height: 72px,\n  graphic-size: (\n    width: 100px,\n    height: 56px,\n  ),\n  leading-padding: 0px,\n  text-offset: 116px,\n) !default;\n"
  },
  {
    "path": "packages/mdc-list/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCListAdapter {\n  /**\n   * Returns the attribute value of list item at given `index`.\n   */\n  getAttributeForElementIndex(index: number, attr: string): string|null;\n\n  getListItemCount(): number;\n\n  getFocusedElementIndex(): number;\n\n  setAttributeForElementIndex(index: number, attribute: string, value: string):\n      void;\n\n  addClassForElementIndex(index: number, className: string): void;\n\n  removeClassForElementIndex(index: number, className: string): void;\n\n  /**\n   * Focuses list item at the index specified.\n   */\n  focusItemAtIndex(index: number): void;\n\n  /**\n   * Sets the tabindex to the value specified for all button/a element children\n   * of the list item at the index specified.\n   */\n  setTabIndexForListItemChildren(listItemIndex: number, tabIndexValue: string):\n      void;\n\n  /**\n   * @return true if radio button is present at given list item index.\n   */\n  hasRadioAtIndex(index: number): boolean;\n\n  /**\n   * @return true if checkbox is present at given list item index.\n   */\n  hasCheckboxAtIndex(index: number): boolean;\n\n  /**\n   * @return true if checkbox inside a list item is checked.\n   */\n  isCheckboxCheckedAtIndex(index: number): boolean;\n\n  /**\n   * @return true if root element is focused.\n   */\n  isRootFocused(): boolean;\n\n  /**\n   * @param index list item index.\n   * @param className the name of the class whose presence is to be checked.\n   * @return true if list item at `index` has class `className`.\n   */\n  listItemAtIndexHasClass(index: number, className: string): boolean;\n\n  /**\n   * Sets the checked status of checkbox or radio at given list item index.\n   */\n  setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean): void;\n\n  /**\n   * Notifies user action on list item.\n   */\n  notifyAction(index: number): void;\n\n  /**\n   * Notifies that items at the given indices have changed its\n   * selection state through user interaction (e.g. click).\n   *\n   * This is invoked only for changes caused by user interaction\n   * to match with the native `change` event semantics.\n   */\n  notifySelectionChange(changedIndices: number[]): void;\n\n  /**\n   * @return true when the current focused element is inside list root.\n   */\n  isFocusInsideList(): boolean;\n\n  /**\n   * @return the primary text content of the list item at index.\n   */\n  getPrimaryTextAtIndex(index: number): string;\n}\n"
  },
  {
    "path": "packages/mdc-list/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {closest, matches} from '@material/dom/ponyfill';\n\nimport {MDCListAdapter} from './adapter';\nimport {cssClasses, deprecatedClassNameMap, evolutionAttribute, evolutionClassNameMap, numbers, strings} from './constants';\nimport {MDCListFoundation} from './foundation';\nimport {MDCListActionEventDetail, MDCListIndex, MDCListSelectionChangeDetail} from './types';\n\n/** MDC List Factory */\nexport type MDCListFactory =\n    (el: HTMLElement, foundation?: MDCListFoundation) => MDCList;\n\n/** MDC List */\nexport class MDCList extends MDCComponent<MDCListFoundation> {\n  set vertical(value: boolean) {\n    this.foundation.setVerticalOrientation(value);\n  }\n\n  get listElements() {\n    return Array.from(this.root.querySelectorAll<HTMLElement>(\n        `.${this.classNameMap[cssClasses.LIST_ITEM_CLASS]}`));\n  }\n\n  set wrapFocus(value: boolean) {\n    this.foundation.setWrapFocus(value);\n  }\n\n  /**\n   * @return Whether typeahead is currently matching a user-specified prefix.\n   */\n  get typeaheadInProgress(): boolean {\n    return this.foundation.isTypeaheadInProgress();\n  }\n\n  /**\n   * Sets whether typeahead functionality is enabled on the list.\n   * @param hasTypeahead Whether typeahead is enabled.\n   */\n  set hasTypeahead(hasTypeahead: boolean) {\n    this.foundation.setHasTypeahead(hasTypeahead);\n  }\n\n  set singleSelection(isSingleSelectionList: boolean) {\n    this.foundation.setSingleSelection(isSingleSelectionList);\n  }\n\n  set disabledItemsFocusable(areDisabledItemsFocusable: boolean) {\n    this.foundation.setDisabledItemsFocusable(areDisabledItemsFocusable);\n  }\n\n  get selectedIndex(): MDCListIndex {\n    return this.foundation.getSelectedIndex();\n  }\n\n  set selectedIndex(index: MDCListIndex) {\n    this.foundation.setSelectedIndex(index);\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCList(root);\n  }\n\n  // The follow are assigned in initialSyncWithDOM().\n  private handleKeydown!: SpecificEventListener<'keydown'>;\n  private handleClick!: SpecificEventListener<'click'>;\n  private focusInEventListener!: SpecificEventListener<'focus'>;\n  private focusOutEventListener!: SpecificEventListener<'focus'>;\n\n  // This mapping provides a layer of indirection from legacy classes to\n  // evolution classes, since there are some inconsistencies between the\n  // two.\n  // TODO(b/176814973): remove this map when evolution is launched.\n  private classNameMap!: {[className: string]: string};\n  private isEvolutionEnabled!: boolean;\n  private isInteractive!: boolean;\n\n  override initialSyncWithDOM() {\n    this.isEvolutionEnabled = evolutionAttribute in this.root.dataset;\n\n    if (this.isEvolutionEnabled) {\n      this.classNameMap = evolutionClassNameMap;\n    } else if (matches(this.root, strings.DEPRECATED_SELECTOR)) {\n      this.classNameMap = deprecatedClassNameMap;\n    } else {\n      this.classNameMap =\n          Object.values(cssClasses)\n              .reduce((obj: {[className: string]: string}, className) => {\n                obj[className] = className;\n                return obj;\n              }, {});\n    }\n\n    this.handleClick = this.handleClickEvent.bind(this);\n    this.handleKeydown = this.handleKeydownEvent.bind(this);\n    this.focusInEventListener = this.handleFocusInEvent.bind(this);\n    this.focusOutEventListener = this.handleFocusOutEvent.bind(this);\n    this.listen('keydown', this.handleKeydown);\n    this.listen('click', this.handleClick);\n    this.listen('focusin', this.focusInEventListener);\n    this.listen('focusout', this.focusOutEventListener);\n    this.layout();\n    this.initializeListType();\n    this.ensureFocusable();\n  }\n\n  override destroy() {\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten('click', this.handleClick);\n    this.unlisten('focusin', this.focusInEventListener);\n    this.unlisten('focusout', this.focusOutEventListener);\n  }\n\n  layout() {\n    const direction = this.root.getAttribute(strings.ARIA_ORIENTATION);\n    this.vertical = direction !== strings.ARIA_ORIENTATION_HORIZONTAL;\n\n    const itemSelector =\n        `.${this.classNameMap[cssClasses.LIST_ITEM_CLASS]}:not([tabindex])`;\n    const childSelector = strings.FOCUSABLE_CHILD_ELEMENTS;\n\n    // List items need to have at least tabindex=-1 to be focusable.\n    const itemEls = this.root.querySelectorAll<HTMLElement>(itemSelector);\n    if (itemEls.length) {\n      Array.prototype.forEach.call(itemEls, (el: Element) => {\n        el.setAttribute('tabindex', '-1');\n      });\n    }\n\n    // Child button/a elements are not tabbable until the list item is focused.\n    const focusableChildEls =\n        this.root.querySelectorAll<HTMLElement>(childSelector);\n    if (focusableChildEls.length) {\n      Array.prototype.forEach.call(focusableChildEls, (el: Element) => {\n        el.setAttribute('tabindex', '-1');\n      });\n    }\n\n    if (this.isEvolutionEnabled) {\n      this.foundation.setUseSelectedAttribute(true);\n    }\n    this.foundation.layout();\n  }\n\n  /**\n   * Extracts the primary text from a list item.\n   * @param item The list item element.\n   * @return The primary text in the element.\n   */\n  getPrimaryText(item: Element): string {\n    const primaryText = item.querySelector<HTMLElement>(\n        `.${this.classNameMap[cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS]}`);\n    if (this.isEvolutionEnabled || primaryText) {\n      return primaryText?.textContent ?? '';\n    }\n\n    const singleLineText = item.querySelector<HTMLElement>(\n        `.${this.classNameMap[cssClasses.LIST_ITEM_TEXT_CLASS]}`);\n    return (singleLineText && singleLineText.textContent) || '';\n  }\n\n  /**\n   * Initialize selectedIndex value based on pre-selected list items.\n   */\n  initializeListType() {\n    this.isInteractive =\n        matches(this.root, strings.ARIA_INTERACTIVE_ROLES_SELECTOR);\n\n    if (this.isEvolutionEnabled && this.isInteractive) {\n      const selection = Array.from(\n          this.root.querySelectorAll<HTMLElement>(\n              strings.SELECTED_ITEM_SELECTOR),\n          (listItem) => this.listElements.indexOf(listItem));\n\n      if (matches(this.root, strings.ARIA_MULTI_SELECTABLE_SELECTOR)) {\n        this.selectedIndex = selection;\n      } else if (selection.length > 0) {\n        this.selectedIndex = selection[0];\n      }\n      return;\n    }\n\n    const checkboxListItems = this.root.querySelectorAll<HTMLElement>(\n        strings.ARIA_ROLE_CHECKBOX_SELECTOR);\n    const radioSelectedListItem = this.root.querySelector<HTMLElement>(\n        strings.ARIA_CHECKED_RADIO_SELECTOR);\n\n    if (checkboxListItems.length) {\n      const preselectedItems = this.root.querySelectorAll<HTMLElement>(\n          strings.ARIA_CHECKED_CHECKBOX_SELECTOR);\n      this.selectedIndex = Array.from(\n          preselectedItems, (listItem) => this.listElements.indexOf(listItem));\n    } else if (radioSelectedListItem) {\n      this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);\n    }\n  }\n\n  /**\n   * Updates the list item at itemIndex to the desired isEnabled state.\n   * @param itemIndex Index of the list item\n   * @param isEnabled Sets the list item to enabled or disabled.\n   */\n  setEnabled(itemIndex: number, isEnabled: boolean) {\n    this.foundation.setEnabled(itemIndex, isEnabled);\n  }\n\n  /**\n   * Given the next desired character from the user, adds it to the typeahead\n   * buffer. Then, attempts to find the next option matching the buffer. Wraps\n   * around if at the end of options.\n   *\n   * @param nextChar The next character to add to the prefix buffer.\n   * @param startingIndex The index from which to start matching. Defaults to\n   *     the currently focused index.\n   * @return The index of the matched item.\n   */\n  typeaheadMatchItem(nextChar: string, startingIndex?: number): number {\n    return this.foundation.typeaheadMatchItem(\n        nextChar, startingIndex, /** skipFocus */ true);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCListAdapter = {\n      addClassForElementIndex: (index, className) => {\n        const element = this.listElements[index];\n        if (element) {\n          element.classList.add(this.classNameMap[className]);\n        }\n      },\n      focusItemAtIndex: (index) => {\n        this.listElements[index]?.focus();\n      },\n      getAttributeForElementIndex: (index, attr) =>\n          this.listElements[index].getAttribute(attr),\n      getFocusedElementIndex: () =>\n          this.listElements.indexOf(document.activeElement as HTMLElement),\n      getListItemCount: () => this.listElements.length,\n      getPrimaryTextAtIndex: (index) =>\n          this.getPrimaryText(this.listElements[index]),\n      hasCheckboxAtIndex: (index) => {\n        const listItem = this.listElements[index];\n        return !!listItem.querySelector<HTMLElement>(strings.CHECKBOX_SELECTOR);\n      },\n      hasRadioAtIndex: (index) => {\n        const listItem = this.listElements[index];\n        return !!listItem.querySelector<HTMLElement>(strings.RADIO_SELECTOR);\n      },\n      isCheckboxCheckedAtIndex: (index) => {\n        const listItem = this.listElements[index];\n        const toggleEl =\n            listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_SELECTOR);\n        return toggleEl!.checked;\n      },\n      isFocusInsideList: () => {\n        return this.root !== document.activeElement &&\n            this.root.contains(document.activeElement);\n      },\n      isRootFocused: () => document.activeElement === this.root,\n      listItemAtIndexHasClass: (index, className) =>\n          this.listElements[index].classList.contains(\n              this.classNameMap[className]),\n      notifyAction: (index) => {\n        this.emit<MDCListActionEventDetail>(\n            strings.ACTION_EVENT, {index}, /** shouldBubble */ true);\n      },\n      notifySelectionChange: (changedIndices: number[]) => {\n        this.emit<MDCListSelectionChangeDetail>(\n            strings.SELECTION_CHANGE_EVENT, {changedIndices},\n            /** shouldBubble */ true);\n      },\n      removeClassForElementIndex: (index, className) => {\n        const element = this.listElements[index];\n        if (element) {\n          element.classList.remove(this.classNameMap[className]);\n        }\n      },\n      setAttributeForElementIndex: (index, attr, value) => {\n        const element = this.listElements[index];\n        if (element) {\n          this.safeSetAttribute(element, attr, value);\n        }\n      },\n      setCheckedCheckboxOrRadioAtIndex: (index, isChecked) => {\n        const listItem = this.listElements[index];\n        const toggleEl = listItem.querySelector<HTMLInputElement>(\n            strings.CHECKBOX_RADIO_SELECTOR);\n        toggleEl!.checked = isChecked;\n\n        const event = document.createEvent('Event');\n        event.initEvent('change', true, true);\n        toggleEl!.dispatchEvent(event);\n      },\n      setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => {\n        const element = this.listElements[listItemIndex];\n        const selector = strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;\n        Array.prototype.forEach.call(\n            element.querySelectorAll<HTMLElement>(selector),\n            (el: HTMLElement) => {\n              el.tabIndex = Number(tabIndexValue);\n            });\n      },\n    };\n    return new MDCListFoundation(adapter);\n  }\n\n  /**\n   * Ensures that at least one item is focusable if the list is interactive and\n   * doesn't specify a suitable tabindex.\n   */\n  private ensureFocusable() {\n    if (this.isEvolutionEnabled && this.isInteractive) {\n      if (!this.root.querySelector(`.${\n              this.classNameMap[cssClasses.LIST_ITEM_CLASS]}[tabindex=\"0\"]`)) {\n        const index = this.initialFocusIndex();\n        if (index !== -1) {\n          this.listElements[index].tabIndex = 0;\n        }\n      }\n    }\n  }\n\n  private initialFocusIndex(): number {\n    if (this.selectedIndex instanceof Array && this.selectedIndex.length > 0) {\n      return this.selectedIndex[0];\n    }\n    if (typeof this.selectedIndex === 'number' &&\n        this.selectedIndex !== numbers.UNSET_INDEX) {\n      return this.selectedIndex;\n    }\n    const el = this.root.querySelector<HTMLElement>(\n        `.${this.classNameMap[cssClasses.LIST_ITEM_CLASS]}:not(.${\n            this.classNameMap[cssClasses.LIST_ITEM_DISABLED_CLASS]})`);\n    if (el === null) {\n      return -1;\n    }\n    return this.getListItemIndex(el);\n  }\n\n  /**\n   * Used to figure out which list item this event is targeting. Or returns -1\n   * if there is no list item\n   */\n  private getListItemIndex(el: Element) {\n    const nearestParent = closest(\n        el,\n        `.${this.classNameMap[cssClasses.LIST_ITEM_CLASS]}, .${\n            this.classNameMap[cssClasses.ROOT]}`);\n\n    // Get the index of the element if it is a list item.\n    if (nearestParent &&\n        matches(\n            nearestParent,\n            `.${this.classNameMap[cssClasses.LIST_ITEM_CLASS]}`)) {\n      return this.listElements.indexOf(nearestParent as HTMLElement);\n    }\n\n    return -1;\n  }\n\n  /**\n   * Used to figure out which element was clicked before sending the event to\n   * the foundation.\n   */\n  private handleFocusInEvent(event: FocusEvent) {\n    const index = this.getListItemIndex(event.target as Element);\n    this.foundation.handleFocusIn(index);\n  }\n\n  /**\n   * Used to figure out which element was clicked before sending the event to\n   * the foundation.\n   */\n  private handleFocusOutEvent(event: FocusEvent) {\n    const index = this.getListItemIndex(event.target as Element);\n    this.foundation.handleFocusOut(index);\n  }\n\n  /**\n   * Used to figure out which element was focused when keydown event occurred\n   * before sending the event to the foundation.\n   */\n  private handleKeydownEvent(event: KeyboardEvent) {\n    const index = this.getListItemIndex(event.target as Element);\n    const target = event.target as Element;\n    this.foundation.handleKeydown(\n        event,\n        target.classList.contains(\n            this.classNameMap[cssClasses.LIST_ITEM_CLASS]),\n        index);\n  }\n\n  /**\n   * Used to figure out which element was clicked before sending the event to\n   * the foundation.\n   */\n  private handleClickEvent(event: MouseEvent) {\n    const index = this.getListItemIndex(event.target as Element);\n    const target = event.target as Element;\n    this.foundation.handleClick(\n        index, matches(target, strings.CHECKBOX_RADIO_SELECTOR), event);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  LIST_ITEM_ACTIVATED_CLASS: 'mdc-list-item--activated',\n  LIST_ITEM_CLASS: 'mdc-list-item',\n  LIST_ITEM_DISABLED_CLASS: 'mdc-list-item--disabled',\n  LIST_ITEM_SELECTED_CLASS: 'mdc-list-item--selected',\n  LIST_ITEM_TEXT_CLASS: 'mdc-list-item__text',\n  LIST_ITEM_PRIMARY_TEXT_CLASS: 'mdc-list-item__primary-text',\n  ROOT: 'mdc-list',\n};\n\nconst evolutionClassNameMap = {\n  [`${cssClasses.LIST_ITEM_ACTIVATED_CLASS}`]: 'mdc-list-item--activated',\n  [`${cssClasses.LIST_ITEM_CLASS}`]: 'mdc-list-item',\n  [`${cssClasses.LIST_ITEM_DISABLED_CLASS}`]: 'mdc-list-item--disabled',\n  [`${cssClasses.LIST_ITEM_SELECTED_CLASS}`]: 'mdc-list-item--selected',\n  [`${cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS}`]: 'mdc-list-item__primary-text',\n  [`${cssClasses.ROOT}`]: 'mdc-list',\n};\n\nconst deprecatedClassNameMap = {\n  [`${cssClasses.LIST_ITEM_ACTIVATED_CLASS}`]:\n      'mdc-deprecated-list-item--activated',\n  [`${cssClasses.LIST_ITEM_CLASS}`]: 'mdc-deprecated-list-item',\n  [`${cssClasses.LIST_ITEM_DISABLED_CLASS}`]:\n      'mdc-deprecated-list-item--disabled',\n  [`${cssClasses.LIST_ITEM_SELECTED_CLASS}`]:\n      'mdc-deprecated-list-item--selected',\n  [`${cssClasses.LIST_ITEM_TEXT_CLASS}`]: 'mdc-deprecated-list-item__text',\n  [`${cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS}`]:\n      'mdc-deprecated-list-item__primary-text',\n  [`${cssClasses.ROOT}`]: 'mdc-deprecated-list',\n};\n\nconst strings = {\n  ACTION_EVENT: 'MDCList:action',\n  SELECTION_CHANGE_EVENT: 'MDCList:selectionChange',\n  ARIA_CHECKED: 'aria-checked',\n  ARIA_CHECKED_CHECKBOX_SELECTOR: '[role=\"checkbox\"][aria-checked=\"true\"]',\n  ARIA_CHECKED_RADIO_SELECTOR: '[role=\"radio\"][aria-checked=\"true\"]',\n  ARIA_CURRENT: 'aria-current',\n  ARIA_DISABLED: 'aria-disabled',\n  ARIA_ORIENTATION: 'aria-orientation',\n  ARIA_ORIENTATION_HORIZONTAL: 'horizontal',\n  ARIA_ROLE_CHECKBOX_SELECTOR: '[role=\"checkbox\"]',\n  ARIA_SELECTED: 'aria-selected',\n  ARIA_INTERACTIVE_ROLES_SELECTOR: '[role=\"listbox\"], [role=\"menu\"]',\n  ARIA_MULTI_SELECTABLE_SELECTOR: '[aria-multiselectable=\"true\"]',\n  CHECKBOX_RADIO_SELECTOR: 'input[type=\"checkbox\"], input[type=\"radio\"]',\n  CHECKBOX_SELECTOR: 'input[type=\"checkbox\"]',\n  CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: `\n    .${cssClasses.LIST_ITEM_CLASS} button:not(:disabled),\n    .${cssClasses.LIST_ITEM_CLASS} a,\n    .${\n      deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]} button:not(:disabled),\n    .${deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]} a\n  `,\n  DEPRECATED_SELECTOR: '.mdc-deprecated-list',\n  FOCUSABLE_CHILD_ELEMENTS: `\n    .${cssClasses.LIST_ITEM_CLASS} button:not(:disabled),\n    .${cssClasses.LIST_ITEM_CLASS} a,\n    .${cssClasses.LIST_ITEM_CLASS} input[type=\"radio\"]:not(:disabled),\n    .${cssClasses.LIST_ITEM_CLASS} input[type=\"checkbox\"]:not(:disabled),\n    .${\n      deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]} button:not(:disabled),\n    .${deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]} a,\n    .${\n      deprecatedClassNameMap\n          [cssClasses.LIST_ITEM_CLASS]} input[type=\"radio\"]:not(:disabled),\n    .${\n      deprecatedClassNameMap\n          [cssClasses.LIST_ITEM_CLASS]} input[type=\"checkbox\"]:not(:disabled)\n  `,\n  RADIO_SELECTOR: 'input[type=\"radio\"]',\n  SELECTED_ITEM_SELECTOR: '[aria-selected=\"true\"], [aria-current=\"true\"]',\n};\n\nconst numbers = {\n  UNSET_INDEX: -1,\n  TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: 300\n};\n\nconst evolutionAttribute = 'evolution';\n\nexport {\n  strings,\n  cssClasses,\n  numbers,\n  deprecatedClassNameMap,\n  evolutionAttribute,\n  evolutionClassNameMap\n};\n"
  },
  {
    "path": "packages/mdc-list/events.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];\n\n/**\n * Ensures that preventDefault is only called if the containing element\n * doesn't consume the event, and it will cause an unintended scroll.\n *\n * @param event keyboard event to be prevented.\n */\nexport const preventDefaultEvent = (event: KeyboardEvent) => {\n  const target = event.target as Element;\n  if (!target) {\n    return;\n  }\n  const tagName = `${target.tagName}`.toLowerCase();\n  if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {\n    event.preventDefault();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {normalizeKey} from '@material/dom/keyboard';\n\nimport {MDCListAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\nimport {preventDefaultEvent} from './events';\nimport * as typeahead from './typeahead';\nimport {MDCListIndex, MDCListTextAndIndex} from './types';\n\nfunction isNumberArray(selectedIndex: MDCListIndex): selectedIndex is number[] {\n  return selectedIndex instanceof Array;\n}\n\n/**\n * Options for configuring how to update a selectable list item.\n */\ninterface SelectionUpdateOptions {\n  /** Whether the update was triggered by a user interaction. */\n  isUserInteraction?: boolean;\n  /**\n   * Whether the UI should be updated regardless of whether the\n   * selection would be a noop according to the foundation state.\n   * https://github.com/material-components/material-components-web/commit/5d060518804437aa1ae3152562f1bb78b1af4aa6.\n   */\n  forceUpdate?: boolean;\n  /**\n   * Whether disabled items should be omitted from updates. This is most\n   * relevant when trying to update all the items in a selection list.\n   */\n  omitDisabledItems?: boolean;\n}\n\n/** List of modifier keys to consider while handling keyboard events. */\nconst handledModifierKeys = ['Alt', 'Control', 'Meta', 'Shift'] as const;\n\n/** Type representing a modifier key we handle. */\ntype ModifierKey = NonNullable<(typeof handledModifierKeys)[number]>;\n\n/** Checks if the event has the given modifier keys. */\nfunction createModifierChecker(event?: KeyboardEvent|MouseEvent) {\n  const eventModifiers = new Set(\n      event ? handledModifierKeys.filter(m => event.getModifierState(m)) : []);\n  return (modifiers: ModifierKey[]) =>\n             modifiers.every(m => eventModifiers.has(m)) &&\n      modifiers.length === eventModifiers.size;\n}\n\n/** MDC List Foundation */\nexport class MDCListFoundation extends MDCFoundation<MDCListAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCListAdapter {\n    return {\n      addClassForElementIndex: () => undefined,\n      focusItemAtIndex: () => undefined,\n      getAttributeForElementIndex: () => null,\n      getFocusedElementIndex: () => 0,\n      getListItemCount: () => 0,\n      hasCheckboxAtIndex: () => false,\n      hasRadioAtIndex: () => false,\n      isCheckboxCheckedAtIndex: () => false,\n      isFocusInsideList: () => false,\n      isRootFocused: () => false,\n      listItemAtIndexHasClass: () => false,\n      notifyAction: () => undefined,\n      notifySelectionChange: () => {},\n      removeClassForElementIndex: () => undefined,\n      setAttributeForElementIndex: () => undefined,\n      setCheckedCheckboxOrRadioAtIndex: () => undefined,\n      setTabIndexForListItemChildren: () => undefined,\n      getPrimaryTextAtIndex: () => '',\n    };\n  }\n\n  private wrapFocus = false;\n  private isVertical = true;\n  private isSingleSelectionList = false;\n  private areDisabledItemsFocusable = false;\n  private selectedIndex: MDCListIndex = numbers.UNSET_INDEX;\n  private focusedItemIndex = numbers.UNSET_INDEX;\n  private useActivatedClass = false;\n  private useSelectedAttr = false;\n  private ariaCurrentAttrValue: string|null = null;\n  private isCheckboxList = false;\n  private isRadioList = false;\n  private lastSelectedIndex: number|null = null;\n\n  private hasTypeahead = false;\n  // Transiently holds current typeahead prefix from user.\n  private readonly typeaheadState = typeahead.initState();\n  private sortedIndexByFirstChar = new Map<string, MDCListTextAndIndex[]>();\n\n  constructor(adapter?: Partial<MDCListAdapter>) {\n    super({...MDCListFoundation.defaultAdapter, ...adapter});\n  }\n\n  layout() {\n    if (this.adapter.getListItemCount() === 0) {\n      return;\n    }\n\n    // TODO(b/172274142): consider all items when determining the list's type.\n    if (this.adapter.hasCheckboxAtIndex(0)) {\n      this.isCheckboxList = true;\n      this.selectedIndex = [];\n    } else if (this.adapter.hasRadioAtIndex(0)) {\n      this.isRadioList = true;\n    } else {\n      this.maybeInitializeSingleSelection();\n    }\n\n    if (this.hasTypeahead) {\n      this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();\n    }\n  }\n\n  /** Returns the index of the item that was last focused. */\n  getFocusedItemIndex() {\n    return this.focusedItemIndex;\n  }\n\n  /** Toggles focus wrapping with keyboard navigation. */\n  setWrapFocus(value: boolean) {\n    this.wrapFocus = value;\n  }\n\n  /**\n   * Toggles orientation direction for keyboard navigation (true for vertical,\n   * false for horizontal).\n   */\n  setVerticalOrientation(value: boolean) {\n    this.isVertical = value;\n  }\n\n  /** Toggles single-selection behavior. */\n  setSingleSelection(value: boolean) {\n    this.isSingleSelectionList = value;\n    if (value) {\n      this.maybeInitializeSingleSelection();\n      this.selectedIndex = this.getSelectedIndexFromDOM();\n    }\n  }\n\n  setDisabledItemsFocusable(value: boolean) {\n    this.areDisabledItemsFocusable = value;\n  }\n\n  /**\n   * Automatically determines whether the list is single selection list. If so,\n   * initializes the internal state to match the selected item.\n   */\n  private maybeInitializeSingleSelection() {\n    const selectedItemIndex = this.getSelectedIndexFromDOM();\n    if (selectedItemIndex === numbers.UNSET_INDEX) return;\n\n    const hasActivatedClass = this.adapter.listItemAtIndexHasClass(\n        selectedItemIndex, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n    if (hasActivatedClass) {\n      this.setUseActivatedClass(true);\n    }\n    this.isSingleSelectionList = true;\n    this.selectedIndex = selectedItemIndex;\n  }\n\n  /** @return Index of the first selected item based on the DOM state. */\n  private getSelectedIndexFromDOM() {\n    let selectedIndex = numbers.UNSET_INDEX;\n    const listItemsCount = this.adapter.getListItemCount();\n    for (let i = 0; i < listItemsCount; i++) {\n      const hasSelectedClass = this.adapter.listItemAtIndexHasClass(\n          i, cssClasses.LIST_ITEM_SELECTED_CLASS);\n      const hasActivatedClass = this.adapter.listItemAtIndexHasClass(\n          i, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n      if (!(hasSelectedClass || hasActivatedClass)) {\n        continue;\n      }\n\n      selectedIndex = i;\n      break;\n    }\n\n    return selectedIndex;\n  }\n\n  /**\n   * Sets whether typeahead is enabled on the list.\n   * @param hasTypeahead Whether typeahead is enabled.\n   */\n  setHasTypeahead(hasTypeahead: boolean) {\n    this.hasTypeahead = hasTypeahead;\n    if (hasTypeahead) {\n      this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();\n    }\n  }\n\n  /**\n   * @return Whether typeahead is currently matching a user-specified prefix.\n   */\n  isTypeaheadInProgress(): boolean {\n    return this.hasTypeahead &&\n        typeahead.isTypingInProgress(this.typeaheadState);\n  }\n\n  /** Toggle use of the \"activated\" CSS class. */\n  setUseActivatedClass(useActivated: boolean) {\n    this.useActivatedClass = useActivated;\n  }\n\n  /**\n   * Toggles use of the selected attribute (true for aria-selected, false for\n   * aria-checked).\n   */\n  setUseSelectedAttribute(useSelected: boolean) {\n    this.useSelectedAttr = useSelected;\n  }\n\n  getSelectedIndex(): MDCListIndex {\n    return this.selectedIndex;\n  }\n\n  setSelectedIndex(index: MDCListIndex, options: SelectionUpdateOptions = {}) {\n    if (!this.isIndexValid(index)) {\n      return;\n    }\n\n    if (this.isCheckboxList) {\n      this.setCheckboxAtIndex(index as number[], options);\n    } else if (this.isRadioList) {\n      this.setRadioAtIndex(index as number, options);\n    } else {\n      this.setSingleSelectionAtIndex(index as number, options);\n    }\n  }\n\n  /**\n   * Focus in handler for the list items.\n   */\n  handleFocusIn(listItemIndex: number) {\n    if (listItemIndex >= 0) {\n      this.focusedItemIndex = listItemIndex;\n      this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '0');\n      this.adapter.setTabIndexForListItemChildren(listItemIndex, '0');\n    }\n  }\n\n  /**\n   * Focus out handler for the list items.\n   */\n  handleFocusOut(listItemIndex: number) {\n    if (listItemIndex >= 0) {\n      this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '-1');\n      this.adapter.setTabIndexForListItemChildren(listItemIndex, '-1');\n    }\n\n    /**\n     * Between Focusout & Focusin some browsers do not have focus on any\n     * element. Setting a delay to wait till the focus is moved to next element.\n     */\n    setTimeout(() => {\n      if (!this.adapter.isFocusInsideList()) {\n        this.setTabindexToFirstSelectedOrFocusedItem();\n      }\n    }, 0);\n  }\n\n  private isIndexDisabled(index: number) {\n    return this.adapter.listItemAtIndexHasClass(\n        index, cssClasses.LIST_ITEM_DISABLED_CLASS);\n  }\n\n  /**\n   * Key handler for the list.\n   */\n  handleKeydown(\n      event: KeyboardEvent, isRootListItem: boolean, listItemIndex: number) {\n    const isArrowLeft = normalizeKey(event) === 'ArrowLeft';\n    const isArrowUp = normalizeKey(event) === 'ArrowUp';\n    const isArrowRight = normalizeKey(event) === 'ArrowRight';\n    const isArrowDown = normalizeKey(event) === 'ArrowDown';\n    const isHome = normalizeKey(event) === 'Home';\n    const isEnd = normalizeKey(event) === 'End';\n    const isEnter = normalizeKey(event) === 'Enter';\n    const isSpace = normalizeKey(event) === 'Spacebar';\n\n    // The keys for forward and back differ based on list orientation.\n    const isForward =\n        (this.isVertical && isArrowDown) || (!this.isVertical && isArrowRight);\n    const isBack =\n        (this.isVertical && isArrowUp) || (!this.isVertical && isArrowLeft);\n\n    // Have to check both upper and lower case, because having caps lock on\n    // affects the value.\n    const isLetterA = event.key === 'A' || event.key === 'a';\n\n    const eventHasModifiers = createModifierChecker(event);\n\n    if (this.adapter.isRootFocused()) {\n      if ((isBack || isEnd) && eventHasModifiers([])) {\n        event.preventDefault();\n        this.focusLastElement();\n      } else if ((isForward || isHome) && eventHasModifiers([])) {\n        event.preventDefault();\n        this.focusFirstElement();\n      } else if (\n          isBack && eventHasModifiers(['Shift']) && this.isCheckboxList) {\n        event.preventDefault();\n        const focusedIndex = this.focusLastElement();\n        if (focusedIndex !== -1) {\n          this.setSelectedIndexOnAction(focusedIndex, false);\n        }\n      } else if (\n          isForward && eventHasModifiers(['Shift']) && this.isCheckboxList) {\n        event.preventDefault();\n        const focusedIndex = this.focusFirstElement();\n        if (focusedIndex !== -1) {\n          this.setSelectedIndexOnAction(focusedIndex, false);\n        }\n      }\n\n      if (this.hasTypeahead) {\n        const handleKeydownOpts: typeahead.HandleKeydownOpts = {\n          event,\n          focusItemAtIndex: (index) => {\n            this.focusItemAtIndex(index);\n          },\n          focusedItemIndex: -1,\n          isTargetListItem: isRootListItem,\n          sortedIndexByFirstChar: this.sortedIndexByFirstChar,\n          isItemAtIndexDisabled: (index) => this.isIndexDisabled(index),\n        };\n\n        typeahead.handleKeydown(handleKeydownOpts, this.typeaheadState);\n      }\n\n      return;\n    }\n\n    let currentIndex = this.adapter.getFocusedElementIndex();\n    if (currentIndex === -1) {\n      currentIndex = listItemIndex;\n      if (currentIndex < 0) {\n        // If this event doesn't have a mdc-list-item ancestor from the\n        // current list (not from a sublist), return early.\n        return;\n      }\n    }\n\n    if (isForward && eventHasModifiers([])) {\n      preventDefaultEvent(event);\n      this.focusNextElement(currentIndex);\n    } else if (isBack && eventHasModifiers([])) {\n      preventDefaultEvent(event);\n      this.focusPrevElement(currentIndex);\n    } else if (\n        isForward && eventHasModifiers(['Shift']) && this.isCheckboxList) {\n      preventDefaultEvent(event);\n      const focusedIndex = this.focusNextElement(currentIndex);\n      if (focusedIndex !== -1) {\n        this.setSelectedIndexOnAction(focusedIndex, false);\n      }\n    } else if (isBack && eventHasModifiers(['Shift']) && this.isCheckboxList) {\n      preventDefaultEvent(event);\n      const focusedIndex = this.focusPrevElement(currentIndex);\n      if (focusedIndex !== -1) {\n        this.setSelectedIndexOnAction(focusedIndex, false);\n      }\n    } else if (isHome && eventHasModifiers([])) {\n      preventDefaultEvent(event);\n      this.focusFirstElement();\n    } else if (isEnd && eventHasModifiers([])) {\n      preventDefaultEvent(event);\n      this.focusLastElement();\n    } else if (\n        isHome && eventHasModifiers(['Control', 'Shift']) &&\n        this.isCheckboxList) {\n      preventDefaultEvent(event);\n      if (this.isIndexDisabled(currentIndex)) {\n        return;\n      }\n      this.focusFirstElement();\n      this.toggleCheckboxRange(0, currentIndex, currentIndex);\n    } else if (\n        isEnd && eventHasModifiers(['Control', 'Shift']) &&\n        this.isCheckboxList) {\n      preventDefaultEvent(event);\n      if (this.isIndexDisabled(currentIndex)) {\n        return;\n      }\n      this.focusLastElement();\n      this.toggleCheckboxRange(\n          currentIndex, this.adapter.getListItemCount() - 1, currentIndex);\n    } else if (\n        isLetterA && eventHasModifiers(['Control']) && this.isCheckboxList) {\n      event.preventDefault();\n      this.checkboxListToggleAll(\n          this.selectedIndex === numbers.UNSET_INDEX ?\n              [] :\n              this.selectedIndex as number[],\n          true);\n    } else if (\n        (isEnter || isSpace) &&\n        (eventHasModifiers([]) || eventHasModifiers(['Alt']))) {\n      if (isRootListItem) {\n        // Return early if enter key is pressed on anchor element which triggers\n        // synthetic MouseEvent event.\n        const target = event.target as Element | null;\n        if (target && target.tagName === 'A' && isEnter) {\n          return;\n        }\n        preventDefaultEvent(event);\n\n        if (this.isIndexDisabled(currentIndex)) {\n          return;\n        }\n\n        if (!this.isTypeaheadInProgress()) {\n          if (this.isSelectableList()) {\n            this.setSelectedIndexOnAction(currentIndex, false);\n          }\n          this.adapter.notifyAction(currentIndex);\n        }\n      }\n    } else if (\n        (isEnter || isSpace) && eventHasModifiers(['Shift']) &&\n        this.isCheckboxList) {\n      // Return early if enter key is pressed on anchor element which triggers\n      // synthetic MouseEvent event.\n      const target = event.target as Element | null;\n      if (target && target.tagName === 'A' && isEnter) {\n        return;\n      }\n      preventDefaultEvent(event);\n\n      if (this.isIndexDisabled(currentIndex)) {\n        return;\n      }\n\n      if (!this.isTypeaheadInProgress()) {\n        this.toggleCheckboxRange(\n            this.lastSelectedIndex ?? currentIndex, currentIndex, currentIndex);\n        this.adapter.notifyAction(currentIndex);\n      }\n    }\n\n    if (this.hasTypeahead) {\n      const handleKeydownOpts: typeahead.HandleKeydownOpts = {\n        event,\n        focusItemAtIndex: (index) => {this.focusItemAtIndex(index)},\n        focusedItemIndex: this.focusedItemIndex,\n        isTargetListItem: isRootListItem,\n        sortedIndexByFirstChar: this.sortedIndexByFirstChar,\n        isItemAtIndexDisabled: (index) => this.isIndexDisabled(index),\n      };\n\n      typeahead.handleKeydown(handleKeydownOpts, this.typeaheadState);\n    }\n  }\n\n  /**\n   * Click handler for the list.\n   *\n   * @param index Index for the item that has been clicked.\n   * @param isCheckboxAlreadyUpdatedInAdapter Whether the checkbox for\n   *   the list item has already been updated in the adapter. This attribute\n   *   should be set to `true` when e.g. the click event directly landed on\n   *   the underlying native checkbox element which would cause the checked\n   *   state to be already toggled within `adapter.isCheckboxCheckedAtIndex`.\n   */\n  handleClick(\n      index: number, isCheckboxAlreadyUpdatedInAdapter: boolean,\n      event?: MouseEvent) {\n    const eventHasModifiers = createModifierChecker(event);\n\n    if (index === numbers.UNSET_INDEX) {\n      return;\n    }\n\n    if (this.isIndexDisabled(index)) {\n      return;\n    }\n\n    if (eventHasModifiers([])) {\n      if (this.isSelectableList()) {\n        this.setSelectedIndexOnAction(index, isCheckboxAlreadyUpdatedInAdapter);\n      }\n      this.adapter.notifyAction(index);\n    } else if (this.isCheckboxList && eventHasModifiers(['Shift'])) {\n      this.toggleCheckboxRange(this.lastSelectedIndex ?? index, index, index);\n      this.adapter.notifyAction(index);\n    }\n  }\n\n  /**\n   * Focuses the next element on the list.\n   */\n  focusNextElement(index: number) {\n    const count = this.adapter.getListItemCount();\n    let nextIndex = index;\n    let firstChecked = null;\n\n    do {\n      nextIndex++;\n      if (nextIndex >= count) {\n        if (this.wrapFocus) {\n          nextIndex = 0;\n        } else {\n          // Return early because last item is already focused.\n          return index;\n        }\n      }\n      if (nextIndex === firstChecked) {\n        return -1;\n      }\n      firstChecked = firstChecked ?? nextIndex;\n    } while (!this.areDisabledItemsFocusable &&\n             this.isIndexDisabled(nextIndex));\n\n    this.focusItemAtIndex(nextIndex);\n    return nextIndex;\n  }\n\n  /**\n   * Focuses the previous element on the list.\n   */\n  focusPrevElement(index: number) {\n    const count = this.adapter.getListItemCount();\n    let prevIndex = index;\n    let firstChecked = null;\n\n    do {\n      prevIndex--;\n      if (prevIndex < 0) {\n        if (this.wrapFocus) {\n          prevIndex = count - 1;\n        } else {\n          // Return early because first item is already focused.\n          return index;\n        }\n      }\n      if (prevIndex === firstChecked) {\n        return -1;\n      }\n      firstChecked = firstChecked ?? prevIndex;\n    } while (!this.areDisabledItemsFocusable &&\n             this.isIndexDisabled(prevIndex));\n\n    this.focusItemAtIndex(prevIndex);\n    return prevIndex;\n  }\n\n  focusFirstElement() {\n    // Pass -1 to `focusNextElement`, since it will incremement to 0 and focus\n    // the first element.\n    return this.focusNextElement(-1);\n  }\n\n  focusLastElement() {\n    // Pass the length of the list to `focusNextElement` since it will decrement\n    // to length - 1 and focus the last element.\n    return this.focusPrevElement(this.adapter.getListItemCount());\n  }\n\n  focusInitialElement() {\n    const initialIndex = this.getFirstSelectedOrFocusedItemIndex();\n    if (initialIndex !== numbers.UNSET_INDEX) {\n      this.focusItemAtIndex(initialIndex);\n    }\n    return initialIndex;\n  }\n\n  /**\n   * @param itemIndex Index of the list item\n   * @param isEnabled Sets the list item to enabled or disabled.\n   */\n  setEnabled(itemIndex: number, isEnabled: boolean): void {\n    if (!this.isIndexValid(itemIndex, false)) {\n      return;\n    }\n\n    if (isEnabled) {\n      this.adapter.removeClassForElementIndex(\n          itemIndex, cssClasses.LIST_ITEM_DISABLED_CLASS);\n      this.adapter.setAttributeForElementIndex(\n          itemIndex, strings.ARIA_DISABLED, 'false');\n    } else {\n      this.adapter.addClassForElementIndex(\n          itemIndex, cssClasses.LIST_ITEM_DISABLED_CLASS);\n      this.adapter.setAttributeForElementIndex(\n          itemIndex, strings.ARIA_DISABLED, 'true');\n    }\n  }\n\n  private setSingleSelectionAtIndex(\n      index: number, options: SelectionUpdateOptions = {}) {\n    if (this.selectedIndex === index && !options.forceUpdate) {\n      return;\n    }\n\n    let selectedClassName = cssClasses.LIST_ITEM_SELECTED_CLASS;\n    if (this.useActivatedClass) {\n      selectedClassName = cssClasses.LIST_ITEM_ACTIVATED_CLASS;\n    }\n\n    if (this.selectedIndex !== numbers.UNSET_INDEX) {\n      this.adapter.removeClassForElementIndex(\n          this.selectedIndex as number, selectedClassName);\n    }\n\n    this.setAriaForSingleSelectionAtIndex(index);\n    this.setTabindexAtIndex(index);\n    if (index !== numbers.UNSET_INDEX) {\n      this.adapter.addClassForElementIndex(index, selectedClassName);\n    }\n\n    this.selectedIndex = index;\n\n    // If the selected value has changed through user interaction,\n    // we want to notify the selection change to the adapter.\n    if (options.isUserInteraction && !options.forceUpdate) {\n      this.adapter.notifySelectionChange([index]);\n    }\n  }\n\n  /**\n   * Sets aria attribute for single selection at given index.\n   */\n  private setAriaForSingleSelectionAtIndex(index: number) {\n    // Detect the presence of aria-current and get the value only during list\n    // initialization when it is in unset state.\n    if (this.selectedIndex === numbers.UNSET_INDEX &&\n        index !== numbers.UNSET_INDEX) {\n      this.ariaCurrentAttrValue =\n          this.adapter.getAttributeForElementIndex(index, strings.ARIA_CURRENT);\n    }\n\n    const isAriaCurrent = this.ariaCurrentAttrValue !== null;\n    const ariaAttribute =\n        isAriaCurrent ? strings.ARIA_CURRENT : strings.ARIA_SELECTED;\n\n    if (this.selectedIndex !== numbers.UNSET_INDEX) {\n      this.adapter.setAttributeForElementIndex(\n          this.selectedIndex as number, ariaAttribute, 'false');\n    }\n\n    if (index !== numbers.UNSET_INDEX) {\n      const ariaAttributeValue =\n          isAriaCurrent ? this.ariaCurrentAttrValue : 'true';\n      this.adapter.setAttributeForElementIndex(\n          index, ariaAttribute, ariaAttributeValue as string);\n    }\n  }\n\n  /**\n   * Returns the attribute to use for indicating selection status.\n   */\n  private getSelectionAttribute(): string {\n    return this.useSelectedAttr ? strings.ARIA_SELECTED : strings.ARIA_CHECKED;\n  }\n\n  /**\n   * Toggles radio at give index. Radio doesn't change the checked state if it\n   * is already checked.\n   */\n  private setRadioAtIndex(index: number, options: SelectionUpdateOptions = {}) {\n    const selectionAttribute = this.getSelectionAttribute();\n    this.adapter.setCheckedCheckboxOrRadioAtIndex(index, true);\n\n    if (this.selectedIndex === index && !options.forceUpdate) {\n      return;\n    }\n\n    if (this.selectedIndex !== numbers.UNSET_INDEX) {\n      this.adapter.setAttributeForElementIndex(\n          this.selectedIndex as number, selectionAttribute, 'false');\n    }\n\n    this.adapter.setAttributeForElementIndex(index, selectionAttribute, 'true');\n\n    this.selectedIndex = index;\n\n    // If the selected value has changed through user interaction,\n    // we want to notify the selection change to the adapter.\n    if (options.isUserInteraction && !options.forceUpdate) {\n      this.adapter.notifySelectionChange([index]);\n    }\n  }\n\n  private setCheckboxAtIndex(\n      indices: number[], options: SelectionUpdateOptions = {}) {\n    const currentIndex = this.selectedIndex;\n    // If this update is not triggered by a user interaction, we do not\n    // need to know about the currently selected indices and can avoid\n    // constructing the `Set` for performance reasons.\n    const currentlySelected = options.isUserInteraction ?\n        new Set(\n            currentIndex === numbers.UNSET_INDEX ? [] :\n                                                   currentIndex as number[]) :\n        null;\n    const selectionAttribute = this.getSelectionAttribute();\n    const changedIndices = [];\n\n    for (let i = 0; i < this.adapter.getListItemCount(); i++) {\n      if (options.omitDisabledItems && this.isIndexDisabled(i)) {\n        continue;\n      }\n      const previousIsChecked = currentlySelected?.has(i);\n      const newIsChecked = indices.indexOf(i) >= 0;\n\n      // If the selection has changed for this item, we keep track of it\n      // so that we can notify the adapter.\n      if (newIsChecked !== previousIsChecked) {\n        changedIndices.push(i);\n      }\n\n      this.adapter.setCheckedCheckboxOrRadioAtIndex(i, newIsChecked);\n      this.adapter.setAttributeForElementIndex(\n          i, selectionAttribute, newIsChecked ? 'true' : 'false');\n    }\n\n    this.selectedIndex = options.omitDisabledItems ?\n        this.resolveSelectedIndices(indices) :\n        indices;\n\n    // If the selected value has changed through user interaction,\n    // we want to notify the selection change to the adapter.\n    if (options.isUserInteraction && changedIndices.length) {\n      this.adapter.notifySelectionChange(changedIndices);\n    }\n  }\n\n  /**\n   * Helper method for ensuring that the list of selected indices remains\n   * accurate when calling setCheckboxAtIndex with omitDisabledItems set to\n   * true.\n   */\n  private resolveSelectedIndices(setCheckedItems: number[]): number[] {\n    const currentlySelectedItems = this.selectedIndex === numbers.UNSET_INDEX ?\n        [] :\n        this.selectedIndex as number[];\n\n    const currentlySelectedDisabledItems =\n        currentlySelectedItems.filter(i => this.isIndexDisabled(i));\n    const enabledSetCheckedItems =\n        setCheckedItems.filter(i => !this.isIndexDisabled(i));\n\n    // Updated selectedIndex should be the enabled setCheckedItems + any missing\n    // selected disabled items.\n    const updatedSelectedItems = [...new Set(\n        [...enabledSetCheckedItems, ...currentlySelectedDisabledItems])];\n    return updatedSelectedItems.sort((a, b) => a - b);\n  }\n\n  /**\n   * Toggles the state of all checkboxes in the given range (inclusive) based\n   * on the state of the checkbox at the `toggleIndex`. To determine whether\n   * to set the given range to checked or unchecked, read the value of the\n   * checkbox at the `toggleIndex` and negate it. Then apply that new checked\n   * state to all checkboxes in the range.\n   * @param fromIndex The start of the range of checkboxes to toggle\n   * @param toIndex The end of the range of checkboxes to toggle\n   * @param toggleIndex The index that will be used to determine the new state\n   *     of the given checkbox range.\n   */\n  private toggleCheckboxRange(\n      fromIndex: number, toIndex: number, toggleIndex: number) {\n    this.lastSelectedIndex = toggleIndex;\n    const currentlySelected = new Set(\n        this.selectedIndex === numbers.UNSET_INDEX ?\n            [] :\n            this.selectedIndex as number[]);\n    const newIsChecked = !currentlySelected?.has(toggleIndex);\n\n    const [startIndex, endIndex] = [fromIndex, toIndex].sort();\n    const selectionAttribute = this.getSelectionAttribute();\n    const changedIndices = [];\n\n    for (let i = startIndex; i <= endIndex; i++) {\n      if (this.isIndexDisabled(i)) {\n        continue;\n      }\n      const previousIsChecked = currentlySelected.has(i);\n\n      // If the selection has changed for this item, we keep track of it\n      // so that we can notify the adapter.\n      if (newIsChecked !== previousIsChecked) {\n        changedIndices.push(i);\n        this.adapter.setCheckedCheckboxOrRadioAtIndex(i, newIsChecked);\n        this.adapter.setAttributeForElementIndex(\n            i, selectionAttribute, `${newIsChecked}`);\n        if (newIsChecked) {\n          currentlySelected.add(i);\n        } else {\n          currentlySelected.delete(i);\n        }\n      }\n    }\n\n    // If the selected value has changed, update and notify the selection\n    // change to the adapter.\n    if (changedIndices.length) {\n      this.selectedIndex = [...currentlySelected];\n      this.adapter.notifySelectionChange(changedIndices);\n    }\n  }\n\n  private setTabindexAtIndex(index: number) {\n    if (this.focusedItemIndex === numbers.UNSET_INDEX && index !== 0 &&\n        index !== numbers.UNSET_INDEX) {\n      // If some list item was selected set first list item's tabindex to -1.\n      // Generally, tabindex is set to 0 on first list item of list that has\n      // no preselected items.\n      this.adapter.setAttributeForElementIndex(0, 'tabindex', '-1');\n    } else if (this.focusedItemIndex >= 0 && this.focusedItemIndex !== index) {\n      this.adapter.setAttributeForElementIndex(\n          this.focusedItemIndex, 'tabindex', '-1');\n    }\n\n    // Set the previous selection's tabindex to -1. We need this because\n    // in selection menus that are not visible, programmatically setting an\n    // option will not change focus but will change where tabindex should be\n    // 0.\n    if (!(this.selectedIndex instanceof Array) &&\n        this.selectedIndex !== index &&\n        this.focusedItemIndex !== numbers.UNSET_INDEX) {\n      this.adapter.setAttributeForElementIndex(\n          this.selectedIndex, 'tabindex', '-1');\n    }\n\n    if (index !== numbers.UNSET_INDEX) {\n      this.adapter.setAttributeForElementIndex(index, 'tabindex', '0');\n    }\n  }\n\n  /**\n   * @return Return true if it is single selectin list, checkbox list or radio\n   *     list.\n   */\n  private isSelectableList() {\n    return this.isSingleSelectionList || this.isCheckboxList ||\n        this.isRadioList;\n  }\n\n  private setTabindexToFirstSelectedOrFocusedItem() {\n    const targetIndex = this.getFirstSelectedOrFocusedItemIndex();\n    this.setTabindexAtIndex(targetIndex);\n  }\n\n  private getFirstSelectedOrFocusedItemIndex(): number {\n    const firstFocusableListItem = this.getFirstEnabledItem();\n\n    if (this.adapter.getListItemCount() === 0) {\n      return numbers.UNSET_INDEX;\n    }\n\n    // Action lists retain focus on the most recently focused item.\n    if (!this.isSelectableList()) {\n      return Math.max(this.focusedItemIndex, firstFocusableListItem);\n    }\n\n    // Single-selection lists focus the selected item.\n    if (typeof this.selectedIndex === 'number' &&\n        this.selectedIndex !== numbers.UNSET_INDEX) {\n      return this.areDisabledItemsFocusable &&\n              this.isIndexDisabled(this.selectedIndex) ?\n          firstFocusableListItem :\n          this.selectedIndex;\n    }\n\n    // Multiple-selection lists focus the first enabled selected item.\n    if (isNumberArray(this.selectedIndex) && this.selectedIndex.length > 0) {\n      const sorted = [...this.selectedIndex].sort((a, b) => a - b);\n      for (const index of sorted) {\n        if (this.isIndexDisabled(index) && !this.areDisabledItemsFocusable) {\n          continue;\n        } else {\n          return index;\n        }\n      }\n    }\n\n    // Selection lists without a selection focus the first item.\n    return firstFocusableListItem;\n  }\n\n\n  private getFirstEnabledItem(): number {\n    const listSize = this.adapter.getListItemCount();\n    let i = 0;\n    while (i < listSize) {\n      if (!this.isIndexDisabled(i)) {\n        break;\n      }\n      i++;\n    }\n    return i === listSize ? numbers.UNSET_INDEX : i;\n  }\n\n  private isIndexValid(index: MDCListIndex, validateListType = true) {\n    if (index instanceof Array) {\n      if (!this.isCheckboxList && validateListType) {\n        throw new Error(\n            'MDCListFoundation: Array of index is only supported for checkbox based list');\n      }\n\n      if (index.length === 0) {\n        return true;\n      } else {\n        return index.some((i) => this.isIndexInRange(i));\n      }\n    } else if (typeof index === 'number') {\n      if (this.isCheckboxList && validateListType) {\n        throw new Error(\n            `MDCListFoundation: Expected array of index for checkbox based list but got number: ${\n                index}`);\n      }\n      return this.isIndexInRange(index) ||\n          this.isSingleSelectionList && index === numbers.UNSET_INDEX;\n    } else {\n      return false;\n    }\n  }\n\n  private isIndexInRange(index: number) {\n    const listSize = this.adapter.getListItemCount();\n    return index >= 0 && index < listSize;\n  }\n\n  /**\n   * Sets selected index on user action, toggles checkboxes in checkbox lists\n   * by default, unless `isCheckboxAlreadyUpdatedInAdapter` is set to `true`.\n   *\n   * In cases where `isCheckboxAlreadyUpdatedInAdapter` is set to `true`, the\n   * UI is just updated to reflect the value returned by the adapter.\n   *\n   * When calling this, make sure user interaction does not toggle disabled\n   * list items.\n   */\n  private setSelectedIndexOnAction(\n      index: number, isCheckboxAlreadyUpdatedInAdapter: boolean) {\n    this.lastSelectedIndex = index;\n    if (this.isCheckboxList) {\n      this.toggleCheckboxAtIndex(index, isCheckboxAlreadyUpdatedInAdapter);\n      this.adapter.notifySelectionChange([index]);\n    } else {\n      this.setSelectedIndex(index, {isUserInteraction: true});\n    }\n  }\n\n  private toggleCheckboxAtIndex(\n      index: number, isCheckboxAlreadyUpdatedInAdapter: boolean) {\n    const selectionAttribute = this.getSelectionAttribute();\n    const adapterIsChecked = this.adapter.isCheckboxCheckedAtIndex(index);\n\n    // By default the checked value from the adapter is toggled unless the\n    // checked state in the adapter has already been updated beforehand.\n    // This can be happen when the underlying native checkbox has already\n    // been updated through the native click event.\n    let newCheckedValue;\n    if (isCheckboxAlreadyUpdatedInAdapter) {\n      newCheckedValue = adapterIsChecked;\n    } else {\n      newCheckedValue = !adapterIsChecked;\n      this.adapter.setCheckedCheckboxOrRadioAtIndex(index, newCheckedValue)\n    }\n\n    this.adapter.setAttributeForElementIndex(\n        index, selectionAttribute, newCheckedValue ? 'true' : 'false');\n\n    // If none of the checkbox items are selected and selectedIndex is not\n    // initialized then provide a default value.\n    let selectedIndexes = this.selectedIndex === numbers.UNSET_INDEX ?\n        [] :\n        (this.selectedIndex as number[]).slice();\n\n    if (newCheckedValue) {\n      selectedIndexes.push(index);\n    } else {\n      selectedIndexes = selectedIndexes.filter((i) => i !== index);\n    }\n\n    this.selectedIndex = selectedIndexes;\n  }\n\n  private focusItemAtIndex(index: number) {\n    this.adapter.focusItemAtIndex(index);\n    this.focusedItemIndex = index;\n  }\n\n  private getEnabledListItemCount(): number {\n    const listSize = this.adapter.getListItemCount();\n    let adjustedCount = 0;\n    for (let i = 0; i < listSize; i++) {\n      if (!this.isIndexDisabled(i)) {\n        adjustedCount++;\n      }\n    }\n    return adjustedCount;\n  }\n\n  private checkboxListToggleAll(\n      currentlySelectedIndices: number[], isUserInteraction: boolean) {\n    const enabledListItemCount = this.getEnabledListItemCount();\n    const totalListItemCount = this.adapter.getListItemCount();\n    const currentlyEnabledSelectedIndices =\n        currentlySelectedIndices.filter(i => !this.isIndexDisabled(i));\n\n    // If all items are selected, deselect everything.\n    // We check >= rather than === to `enabledListItemCount` since a disabled\n    // item could be selected, and we don't take that into consideration when\n    // toggling the other checkbox values.\n    if (currentlyEnabledSelectedIndices.length >= enabledListItemCount) {\n      // Use omitDisabledItems option to ensure disabled selected items are not\n      // de-selected.\n      this.setCheckboxAtIndex([], {isUserInteraction, omitDisabledItems: true});\n    } else {\n      // Otherwise select all enabled options.\n      const allIndexes: number[] = [];\n      for (let i = 0; i < totalListItemCount; i++) {\n        if (!this.isIndexDisabled(i) ||\n            currentlySelectedIndices.indexOf(i) > -1) {\n          allIndexes.push(i);\n        }\n      }\n      // Use omitDisabledItems option to ensure disabled selected items are not\n      // de-selected.\n      this.setCheckboxAtIndex(\n          allIndexes, {isUserInteraction, omitDisabledItems: true});\n    }\n  }\n\n  /**\n   * Given the next desired character from the user, adds it to the typeahead\n   * buffer. Then, attempts to find the next option matching the buffer. Wraps\n   * around if at the end of options.\n   *\n   * @param nextChar The next character to add to the prefix buffer.\n   * @param startingIndex The index from which to start matching. Only\n   *     relevant when starting a new match sequence. To start a new match\n   *     sequence, clear the buffer using `clearTypeaheadBuffer`, or wait for\n   *     the buffer to clear after a set interval defined in list foundation.\n   *     Defaults to the currently focused index.\n   * @return The index of the matched item, or -1 if no match.\n   */\n  typeaheadMatchItem(\n      nextChar: string, startingIndex?: number, skipFocus = false) {\n    const opts: typeahead.TypeaheadMatchItemOpts = {\n      focusItemAtIndex: (index) => {\n        this.focusItemAtIndex(index);\n      },\n      focusedItemIndex: startingIndex ? startingIndex : this.focusedItemIndex,\n      nextChar,\n      sortedIndexByFirstChar: this.sortedIndexByFirstChar,\n      skipFocus,\n      isItemAtIndexDisabled: (index) => this.isIndexDisabled(index)\n    };\n    return typeahead.matchItem(opts, this.typeaheadState);\n  }\n\n  /**\n   * Initializes the MDCListTextAndIndex data structure by indexing the\n   * current list items by primary text.\n   *\n   * @return The primary texts of all the list items sorted by first\n   *     character.\n   */\n  private typeaheadInitSortedIndex() {\n    return typeahead.initSortedIndex(\n        this.adapter.getListItemCount(), this.adapter.getPrimaryTextAtIndex);\n  }\n\n  /**\n   * Clears the typeahead buffer.\n   */\n  clearTypeaheadBuffer() {\n    typeahead.clearBuffer(this.typeaheadState);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCListFoundation;\n"
  },
  {
    "path": "packages/mdc-list/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-list/mdc-list.import.scss",
    "content": "@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"variables\" as mdc-list-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"mixins\" as mdc-list-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-list\";\n"
  },
  {
    "path": "packages/mdc-list/mdc-list.scss",
    "content": "// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use './mixins';\n@include mixins.deprecated-core-styles;\n"
  },
  {
    "path": "packages/mdc-list/package.json",
    "content": "{\n  \"name\": \"@material/list\",\n  \"description\": \"The Material Components for the web list component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.list.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"list\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-list\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-list/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {cssClasses, deprecatedClassNameMap, strings} from '../constants';\nimport {MDCList, MDCListFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n    <ul class=\"mdc-deprecated-list\" tabindex=\"-1\">\n      <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n        <button>one</button>\n      </li>\n      <li class=\"mdc-deprecated-list-item\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Potato</span>\n        <a href=\"http://www.google.com\">Link</a>\n      </li>\n      <li class=\"mdc-deprecated-list-item\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Pasta</span>\n        <input type=\"checkbox\"/>\n      </li>\n      <li class=\"mdc-deprecated-list-item\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Pizza</span>\n        <input type=\"radio\"/>\n      </li>\n     </ul>\n    `);\n}\n\nfunction getFixtureWithDisabledItems() {\n  return createFixture(html`\n    <ul class=\"mdc-deprecated-list\" tabindex=\"-1\">\n      <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n        <button>one</button>\n      </li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--disabled\" aria-disabled=\"true\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Potato</span>\n        <a href=\"http://www.google.com\">Link</a>\n      </li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--disabled\" aria-disabled=\"true\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Pasta</span>\n        <input type=\"checkbox\"/>\n      </li>\n      <li class=\"mdc-deprecated-list-item\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Pizza</span>\n        <input type=\"radio\"/>\n      </li>\n     </ul>\n    `);\n}\n\nfunction getTwoLineFixture() {\n  return createFixture(html`\n      <ul class=\"mdc-deprecated-list mdc-deprecated-list--two-line\">\n        <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n          <span class=\"mdc-deprecated-list-item__text\">\n            <span class=\"mdc-deprecated-list-item__ripple\"></span>\n            <span class=\"mdc-deprecated-list-item__text\">\n              <span class=\"mdc-deprecated-list-item__primary-text\">Fruit</span>\n              <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary fruit</span>\n            </span>\n          </span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" tabindex=\"0\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">\n            <span class=\"mdc-deprecated-list-item__primary-text\">Potato</span>\n            <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary potato</span>\n          </span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">\n            <span class=\"mdc-deprecated-list-item__primary-text\">Pasta</span>\n            <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary pasta</span>\n          </span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">\n            <span class=\"mdc-deprecated-list-item__primary-text\">Pizza</span>\n            <span class=\"mdc-deprecated-list-item__secondary-text\">Secondary pizza</span>\n          </span>\n        </li>\n      </ul>\n    `);\n}\n\nfunction setupTest(root = getFixture()) {\n  const mockFoundation = createMockFoundation(MDCListFoundation);\n  const component = new MDCList(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCList', () => {\n  it('attachTo initializes and returns a MDCList instance', () => {\n    expect(MDCList.attachTo(getFixture()) instanceof MDCList).toBe(true);\n  });\n\n  it('component calls setVerticalOrientation on the foundation if aria-orientation is not set',\n     () => {\n       const {mockFoundation} = setupTest();\n       expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledWith(true);\n       expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledTimes(1);\n     });\n\n  it('component calls setVerticalOrientation(false) on the foundation if aria-orientation=horizontal',\n     () => {\n       const root = getFixture();\n       root.setAttribute('aria-orientation', 'horizontal');\n       const {mockFoundation} = setupTest(root);\n       expect(mockFoundation.setVerticalOrientation)\n           .toHaveBeenCalledWith(false);\n       expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledTimes(1);\n     });\n\n  it('component calls setVerticalOrientation(true) on the foundation if aria-orientation=vertical',\n     () => {\n       const root = getFixture();\n       root.setAttribute('aria-orientation', 'vertical');\n       const {mockFoundation} = setupTest(root);\n       expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledWith(true);\n       expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledTimes(1);\n     });\n\n  it('#initializeListType populates selectedIndex based on preselected checkbox items',\n     () => {\n       const {root, component, mockFoundation} = setupTest();\n       const listElements = Array.from(root.querySelectorAll<HTMLElement>(\n           `.${deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]}`));\n       listElements.forEach((itemEl: HTMLElement) => {\n         itemEl.setAttribute('role', 'checkbox');\n       });\n\n       listElements[2].setAttribute('aria-checked', 'true');\n       component.initializeListType();\n       expect(mockFoundation.setSelectedIndex).toHaveBeenCalledWith([2]);\n       expect(mockFoundation.setSelectedIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('#initializeListType populates selectedIndex based on preselected radio item',\n     () => {\n       const {root, component, mockFoundation} = setupTest();\n       const listElements = root.querySelectorAll<HTMLElement>(\n           `.${deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]}`);\n       listElements[3].setAttribute('role', 'radio');\n       listElements[3].setAttribute('aria-checked', 'true');\n\n       component.initializeListType();\n       expect(mockFoundation.setSelectedIndex).toHaveBeenCalledWith(3);\n       expect(mockFoundation.setSelectedIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('#initializeListType does not populate selectedIndex when no item is selected',\n     () => {\n       const {component, mockFoundation} = setupTest();\n       component.initializeListType();\n       expect(mockFoundation.setSelectedIndex)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#setEnabled calls foundation method setEnabled with given index and enabled state.',\n     () => {\n       const {component, mockFoundation} = setupTest();\n       component.setEnabled(1, true);\n       expect(mockFoundation.setEnabled).toHaveBeenCalledWith(1, true);\n       expect(mockFoundation.setEnabled).toHaveBeenCalledTimes(1);\n     });\n\n  it('#getTypeaheadInProgress calls foundation method', () => {\n    const {component, mockFoundation} = setupTest();\n    component.typeaheadInProgress;\n    expect(mockFoundation.isTypeaheadInProgress).toHaveBeenCalled();\n  });\n\n  it('#typeaheadMatchItem calls foundation method with given index and starting index.',\n     () => {\n       const {component, mockFoundation} = setupTest();\n       component.typeaheadMatchItem('a', 2);\n       expect(mockFoundation.typeaheadMatchItem)\n           .toHaveBeenCalledWith('a', 2, true);\n       expect(mockFoundation.typeaheadMatchItem).toHaveBeenCalledTimes(1);\n     });\n\n  it('adapter#getListItemCount returns correct number of list items', () => {\n    const {root, component} = setupTest();\n    document.body.appendChild(root);\n    const number =\n        root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item').length;\n    expect(number).toEqual(\n        (component.getDefaultFoundation() as any).adapter.getListItemCount());\n    document.body.removeChild(root);\n  });\n\n  it('adapter#getFocusedElementIndex returns the index of the currently selected element',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       root.querySelectorAll<HTMLInputElement>('.mdc-deprecated-list-item')[0]\n           .focus();\n       expect(0).toEqual((component.getDefaultFoundation() as any)\n                             .adapter.getFocusedElementIndex());\n       document.body.removeChild(root);\n     });\n\n  it('adapter#setAttributeForElementIndex does nothing if the element at index does not exist',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const func = () => {\n         (component.getDefaultFoundation() as any)\n             .adapter.setAttributeForElementIndex(5, 'foo', 'bar');\n       };\n       expect(func).not.toThrow();\n       document.body.removeChild(root);\n     });\n\n  it('adapter#setAttributeForElementIndex sets the attribute for the list element at index specified',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const selectedNode =\n           root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item')[1];\n       (component.getDefaultFoundation() as any)\n           .adapter.setAttributeForElementIndex(1, 'data-foo', 'bar');\n       expect('bar').toEqual(selectedNode.getAttribute('data-foo') as string);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#addClassForElementIndex does nothing if the element at index does not exist',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const func = () => {\n         (component.getDefaultFoundation() as any)\n             .adapter.addClassForElementIndex(5, 'foo');\n       };\n       expect(func).not.toThrow();\n       document.body.removeChild(root);\n     });\n\n  it('adapter#addClassForElementIndex adds the class to the list element at index specified',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const selectedNode =\n           root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item')[1];\n       // Note that this uses the unmapped class name since the adapter will\n       // perform its own mapping.\n       (component.getDefaultFoundation() as any)\n           .adapter.addClassForElementIndex(\n               1, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n       expect(selectedNode)\n           .toHaveClass(\n               deprecatedClassNameMap[cssClasses.LIST_ITEM_ACTIVATED_CLASS]);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#removeClassForElementIndex does nothing if the element at index does not exist',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const func = () => {\n         (component.getDefaultFoundation() as any)\n             .adapter.removeClassForElementIndex(5, 'foo');\n       };\n       expect(func).not.toThrow();\n       document.body.removeChild(root);\n     });\n\n  it('adapter#removeClassForElementIndex removes the class from the list element at index specified',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const selectedNode =\n           root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item')[1];\n       selectedNode.classList.add(\n           deprecatedClassNameMap[cssClasses.LIST_ITEM_ACTIVATED_CLASS]);\n       // Note that this uses the unmapped class name since the adapter will\n       // perform its own mapping.\n       (component.getDefaultFoundation() as any)\n           .adapter.removeClassForElementIndex(\n               1, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n       expect(selectedNode)\n           .not.toHaveClass(\n               deprecatedClassNameMap[cssClasses.LIST_ITEM_ACTIVATED_CLASS]);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#focusItemAtIndex does not throw an error if element at index is undefined/null',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const func = () => {\n         (component.getDefaultFoundation() as any).adapter.focusItemAtIndex(5);\n       };\n       expect(func).not.toThrow();\n       document.body.removeChild(root);\n     });\n\n  it('adapter#focusItemAtIndex focuses the list item at the index specified',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const items =\n           root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item');\n       items[0].focus();\n       (component.getDefaultFoundation() as any).adapter.focusItemAtIndex(1);\n       expect(document.activeElement === items[1]).toBe(true);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#setTabIndexForListItemChildren sets the child button/a elements of index',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const listItems =\n           root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item');\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setTabIndexForListItemChildren(0, 0);\n       (component.getDefaultFoundation() as any)\n           .adapter.setTabIndexForListItemChildren(1, 0);\n\n       expect(1).toEqual(\n           listItems[0].querySelectorAll<HTMLElement>('[tabindex=\"0\"]').length);\n       expect(1).toEqual(\n           listItems[1].querySelectorAll<HTMLElement>('[tabindex=\"0\"]').length);\n\n       document.body.removeChild(root);\n     });\n\n  it('layout adds tabindex=-1 to all list items without a tabindex', () => {\n    const {root} = setupTest();\n    expect(0).toEqual(root.querySelectorAll<HTMLElement>(\n                              '.mdc-deprecated-list-item:not([tabindex])')\n                          .length);\n  });\n\n  it('layout adds tabindex=-1 to all list item button/a elements', () => {\n    const {root} = setupTest();\n    expect(0).toEqual(\n        root.querySelectorAll<HTMLElement>('button:not([tabindex])').length);\n  });\n\n  it('#getPrimaryText returns the appropriate text for one line list', () => {\n    const {root, component} = setupTest();\n    const item =\n        root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item')[2];\n    document.body.appendChild(root);\n    expect(component.getPrimaryText(item)).toEqual('Pasta');\n    document.body.removeChild(root);\n  });\n\n  it('#getPrimaryText returns the appropriate text for two line list', () => {\n    const {root, component} = setupTest(getTwoLineFixture());\n    const item =\n        root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item')[2];\n    document.body.appendChild(root);\n    expect(component.getPrimaryText(item)).toEqual('Pasta');\n    document.body.removeChild(root);\n  });\n\n  it('vertical calls setVerticalOrientation on foundation', () => {\n    const {component, mockFoundation} = setupTest();\n    component.vertical = false;\n    expect(mockFoundation.setVerticalOrientation).toHaveBeenCalledWith(false);\n  });\n\n  it('wrapFocus calls setWrapFocus on foundation', () => {\n    const {component, mockFoundation} = setupTest();\n    component.wrapFocus = true;\n    expect(mockFoundation.setWrapFocus).toHaveBeenCalledWith(true);\n    expect(mockFoundation.setWrapFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('singleSelection calls foundation setSingleSelection with the provided value',\n     () => {\n       const {component, mockFoundation} = setupTest();\n       component.singleSelection = true;\n       expect(mockFoundation.setSingleSelection).toHaveBeenCalledWith(true);\n       expect(mockFoundation.setSingleSelection).toHaveBeenCalledTimes(1);\n     });\n\n  it('selectedIndex calls setSelectedIndex on foundation', () => {\n    const {component, mockFoundation} = setupTest();\n    component.selectedIndex = 1;\n    expect(mockFoundation.setSelectedIndex).toHaveBeenCalledWith(1);\n    expect(mockFoundation.setSelectedIndex).toHaveBeenCalledTimes(1);\n  });\n\n  it('#selectedIndex getter proxies foundations getSelectedIndex method',\n     () => {\n       const {component, mockFoundation} = setupTest();\n\n       (mockFoundation as any).getSelectedIndex.and.returnValue(3);\n       expect(3).toEqual(component.selectedIndex as number);\n     });\n\n  it('handleClick handler is added to root element', () => {\n    const {root, mockFoundation} = setupTest();\n    document.body.appendChild(root);\n    const event = document.createEvent('Event');\n    event.initEvent('click', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleClick)\n        .toHaveBeenCalledWith(0, false, jasmine.any(Event));\n    expect(mockFoundation.handleClick).toHaveBeenCalledTimes(1);\n    document.body.removeChild(root);\n  });\n\n  it('focusIn handler is added to root element', () => {\n    const {root, mockFoundation} = setupTest();\n    document.body.appendChild(root);\n    const event = document.createEvent('FocusEvent');\n    event.initEvent('focusin', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleFocusIn).toHaveBeenCalledWith(0);\n    expect(mockFoundation.handleFocusIn).toHaveBeenCalledTimes(1);\n    document.body.removeChild(root);\n  });\n\n  it('focusIn handler is removed from the root element on destroy', () => {\n    const {root, component, mockFoundation} = setupTest();\n    document.body.appendChild(root);\n    component.destroy();\n    const event = document.createEvent('FocusEvent');\n    event.initEvent('focusin', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleFocusIn).not.toHaveBeenCalledWith(0);\n    document.body.removeChild(root);\n  });\n\n  it('focusOut handler is added to root element', () => {\n    const {root, mockFoundation} = setupTest();\n    document.body.appendChild(root);\n    const event = document.createEvent('FocusEvent');\n    event.initEvent('focusout', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleFocusOut).toHaveBeenCalledWith(0);\n    expect(mockFoundation.handleFocusOut).toHaveBeenCalledTimes(1);\n    document.body.removeChild(root);\n  });\n\n  it('focusOut handler is removed from the root element on destroy', () => {\n    const {root, component, mockFoundation} = setupTest();\n    document.body.appendChild(root);\n    component.destroy();\n    const event = document.createEvent('FocusEvent');\n    event.initEvent('focusout', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleFocusOut).not.toHaveBeenCalledWith(0);\n    document.body.removeChild(root);\n  });\n\n  it('keydown handler is added to root element', () => {\n    const {root, mockFoundation} = setupTest();\n    const event = document.createEvent('KeyboardEvent');\n    event.initEvent('keydown', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledWith(event, true, 0);\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n  });\n\n  it('keydown handler is triggered when a sub-element of a list is triggered',\n     () => {\n       const {root, mockFoundation} = setupTest();\n       const event = document.createEvent('KeyboardEvent');\n       event.initEvent('keydown', true, true);\n       const button =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item button')!;\n       button.dispatchEvent(event);\n       expect(mockFoundation.handleKeydown)\n           .toHaveBeenCalledWith(event, false, 0);\n       expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n     });\n\n  it('keydown calls foundation.handleKeydown method with negative index when event triggered on list root ',\n     () => {\n       const {root, mockFoundation} = setupTest();\n       const event = document.createEvent('KeyboardEvent');\n       event.initEvent('keydown', true, true);\n       root.dispatchEvent(event);\n       expect(mockFoundation.handleKeydown)\n           .toHaveBeenCalledWith(event, false, -1);\n       expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n     });\n\n  it('keydown handler is removed from the root element on destroy', () => {\n    const {root, component, mockFoundation} = setupTest();\n    component.destroy();\n    const event = document.createEvent('KeyboardEvent');\n    event.initEvent('keydown', true, true);\n    const listElementItem =\n        root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n    listElementItem.dispatchEvent(event);\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(event, true, 0);\n  });\n\n  it('#listElements should return all list items including disabled list items',\n     () => {\n       const {component} = setupTest(getFixtureWithDisabledItems());\n       expect(4).toEqual(component.listElements.length);\n     });\n\n  it('adapter#hasRadioAtIndex return true or false based on presence of radio button on list item',\n     () => {\n       const {component} = setupTest();\n\n       expect(\n           (component.getDefaultFoundation() as any).adapter.hasRadioAtIndex(3))\n           .toBe(true);\n       expect(\n           (component.getDefaultFoundation() as any).adapter.hasRadioAtIndex(0))\n           .toBe(false);\n     });\n\n  it('adapter#hasCheckboxAtIndex return true or false based on presence of checkbox button on list item',\n     () => {\n       const {component} = setupTest();\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.hasCheckboxAtIndex(2))\n           .toBe(true);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.hasCheckboxAtIndex(0))\n           .toBe(false);\n     });\n\n  it('adapter#isCheckboxCheckedAtIndex returns true or false based if checkbox is checked on a list item',\n     () => {\n       const {root, component} = setupTest();\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isCheckboxCheckedAtIndex(2))\n           .toBe(false);\n       document.body.appendChild(root);\n       const checkbox =\n           root.querySelector<HTMLInputElement>('input[type=\"checkbox\"]')!;\n       checkbox.checked = true;\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isCheckboxCheckedAtIndex(2))\n           .toBe(true);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#setCheckedCheckboxOrRadioAtIndex toggles the checkbox on list item',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const checkbox =\n           root.querySelector<HTMLInputElement>('input[type=\"checkbox\"]')!;\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setCheckedCheckboxOrRadioAtIndex(2, true);\n       expect(checkbox.checked).toBe(true);\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setCheckedCheckboxOrRadioAtIndex(2, false);\n       expect(checkbox.checked).toBe(false);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#setCheckedCheckboxOrRadioAtIndex toggles the radio on list item',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       const radio = root.querySelector<HTMLElement>('input[type=\"radio\"]') as\n           HTMLInputElement;\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setCheckedCheckboxOrRadioAtIndex(3, true);\n       expect(radio.checked).toBe(true);\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setCheckedCheckboxOrRadioAtIndex(3, false);\n       expect(radio.checked).toBe(false);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#notifyAction emits action event', () => {\n    const {component} = setupTest();\n\n    let detail = null;\n    const handler = (event: any) => detail = event.detail;\n\n    component.listen(strings.ACTION_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyAction(3);\n    component.unlisten(strings.ACTION_EVENT, handler);\n\n    expect(detail).toEqual({index: 3} as any);\n  });\n\n  it('adapter#notifySelectionChange emits selection change event', () => {\n    const {component} = setupTest();\n\n    let detail = null;\n    const handler = (event: any) => detail = event.detail;\n\n    component.listen(strings.SELECTION_CHANGE_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifySelectionChange([\n      1, 2\n    ]);\n    component.unlisten(strings.SELECTION_CHANGE_EVENT, handler);\n\n    expect(detail).toEqual({changedIndices: [1, 2]} as any);\n  });\n\n  it('adapter#isFocusInsideList returns true if focus is inside list root',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isFocusInsideList())\n           .toBe(false);\n       root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!.focus();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isFocusInsideList())\n           .toBe(true);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#isRootFocused returns true if list root is on focus', () => {\n    const {root, component} = setupTest();\n    document.body.appendChild(root);\n    expect((component.getDefaultFoundation() as any).adapter.isRootFocused())\n        .toBe(false);\n    root.focus();\n    expect((component.getDefaultFoundation() as any).adapter.isRootFocused())\n        .toBe(true);\n    document.body.removeChild(root);\n  });\n\n  it('adapter#listItemAtIndexHasClass returns true if list item has disabled class',\n     () => {\n       const {root, component} = setupTest();\n       root.querySelectorAll<HTMLElement>(\n               `.${deprecatedClassNameMap[cssClasses.LIST_ITEM_CLASS]}`)[0]\n           .classList.add(\n               deprecatedClassNameMap[cssClasses.LIST_ITEM_DISABLED_CLASS]);\n       document.body.appendChild(root);\n       // Note that this uses the unmapped class name since the adapter will\n       // perform its own mapping.\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.listItemAtIndexHasClass(\n                      0, cssClasses.LIST_ITEM_DISABLED_CLASS))\n           .toBe(true);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#listItemAtIndexHasClass returns false if list item does not have disabled class',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.listItemAtIndexHasClass(\n                   0,\n                   deprecatedClassNameMap[cssClasses.LIST_ITEM_DISABLED_CLASS]))\n           .toBe(false);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#getPrimaryTextAtIndex returns the appropriate text for one line list',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getPrimaryTextAtIndex(2))\n           .toEqual('Pasta');\n       document.body.removeChild(root);\n     });\n\n  it('adapter#getPrimaryTextAtIndex returns the appropriate text for two line list',\n     () => {\n       const {root, component} = setupTest(getTwoLineFixture());\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getPrimaryTextAtIndex(2))\n           .toEqual('Pasta');\n       document.body.removeChild(root);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-list/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as list;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include list.deprecated-core-styles($query: $query);\n    @include list.deprecated-item-primary-text-ink-color(red, $query: $query);\n    @include list.deprecated-item-secondary-text-ink-color(red, $query: $query);\n    @include list.deprecated-item-graphic-fill-color(red, $query: $query);\n    @include list.deprecated-item-graphic-ink-color(red, $query: $query);\n    @include list.deprecated-item-meta-ink-color(red, $query: $query);\n    @include list.deprecated-single-line-shape-radius(\n      42,\n      $rtl-reflexive: false,\n      $density-scale: 0,\n      $query: $query\n    );\n    @include list.deprecated-single-line-height(0, $query: $query);\n    @include list.deprecated-single-line-density(0, $query: $query);\n    @include list.deprecated-divider-color(red, $query: $query);\n    @include list.deprecated-group-subheader-ink-color(red, $query: $query);\n    @include list.deprecated-ripple($query: $query);\n    @include list.deprecated-without-ripple($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-list/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport {MDCListFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCListFoundation);\n  return {foundation, mockAdapter};\n}\n\nfunction setupTypeaheadTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCListFoundation);\n  const itemTextList = ['bravo', 'z aa', 'ba', 'baa', 'bab', 'z ac', 'a'];\n  for (let i = 0; i < itemTextList.length; i++) {\n    mockAdapter.getPrimaryTextAtIndex.withArgs(i).and.returnValue(\n        itemTextList[i]);\n  }\n  mockAdapter.getListItemCount.and.returnValue(itemTextList.length);\n  foundation.setHasTypeahead(true);\n  return {foundation, mockAdapter};\n}\n\nfunction createMockMouseEvent(modifiers: string[]) {\n  return {\n    getModifierState: (modifier: string) => modifiers.includes(modifier),\n  } as MouseEvent;\n}\n\nfunction createMockKeyboardEvent(\n    key: string, modifiers: string[] = [], target?: {}) {\n  return {\n    key,\n    target,\n    getModifierState: (modifier: string) => modifiers.includes(modifier),\n    ctrlKey: modifiers.includes('Control'),\n    shiftKey: modifiers.includes('Shift'),\n    metaKey: modifiers.includes('Meta'),\n    altKey: modifiers.includes('Alt'),\n    preventDefault: jasmine.createSpy('preventDefault') as Function,\n  } as KeyboardEvent;\n}\n\ndescribe(\n    'MDCListFoundation', () => {\n      setUpMdcTestEnvironment();\n\n      it('exports strings', () => {\n        expect(MDCListFoundation.strings).toEqual(strings);\n      });\n\n      it('exports cssClasses', () => {\n        expect(MDCListFoundation.cssClasses).toEqual(cssClasses);\n      });\n\n      it('exports numbers', () => {\n        expect(MDCListFoundation.numbers).toEqual(numbers);\n      });\n\n      it('defaultAdapter returns a complete adapter implementation', () => {\n        verifyDefaultAdapter(MDCListFoundation, [\n          'getListItemCount',\n          'getFocusedElementIndex',\n          'setAttributeForElementIndex',\n          'addClassForElementIndex',\n          'removeClassForElementIndex',\n          'focusItemAtIndex',\n          'setTabIndexForListItemChildren',\n          'hasRadioAtIndex',\n          'hasCheckboxAtIndex',\n          'isCheckboxCheckedAtIndex',\n          'listItemAtIndexHasClass',\n          'setCheckedCheckboxOrRadioAtIndex',\n          'notifyAction',\n          'notifySelectionChange',\n          'isFocusInsideList',\n          'getAttributeForElementIndex',\n          'isRootFocused',\n          'getPrimaryTextAtIndex',\n        ]);\n      });\n\n      // The foundation needs to use a classList object that has a\n      // `contains` method. This adds that method onto an array\n      // for the tests.\n      // eslint-disable-next-line no-extend-native\n      Object.defineProperty(Array.prototype, 'contains', {\n        enumerable: false,\n        configurable: false,\n        writable: false,\n        value: function(find: any) {\n          return (this.indexOf(find) > -1);\n        },\n      });\n\n      it('#layout should bail out early when list is empty', () => {\n        const {foundation, mockAdapter} = setupTest();\n\n        mockAdapter.getListItemCount.and.returnValue(0);\n        foundation.layout();\n\n        expect(mockAdapter.hasCheckboxAtIndex).not.toHaveBeenCalledWith(0);\n      });\n\n      it('#handleFocusIn switches list item button/a elements to tabindex=0',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusIn(1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .toHaveBeenCalledWith(1, '0');\n         });\n\n      it('#handleFocusOut switches list item button/a elements to tabindex=-1',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusOut(1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .toHaveBeenCalledWith(1, '-1');\n         });\n\n      it('#handleFocusIn switches list item button/a elements to tabindex=0 when target is child element',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusIn(1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .toHaveBeenCalledWith(1, '0');\n         });\n\n      it('#handleFocusOut switches list item button/a elements to tabindex=-1 when target is child element',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusOut(1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .toHaveBeenCalledWith(1, '-1');\n         });\n\n      it('#handleFocusIn does nothing if mdc-list-item is not on element or ancestor',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusIn(-1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .not.toHaveBeenCalledWith(\n                   jasmine.anything(), jasmine.anything());\n         });\n\n      it('#handleFocusOut does nothing if mdc-list-item is not on element or ancestor',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.handleFocusOut(-1);\n\n           expect(mockAdapter.setTabIndexForListItemChildren)\n               .not.toHaveBeenCalledWith(\n                   jasmine.anything(), jasmine.anything());\n         });\n\n      it('#handleFocusOut sets tabindex=0 to selected item when focus leaves single selection list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(false);\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(false);\n           foundation.setSingleSelection(true);\n           foundation.layout();\n\n           mockAdapter.isFocusInsideList.and.returnValue(false);\n\n           foundation.setSelectedIndex(\n               2);  // Selected index values may not be in sequence.\n           foundation.handleFocusOut(3);\n           jasmine.clock().tick(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, 'tabindex', '0');\n         });\n\n      it('#handleFocusOut sets tabindex=0 to first item when focus leaves list ' +\n             'that has no selection',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           (foundation as any).focusedItemIndex = 3;\n           foundation.setSingleSelection(true);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.isFocusInsideList.and.returnValue(false);\n\n           foundation.handleFocusOut(3);\n           jasmine.clock().tick(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '0');\n         });\n\n      it('#handleFocusOut does not set tabindex=0 to selected list item when focus moves to next list item.',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setSingleSelection(true);\n           foundation.layout();\n\n           mockAdapter.isFocusInsideList.and.returnValue(true);\n\n           foundation.setSelectedIndex(2);\n           foundation.handleFocusOut(3);\n           jasmine.clock().tick(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'number' is not assignable to parameter of type\n               //  'Expected<string>'.\n               .not.toHaveBeenCalledWith(2, 'tabindex', 0);\n         });\n\n      it('#handleFocusOut sets tabindex=0 to first selected index when focus leaves checkbox based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           mockAdapter.isFocusInsideList.and.returnValue(false);\n\n           foundation.setSelectedIndex(\n               [3, 2]);  // Selected index values may not be in sequence.\n\n           foundation.handleFocusOut(2);\n           jasmine.clock().tick(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, 'tabindex', '0');\n         });\n\n      it('#getFocusedItemIndex returns currently focused item', () => {\n        const {foundation} = setupTest();\n        expect(foundation.getFocusedItemIndex()).toBe(-1);\n        foundation.handleFocusIn(2);\n        expect(foundation.getFocusedItemIndex()).toBe(2);\n      });\n\n      it('#handleKeydown does nothing if key received on root element and not used for navigation',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A');\n\n           mockAdapter.isRootFocused.and.returnValue(true);\n           foundation.handleKeydown(event, false, -1);\n\n           expect(mockAdapter.getFocusedElementIndex).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown should focus on last item when UP arrow key received on list root',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('ArrowUp');\n\n           mockAdapter.isRootFocused.and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.getFocusedElementIndex).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown should focus on first item when DOWN arrow key received on list root',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('ArrowDown');\n\n           mockAdapter.isRootFocused.and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.getFocusedElementIndex).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown should focus and select the last item when Shift + ArrowUp key received on list root',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('ArrowUp', ['Shift']);\n\n           mockAdapter.isRootFocused.and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.getFocusedElementIndex).not.toHaveBeenCalled();\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([4]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort()).toEqual([\n             4\n           ]);\n         });\n\n      it('#handleKeydown should focus and select the first item when Shift + ArrowDown key received on list root',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('ArrowDown', ['Shift']);\n\n           mockAdapter.isRootFocused.and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.getFocusedElementIndex).not.toHaveBeenCalled();\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([0]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort()).toEqual([\n             0\n           ]);\n         });\n\n      it('#handleKeydown does nothing if the key is not used for navigation',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('A', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.anything());\n           expect(event.preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown moves focus to index+1 if the ArrowDown key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowDown', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown focuses disabled item when disabled items are focusable and the ArrowDown key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowDown', [], target);\n\n           foundation.setDisabledItemsFocusable(true);\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(/*fakeIndex*/ 1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown skips disabled item when disabled items are not focusable and the ArrowDown key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowDown', [], target);\n\n           foundation.setDisabledItemsFocusable(false);\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(/*fakeIndex*/ 1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown moves focus to index-1 if the ArrowUp key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown focuses disabled item when disabled items are focusable and the ArrowUp key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           foundation.setDisabledItemsFocusable(true);\n           mockAdapter.getFocusedElementIndex.and.returnValue(2);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(/*fakeIndex*/ 1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleKeydown(event, true, 2);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown skips disabled item when disabled items are not focusable and the ArrowUp key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           foundation.setDisabledItemsFocusable(false);\n           mockAdapter.getFocusedElementIndex.and.returnValue(2);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(/*fakeIndex*/ 1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleKeydown(event, true, 2);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown moves focus to and selects index+1 if Shift + ArrowDown key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event =\n               createMockKeyboardEvent('ArrowDown', ['Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(0).and.returnValue(\n               true);\n           foundation.layout();\n           foundation.setSelectedIndex([0]);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([2]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort()).toEqual([\n             0, 2\n           ]);\n         });\n\n      it('#handleKeydown moves focus to and deselects index+1 if Shift + ArrowDown key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event =\n               createMockKeyboardEvent('ArrowDown', ['Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               true);\n           foundation.layout();\n           foundation.setSelectedIndex([2]);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([2]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort())\n               .toEqual([]);\n         });\n\n      it('#handleKeydown moves focus to and selects index-1 if Shift + ArrowUp key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', ['Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               true);\n           foundation.layout();\n           foundation.setSelectedIndex([2]);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([0]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort()).toEqual([\n             0, 2\n           ]);\n         });\n\n      it('#handleKeydown moves focus to and deselects index-1 if Shift + ArrowUp key is pressed',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', ['Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(0).and.returnValue(\n               true);\n           foundation.layout();\n           foundation.setSelectedIndex([0]);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([0]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n           expect((foundation.getSelectedIndex() as number[]).sort())\n               .toEqual([]);\n         });\n\n      it('#handleKeydown ArrowRight key does nothing if isVertical is true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowRight', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.anything());\n           expect(event.preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown ArrowLeft key does nothing if isVertical is true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowLeft', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.anything());\n           expect(event.preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown ArrowRight key causes the next item to gain focus if isVertical is false',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowRight', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setVerticalOrientation(false);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown ArrowLeft key causes the previous item to gain focus if isVertical is false',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowLeft', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setVerticalOrientation(false);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown ArrowDown key causes first item to focus if last item is focused and wrapFocus is true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowDown', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(2);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setWrapFocus(true);\n           foundation.handleKeydown(event, true, 2);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown ArrowDown key if last item is focused and wrapFocus is false does not focus an item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowDown', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(2);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 2);\n\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.anything());\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown ArrowUp key causes last item to focus if first item is focused and wrapFocus is true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setWrapFocus(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown ArrowUp key if first item is focused and wrapFocus is false does not focus an item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.anything());\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown Home key causes the first item to be focused', () => {\n        const {foundation, mockAdapter} = setupTest();\n        const target = {tagName: 'li'};\n        const event = createMockKeyboardEvent('Home', [], target);\n\n        mockAdapter.getFocusedElementIndex.and.returnValue(1);\n        mockAdapter.getListItemCount.and.returnValue(3);\n        foundation.handleKeydown(event, true, 1);\n\n        expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n        expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n        expect(event.preventDefault).toHaveBeenCalledTimes(1);\n      });\n\n      it('#handleKeydown End key causes the last item to be focused', () => {\n        const {foundation, mockAdapter} = setupTest();\n        const target = {tagName: 'li'};\n        const event = createMockKeyboardEvent('End', [], target);\n\n        mockAdapter.getFocusedElementIndex.and.returnValue(0);\n        mockAdapter.getListItemCount.and.returnValue(3);\n        foundation.handleKeydown(event, true, 0);\n\n        expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n        expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n        expect(event.preventDefault).toHaveBeenCalledTimes(1);\n      });\n\n      it('#handleKeydown Control + Shift + Home key selects all items from current to first',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event =\n               createMockKeyboardEvent('Home', ['Control', 'Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             0, 1\n           ]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown Control + Shift + End key selects all items from current to end',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'li'};\n           const event =\n               createMockKeyboardEvent('End', ['Control', 'Shift'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, true, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             1, 2\n           ]);\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n         });\n\n\n      it('#handleKeydown navigation key in input/button/select/textarea elements do not call preventDefault ',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const inputs = ['input', 'button', 'select', 'textarea'];\n           const preventDefault = jasmine.createSpy('preventDefault');\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n\n           inputs.forEach((input) => {\n             const target = {tagName: input};\n             const event = createMockKeyboardEvent('ArrowUp', [], target);\n             event.preventDefault = preventDefault;\n             foundation.handleKeydown(event, false, 0);\n           });\n           expect(preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown focuses on the bound mdc-list-item even if the event happened on a child element',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const parentElement = {classList: ['mdc-list-item']};\n           const target = {classList: [], parentElement};\n           const event = createMockKeyboardEvent('ArrowUp', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, false, 1);\n\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown space key causes preventDefault to be called on keydown event',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown enter key causes preventDefault to be called on keydown event',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown enter key while focused on a sub-element of a list item does not cause preventDefault on the ' +\n             'event when singleSelection=true ',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, false, 0);\n\n           expect(event.preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown space/enter key cause event.preventDefault if a checkbox or radio button is present',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(false);\n           foundation.setSingleSelection(false);\n           foundation.layout();\n           foundation.handleKeydown(event, true, 0);\n           (event as any).key = 'Enter';\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(2);\n         });\n\n      it('#handleKeydown space key calls notifyAction for anchor element regardless of singleSelection',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'A', classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setSingleSelection(false);\n           foundation.handleKeydown(event, true, 0);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.notifyAction).toHaveBeenCalledWith(0);\n           expect(mockAdapter.notifyAction).toHaveBeenCalledTimes(2);\n         });\n\n      it('#handleKeydown space key does not call notifyAction for disabled element',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'A', classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown enter key does not call notifyAction for anchor element',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {tagName: 'A', classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setSingleSelection(false);\n           foundation.handleKeydown(event, true, 0);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.notifyAction)\n               .not.toHaveBeenCalledWith(\n                   0);  // notifyAction will be called by handleClick event.\n         });\n\n      it('#handleKeydown notifies of action when enter key pressed on list item ',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.notifyAction).toHaveBeenCalledWith(0);\n           expect(mockAdapter.notifyAction).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown selects the list item when enter key is triggered, singleSelection=true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '0');\n         });\n\n      it('#handleKeydown selects the list item when alt + enter key is triggered, singleSelection=true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', ['Alt'], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '0');\n         });\n\n      it('#handleKeydown does not select the list item when' +\n             'enter key is triggered, singleSelection=true, #adapter.isListItemDisabled=true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n         });\n\n      it('#handleKeydown space key is triggered when singleSelection is true selects the list item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '0');\n         });\n\n      it('#handleKeydown space key when singleSelection=true does not select an element is isRootListItem=false',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, false, 0);\n\n           expect(event.preventDefault).not.toHaveBeenCalled();\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n         });\n\n      it('#handleKeydown does not select list item when' +\n             'space key is triggered, singleSelection=true, #adapter.isListItemDisabled=true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n         });\n\n      it('#handleKeydown space key is triggered 2x when singleSelection does not un-select the item.',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(0, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 0);\n           foundation.handleKeydown(event, true, 0);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(0, strings.ARIA_SELECTED, 'false');\n         });\n\n      it('#handleKeydown space key is triggered 2x when singleSelection is true on second ' +\n             'element updates first element tabindex',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(1);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(1, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSingleSelection(true);\n           foundation.handleKeydown(event, true, 1);\n           foundation.handleKeydown(event, true, 1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(1, strings.ARIA_SELECTED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '-1');\n         });\n\n      it('#handleKeydown when shift + space/enter and no previous user selection action should toggle item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const shiftEvent =\n               createMockKeyboardEvent('Spacebar', ['Shift'], target);\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.handleKeydown(shiftEvent, true, 2);\n\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([2]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleKeydown unselected item when shift + enter/space should select range from previous action',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Enter', [], target);\n           const shiftEvent =\n               createMockKeyboardEvent('Enter', ['Shift'], target);\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, true, 1);\n           foundation.handleKeydown(event, true, 0);\n\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           mockAdapter.setAttributeForElementIndex.calls.reset();\n           mockAdapter.notifySelectionChange.calls.reset();\n           mockAdapter.notifyAction.calls.reset();\n\n           foundation.handleKeydown(shiftEvent, true, 3);\n\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(3, true);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             2, 3\n           ]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleKeydown selected item when shift + enter/space should deselect range from previous action',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const target = {classList: ['mdc-list-item']};\n           const event = createMockKeyboardEvent('Spacebar', [], target);\n           const shiftEvent =\n               createMockKeyboardEvent('Spacebar', ['Shift'], target);\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n           foundation.handleKeydown(event, true, 3);\n           foundation.handleKeydown(event, true, 1);\n           foundation.handleKeydown(event, true, 0);\n\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           mockAdapter.setAttributeForElementIndex.calls.reset();\n           mockAdapter.notifySelectionChange.calls.reset();\n           mockAdapter.notifyAction.calls.reset();\n\n           foundation.handleKeydown(shiftEvent, true, 3);\n\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(3, false);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             0, 1, 3\n           ]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleKeydown bail out early if event origin doesn\\'t have a mdc-list-item ancestor from the current list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           const event = createMockKeyboardEvent('ArrowDown');\n           (event as any).keyCode = 40;\n\n           foundation.handleKeydown(\n               event, /** isRootListItem */ true, /** listItemIndex */ -1);\n\n           expect(event.preventDefault).not.toHaveBeenCalled();\n         });\n\n      it('#focusLastElement focuses the last list item and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n\n           expect(3).toEqual(foundation.focusLastElement());\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(3);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusInitialElement focuses the first list item and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n\n           expect(0).toEqual(foundation.focusInitialElement());\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusInitialElement focuses the first selected list item and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setSingleSelection(true);\n           foundation.setSelectedIndex(2);\n\n           expect(2).toEqual(foundation.focusInitialElement());\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusNextElement focuses next list item and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n\n           expect(3).toEqual(foundation.focusNextElement(2));\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(3);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusNextElement focuses first list item when focus is on last list item when wrapFocus=true and returns that ' +\n             'index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setWrapFocus(true);\n\n           expect(0).toEqual(foundation.focusNextElement(3));\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#handleKeydown should select all items on ctrl + A, if nothing is selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.layout();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n         });\n\n      it('#handleKeydown should select all items on ctrl + lowercase A, if nothing is selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('a', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.layout();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n         });\n\n      it('#handleKeydown should select all items on ctrl + A, if some items are selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.layout();\n           foundation.setSelectedIndex([1, 2]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(4);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(3, true);\n         });\n\n      it('#handleKeydown should deselect all items on ctrl + A, if all items are selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.layout();\n           foundation.setSelectedIndex([0, 1, 2]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, false);\n         });\n\n      it('#handleKeydown should deselect all enabled items on ctrl + A, if all items are selected and list contains disabled items',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([0, 2]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(1, jasmine.any(Boolean));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, false);\n         });\n\n      it('#handleKeydown should not select disabled items on ctrl + A', () => {\n        const {foundation, mockAdapter} = setupTest();\n        const event = createMockKeyboardEvent('A', ['Control']);\n\n        mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n        mockAdapter.listItemAtIndexHasClass\n            .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n            .and.returnValue(true);\n        mockAdapter.getListItemCount.and.returnValue(3);\n        foundation.layout();\n        foundation.handleKeydown(event, false, -1);\n\n        expect(event.preventDefault).toHaveBeenCalledTimes(1);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledTimes(2);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(0, true);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .not.toHaveBeenCalledWith(1, jasmine.any(Boolean));\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(2, true);\n      });\n\n      it('#handleKeydown should not handle ctrl + A on a non-checkbox list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('a', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(false);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.layout();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).not.toHaveBeenCalled();\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalled();\n         });\n\n      it('#handleKeydown should not deselect a selected disabled item on ctrl + A',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(3, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([1, 3, 4]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(event.preventDefault).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(1, jasmine.any(Boolean));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(3, jasmine.any(Boolean));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(4, jasmine.any(Boolean));\n         });\n\n      it('selectedIndex retains selected disabled items when ctrl-A selects all',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(3, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([1, 3]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(foundation.getSelectedIndex()).toEqual([0, 1, 2, 3]);\n         });\n\n      it('selectedIndex retains selected disabled items when ctrl-A de-selects all',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(3, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([0, 1, 2, 3, 4]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(foundation.getSelectedIndex()).toEqual([1, 3]);\n         });\n\n      it('selectedIndex does not contain unselected disabled items when ctrl-A selects all',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(foundation.getSelectedIndex()).toEqual([0, 2]);\n         });\n\n      it('selectedIndex does not contain unselected disabled items when ctrl-A de-selects all',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           const event = createMockKeyboardEvent('A', ['Control']);\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n\n           foundation.layout();\n           foundation.setSelectedIndex([0, 2]);\n\n           // Reset the calls since `setSelectedIndex` will throw it off.\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           foundation.handleKeydown(event, false, -1);\n\n           expect(foundation.getSelectedIndex()).toEqual([]);\n         });\n\n      it('#focusNextElement retains the focus on last item when wrapFocus=false and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setWrapFocus(false);\n\n           expect(3).toEqual(foundation.focusNextElement(3));\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.any(Number));\n         });\n\n      it('#focusPrevElement focuses previous list item and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n\n           expect(1).toEqual(foundation.focusPrevElement(2));\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusPrevElement focuses last list item when focus is on first list item when wrapFocus=true and returns that ' +\n             'index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setWrapFocus(true);\n\n           expect(3).toEqual(foundation.focusPrevElement(0));\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(3);\n           expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#focusPrevElement retains the focus on first list item when wrapFocus=false and returns that index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setWrapFocus(false);\n\n           expect(0).toEqual(foundation.focusPrevElement(0));\n           expect(mockAdapter.focusItemAtIndex)\n               .not.toHaveBeenCalledWith(jasmine.any(Number));\n         });\n\n      it('#handleClick when singleSelection=false on a list item should not cause the list item to be selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.setSingleSelection(false);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleClick(\n               1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.addClassForElementIndex)\n               .not.toHaveBeenCalledWith(\n                   1, cssClasses.LIST_ITEM_SELECTED_CLASS);\n           expect(mockAdapter.addClassForElementIndex)\n               .not.toHaveBeenCalledWith(\n                   1, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n         });\n\n      it('#handleClick notifies of action when clicked on list item.', () => {\n        const {foundation, mockAdapter} = setupTest();\n\n        mockAdapter.getListItemCount.and.returnValue(3);\n        foundation.handleClick(1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n        expect(mockAdapter.notifyAction).toHaveBeenCalledWith(1);\n        expect(mockAdapter.notifyAction).toHaveBeenCalledTimes(1);\n      });\n\n      it('#handleClick does not notify of action when clicked on disabled list item.',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.handleClick(\n               1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n         });\n\n      it('#handleClick when singleSelection=true on a list item should cause the list item to be selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.setSingleSelection(true);\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.handleClick(\n               1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(1, 'tabindex', '0');\n         });\n\n      it('#handleClick when singleSelection=true on a button subelement should not cause the list item to be selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           foundation.setSingleSelection(true);\n           foundation.handleClick(\n               -1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'number' is not assignable to parameter of type\n               //  'Expected<string>'.\n               .not.toHaveBeenCalledWith(1, 'tabindex', 0);\n         });\n\n      it('#handleClick when singleSelection=true on an element not in a list item should be ignored',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(-1);\n           foundation.setSingleSelection(true);\n           foundation.handleClick(\n               -1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'number' is not assignable to parameter of type\n               //  'Expected<string>'.\n               .not.toHaveBeenCalledWith(1, 'tabindex', 0);\n         });\n\n      it('#handleClick when singleSelection=true on the first element when already selected',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getFocusedElementIndex.and.returnValue(0);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setSingleSelection(true);\n           foundation.handleClick(\n               0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           foundation.handleClick(\n               0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(0, 'tabindex', '0');\n           expect(mockAdapter.setAttributeForElementIndex.calls.allArgs()\n                      .filter(\n                          (args: any) => JSON.stringify(args) ==\n                              JSON.stringify([0, 'tabindex', '0']))\n                      .length)\n               .toEqual(1);\n         });\n\n      it('#handleClick when isCheckboxAlreadyUpdatedInAdapter=true does not ' +\n             'change the checkbox state',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.layout();\n           foundation.handleClick(\n               2, /*isCheckboxAlreadyUpdatedInAdapter*/ true);\n\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(2, true);\n         });\n\n      it('#handleClick proxies to the adapter#setCheckedCheckboxOrRadioAtIndex if ' +\n             'isCheckboxAlreadyUpdatedInAdapter is false',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.layout();\n           foundation.handleClick(\n               0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, true);\n         });\n\n      it('#handleClick does not proxy to the adapter#setCheckedCheckboxOrRadioAtIndex' +\n             'if isCheckboxAlreadyUpdatedInAdapter=false, adapter.isListItemDisabled=true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.layout();\n           foundation.handleClick(\n               0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(0, true);\n         });\n\n      it('#handleClick checks the checkbox at index if it is present on list item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           // Check\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               false);\n           foundation.handleClick(\n               2, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(1);\n\n           // Uncheck\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               true);\n           foundation.handleClick(\n               2, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, false);\n         });\n\n      it('#handleClick bails out if checkbox or radio is not present and if ' +\n             'isCheckboxAlreadyUpdatedInAdapter set to true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.hasCheckboxAtIndex.withArgs(1).and.returnValue(false);\n           mockAdapter.hasRadioAtIndex.withArgs(1).and.returnValue(false);\n\n           foundation.handleClick(\n               2, /*isCheckboxAlreadyUpdatedInAdapter*/ true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(1, jasmine.anything());\n         });\n\n      it('#handleClick single-select list when shift key is held should do nothing',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setSingleSelection(true);\n           foundation.layout();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 2, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n               /*fakeEvent*/ createMockMouseEvent(['Shift']));\n           expect(mockAdapter.notifyAction).not.toHaveBeenCalled();\n         });\n\n      it('#handleClick when shift key is held and no previous user selection action should toggle item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 2, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n               /*fakeEvent*/ createMockMouseEvent(['Shift']));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(1);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([2]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleClick unselected item when shift key is held should select range from previous action',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           foundation.handleClick(\n               /*fakeIndex*/ 0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           mockAdapter.setAttributeForElementIndex.calls.reset();\n           mockAdapter.notifySelectionChange.calls.reset();\n           mockAdapter.notifyAction.calls.reset();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 3, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n               /*fakeEvent*/ createMockMouseEvent(['Shift']));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(2, true);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(3, true);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             2, 3\n           ]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleClick selected item when shift key is held should deselect range from previous action',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 3, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           foundation.handleClick(\n               /*fakeIndex*/ 1, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           foundation.handleClick(\n               /*fakeIndex*/ 0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           mockAdapter.setAttributeForElementIndex.calls.reset();\n           mockAdapter.notifySelectionChange.calls.reset();\n           mockAdapter.notifyAction.calls.reset();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 3, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n               /*fakeEvent*/ createMockMouseEvent(['Shift']));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(0, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(1, false);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledWith(3, false);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(3);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             0, 1, 3\n           ]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleClick when shift key is held should not toggle disabled items',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(/*fakeIndex*/ 2, cssClasses.LIST_ITEM_DISABLED_CLASS)\n               .and.returnValue(true);\n           foundation.layout();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 0, /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n           mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n           mockAdapter.setAttributeForElementIndex.calls.reset();\n           mockAdapter.notifySelectionChange.calls.reset();\n           mockAdapter.notifyAction.calls.reset();\n\n           foundation.handleClick(\n               /*fakeIndex*/ 3, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n               /*fakeEvent*/ createMockMouseEvent(['Shift']));\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .not.toHaveBeenCalledWith(2, jasmine.anything());\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(2);\n           expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n             1, 3\n           ]);\n           expect(mockAdapter.notifyAction).toHaveBeenCalled();\n         });\n\n      it('#handleClick multiple clicks while shift is held should work', () => {\n        const {foundation, mockAdapter} = setupTest();\n\n        mockAdapter.getListItemCount.and.returnValue(4);\n        mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n        foundation.layout();\n\n        foundation.handleClick(\n            /*fakeIndex*/ 0, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n            /*fakeEvent*/ createMockMouseEvent(['Shift']));\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(0, true);\n        mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n\n        foundation.handleClick(\n            /*fakeIndex*/ 3, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n            /*fakeEvent*/ createMockMouseEvent(['Shift']));\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(1, true);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(2, true);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(3, true);\n        mockAdapter.setCheckedCheckboxOrRadioAtIndex.calls.reset();\n\n        foundation.handleClick(\n            /*fakeIndex*/ 0, /*isCheckboxAlreadyUpdatedInAdapter*/ false,\n            /*fakeEvent*/ createMockMouseEvent(['Shift']));\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(0, false);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(1, false);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(2, false);\n        expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n            .toHaveBeenCalledWith(3, false);\n      });\n\n      it('#setSingleSelection true with --selected item initializes list state' +\n             ' to correct selection',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(2, cssClasses.LIST_ITEM_SELECTED_CLASS)\n               .and.returnValue(true);\n           foundation.setSingleSelection(true);\n\n           expect(foundation.getSelectedIndex()).toEqual(2);\n         });\n\n      it('#setSingleSelection true with --activated item initializes list state' +\n             ' to correct selection and causes further selections to use activation',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(3);\n           mockAdapter.listItemAtIndexHasClass\n               .withArgs(2, cssClasses.LIST_ITEM_ACTIVATED_CLASS)\n               .and.returnValue(true);\n           foundation.setSingleSelection(true);\n\n           expect(foundation.getSelectedIndex()).toEqual(2);\n           foundation.setSelectedIndex(1);\n           expect(mockAdapter.addClassForElementIndex)\n               .toHaveBeenCalledWith(1, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n         });\n\n      it('#setSingleSelection=true resets selected index if there is no selected ' +\n             'item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(3);\n\n           foundation.setSelectedIndex(2);\n           foundation.setSingleSelection(true);\n           expect(foundation.getSelectedIndex()).toEqual(numbers.UNSET_INDEX);\n         });\n\n      it('#setUseActivatedClass causes setSelectedIndex to use the --activated class',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(3);\n           foundation.setUseActivatedClass(true);\n           foundation.setSelectedIndex(1);\n\n           expect(mockAdapter.addClassForElementIndex)\n               .toHaveBeenCalledWith(1, cssClasses.LIST_ITEM_ACTIVATED_CLASS);\n           expect(mockAdapter.addClassForElementIndex).toHaveBeenCalledTimes(1);\n         });\n\n      it('#setSelectedIndex should bail out early if not in the range', () => {\n        const {foundation, mockAdapter} = setupTest();\n\n        mockAdapter.getListItemCount.and.returnValue(4);\n        foundation.setSelectedIndex(-1);\n        expect(mockAdapter.setAttributeForElementIndex)\n            // TODO: Wait until b/208710526 is fixed, then remove this\n            // autogenerated error suppression.\n            //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number'\n            //  is not assignable to parameter of type 'Expected<string>'.\n            .not.toHaveBeenCalledWith(-1, 'tabindex', 0);\n      });\n\n      it('#setSelectedIndex should bail out early if index is string or invalid',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           foundation.setSelectedIndex('some_random_input' as any);\n           expect(mockAdapter.setAttributeForElementIndex)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'number' is not assignable to parameter of type\n               //  'Expected<string>'.\n               .not.toHaveBeenCalledWith(-1, 'tabindex', 0);\n         });\n\n      it('#setSelectedIndex should set aria checked true on new selected index and set aria checked false on previous ' +\n             'selected index for checkbox based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(2).and.returnValue(\n               true);\n           foundation.setSelectedIndex([2]);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_CHECKED, 'true');\n\n           mockAdapter.isCheckboxCheckedAtIndex.withArgs(3).and.returnValue(\n               true);\n           foundation.setSelectedIndex([3]);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_CHECKED, 'false');\n         });\n\n      it('#setSelectedIndex should set aria attributes on new index and should also set aria checked to false on previous' +\n             ' selected index for radio based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.setSelectedIndex(3);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_CHECKED, 'true');\n\n           foundation.setSelectedIndex(4);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(4, strings.ARIA_CHECKED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_CHECKED, 'false');\n         });\n\n      it('#setSelectedIndex removes selected/activated class name and sets aria-selected to false from previously selected ' +\n             'list item',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(2, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(3, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSelectedIndex(2);\n\n           foundation.setSelectedIndex(3);\n           expect(mockAdapter.removeClassForElementIndex)\n               .toHaveBeenCalledWith(2, cssClasses.LIST_ITEM_SELECTED_CLASS);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_SELECTED, 'false');\n         });\n\n      it('#setSelectedIndex should detect the presence of aria-current during list initialization ' +\n             '(i.e., when it is in unset state) and sets the same attribute on pre-selected index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(2, strings.ARIA_CURRENT)\n               .and.returnValue('page');\n           foundation.setSelectedIndex(2);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(2, strings.ARIA_CURRENT, 'false');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_CURRENT, 'page');\n\n           expect(mockAdapter.setAttributeForElementIndex.calls.allArgs()\n                      .filter(\n                          (args: any) => JSON.stringify(args) ==\n                              JSON.stringify([2, strings.ARIA_CURRENT, 'page']))\n                      .length)\n               .toEqual(1);\n         });\n\n      it('#setSelectedIndex should set aria-selected as default option in the absence of aria-selected on pre-selected ' +\n             'item index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(2, strings.ARIA_CURRENT)\n               .and.returnValue(null);\n           foundation.setSelectedIndex(2);\n\n           expect(mockAdapter.setAttributeForElementIndex)\n               .not.toHaveBeenCalledWith(2, jasmine.any(String), 'false');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_SELECTED, 'true');\n           expect(\n               mockAdapter.setAttributeForElementIndex.calls.allArgs()\n                   .filter(\n                       (args: any) => JSON.stringify(args) ==\n                           JSON.stringify([2, strings.ARIA_SELECTED, 'true']))\n                   .length)\n               .toEqual(1);\n         });\n\n      it('#setSelectedIndex sets aria-current=\"false\" to previously selected index and sets aria-current without any token' +\n             'to current index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(2, strings.ARIA_CURRENT)\n               .and.returnValue('');\n           foundation.setSelectedIndex(2);\n\n           foundation.setSelectedIndex(3);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_CURRENT, 'false');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_CURRENT, '');\n         });\n\n      it('#setSelectedIndex sets aria-current to false to previously selected index and sets aria-current with appropriate ' +\n             'token to current index',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(5);\n           mockAdapter.getAttributeForElementIndex\n               .withArgs(2, strings.ARIA_CURRENT)\n               .and.returnValue('page');\n           foundation.setSelectedIndex(2);\n\n           foundation.setSelectedIndex(3);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(2, strings.ARIA_CURRENT, 'false');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_CURRENT, 'page');\n         });\n\n      it('#setSelectedIndex throws error when array of index is set on radio based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasRadioAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           expect(() => {\n             foundation.setSelectedIndex([0, 1, 2]);\n           }).toThrow();\n         });\n\n      it('#setSelectedIndex throws error when single index number is set on multi-select checkbox based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           expect(() => {\n             foundation.setSelectedIndex(2);\n           }).toThrow();\n         });\n\n      it('#setSelectedIndex deselects all checkboxes when selected index is set to []',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.setSelectedIndex([]);\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalled();\n           expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n               .toHaveBeenCalledTimes(4);\n         });\n\n      it('#getSelectedIndex should be in-sync with setter method', () => {\n        const {foundation, mockAdapter} = setupTest();\n\n        mockAdapter.getListItemCount.and.returnValue(4);\n        foundation.setSelectedIndex(2);\n        expect(foundation.getSelectedIndex()).toEqual(2);\n      });\n\n      it('#getSelectedIndex should return empty array for multi-select checkbox based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           expect(foundation.getSelectedIndex()).toEqual([]);\n         });\n\n      it('#getSelectedIndex should be in-sync with setter method for multi-select checkbox based list',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n\n           mockAdapter.getListItemCount.and.returnValue(4);\n           mockAdapter.hasCheckboxAtIndex.withArgs(0).and.returnValue(true);\n           foundation.layout();\n\n           foundation.setSelectedIndex([0, 2, 3]);\n           expect(foundation.getSelectedIndex()).toEqual([0, 2, 3]);\n         });\n\n      it('#setEnabled should remove disabled class and set aria-disabled to false',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(5);\n           foundation.layout();\n\n           foundation.setEnabled(3, true);\n           expect(mockAdapter.removeClassForElementIndex)\n               .toHaveBeenCalledWith(3, cssClasses.LIST_ITEM_DISABLED_CLASS);\n           expect(mockAdapter.removeClassForElementIndex)\n               .toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_DISABLED, 'false');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(1);\n         });\n\n      it('#setEnabled should add disabled class and set aria-disabled to true',\n         () => {\n           const {foundation, mockAdapter} = setupTest();\n           mockAdapter.getListItemCount.and.returnValue(5);\n           foundation.layout();\n\n           foundation.setEnabled(3, false);\n           expect(mockAdapter.addClassForElementIndex)\n               .toHaveBeenCalledWith(3, cssClasses.LIST_ITEM_DISABLED_CLASS);\n           expect(mockAdapter.addClassForElementIndex).toHaveBeenCalledTimes(1);\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledWith(3, strings.ARIA_DISABLED, 'true');\n           expect(mockAdapter.setAttributeForElementIndex)\n               .toHaveBeenCalledTimes(1);\n         });\n\n      describe('notifySelectionChange', () => {\n        describe('checkbox list', () => {\n          it('should notify when a list item has been toggled through space',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.isCheckboxCheckedAtIndex.and.returnValue(false);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledWith(4, true);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'space due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through enter',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.isCheckboxCheckedAtIndex.and.returnValue(false);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledWith(4, true);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'enter due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through click',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.setCheckedCheckboxOrRadioAtIndex.and.returnValue(\n                   // TODO: Wait until b/208710526 is fixed, then remove this\n                   // autogenerated error suppression.\n                   //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n                   //  'boolean' is not assignable to parameter of type 'void'.\n                   false);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledWith(2, true);\n             });\n\n          it('should notify when a list item has been toggled through click even ' +\n                 'with `isCheckboxAlreadyUpdatedInAdapter` set to `true`',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.isCheckboxCheckedAtIndex.and.returnValue(false);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2, /*isCheckboxAlreadyUpdatedInAdapter*/ true);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'click due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.isCheckboxCheckedAtIndex.and.returnValue(false);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 2, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n               expect(mockAdapter.setCheckedCheckboxOrRadioAtIndex)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when items have been selected through CTRL + A',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const event = createMockKeyboardEvent('A', ['Control']);\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n               mockAdapter.isCheckboxCheckedAtIndex.and.returnValue(false);\n\n               foundation.handleKeydown(event, false, -1);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 3);\n\n               // nothing was selected before, so this should capture all three\n               // items.\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 0, 1, 2\n               ]);\n\n               mockAdapter.notifySelectionChange.calls.reset();\n               foundation.setSelectedIndex([2]);\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 3);\n\n               // The third item is already selected, so only the first and\n               // second should have been toggled.\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 0, 1\n               ]);\n\n               mockAdapter.notifySelectionChange.calls.reset();\n               foundation.setSelectedIndex([0, 1, 2]);\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 3);\n\n               // all items are selected, so all should be de-selected.\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 0, 1, 2\n               ]);\n             });\n        });\n\n        describe('radio list', () => {\n          it('should notify when a list item has been toggled through space',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'space due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through enter',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'enter due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through click',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n             });\n\n          it('should notify when a list item has been toggled through click even ' +\n                 'with `isCheckboxAlreadyUpdatedInAdapter` set to `true`',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2, /*isCheckboxAlreadyUpdatedInAdapter*/ true);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'click due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               mockAdapter.hasRadioAtIndex.and.returnValue(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 2, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n        });\n\n        describe('single selection', () => {\n          it('should notify when a list item has been toggled through space',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               foundation.setSingleSelection(true);\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'space due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {tagName: 'A', classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Spacebar', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               foundation.setSingleSelection(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through enter',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               foundation.setSingleSelection(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 4\n               ]);\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'enter due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n               const target = {classList: ['mdc-list-item']};\n               const event = createMockKeyboardEvent('Enter', [], target);\n\n               mockAdapter.getListItemCount.and.returnValue(5);\n               mockAdapter.getFocusedElementIndex.and.returnValue(\n                   /*fakeIndex*/ 4);\n               foundation.setSingleSelection(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 4, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n               foundation.layout();\n               foundation.handleKeydown(event, true, /*fakeIndex*/ 4);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('should notify when a list item has been toggled through click',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               foundation.setSingleSelection(true);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n             });\n\n          it('should notify when a list item has been toggled through click even ' +\n                 'with `isCheckboxAlreadyUpdatedInAdapter` set to `true`',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               foundation.setSingleSelection(true);\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2, /*isCheckboxAlreadyUpdatedInAdapter*/ true);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(1);\n               expect(mockAdapter.notifySelectionChange).toHaveBeenCalledWith([\n                 2\n               ]);\n             });\n\n          it('should not notify when a list item could not be toggled through ' +\n                 'click due to it being disabled',\n             () => {\n               const {foundation, mockAdapter} = setupTest();\n\n               mockAdapter.getListItemCount.and.returnValue(3);\n               foundation.setSingleSelection(true);\n               mockAdapter.listItemAtIndexHasClass\n                   .withArgs(\n                       /*fakeIndex*/ 2, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                   .and.returnValue(true);\n\n\n               foundation.layout();\n               foundation.handleClick(\n                   /*fakeIndex*/ 2,\n                   /*isCheckboxAlreadyUpdatedInAdapter*/ false);\n\n               expect(mockAdapter.notifySelectionChange)\n                   .toHaveBeenCalledTimes(0);\n             });\n\n          it('#setSelectedIndex does not delesect on empty list', () => {\n            const {foundation, mockAdapter} = setupTest();\n\n            mockAdapter.getListItemCount.and.returnValue(0);\n            foundation.setSingleSelection(true);\n\n            foundation.layout();\n            expect(foundation.getSelectedIndex()).toBe(-1);\n\n            foundation.setSelectedIndex(-1, {forceUpdate: true});\n            expect(mockAdapter.setAttributeForElementIndex)\n                // TODO: Wait until b/208710526 is fixed, then remove this\n                // autogenerated error suppression.\n                //  @ts-ignore(go/unfork-jasmine-typings): Expected 3 arguments,\n                //  but got 0.\n                .not.toHaveBeenCalledWith();\n            expect(mockAdapter.setAttributeForElementIndex)\n                // TODO: Wait until b/208710526 is fixed, then remove this\n                // autogenerated error suppression.\n                //  @ts-ignore(go/unfork-jasmine-typings): Expected 3 arguments,\n                //  but got 0.\n                .not.toHaveBeenCalledWith();\n            expect(mockAdapter.getAttributeForElementIndex)\n                .not.toHaveBeenCalled();\n            expect(mockAdapter.getAttributeForElementIndex)\n                .not.toHaveBeenCalled();\n          });\n        });\n      });\n\n      describe('typeahead', () => {\n        it('#layout initializes typeahead state when typeahead enabled', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          // State is synchronized when typeahead is first turned on, but in\n          // this test we only care about re-initialization.\n          mockAdapter.getPrimaryTextAtIndex.calls.reset();\n          foundation.layout();\n\n          expect(mockAdapter.getPrimaryTextAtIndex).toHaveBeenCalled();\n        });\n\n        it('slow typing when root focused jumps to first matching item', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(true);\n          const event = createMockKeyboardEvent('B');\n\n          foundation.handleKeydown(event, false, -1);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n        });\n\n        it('does not activate when ctrl/meta key is pressed', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(true);\n          const ctrlEvent = createMockKeyboardEvent('B', ['Control']);\n          const metaEvent = createMockKeyboardEvent('B', ['Meta']);\n\n          foundation.handleKeydown(ctrlEvent, false, -1);\n          foundation.handleKeydown(metaEvent, false, -1);\n          expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalledWith(0);\n        });\n\n        it('slow typing when first item focused yields correct focus jump order',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n\n             mockAdapter.isRootFocused.and.returnValue(false);\n             const event = createMockKeyboardEvent('B', [], {tagName: 'span'});\n             // start with focus on first item\n             (foundation as any).focusedItemIndex = 0;\n\n             foundation.handleKeydown(event, true, 0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(3);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 3);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n\n             // wrap around\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 4);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           });\n\n        it('slow typing when middle item focused yields correct focus jump order',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n\n             mockAdapter.isRootFocused.and.returnValue(false);\n             const event = createMockKeyboardEvent('B', [], {tagName: 'span'});\n             (foundation as any).focusedItemIndex = 3;\n\n             foundation.handleKeydown(event, true, 3);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 4);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n           });\n\n        it('slow typing with focus changing between keypresses does not' +\n               ' interfere with typeahead state',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n\n             mockAdapter.isRootFocused.and.returnValue(false);\n             const event = createMockKeyboardEvent('B', [], {tagName: 'span'});\n             (foundation as any).focusedItemIndex = 0;\n\n             foundation.handleKeydown(event, true, 0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n\n             (foundation as any).focusedItemIndex = 5;\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             foundation.handleKeydown(event, true, 5);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n           });\n\n        it('slow typing with different keys yields correct focus jump order',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n\n             mockAdapter.isRootFocused.and.returnValue(false);\n             const event = createMockKeyboardEvent('B', [], {tagName: 'span'});\n             // start with focus on first item\n             (foundation as any).focusedItemIndex = 0;\n\n             foundation.handleKeydown(event, true, 0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             (event as any).key = 'A';\n             foundation.handleKeydown(event, true, 2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(6);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             (event as any).key = 'T';\n             foundation.handleKeydown(event, true, 2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(6);\n\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             (event as any).key = 'Z';\n             foundation.handleKeydown(event, true, 6);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n           });\n\n        it('fast typing yields correct focus jump order', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(false);\n          const event = createMockKeyboardEvent('B', [], {tagName: 'span'});\n          (foundation as any).focusedItemIndex = 0;\n\n          foundation.handleKeydown(event, true, 0);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n\n          (event as any).key = 'A';\n          foundation.handleKeydown(event, true, 2);\n          expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalledWith(3);\n\n          (event as any).key = 'B';\n          foundation.handleKeydown(event, true, 2);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n        });\n\n        it('fast typing with spaces in text yields correct focus jump order',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n\n             mockAdapter.isRootFocused.and.returnValue(false);\n             const event = createMockKeyboardEvent('Z', [], {tagName: 'span'});\n             (foundation as any).focusedItemIndex = 0;\n\n             foundation.handleKeydown(event, true, 0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n\n             (event as any).key = 'Spacebar';\n             foundation.handleKeydown(event, true, 1);\n             expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalledWith(5);\n\n             (event as any).key = 'A';\n             foundation.handleKeydown(event, true, 1);\n             expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalledWith(5);\n\n             (event as any).key = 'C';\n             foundation.handleKeydown(event, true, 1);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(5);\n           });\n\n\n        it('slow, then fast typing yields correct focus jump order', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(false);\n          const event = createMockKeyboardEvent('A', [], {tagName: 'span'});\n          // start with focus on first item\n          (foundation as any).focusedItemIndex = 0;\n\n          foundation.handleKeydown(event, true, 0);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(6);\n\n          jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n\n          (event as any).key = 'B';\n          foundation.handleKeydown(event, true, 6);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n\n          (event as any).key = 'A';\n          foundation.handleKeydown(event, true, 0);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n        });\n\n        it('no matches cause focus to stay put', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(false);\n          const event = createMockKeyboardEvent('M', [], {tagName: 'span'});\n          // start with focus on first item\n          (foundation as any).focusedItemIndex = 0;\n\n          foundation.handleKeydown(event, true, 0);\n          jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n\n          (event as any).key = 'I';\n          foundation.handleKeydown(event, true, 0);\n\n          (event as any).key = 'O';\n          foundation.handleKeydown(event, true, 0);\n\n          expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalled();\n        });\n\n        it('ignores disabled items properly', () => {\n          const {foundation, mockAdapter} = setupTypeaheadTest();\n\n          mockAdapter.isRootFocused.and.returnValue(false);\n          const event = createMockKeyboardEvent('Z', [], {tagName: 'span'});\n          // start with focus on first item\n          (foundation as any).focusedItemIndex = 0;\n\n          mockAdapter.listItemAtIndexHasClass\n              .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n              .and.returnValue(true);\n\n          foundation.handleKeydown(event, true, 0);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(5);\n          jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n\n          mockAdapter.listItemAtIndexHasClass\n              .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n              .and.returnValue(false);\n          foundation.handleKeydown(event, true, 0);\n          expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n        });\n\n        it('programmatic typeahead invocation returns correct matching items',\n           () => {\n             const {foundation, mockAdapter} = setupTypeaheadTest();\n             expect(foundation.typeaheadMatchItem('b', 2, true)).toEqual(3);\n             expect(foundation.typeaheadMatchItem('a', 3, true)).toEqual(3);\n             expect(foundation.typeaheadMatchItem('b', 3, true)).toEqual(4);\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n\n             expect(foundation.typeaheadMatchItem('z', 2, true)).toEqual(5);\n             jasmine.clock().tick(numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n             expect(foundation.typeaheadMatchItem('z', 5, true)).toEqual(1);\n\n             expect(mockAdapter.focusItemAtIndex).not.toHaveBeenCalled();\n           });\n      });\n\n      describe('with areDisabledItemsFocusable set to false', () => {\n        it('#focusInitialElement focuses the first enabled list item and returns that index',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n\n             expect(2).toEqual(foundation.focusInitialElement());\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusInitialElement focuses the first enabled list item and returns that index when the selected item is disabled (single selection list)',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n             foundation.setSingleSelection(true);\n             foundation.setSelectedIndex(2);\n\n             expect(2).toEqual(foundation.focusInitialElement());\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusInitialElement focuses the first enabled list item and returns that index when the selected item is disabled (multi selection list)',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n             mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n             foundation.layout();\n             foundation.setSelectedIndex([0]);\n\n             expect(1).toEqual(foundation.focusInitialElement());\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusInitialElement focuses the first enabled selected list item and returns that index when the first selected item is disabled (multi selection list)',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n             mockAdapter.hasCheckboxAtIndex.and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n             foundation.layout();\n             foundation.setSelectedIndex([1, 2]);\n\n             expect(2).toEqual(foundation.focusInitialElement());\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusNextElement focuses next enabled list item and returns that index',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(2, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n\n             expect(3).toEqual(foundation.focusNextElement(1));\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(3);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusNextElement focuses first enabled list item when focus is on last list item when wrapFocus=true and returns that ' +\n               'index',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             foundation.setDisabledItemsFocusable(false);\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(0, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n             foundation.setWrapFocus(true);\n\n             expect(1).toEqual(foundation.focusNextElement(3));\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(1);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusPrevElement focuses previous enabled list item and returns that index',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             foundation.setDisabledItemsFocusable(false);\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(1, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n\n             expect(0).toEqual(foundation.focusPrevElement(2));\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n\n        it('#focusPrevElement focuses last enabled list item when focus is on first list item when wrapFocus=true and returns that ' +\n               'index',\n           () => {\n             const {foundation, mockAdapter} = setupTest();\n\n             mockAdapter.getListItemCount.and.returnValue(4);\n             mockAdapter.listItemAtIndexHasClass\n                 .withArgs(3, cssClasses.LIST_ITEM_DISABLED_CLASS)\n                 .and.returnValue(true);\n\n             foundation.setDisabledItemsFocusable(false);\n             foundation.setWrapFocus(true);\n\n             expect(2).toEqual(foundation.focusPrevElement(0));\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(2);\n             expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n           });\n      });\n    });"
  },
  {
    "path": "packages/mdc-list/test/mdc-list.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-list.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-list/typeahead.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {normalizeKey} from '@material/dom/keyboard';\n\nimport {numbers} from './constants';\nimport {preventDefaultEvent} from './events';\nimport {MDCListTextAndIndex} from './types';\n\n/**\n * State of a typeahead instance.\n */\nexport interface TypeaheadState {\n  typeaheadBuffer: string;\n  currentFirstChar: string;\n  sortedIndexCursor: number;\n  bufferClearTimeout: number;\n}\n\n/**\n * Initializes a state object for typeahead. Use the same reference for calls to\n * typeahead functions.\n *\n * @return The current state of the typeahead process. Each state reference\n *     represents a typeahead instance as the reference is typically mutated\n *     in-place.\n */\nexport function initState(): TypeaheadState {\n  const state: TypeaheadState = {\n    bufferClearTimeout: 0,\n    currentFirstChar: '',\n    sortedIndexCursor: 0,\n    typeaheadBuffer: '',\n  };\n  return state;\n}\n\n/**\n * Initializes typeahead state by indexing the current list items by primary\n * text into the sortedIndexByFirstChar data structure.\n *\n * @param listItemCount numer of items in the list\n * @param getPrimaryTextByItemIndex function that returns the primary text at a\n *     given index\n *\n * @return Map that maps the first character of the primary text to the full\n *     list text and its index\n */\nexport function initSortedIndex(\n    listItemCount: number,\n    getPrimaryTextByItemIndex: (index: number) =>\n        string): Map<string, MDCListTextAndIndex[]> {\n  const sortedIndexByFirstChar = new Map<string, MDCListTextAndIndex[]>();\n\n  // Aggregate item text to index mapping\n  for (let i = 0; i < listItemCount; i++) {\n    const primaryText = getPrimaryTextByItemIndex(i).trim();\n    if (!primaryText) {\n      continue;\n    }\n\n    const firstChar = primaryText[0].toLowerCase();\n    if (!sortedIndexByFirstChar.has(firstChar)) {\n      sortedIndexByFirstChar.set(firstChar, []);\n    }\n    sortedIndexByFirstChar.get(firstChar)!.push(\n        {text: primaryText.toLowerCase(), index: i});\n  }\n\n  // Sort the mapping\n  // TODO(b/157162694): Investigate replacing forEach with Map.values()\n  sortedIndexByFirstChar.forEach((values) => {\n    values.sort((first: MDCListTextAndIndex, second: MDCListTextAndIndex) => {\n      return first.index - second.index;\n    });\n  });\n\n  return sortedIndexByFirstChar;\n}\n\n/**\n * Arguments for matchItem\n */\nexport interface TypeaheadMatchItemOpts {\n  focusItemAtIndex: (index: number) => void;\n  nextChar: string;\n  focusedItemIndex: number;\n  sortedIndexByFirstChar: Map<string, MDCListTextAndIndex[]>;\n  skipFocus: boolean;\n  isItemAtIndexDisabled: (index: number) => boolean;\n}\n\n/**\n * Given the next desired character from the user, it attempts to find the next\n * list option matching the buffer. Wraps around if at the end of options.\n *\n * @param opts Options and accessors\n *   - nextChar - the next character to match against items\n *   - sortedIndexByFirstChar - output of `initSortedIndex(...)`\n *   - focusedItemIndex - the index of the currently focused item\n *   - focusItemAtIndex - function that focuses a list item at given index\n *   - skipFocus - whether or not to focus the matched item\n *   - isItemAtIndexDisabled - function that determines whether an item at a\n *        given index is disabled\n * @param state The typeahead state instance. See `initState`.\n *\n * @return The index of the matched item, or -1 if no match.\n */\nexport function matchItem(\n    opts: TypeaheadMatchItemOpts, state: TypeaheadState): number {\n  const {\n    nextChar,\n    focusItemAtIndex,\n    sortedIndexByFirstChar,\n    focusedItemIndex,\n    skipFocus,\n    isItemAtIndexDisabled,\n  } = opts;\n\n  clearTimeout(state.bufferClearTimeout);\n\n  state.bufferClearTimeout = setTimeout(() => {\n    clearBuffer(state);\n  }, numbers.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);\n\n  state.typeaheadBuffer = state.typeaheadBuffer + nextChar;\n\n  let index: number;\n  if (state.typeaheadBuffer.length === 1) {\n    index = matchFirstChar(\n        sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state);\n  } else {\n    index = matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state);\n  }\n\n  if (index !== -1 && !skipFocus) {\n    focusItemAtIndex(index);\n  }\n  return index;\n}\n\n/**\n * Matches the user's single input character in the buffer to the\n * next option that begins with such character. Wraps around if at\n * end of options. Returns -1 if no match is found.\n */\nfunction matchFirstChar(\n    sortedIndexByFirstChar: Map<string, MDCListTextAndIndex[]>,\n    focusedItemIndex: number, isItemAtIndexDisabled: (index: number) => boolean,\n    state: TypeaheadState): number {\n  const firstChar = state.typeaheadBuffer[0];\n  const itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);\n  if (!itemsMatchingFirstChar) {\n    return -1;\n  }\n\n  // Has the same firstChar been recently matched?\n  // Also, did starting index remain the same between key presses?\n  // If both hold true, simply increment index.\n  if (firstChar === state.currentFirstChar &&\n      itemsMatchingFirstChar[state.sortedIndexCursor].index ===\n          focusedItemIndex) {\n    state.sortedIndexCursor =\n        (state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;\n\n    const newIndex = itemsMatchingFirstChar[state.sortedIndexCursor].index;\n    if (!isItemAtIndexDisabled(newIndex)) {\n      return newIndex;\n    }\n  }\n\n  // If we're here, it means one of the following happened:\n  // - either firstChar or startingIndex has changed, invalidating the\n  // cursor.\n  // - The next item of typeahead is disabled, so we have to look further.\n  state.currentFirstChar = firstChar;\n\n  let newCursorPosition = -1;\n  let cursorPosition;\n  // Find the first non-disabled item as a fallback.\n  for (cursorPosition = 0; cursorPosition < itemsMatchingFirstChar.length;\n       cursorPosition++) {\n    if (!isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {\n      newCursorPosition = cursorPosition;\n      break;\n    }\n  }\n\n  // Advance cursor to first item matching the firstChar that is positioned\n  // after starting item. Cursor is unchanged from fallback if there's no\n  // such item.\n  for (; cursorPosition < itemsMatchingFirstChar.length; cursorPosition++) {\n    if (itemsMatchingFirstChar[cursorPosition].index > focusedItemIndex &&\n        !isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {\n      newCursorPosition = cursorPosition;\n      break;\n    }\n  }\n\n  if (newCursorPosition !== -1) {\n    state.sortedIndexCursor = newCursorPosition;\n    return itemsMatchingFirstChar[state.sortedIndexCursor].index;\n  }\n\n  return -1;\n}\n\n/**\n * Attempts to find the next item that matches all of the typeahead buffer.\n * Wraps around if at end of options. Returns -1 if no match is found.\n */\nfunction matchAllChars(\n    sortedIndexByFirstChar: Map<string, MDCListTextAndIndex[]>,\n    isItemAtIndexDisabled: (index: number) => boolean,\n    state: TypeaheadState): number {\n  const firstChar = state.typeaheadBuffer[0];\n  const itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);\n  if (!itemsMatchingFirstChar) {\n    return -1;\n  }\n\n  // Do nothing if text already matches\n  const startingItem = itemsMatchingFirstChar[state.sortedIndexCursor];\n  if (startingItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0 &&\n      !isItemAtIndexDisabled(startingItem.index)) {\n    return startingItem.index;\n  }\n\n  // Find next item that matches completely; if no match, we'll eventually\n  // loop around to same position\n  let cursorPosition =\n      (state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;\n  let nextCursorPosition = -1;\n  while (cursorPosition !== state.sortedIndexCursor) {\n    const currentItem = itemsMatchingFirstChar[cursorPosition];\n\n    const matches =\n        currentItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0;\n    const isEnabled = !isItemAtIndexDisabled(currentItem.index);\n    if (matches && isEnabled) {\n      nextCursorPosition = cursorPosition;\n      break;\n    }\n\n    cursorPosition = (cursorPosition + 1) % itemsMatchingFirstChar.length;\n  }\n\n  if (nextCursorPosition !== -1) {\n    state.sortedIndexCursor = nextCursorPosition;\n    return itemsMatchingFirstChar[state.sortedIndexCursor].index;\n  }\n\n  return -1;\n}\n\n/**\n * Whether or not the given typeahead instaance state is currently typing.\n *\n * @param state The typeahead state instance. See `initState`.\n */\nexport function isTypingInProgress(state: TypeaheadState) {\n  return state.typeaheadBuffer.length > 0;\n}\n\n/**\n * Options for handleKeydown.\n */\nexport interface HandleKeydownOpts {\n  event: KeyboardEvent;\n  isTargetListItem: boolean;\n  focusItemAtIndex: (index: number) => void;\n  focusedItemIndex: number;\n  sortedIndexByFirstChar: Map<string, MDCListTextAndIndex[]>;\n  isItemAtIndexDisabled: (index: number) => boolean;\n}\n\n/**\n * Clears the typeahaed buffer so that it resets item matching to the first\n * character.\n *\n * @param state The typeahead state instance. See `initState`.\n */\nexport function clearBuffer(state: TypeaheadState) {\n  state.typeaheadBuffer = '';\n}\n\n/**\n * Given a keydown event, it calculates whether or not to automatically focus a\n * list item depending on what was typed mimicking the typeahead functionality\n * of a standard <select> element that is open.\n *\n * @param opts Options and accessors\n *   - event - the KeyboardEvent to handle and parse\n *   - sortedIndexByFirstChar - output of `initSortedIndex(...)`\n *   - focusedItemIndex - the index of the currently focused item\n *   - focusItemAtIndex - function that focuses a list item at given index\n *   - isItemAtFocusedIndexDisabled - whether or not the currently focused item\n *      is disabled\n *   - isTargetListItem - whether or not the event target is a list item\n * @param state The typeahead state instance. See `initState`.\n *\n * @return index of the item matched by the keydown. -1 if not matched.\n */\nexport function handleKeydown(opts: HandleKeydownOpts, state: TypeaheadState) {\n  const {\n    event,\n    isTargetListItem,\n    focusedItemIndex,\n    focusItemAtIndex,\n    sortedIndexByFirstChar,\n    isItemAtIndexDisabled,\n  } = opts;\n\n  const isArrowLeft = normalizeKey(event) === 'ArrowLeft';\n  const isArrowUp = normalizeKey(event) === 'ArrowUp';\n  const isArrowRight = normalizeKey(event) === 'ArrowRight';\n  const isArrowDown = normalizeKey(event) === 'ArrowDown';\n  const isHome = normalizeKey(event) === 'Home';\n  const isEnd = normalizeKey(event) === 'End';\n  const isEnter = normalizeKey(event) === 'Enter';\n  const isSpace = normalizeKey(event) === 'Spacebar';\n\n  if (event.altKey || event.ctrlKey || event.metaKey || isArrowLeft ||\n      isArrowUp || isArrowRight || isArrowDown || isHome || isEnd || isEnter) {\n    return -1;\n  }\n\n  const isCharacterKey = !isSpace && event.key.length === 1;\n\n  if (isCharacterKey) {\n    preventDefaultEvent(event);\n    const matchItemOpts: TypeaheadMatchItemOpts = {\n      focusItemAtIndex,\n      focusedItemIndex,\n      nextChar: event.key.toLowerCase(),\n      sortedIndexByFirstChar,\n      skipFocus: false,\n      isItemAtIndexDisabled,\n    };\n    return matchItem(matchItemOpts, state);\n  }\n\n  if (!isSpace) {\n    return -1;\n  }\n\n  if (isTargetListItem) {\n    preventDefaultEvent(event);\n  }\n\n  const typeaheadOnListItem = isTargetListItem && isTypingInProgress(state);\n\n  if (typeaheadOnListItem) {\n    const matchItemOpts: TypeaheadMatchItemOpts = {\n      focusItemAtIndex,\n      focusedItemIndex,\n      nextChar: ' ',\n      sortedIndexByFirstChar,\n      skipFocus: false,\n      isItemAtIndexDisabled,\n    };\n    // space participates in typeahead matching if in rapid typing mode\n    return matchItem(matchItemOpts, state);\n  }\n\n  return -1;\n}\n"
  },
  {
    "path": "packages/mdc-list/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCListActionEventDetail {\n  /**\n   * Index of the list item that was activated.\n   */\n  index: number;\n}\n\nexport interface MDCListActionEvent extends Event {\n  detail: MDCListActionEventDetail;\n}\n\n\nexport interface MDCListSelectionChangeDetail {\n  /** Indices of the list items for which the selection changed. */\n  changedIndices: number[];\n}\n\nexport interface MDCListSelectionChangeEvent extends Event {\n  detail: MDCListSelectionChangeDetail;\n}\n\nexport type MDCListIndex = number|number[];\n\n/**\n * Type used by the typeahead mechanism to keep track of the index associated\n * with list item text.\n */\nexport interface MDCListTextAndIndex {\n  text: string;\n  index: number;\n}\n"
  },
  {
    "path": "packages/mdc-menu/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-menu/README.md",
    "content": "<!--docs:\ntitle: \"Menus\"\nlayout: detail\nsection: components\nexcerpt: \"Non-cascading Material Design menus.\"\niconId: menu\npath: /catalog/menus/\n-->\n\n# Menus\n\nA menu displays a list of choices on a temporary surface. They appear when users interact with a button, action,\nor other control.\n\n## Important Changes\n\nMenu is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-menus\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">A Menu Item</span>\n    </li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Another Menu Item</span>\n    </li>\n  </ul>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/list/mdc-list\";\n@use \"@material/menu-surface/mdc-menu-surface\";\n@use \"@material/menu/mdc-menu\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenu} from '@material/menu';\n\nconst menu = new MDCMenu(document.querySelector('.mdc-menu'));\nmenu.open = true;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Selection Group Menu\n\nMenus can contain a group of list items that can represent the selection state of elements within the group.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\" id=\"demo-menu\">\n  <ul class=\"mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" aria-orientation=\"vertical\" tabindex=\"-1\">\n    <li>\n      <ul class=\"mdc-menu__selection-group\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n            ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">Single</span>\n        </li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon\">\n           ...\n          </span>\n          <span class=\"mdc-deprecated-list-item__text\">1.15</span>\n        </li>\n      </ul>\n    </li>\n    <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n    <li class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n      <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      <span class=\"mdc-deprecated-list-item__text\">Add space before paragraph</span>\n    </li>\n    ...\n  </ul>\n</div>\n```\n\n### Disabled Menu Items\n\nMenu items can be disabled by adding the `mdc-deprecated-list-item--disabled` modifier class (from [MDC List](../mdc-list)).\nDisabled menu items will be excluded from keyboard navigation.\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div id=\"demo-menu\" class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-button\">Open Menu</button>\n  <div class=\"mdc-menu mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenu.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu can use absolutely positioned when being displayed.\n\n```html\n<div class=\"mdc-menu mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenu.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu` | Required on the root element\n`mdc-menu-surface` | Required on the root element. See [`mdc-menu-surface` documentation](../mdc-menu-surface) for other `mdc-menu-surface` classes.\n`mdc-deprecated-list` | Required on the nested `ul` element. See [`mdc-list` documentation](../mdc-list) for other `mdc-deprecated-list` classes.\n`mdc-menu__selection-group` | Used to wrap a group of `mdc-deprecated-list-item` elements that will represent a selection group.\n`mdc-menu__selection-group-icon` | Required when using a selection group to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the list item.\n`mdc-menu-item--selected` | Used to indicate which element in a selection group is selected.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`width($width)` | Used to set the `width` of the menu. When used without units (e.g. `4` or `5`) it computes the `width` by multiplying by the base width (`56px`). When used with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` it sets the `width` to the exact value provided.\n`min-width($min-width)` | Sets the `min-width` of the menu. Use with units (e.g. `240px`, `15%`, or `calc(200px + 10px)` only.\n\n> See [Menu Surface](../mdc-menu-surface/README.md#sass-mixins) and [List](../mdc-list/README.md#sass-mixins) documentation for additional style customization options.\n\n### Accessibility\n\nPlease see [Menu Button](https://www.w3.org/TR/wai-aria-practices/#menubutton) WAI-ARIA practices article for details on recommended Roles, States, and Properties for menu button (button that opens a menu).\n\nWith focus on the menu button:\n\n  * <kbd>Enter</kbd>, <kbd>Space</kbd> & <kbd>Down Arrow</kbd> opens the menu and places focus on the first menu item.\n  * <kbd>Up Arrow</kbd> opens the menu and moves focus to the last menu item.\n  * The focus is set to list root element (where `role=\"menu\"` is set) when clicked or touched. MDC List handles the keyboard navigation once it receives the focus.\n\nUse `setDefaultFocusState` method to set default focus state that will be focused every time when menu is opened.\n\nFocus state | Description\n--- | ---\n`DefaultFocusState.FIRST_ITEM` | Focuses the first menu item. Set this when menu button receives <kbd>Enter</kbd>, <kbd>Space</kbd>, <kbd>Down Arrow</kbd>.\n`DefaultFocusState.LAST_ITEM` | Focuses the last menu item. Set this when menu button receives <kbd>Up arrow</kbd>.\n`DefaultFocusState.LIST_ROOT` | Focuses the list root. Set this when menu button Clicked or Touched.\n`DefaultFocusState.NONE` | Does not change the focus. Set this if you do not want the menu to grab focus on open. (Autocomplete dropdown menu, for example).\n\n## `MDCMenu` Properties and Methods\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the menu surface's `open` property.\n`items` | `Array<Element>` | Proxies to the list to query for all `.mdc-deprecated-list-item` elements.\n`quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property.\n`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property.\n`hasTypeahead` | Boolean | Proxies to the list's `hasTypeahead` property.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the menu surface's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the menu surface's `setAbsolutePosition(x: number, y: number)` method.\n`setFixedPosition(isFixed: boolean) => void` | Proxies to the menu surface's `setFixedPosition(isFixed: boolean)` method.\n`setSelectedIndex(index: number) => void` | Sets the list item to the selected state at the specified index.\n`setIsHoisted(isHoisted: boolean) => void` | Proxies to the menu surface's `setIsHoisted(isHoisted: boolean)` method.\n`setAnchorElement(element: Element) => void` | Proxies to the menu surface's `setAnchorElement(element)` method.\n`getOptionByIndex(index: number) => Element \\| null` | Returns the list item at the `index` specified.\n`getPrimaryTextAtIndex(index: number) => string` | Returns the primary text at the `index` specified.\n`getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation.\n`setDefaultFocusState(focusState: DefaultFocusState) => void` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by default.\n`setEnabled(index: number, isEnabled: boolean) => void` | Sets the enabled state to `isEnabled` for the menu item at given `index`.\n`layout() => void` | Proxies to the list's layout method.\n`typeaheadMatchItem(nextChar: string) => number` | Adds a character to the typeahead buffer and returns index of the next item in the list matching the buffer.\n\n> See [Menu Surface](../mdc-menu-surface/README.md) and [List](../mdc-list/README.md) documentation for more information on proxied methods and properties.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClassToElementAtIndex(index: number, className: string) => void` | Adds the `className` class to the element at the `index` specified.\n`removeClassFromElementAtIndex(index: number, className: string) => void` | Removes the `className` class from the element at the `index` specified.\n`addAttributeToElementAtIndex(index: number, attr: string, value: string) => void` | Adds the `attr` attribute with value `value` to the element at the `index` specified.\n`removeAttributeFromElementAtIndex(index: number, attr: string) => void` | Removes the `attr` attribute from the element at the `index` specified.\n`elementContainsClass(element: Element, className: string) => boolean` | Returns true if the `element` contains the `className` class.\n`closeSurface(skipRestoreFocus?: boolean) => void` | Closes the menu surface, skipping restoring focus to the previously focused element if `skipRestoreFocus` is true.\n`getElementIndex(element: Element) => number` | Returns the `index` value of the `element`.\n`notifySelected(index: number) => void` | Emits a `MDCMenu:selected` event for the element at the `index` specified.\n`getMenuItemCount() => number` | Returns the menu item count.\n`focusItemAtIndex(index: number)` | Focuses the menu item at given index.\n`focusListRoot() => void` | Focuses the list root element.\n`getSelectedSiblingOfItemAtIndex(index: number) => number` | Returns selected list item index within the same selection group which is a sibling of item at given `index`.\n`isSelectableItemAtIndex(index: number) => boolean` | Returns true if menu item at specified index is contained within an `.mdc-menu__selection-group` element.\n\n### `MDCMenuFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleKeydown(event: Event) => void` | Event handler for the `keydown` events within the menu.\n`handleItemAction(listItem: Element) => void` | Event handler for list's action event.\n`handleMenuSurfaceOpened() => void` | Event handler for menu surface's opened event.\n`setDefaultFocusState(focusState: DefaultFocusState) => void` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by default.\n`setSelectedIndex(index: number) => void` | Selects the list item at given `index`.\n`setEnabled(index: number, isEnabled: boolean) => void` | Sets the enabled state of the menu item at given `index`.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenu:selected` | `{detail: {item: Element, index: number}}` | Used to indicate when an element has been selected. This event also includes the item selected and the list index of that item.\n"
  },
  {
    "path": "packages/mdc-menu/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-menu/_menu-custom-properties.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$min-width: --mdc-menu-min-width;\n"
  },
  {
    "path": "packages/mdc-menu/_menu-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Menu MDC component.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/list/list-theme';\n@use '@material/shape/shape';\n@use '@material/theme/keys';\n@use '@material/theme/map-ext';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/tokens/resolvers';\n\n$custom-property-prefix: 'menu';\n\n$light-theme: (\n  cascading-menu-indicator-icon-color: null,\n  cascading-menu-indicator-icon-size: null,\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  divider-color: null,\n  divider-height: null,\n  list-item-container-height: null,\n  list-item-disabled-label-text-color: null,\n  list-item-disabled-label-text-opacity: null,\n  list-item-focus-label-text-color: null,\n  list-item-focus-state-layer-color: null,\n  list-item-focus-state-layer-opacity: null,\n  list-item-hover-label-text-color: null,\n  list-item-hover-state-layer-color: null,\n  list-item-hover-state-layer-opacity: null,\n  list-item-label-text-color: null,\n  list-item-label-text-font: null,\n  list-item-label-text-line-height: null,\n  list-item-label-text-size: null,\n  list-item-label-text-tracking: null,\n  list-item-label-text-type: null,\n  list-item-label-text-weight: null,\n  list-item-pressed-label-text-color: null,\n  list-item-pressed-state-layer-color: null,\n  list-item-pressed-state-layer-opacity: null,\n  list-item-selected-container-color: null,\n  list-item-with-leading-icon-disabled-leading-icon-color: null,\n  list-item-with-leading-icon-disabled-leading-icon-opacity: null,\n  list-item-with-leading-icon-focus-icon-color: null,\n  list-item-with-leading-icon-hover-icon-color: null,\n  list-item-with-leading-icon-leading-icon-color: null,\n  list-item-with-leading-icon-leading-icon-size: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($light-theme, $theme);\n  $theme: _resolve-theme-elevation($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolvers: resolvers.$material,\n  $require-all: true\n) {\n  $theme: validate.theme-styles(\n    $light-theme,\n    $theme,\n    $require-all: $require-all\n  );\n  $theme: _resolve-theme-elevation($theme, $resolvers: $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include theme.property(background-color, map.get($theme, 'container-color'));\n  @include shape.radius(map.get($theme, 'container-shape'));\n  @include elevation-theme.overlay-container-color(\n    map.get($theme, 'container-surface-tint-layer-color')\n  );\n  @if map.get($theme, 'container-elevation') {\n    @include elevation-theme.theme-styles(\n      map.get($theme, 'container-elevation')\n    );\n  }\n\n  .mdc-menu-item--selected {\n    @include theme.property(\n      background-color,\n      map.get($theme, 'list-item-selected-container-color')\n    );\n  }\n\n  .mdc-menu-item__submenu-indicator {\n    @include theme.property(\n      color,\n      map.get($theme, 'cascading-menu-indicator-icon-color')\n    );\n    @include theme.property(\n      font-size,\n      map.get($theme, 'cascading-menu-indicator-icon-size')\n    );\n    @include theme.property(\n      width,\n      map.get($theme, 'cascading-menu-indicator-icon-size')\n    );\n    @include theme.property(\n      height,\n      map.get($theme, 'cascading-menu-indicator-icon-size')\n    );\n  }\n\n  .mdc-list {\n    $list-theme: _rename-list-theme($theme);\n    $list-theme: map-ext.pick(\n      $list-theme,\n      map.keys(list-theme.$light-theme)...\n    );\n    // Make the list item container color transparent to allow the elevation\n    // overlay and menu container color to be visible.\n    $list-theme: map.merge(\n      $list-theme,\n      (\n        'list-item-container-color': transparent,\n      )\n    );\n    @include list-theme.theme($list-theme);\n  }\n}\n\n@function _rename-list-theme($theme) {\n  $theme: map-ext.rename-keys(\n    $theme,\n    (\n      'list-item-with-leading-icon-disabled-leading-icon-color':\n        'list-item-disabled-leading-icon-color',\n      'list-item-with-leading-icon-disabled-leading-icon-opacity':\n        'list-item-disabled-leading-icon-opacity',\n      'list-item-with-leading-icon-hover-icon-color':\n        'list-item-hover-leading-icon-color',\n      'list-item-with-leading-icon-leading-icon-color':\n        'list-item-leading-icon-color',\n      'list-item-with-leading-icon-leading-icon-size':\n        'list-item-leading-icon-size',\n      'cascading-menu-indicator-icon-size': 'list-item-trailing-icon-size',\n    )\n  );\n  @return $theme;\n}\n\n@function _resolve-theme-elevation($theme, $resolvers) {\n  $elevation-resolver: map.get($resolvers, elevation);\n  $shadow-color: map.get($theme, 'container-shadow-color');\n  @if $elevation-resolver == null or $shadow-color == null {\n    @return $theme;\n  }\n\n  $elevation-keys: ('container-elevation');\n\n  @each $key in $elevation-keys {\n    $elevation: map.get($theme, $key);\n    @if $elevation != null {\n      $resolved-value: meta.call(\n        $elevation-resolver,\n        $elevation: $elevation,\n        $shadow-color: $shadow-color\n      );\n      $theme: map.set($theme, $key, $resolved-value);\n    }\n  }\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-menu/_menu.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/dom/dom';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/variables' as list-variables;\n@use '@material/ripple/ripple';\n@use '@material/theme/theme';\n@use '@material/theme/custom-properties';\n@use './menu-custom-properties';\n@use './variables';\n@use '@material/menu-surface/menusurface-theme';\n\n/// @deprecated Use static-styles() instead.\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n  // prettier-ignore\n  @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // Customize the menu-surface and contained list to match the mdc-menu styles.\n  .mdc-menu {\n    @include list-mixins.deprecated-item-meta-ink-color(\n      variables.$ink-color,\n      $query\n    );\n    @include list-mixins.deprecated-item-graphic-ink-color(\n      variables.$ink-color,\n      $query\n    );\n    @include min-width(variables.$min-width, $query: $query);\n    @include open-item-opacity(variables.$open-item-opacity, $query: $query);\n\n    // Include mdc-deprecated-list selector to ensure list-inside-menu overrides default list styles\n    .mdc-deprecated-list {\n      @include list-mixins.deprecated-item-primary-text-ink-color(\n        variables.$ink-color,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list,\n    .mdc-list {\n      @include elevation-mixins.overlay-surface-position($query: $query);\n      @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: inherit;\n      }\n      &::before {\n        @include dom.transparent-border($query: $query);\n      }\n    }\n\n    .mdc-deprecated-list-divider {\n      @include feature-targeting.targets($feat-structure) {\n        margin: 8px 0;\n      }\n    }\n\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        user-select: none;\n      }\n    }\n\n    .mdc-deprecated-list-item--disabled {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: auto;\n      }\n    }\n\n    a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,\n    a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        pointer-events: none;\n      }\n    }\n  }\n\n  // postcss-bem-linter: define menu\n  .mdc-menu__selection-group {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n      fill: currentColor;\n    }\n\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          56px,\n          list-variables.$deprecated-side-padding\n        );\n      }\n    }\n\n    .mdc-menu__selection-group-icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-position(left, 16px);\n\n        visibility: hidden;\n        position: absolute;\n        // IE11 requires the icon to be vertically centered due to its absolute positioning\n        top: 50%;\n        transform: translateY(-50%);\n        // This is an instant transition with a delay that ensures the checkmark\n        // appears when menu is closed. Visibility property was used on purpose to\n        // indicate that there is no actual transition, but instant shift from start\n        // to end state with a delay.\n        transition-property: visibility;\n        transition-delay: menusurface-theme.$fade-out-duration;\n      }\n    }\n  }\n  // postcss-bem-linter: end\n\n  .mdc-menu-item--selected .mdc-menu__selection-group-icon {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline;\n      visibility: visible;\n    }\n  }\n}\n\n@mixin open-item-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-menu-item--submenu-open {\n    @include ripple-theme.states-background-selector(\n      list-variables.$deprecated-ripple-target\n    ) {\n      @include feature-targeting.targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n    @include ripple-theme.states-background-selector(\n      list-variables.$deprecated-temporary-ripple-target\n    ) {\n      @include feature-targeting.targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n  }\n}\n\n@mixin width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @if math.is-unitless($width) {\n      width: $width * variables.$width-base;\n    } @else {\n      width: $width;\n    }\n  }\n}\n\n/// Sets the min-width of the menu.\n/// @param {Number} $min-width - the desired min-width.\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    $min-width-custom-property: custom-properties.create(\n      menu-custom-properties.$min-width,\n      $min-width\n    );\n    @include theme.property(min-width, $min-width-custom-property);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu/_mixins.import.scss",
    "content": "@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/list\" as mdc-list-*;\n@forward \"./index\" as mdc-menu-*;\n"
  },
  {
    "path": "packages/mdc-menu/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_menu.scss' instead.\n@forward './menu' show core-styles, open-item-opacity, width, min-width;\n"
  },
  {
    "path": "packages/mdc-menu/_variables.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-menu-* hide mdc-menu-core-styles, mdc-menu-width;\n"
  },
  {
    "path": "packages/mdc-menu/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/ripple/ripple-theme';\n\n$ink-color: rgba(\n  theme-color.prop-value(on-surface),\n  theme-color.text-emphasis(high)\n) !default;\n\n$width-base: 56px !default;\n$min-width: 2 * $width-base !default;\n\n$open-item-opacity: ripple-theme.states-opacity($ink-color, hover);\n"
  },
  {
    "path": "packages/mdc-menu/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCMenuItemEventDetail} from './types';\n\n/**\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCMenuAdapter {\n  /**\n   * Adds a class to the element at the index provided.\n   */\n  addClassToElementAtIndex(index: number, className: string): void;\n\n  /**\n   * Removes a class from the element at the index provided\n   */\n  removeClassFromElementAtIndex(index: number, className: string): void;\n\n  /**\n   * Adds an attribute, with value, to the element at the index provided.\n   */\n  addAttributeToElementAtIndex(index: number, attr: string, value: string):\n      void;\n\n  /**\n   * Removes an attribute from an element at the index provided.\n   */\n  removeAttributeFromElementAtIndex(index: number, attr: string): void;\n\n  /**\n   * @return the attribute string if present on an element at the index\n   * provided, null otherwise.\n   */\n  getAttributeFromElementAtIndex(index: number, attr: string): string|null;\n\n  /**\n   * @return true if the element contains the className.\n   */\n  elementContainsClass(element: Element, className: string): boolean;\n\n  /**\n   * Closes the menu-surface.\n   * @param skipRestoreFocus Whether to skip restoring focus to the previously\n   *    focused element after the surface has been closed.\n   */\n  closeSurface(skipRestoreFocus?: boolean): void;\n\n  /**\n   * @return Index of the element in the list or -1 if it is not in the list.\n   */\n  getElementIndex(element: HTMLElement): number;\n\n  /**\n   * Emit an event when a menu item is selected.\n   */\n  notifySelected(eventData: MDCMenuItemEventDetail): void;\n\n  /** @return Returns the menu item count. */\n  getMenuItemCount(): number;\n\n  /**\n   * Focuses the menu item at given index.\n   * @param index Index of the menu item that will be focused every time the\n   *     menu opens.\n   */\n  focusItemAtIndex(index: number): void;\n\n  /** Focuses the list root element. */\n  focusListRoot(): void;\n\n  /**\n   * @return Returns selected list item index within the same selection group\n   *     which is\n   * a sibling of item at given `index`.\n   * @param index Index of the menu item with possible selected sibling.\n   */\n  getSelectedSiblingOfItemAtIndex(index: number): number;\n\n  /**\n   * @return Returns true if item at specified index is contained within an\n   *     `.mdc-menu__selection-group` element.\n   * @param index Index of the selectable menu item.\n   */\n  isSelectableItemAtIndex(index: number): boolean;\n}\n"
  },
  {
    "path": "packages/mdc-menu/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener, SpecificEventListener} from '@material/base/types';\nimport {closest} from '@material/dom/ponyfill';\nimport {MDCList, MDCListFactory} from '@material/list/component';\nimport {numbers as listConstants} from '@material/list/constants';\nimport {MDCListFoundation} from '@material/list/foundation';\nimport {MDCListActionEvent, MDCListIndex} from '@material/list/types';\nimport {MDCMenuSurface, MDCMenuSurfaceFactory} from '@material/menu-surface/component';\nimport {Corner} from '@material/menu-surface/constants';\nimport {MDCMenuSurfaceFoundation} from '@material/menu-surface/foundation';\nimport {MDCMenuDistance} from '@material/menu-surface/types';\n\nimport {MDCMenuAdapter} from './adapter';\nimport {cssClasses, DefaultFocusState, strings} from './constants';\nimport {MDCMenuFoundation} from './foundation';\nimport {MDCMenuItemComponentEventDetail} from './types';\n\n/** MDC Menu Factory */\nexport type MDCMenuFactory =\n    (el: HTMLElement, foundation?: MDCMenuFoundation) => MDCMenu;\n\n/** MDC Menu */\nexport class MDCMenu extends MDCComponent<MDCMenuFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCMenu(root);\n  }\n\n  private menuSurfaceFactory!:\n      MDCMenuSurfaceFactory;             // assigned in initialize()\n  private listFactory!: MDCListFactory;  // assigned in initialize()\n\n  private menuSurface!: MDCMenuSurface;  // assigned in initialSyncWithDOM()\n  private list!: MDCList|null;           // assigned in initialSyncWithDOM()\n\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n  private handleItemAction!:\n      CustomEventListener<MDCListActionEvent>;  // assigned in\n                                                // initialSyncWithDOM()\n  private handleMenuSurfaceOpened!:\n      EventListener;  // assigned in initialSyncWithDOM()\n\n  override initialize(\n      menuSurfaceFactory:\n          MDCMenuSurfaceFactory = (el) => new MDCMenuSurface(el),\n      listFactory: MDCListFactory = (el) => new MDCList(el)) {\n    this.menuSurfaceFactory = menuSurfaceFactory;\n    this.listFactory = listFactory;\n  }\n\n  override initialSyncWithDOM() {\n    this.menuSurface = this.menuSurfaceFactory(this.root);\n\n    const list = this.root.querySelector<HTMLElement>(strings.LIST_SELECTOR);\n    if (list) {\n      this.list = this.listFactory(list);\n      this.list.wrapFocus = true;\n    } else {\n      this.list = null;\n    }\n\n    this.handleKeydown = (event) => {\n      this.foundation.handleKeydown(event);\n    };\n    this.handleItemAction = (event) => {\n      this.foundation.handleItemAction(this.items[event.detail.index]);\n    };\n    this.handleMenuSurfaceOpened = () => {\n      this.foundation.handleMenuSurfaceOpened();\n    };\n\n    this.menuSurface.listen(\n        MDCMenuSurfaceFoundation.strings.OPENED_EVENT,\n        this.handleMenuSurfaceOpened);\n    this.listen('keydown', this.handleKeydown);\n    this.listen(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);\n  }\n\n  override destroy() {\n    if (this.list) {\n      this.list.destroy();\n    }\n\n    this.menuSurface.destroy();\n    this.menuSurface.unlisten(\n        MDCMenuSurfaceFoundation.strings.OPENED_EVENT,\n        this.handleMenuSurfaceOpened);\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten(\n        MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);\n    super.destroy();\n  }\n\n  get open(): boolean {\n    return this.menuSurface.isOpen();\n  }\n\n  set open(value: boolean) {\n    if (value) {\n      this.menuSurface.open();\n    } else {\n      this.menuSurface.close();\n    }\n  }\n\n  get wrapFocus(): boolean {\n    return this.list ? this.list.wrapFocus : false;\n  }\n\n  set wrapFocus(value: boolean) {\n    if (this.list) {\n      this.list.wrapFocus = value;\n    }\n  }\n\n  /**\n   * Sets whether the menu has typeahead functionality.\n   * @param value Whether typeahead is enabled.\n   */\n  set hasTypeahead(value: boolean) {\n    if (this.list) {\n      this.list.hasTypeahead = value;\n    }\n  }\n\n  /**\n   * @return Whether typeahead logic is currently matching some user prefix.\n   */\n  get typeaheadInProgress() {\n    return this.list ? this.list.typeaheadInProgress : false;\n  }\n\n  /**\n   * Given the next desired character from the user, adds it to the typeahead\n   * buffer. Then, attempts to find the next option matching the buffer. Wraps\n   * around if at the end of options.\n   *\n   * @param nextChar The next character to add to the prefix buffer.\n   * @param startingIndex The index from which to start matching. Only relevant\n   *     when starting a new match sequence. To start a new match sequence,\n   *     clear the buffer using `clearTypeaheadBuffer`, or wait for the buffer\n   *     to clear after a set interval defined in list foundation. Defaults to\n   *     the currently focused index.\n   * @return The index of the matched item, or -1 if no match.\n   */\n  typeaheadMatchItem(nextChar: string, startingIndex?: number): number {\n    if (this.list) {\n      return this.list.typeaheadMatchItem(nextChar, startingIndex);\n    }\n    return -1;\n  }\n\n  /**\n   * Layout the underlying list element in the case of any dynamic updates\n   * to its structure.\n   */\n  layout() {\n    if (this.list) {\n      this.list.layout();\n    }\n  }\n\n  /**\n   * Return the items within the menu. Note that this only contains the set of\n   * elements within the items container that are proper list items, and not\n   * supplemental / presentational DOM elements.\n   */\n  get items(): HTMLElement[] {\n    return this.list ? this.list.listElements : [];\n  }\n\n  /**\n   * Turns on/off the underlying list's single selection mode. Used mainly\n   * by select menu.\n   *\n   * @param singleSelection Whether to enable single selection mode.\n   */\n  set singleSelection(singleSelection: boolean) {\n    if (this.list) {\n      this.list.singleSelection = singleSelection;\n    }\n  }\n\n  /**\n   * Retrieves the selected index. Only applicable to select menus.\n   * @return The selected index, which is a number for single selection and\n   *     radio lists, and an array of numbers for checkbox lists.\n   */\n  get selectedIndex(): MDCListIndex {\n    return this.list ? this.list.selectedIndex : listConstants.UNSET_INDEX;\n  }\n\n  /**\n   * Sets the selected index of the list. Only applicable to select menus.\n   * @param index The selected index, which is a number for single selection and\n   *     radio lists, and an array of numbers for checkbox lists.\n   */\n  set selectedIndex(index: MDCListIndex) {\n    if (this.list) {\n      this.list.selectedIndex = index;\n    }\n  }\n\n  set quickOpen(quickOpen: boolean) {\n    this.menuSurface.quickOpen = quickOpen;\n  }\n\n  /**\n   * Sets default focus state where the menu should focus every time when menu\n   * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by\n   * default.\n   * @param focusState Default focus state.\n   */\n  setDefaultFocusState(focusState: DefaultFocusState) {\n    this.foundation.setDefaultFocusState(focusState);\n  }\n\n  /**\n   * @param corner Default anchor corner alignment of top-left menu corner.\n   */\n  setAnchorCorner(corner: Corner) {\n    this.menuSurface.setAnchorCorner(corner);\n  }\n\n  setAnchorMargin(margin: Partial<MDCMenuDistance>) {\n    this.menuSurface.setAnchorMargin(margin);\n  }\n\n  /**\n   * Sets the list item as the selected row at the specified index.\n   * @param index Index of list item within menu.\n   */\n  setSelectedIndex(index: number) {\n    this.foundation.setSelectedIndex(index);\n  }\n\n  /**\n   * Sets the enabled state to isEnabled for the menu item at the given index.\n   * @param index Index of the menu item\n   * @param isEnabled The desired enabled state of the menu item.\n   */\n  setEnabled(index: number, isEnabled: boolean): void {\n    this.foundation.setEnabled(index, isEnabled);\n  }\n\n  /**\n   * @return The item within the menu at the index specified.\n   */\n  getOptionByIndex(index: number): Element|null {\n    const items = this.items;\n\n    if (index < items.length) {\n      return this.items[index];\n    } else {\n      return null;\n    }\n  }\n\n  /**\n   * @param index A menu item's index.\n   * @return The primary text within the menu at the index specified.\n   */\n  getPrimaryTextAtIndex(index: number): string {\n    const item = this.getOptionByIndex(index);\n    if (item && this.list) {\n      return this.list.getPrimaryText(item) || '';\n    }\n    return '';\n  }\n\n  setFixedPosition(isFixed: boolean) {\n    this.menuSurface.setFixedPosition(isFixed);\n  }\n\n  setIsHoisted(isHoisted: boolean) {\n    this.menuSurface.setIsHoisted(isHoisted);\n  }\n\n  setAbsolutePosition(x: number, y: number) {\n    this.menuSurface.setAbsolutePosition(x, y);\n  }\n\n  /**\n   * Sets the element that the menu-surface is anchored to.\n   */\n  setAnchorElement(element: Element) {\n    this.menuSurface.anchorElement = element;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCMenuAdapter = {\n      addClassToElementAtIndex: (index, className) => {\n        const list = this.items;\n        list[index].classList.add(className);\n      },\n      removeClassFromElementAtIndex: (index, className) => {\n        const list = this.items;\n        list[index].classList.remove(className);\n      },\n      addAttributeToElementAtIndex: (index, attr, value) => {\n        const list = this.items;\n        this.safeSetAttribute(list[index], attr, value);\n      },\n      removeAttributeFromElementAtIndex: (index, attr) => {\n        const list = this.items;\n        list[index].removeAttribute(attr);\n      },\n      getAttributeFromElementAtIndex: (index, attr) => {\n        const list = this.items;\n        return list[index].getAttribute(attr);\n      },\n      elementContainsClass: (element, className) =>\n          element.classList.contains(className),\n      closeSurface: (skipRestoreFocus: boolean) => {\n        this.menuSurface.close(skipRestoreFocus);\n      },\n      getElementIndex: (element) => this.items.indexOf(element),\n      notifySelected: (eventData) => {\n        this.emit<MDCMenuItemComponentEventDetail>(strings.SELECTED_EVENT, {\n          index: eventData.index,\n          item: this.items[eventData.index],\n        });\n      },\n      getMenuItemCount: () => this.items.length,\n      focusItemAtIndex: (index) => {\n        this.items[index].focus();\n      },\n      focusListRoot: () => {\n        this.root.querySelector<HTMLElement>(strings.LIST_SELECTOR)!.focus();\n      },\n      isSelectableItemAtIndex: (index) =>\n          !!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),\n      getSelectedSiblingOfItemAtIndex: (index) => {\n        const selectionGroupEl =\n            closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`) as\n            HTMLElement;\n        const selectedItemEl = selectionGroupEl.querySelector<HTMLElement>(\n            `.${cssClasses.MENU_SELECTED_LIST_ITEM}`);\n        return selectedItemEl ? this.items.indexOf(selectedItemEl) : -1;\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCMenuFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  MENU_SELECTED_LIST_ITEM: 'mdc-menu-item--selected',\n  MENU_SELECTION_GROUP: 'mdc-menu__selection-group',\n  ROOT: 'mdc-menu',\n};\n\nconst strings = {\n  ARIA_CHECKED_ATTR: 'aria-checked',\n  ARIA_DISABLED_ATTR: 'aria-disabled',\n  CHECKBOX_SELECTOR: 'input[type=\"checkbox\"]',\n  LIST_SELECTOR: '.mdc-list,.mdc-deprecated-list',\n  SELECTED_EVENT: 'MDCMenu:selected',\n  SKIP_RESTORE_FOCUS: 'data-menu-item-skip-restore-focus',\n};\n\nconst numbers = {\n  FOCUS_ROOT_INDEX: -1,\n};\n\nenum DefaultFocusState {\n  NONE = 0,\n  LIST_ROOT = 1,\n  FIRST_ITEM = 2,\n  LAST_ITEM = 3,\n}\n\nexport {cssClasses, strings, numbers, DefaultFocusState};\n"
  },
  {
    "path": "packages/mdc-menu/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {cssClasses as listCssClasses} from '@material/list/constants';\n\nimport {MDCMenuAdapter} from './adapter';\nimport {cssClasses, DefaultFocusState, numbers, strings} from './constants';\n\n/** MDC Menu Foundation */\nexport class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  private defaultFocusState = DefaultFocusState.LIST_ROOT;\n  private selectedIndex = -1;\n\n  /**\n   * @see {@link MDCMenuAdapter} for typing information on parameters and return types.\n   */\n  static override get defaultAdapter(): MDCMenuAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClassToElementAtIndex: () => undefined,\n      removeClassFromElementAtIndex: () => undefined,\n      addAttributeToElementAtIndex: () => undefined,\n      removeAttributeFromElementAtIndex: () => undefined,\n      getAttributeFromElementAtIndex: () => null,\n      elementContainsClass: () => false,\n      closeSurface: () => undefined,\n      getElementIndex: () => -1,\n      notifySelected: () => undefined,\n      getMenuItemCount: () => 0,\n      focusItemAtIndex: () => undefined,\n      focusListRoot: () => undefined,\n      getSelectedSiblingOfItemAtIndex: () => -1,\n      isSelectableItemAtIndex: () => false,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter?: Partial<MDCMenuAdapter>) {\n    super({...MDCMenuFoundation.defaultAdapter, ...adapter});\n  }\n\n  override destroy() {\n    this.adapter.closeSurface();\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    const {key, keyCode} = event;\n    const isTab = key === 'Tab' || keyCode === 9;\n\n    if (isTab) {\n      this.adapter.closeSurface(/** skipRestoreFocus */ true);\n    }\n  }\n\n  handleItemAction(listItem: HTMLElement) {\n    const index = this.adapter.getElementIndex(listItem);\n    if (index < 0) {\n      return;\n    }\n\n    this.adapter.notifySelected({index});\n    const skipRestoreFocus = this.adapter.getAttributeFromElementAtIndex(\n                                 index, strings.SKIP_RESTORE_FOCUS) === 'true';\n    this.adapter.closeSurface(skipRestoreFocus);\n\n    if (this.adapter.isSelectableItemAtIndex(index)) {\n      this.setSelectedIndex(index);\n    }\n  }\n\n  handleMenuSurfaceOpened() {\n    switch (this.defaultFocusState) {\n      case DefaultFocusState.FIRST_ITEM:\n        this.adapter.focusItemAtIndex(0);\n        break;\n      case DefaultFocusState.LAST_ITEM:\n        this.adapter.focusItemAtIndex(this.adapter.getMenuItemCount() - 1);\n        break;\n      case DefaultFocusState.NONE:\n        // Do nothing.\n        break;\n      default:\n        this.adapter.focusListRoot();\n        break;\n    }\n  }\n\n  /**\n   * Sets default focus state where the menu should focus every time when menu\n   * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by\n   * default.\n   */\n  setDefaultFocusState(focusState: DefaultFocusState) {\n    this.defaultFocusState = focusState;\n  }\n\n  /** @return Index of the currently selected list item within the menu. */\n  getSelectedIndex() {\n    return this.selectedIndex;\n  }\n\n  /**\n   * Selects the list item at `index` within the menu.\n   * @param index Index of list item within the menu.\n   */\n  setSelectedIndex(index: number) {\n    this.validatedIndex(index);\n\n    if (!this.adapter.isSelectableItemAtIndex(index)) {\n      throw new Error(\n          'MDCMenuFoundation: No selection group at specified index.');\n    }\n\n    const prevSelectedIndex =\n        this.adapter.getSelectedSiblingOfItemAtIndex(index);\n    if (prevSelectedIndex >= 0) {\n      this.adapter.removeAttributeFromElementAtIndex(\n          prevSelectedIndex, strings.ARIA_CHECKED_ATTR);\n      this.adapter.removeClassFromElementAtIndex(\n          prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);\n    }\n\n    this.adapter.addClassToElementAtIndex(\n        index, cssClasses.MENU_SELECTED_LIST_ITEM);\n    this.adapter.addAttributeToElementAtIndex(\n        index, strings.ARIA_CHECKED_ATTR, 'true');\n\n    this.selectedIndex = index;\n  }\n\n  /**\n   * Sets the enabled state to isEnabled for the menu item at the given index.\n   * @param index Index of the menu item\n   * @param isEnabled The desired enabled state of the menu item.\n   */\n  setEnabled(index: number, isEnabled: boolean): void {\n    this.validatedIndex(index);\n\n    if (isEnabled) {\n      this.adapter.removeClassFromElementAtIndex(\n          index, listCssClasses.LIST_ITEM_DISABLED_CLASS);\n      this.adapter.addAttributeToElementAtIndex(\n          index, strings.ARIA_DISABLED_ATTR, 'false');\n    } else {\n      this.adapter.addClassToElementAtIndex(\n          index, listCssClasses.LIST_ITEM_DISABLED_CLASS);\n      this.adapter.addAttributeToElementAtIndex(\n          index, strings.ARIA_DISABLED_ATTR, 'true');\n    }\n  }\n\n  private validatedIndex(index: number): void {\n    const menuSize = this.adapter.getMenuItemCount();\n    const isIndexInRange = index >= 0 && index < menuSize;\n\n    if (!isIndexInRange) {\n      throw new Error('MDCMenuFoundation: No list item at specified index.');\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCMenuFoundation;\n"
  },
  {
    "path": "packages/mdc-menu/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport {Corner} from '@material/menu-surface/constants';  // for backward compatibility\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-menu/mdc-menu.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/list/variables\" as mdc-list-*;\n@forward \"variables\" as mdc-menu-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/list/mixins\" as mdc-list-*;\n@forward \"mixins\" as mdc-menu-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-menu\";\n"
  },
  {
    "path": "packages/mdc-menu/mdc-menu.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './menu';\n@include menu.static-styles();\n"
  },
  {
    "path": "packages/mdc-menu/package.json",
    "content": "{\n  \"name\": \"@material/menu\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web menu component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"menu\"\n  ],\n  \"main\": \"dist/mdc.menu.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-menu\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/list\": \"^14.0.0\",\n    \"@material/menu-surface\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCListFoundation} from '../../mdc-list/index';\nimport {Corner} from '../../mdc-menu-surface/constants';\nimport {MDCMenuSurfaceFoundation} from '../../mdc-menu-surface/foundation';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {DefaultFocusState} from '../constants';\nimport {MDCMenu, MDCMenuFoundation} from '../index';\n\nfunction getFixture(open = false) {\n  return createFixture(html`\n    <div class=\"mdc-menu mdc-menu-surface ${\n      open ? 'mdc-menu-surface--open' : ''}\">\n      <ul class=\"mdc-deprecated-list\" role=\"menu\" tabIndex=\"-1\">\n        <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">Item</span>\n        </li>\n        <li role=\"separator\"></li>\n        <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">Another Item</span>\n        </li>\n        <li>\n          <ul class=\"mdc-menu__selection-group\" role=\"menu\">\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Item</span>\n            </li>\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item mdc-menu-item--selected\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Another Item</span>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </div>\n  `);\n}\n\nfunction getFixtureWithMultipleSelectionGroups(open = false) {\n  return createFixture(html`\n    <div class=\"mdc-menu mdc-menu-surface ${\n      open ? 'mdc-menu-surface--open' : ''}\">\n      <ul class=\"mdc-deprecated-list\" role=\"menu\" tabIndex=\"-1\">\n        <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">Item</span>\n        </li>\n        <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n        <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n          <span class=\"mdc-deprecated-list-item__ripple\"></span>\n          <span class=\"mdc-deprecated-list-item__text\">Another Item</span>\n        </li>\n        <li>\n          <ul class=\"mdc-menu__selection-group\" role=\"menu\">\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Item</span>\n            </li>\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item mdc-menu-item--selected\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Another Item</span>\n            </li>\n          </ul>\n        </li>\n        <li class=\"mdc-deprecated-list-divider\" role=\"separator\"></li>\n        <li>\n          <ul class=\"mdc-menu__selection-group\" role=\"menu\">\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item mdc-menu-item--selected\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Item2</span>\n            </li>\n            <li tabIndex=\"-1\" class=\"mdc-deprecated-list-item\" role=\"menuitem\">\n              <span class=\"mdc-deprecated-list-item__ripple\"></span>\n              <span class=\"mdc-deprecated-list-item__text\">Another Item2</span>\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </div>\n  `);\n}\n\nclass FakeList {\n  destroy: jasmine.Spy = jasmine.createSpy('.destroy');\n  itemsContainer: jasmine.Spy = jasmine.createSpy('.root');\n  layout: jasmine.Spy = jasmine.createSpy('layout');\n  wrapFocus: boolean = true;\n  typeaheadInProgress: boolean = false;\n  typeaheadMatchItem: jasmine.Spy = jasmine.createSpy('.typeaheadMatchItem');\n  listElements: HTMLElement[];\n  getPrimaryText: jasmine.Spy = jasmine.createSpy('.getPrimaryText');\n\n  constructor(root: HTMLElement) {\n    this.listElements = Array.from(\n        root.querySelectorAll<HTMLElement>('.mdc-deprecated-list-item'));\n  }\n}\n\nclass FakeMenuSurface {\n  destroy: Function = jasmine.createSpy('.destroy');\n  isOpen: Function = jasmine.createSpy('.isOpen');\n  open: Function = jasmine.createSpy('.open');\n  close: Function = jasmine.createSpy('.close');\n  listen: Function = jasmine.createSpy('');\n  unlisten: Function = jasmine.createSpy('');\n  setAnchorCorner: Function = jasmine.createSpy('.setAnchorCorner');\n  setAnchorMargin: Function = jasmine.createSpy('.setAnchorMargin');\n  quickOpen: boolean = false;\n  setFixedPosition: Function = jasmine.createSpy('.setFixedPosition');\n  setAbsolutePosition: Function = jasmine.createSpy('.setAbsolutePosition');\n  setIsHoisted: Function = jasmine.createSpy('.setIsHoisted');\n  anchorElement: HTMLElement|null = null;\n}\n\nfunction setupTestWithFakes(open = false) {\n  const root = getFixture(open);\n\n  const menuSurface = new FakeMenuSurface();\n  const mockFoundation = createMockFoundation(MDCMenuFoundation);\n\n  const list =\n      new FakeList(root.querySelector<HTMLElement>('.mdc-deprecated-list')!);\n  const component =\n      new MDCMenu(root, mockFoundation, () => menuSurface, () => list);\n  return {root, component, menuSurface, list, mockFoundation};\n}\n\nfunction setupTest(open = false, fixture = getFixture) {\n  const root = fixture(open);\n\n  const component = new MDCMenu(root);\n  return {root, component};\n}\n\nfunction setupTestWithMock(options: {open?: boolean, fixture: Function} = {\n  open: true,\n  fixture: getFixture\n}) {\n  const root = options.fixture(options.open);\n\n  const mockFoundation = createMockFoundation(MDCMenuFoundation);\n  const component = new MDCMenu(root, mockFoundation);\n  return {root, component, mockFoundation};\n}\n\ndescribe('MDCMenu', () => {\n  it('destroy causes the menu-surface and list to be destroyed', () => {\n    const {component, list, menuSurface} = setupTestWithFakes();\n    component.destroy();\n    expect(list.destroy).toHaveBeenCalled();\n    expect(menuSurface.destroy).toHaveBeenCalled();\n    expect(menuSurface.unlisten).toHaveBeenCalled();\n  });\n\n  it('destroy does not throw an error if the list is not instantiated', () => {\n    const fixture = getFixture();\n    const list = fixture.querySelector<HTMLElement>('.mdc-deprecated-list')!;\n    (list.parentElement as HTMLElement).removeChild(list);\n    const component = new MDCMenu(fixture);\n\n    expect(() => {\n      component.destroy.bind(component);\n    }).not.toThrow();\n  });\n\n  it('attachTo initializes and returns a MDCMenu instance', () => {\n    expect(MDCMenu.attachTo(getFixture()) instanceof MDCMenu).toBe(true);\n  });\n\n  it('initialize registers event listener for list item action', () => {\n    const {mockFoundation, root} = setupTestWithFakes();\n    emitEvent(\n        root, MDCListFoundation.strings.ACTION_EVENT, {detail: {index: 0}});\n    expect(mockFoundation.handleItemAction)\n        .toHaveBeenCalledWith(jasmine.any(Element));\n    expect(mockFoundation.handleItemAction).toHaveBeenCalledTimes(1);\n  });\n\n  it('initialize registers event listener for keydown', () => {\n    const {mockFoundation, root} = setupTestWithFakes();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.any(Event));\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n  });\n\n  it('destroy deregisters event listener for click', () => {\n    const {component, mockFoundation, root} = setupTestWithFakes();\n    component.destroy();\n\n    emitEvent(\n        root, MDCListFoundation.strings.ACTION_EVENT, {detail: {index: 0}});\n    expect(mockFoundation.handleItemAction)\n        .not.toHaveBeenCalledWith(jasmine.any(Element));\n  });\n\n  it('destroy deregisters event listener for keydown', () => {\n    const {component, mockFoundation, root} = setupTestWithFakes();\n    component.destroy();\n\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('get/set open', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n\n    (menuSurface as any).isOpen.and.returnValue(false);\n    expect(component.open).toBe(false);\n\n    component.open = true;\n    expect(menuSurface.open).toHaveBeenCalledTimes(1);\n\n    component.open = false;\n    expect(menuSurface.close).toHaveBeenCalledTimes(1);\n  });\n\n  it('wrapFocus proxies to MDCList#wrapFocus property', () => {\n    const {component, list} = setupTestWithFakes();\n\n    expect(component.wrapFocus).toBe(true);\n\n    component.wrapFocus = false;\n    expect(list.wrapFocus).toBe(false);\n  });\n\n  it('typeaheadInProgress proxies to MDCList#typeaheadInProgress property',\n     () => {\n       const {component, list} = setupTestWithFakes();\n\n       expect(component.typeaheadInProgress).toBeFalse();\n       list.typeaheadInProgress = true;\n       expect(component.typeaheadInProgress).toBeTrue();\n     });\n\n  it('typeaheadMatchItem proxies to MDCList#typeaheadMatchItem method', () => {\n    const {component, list} = setupTestWithFakes();\n\n    component.typeaheadMatchItem('a', 2);\n    expect(list.typeaheadMatchItem).toHaveBeenCalledWith('a', 2);\n  });\n\n  it('layout proxies to MDCList#layout method', () => {\n    const {component, list} = setupTestWithFakes();\n\n    component.layout();\n    expect(list.layout).toHaveBeenCalled();\n  });\n\n  it('setAnchorCorner proxies to the MDCMenuSurface#setAnchorCorner method',\n     () => {\n       const {component, menuSurface} = setupTestWithFakes();\n       component.setAnchorCorner(Corner.TOP_START);\n       expect(menuSurface.setAnchorCorner)\n           .toHaveBeenCalledWith(Corner.TOP_START);\n     });\n\n  it('setAnchorMargin', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    component.setAnchorMargin({top: 0, right: 0, bottom: 0, left: 0});\n    expect(menuSurface.setAnchorMargin)\n        .toHaveBeenCalledWith({top: 0, right: 0, bottom: 0, left: 0});\n  });\n\n  it('setSelectedIndex calls foundation method setSelectedIndex with given index.',\n     () => {\n       const {component, mockFoundation} =\n           setupTestWithMock({fixture: getFixtureWithMultipleSelectionGroups});\n       component.setSelectedIndex(1);\n       expect(mockFoundation.setSelectedIndex).toHaveBeenCalledWith(1);\n     });\n\n  it('setEnabled calls foundation method setEnabled with given index and disabled state.',\n     () => {\n       const {component, mockFoundation} =\n           setupTestWithMock({fixture: getFixtureWithMultipleSelectionGroups});\n       component.setEnabled(1, true);\n       expect(mockFoundation.setEnabled).toHaveBeenCalledWith(1, true);\n     });\n\n  it('setQuickOpen', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    component.quickOpen = true;\n    expect(menuSurface.quickOpen).toBe(true);\n  });\n\n  it('items returns all menu items', () => {\n    const {root, component, list} = setupTestWithFakes();\n    const items =\n        Array.from(root.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'));\n    list.listElements = items;\n    expect(component.items).toEqual(items);\n  });\n\n  it('items returns nothing if list is not defined', () => {\n    const {root, component, list} = setupTestWithFakes();\n    const items =\n        Array.from(root.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'));\n    list.listElements = items;\n    expect(component.items).toEqual(items);\n  });\n\n  it('getOptionByIndex', () => {\n    const {root, component, list} = setupTestWithFakes();\n    const items =\n        Array.from(root.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'));\n    list.listElements = items;\n    expect(component.getOptionByIndex(0)).toEqual(items[0]);\n  });\n\n  it('getOptionByIndex returns null if index is > list length', () => {\n    const {root, component, list} = setupTestWithFakes();\n    const items =\n        Array.from(root.querySelectorAll<HTMLElement>('[role=\"menuitem\"]'));\n    list.listElements = items;\n    expect(component.getOptionByIndex(items.length)).toBe(null);\n  });\n\n  it('getPrimaryTextAtIndex', () => {\n    const {component, list} = setupTestWithFakes();\n    list.getPrimaryText.withArgs(jasmine.any(Element))\n        .and.returnValue('Another Item');\n\n    expect(component.getPrimaryTextAtIndex(1)).toEqual('Another Item');\n  });\n\n  it('setFixedPosition', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    component.setFixedPosition(true);\n    expect(menuSurface.setFixedPosition).toHaveBeenCalledWith(true);\n\n    component.setFixedPosition(false);\n    expect(menuSurface.setFixedPosition).toHaveBeenCalledWith(false);\n  });\n\n  it('setIsHoisted', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    component.setIsHoisted(true);\n    expect(menuSurface.setIsHoisted).toHaveBeenCalledWith(true);\n\n    component.setIsHoisted(false);\n    expect(menuSurface.setIsHoisted).toHaveBeenCalledWith(false);\n  });\n\n  it('setAnchorElement', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    const button = document.createElement('button');\n    component.setAnchorElement(button);\n    expect(menuSurface.anchorElement).toEqual(button);\n  });\n\n  it('setAbsolutePosition', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    component.setAbsolutePosition(100, 120);\n    expect(menuSurface.setAbsolutePosition).toHaveBeenCalledWith(100, 120);\n  });\n\n  it('menu surface opened event causes list root element to be focused', () => {\n    const {root} = setupTest();\n    document.body.appendChild(root);\n    const event = document.createEvent('Event');\n    event.initEvent(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, false, true);\n    root.dispatchEvent(event);\n\n    // TODO(b/182902089): use list constants once this code has been migrated.\n    expect(document.activeElement).toHaveClass('mdc-deprecated-list');\n    document.body.removeChild(root);\n  });\n\n  it('handleMenuSurfaceOpened calls foundation\\'s handleMenuSurfaceOpened method on menu surface opened event',\n     () => {\n       const {root, mockFoundation} = setupTestWithMock();\n       emitEvent(root, MDCMenuSurfaceFoundation.strings.OPENED_EVENT);\n       expect(mockFoundation.handleMenuSurfaceOpened).toHaveBeenCalled();\n     });\n\n  it('list item enter keydown emits a menu action event', () => {\n    const {root, component} = setupTest();\n    const fakeEnterKeyEvent = {\n      key: 'Enter',\n      target: {tagName: 'div'},\n      getModifierState: () => false,\n      preventDefault: () => undefined\n    };\n\n    let detail: any;\n    component.listen(\n        MDCMenuFoundation.strings.SELECTED_EVENT,\n        (event: any) => detail = event.detail);\n\n    document.body.appendChild(root);\n    (component as any)\n        .list.foundation.handleKeydown(\n            fakeEnterKeyEvent, /* isRootListItem */ true,\n            /* listItemIndex */ 0);\n    document.body.removeChild(root);\n\n    expect(detail).toEqual({index: 0, item: component.items[0]});\n  });\n\n  it('open=true does not throw an error if there are no items in the list to focus',\n     () => {\n       const {component, root, list} = setupTestWithFakes();\n       list.listElements = [];\n       document.body.appendChild(root);\n       root.querySelector<HTMLElement>('.mdc-deprecated-list-item');\n       expect(() => {\n         component.open = true;\n       }).not.toThrow();\n       document.body.removeChild(root);\n     });\n\n  it('#setDefaultFocusState Calls foundation\\'s setDefaultFocusState method',\n     () => {\n       const {component, mockFoundation} = setupTestWithFakes();\n\n       component.setDefaultFocusState(DefaultFocusState.FIRST_ITEM);\n       expect(mockFoundation.setDefaultFocusState)\n           .toHaveBeenCalledWith(DefaultFocusState.FIRST_ITEM);\n     });\n\n  // Adapter method test\n\n  it('adapter#addClassToElementAtIndex adds a class to the element at the index provided',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n       (component.getDefaultFoundation() as any)\n           .adapter.addClassToElementAtIndex(0, 'foo');\n       expect(firstItem).toHaveClass('foo');\n     });\n\n  it('adapter#removeClassFromElementAtIndex adds a class to the element at the index provided',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n       firstItem.classList.add('foo');\n       (component.getDefaultFoundation() as any)\n           .adapter.removeClassFromElementAtIndex(0, 'foo');\n       expect(firstItem).not.toHaveClass('foo');\n     });\n\n  it('adapter#addAttributeToElementAtIndex adds a class to the element at the index provided',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n       (component.getDefaultFoundation() as any)\n           .adapter.addAttributeToElementAtIndex(0, 'data-foo', 'true');\n       expect(firstItem.getAttribute('data-foo') === 'true').toBe(true);\n     });\n\n  it('adapter#removeAttributeFromElementAtIndex adds a class to the element at the index provided',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n       firstItem.setAttribute('foo', 'true');\n       (component.getDefaultFoundation() as any)\n           .adapter.removeAttributeFromElementAtIndex(0, 'foo');\n       expect(firstItem.getAttribute('foo')).toBe(null);\n     });\n\n  it('adapter#elementContainsClass returns true if the class exists on the element',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item')!;\n       firstItem.classList.add('foo');\n       const containsFoo = (component.getDefaultFoundation() as any)\n                               .adapter.elementContainsClass(firstItem, 'foo');\n       expect(containsFoo).toBe(true);\n     });\n\n  it('adapter#elementContainsClass returns false if the class does not exist on the element',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item');\n       const containsFoo = (component.getDefaultFoundation() as any)\n                               .adapter.elementContainsClass(firstItem, 'foo');\n       expect(containsFoo).toBe(false);\n     });\n\n  it('adapter#closeSurface proxies to menuSurface#close', () => {\n    const {component, menuSurface} = setupTestWithFakes();\n    (component.getDefaultFoundation() as any)\n        .adapter.closeSurface(/** skipRestoreFocus */ false);\n    expect(menuSurface.close)\n        .toHaveBeenCalledWith(/** skipRestoreFocus */ false);\n  });\n\n  it('adapter#getElementIndex returns the index value of an element in the list',\n     () => {\n       const {root, component} = setupTest();\n       const firstItem =\n           root.querySelector<HTMLElement>('.mdc-deprecated-list-item');\n       const indexValue = (component.getDefaultFoundation() as any)\n                              .adapter.getElementIndex(firstItem);\n       expect(indexValue).toEqual(0);\n     });\n\n  it('adapter#getElementIndex returns -1 if the element does not exist in the list',\n     () => {\n       const {component} = setupTest();\n       const firstItem = document.createElement('li');\n       const indexValue = (component.getDefaultFoundation() as any)\n                              .adapter.getElementIndex(firstItem);\n       expect(indexValue).toEqual(-1);\n     });\n\n  it('adapter#notifySelected emits an event for a selected element', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('eventHandler');\n    root.addEventListener(MDCMenuFoundation.strings.SELECTED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifySelected(0);\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it('adapter#getMenuItemCount returns the menu item count', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.getMenuItemCount())\n        .toEqual(component.items.length);\n  });\n\n  it('adapter#focusItemAtIndex focuses the menu item at given index', () => {\n    const {root, component} = setupTest();\n    document.body.appendChild(root);\n\n    (component.getDefaultFoundation() as any).adapter.focusItemAtIndex(2);\n    expect(document.activeElement).toEqual(component.items[2]);\n\n    document.body.removeChild(root);\n  });\n\n  it('adapter#focusListRoot focuses the list root element', () => {\n    const {root, component} = setupTest();\n    document.body.appendChild(root);\n\n    (component.getDefaultFoundation() as any).adapter.focusListRoot();\n    // TODO(b/182902089): use list constants once this code has been migrated.\n    expect(document.activeElement)\n        .toEqual(root.querySelector<HTMLElement>('.mdc-deprecated-list'));\n\n    document.body.removeChild(root);\n  });\n\n  it('adapter#isSelectableItemAtIndex returns true if the menu item is within the' +\n         '.mdc-menu__selection-group element',\n     () => {\n       const {component} = setupTest();\n\n       const isSelectableItemAtIndex = (component.getDefaultFoundation() as any)\n                                           .adapter.isSelectableItemAtIndex(3);\n       expect(isSelectableItemAtIndex).toBe(true);\n     });\n\n  it('adapter#isSelectableItemAtIndex returns false if the menu item is not within the' +\n         '.mdc-menu__selection-group element',\n     () => {\n       const {component} = setupTest();\n\n       const isSelectableItemAtIndex = (component.getDefaultFoundation() as any)\n                                           .adapter.isSelectableItemAtIndex(1);\n       expect(isSelectableItemAtIndex).toBe(false);\n     });\n\n  it('adapter#getSelectedSiblingOfItemAtIndex returns the index of the selected item within the same' +\n         'selection group',\n     () => {\n       const {component} = setupTest();\n\n       const siblingIndex = (component.getDefaultFoundation() as any)\n                                .adapter.getSelectedSiblingOfItemAtIndex(2);\n       expect(siblingIndex).toEqual(3);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-menu/test/feature-targeting-any.test.scss",
    "content": "@use '../menu';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include menu.static-styles($query: $query);\n    @include menu.width(0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-menu/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {cssClasses as listCssClasses} from '../../mdc-list/constants';\nimport {MDCListFoundation} from '../../mdc-list/foundation';\nimport {numbers} from '../../mdc-menu-surface/constants';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, DefaultFocusState, numbers as menuNumbers, strings} from '../constants';\nimport {MDCMenuFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCMenuFoundation);\n  return {foundation, mockAdapter};\n}\n\nconst listClasses = MDCListFoundation.cssClasses;\n\ndescribe('MDCMenuFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCMenuFoundation, [\n      'addClassToElementAtIndex',\n      'removeClassFromElementAtIndex',\n      'addAttributeToElementAtIndex',\n      'removeAttributeFromElementAtIndex',\n      'getAttributeFromElementAtIndex',\n      'elementContainsClass',\n      'closeSurface',\n      'getElementIndex',\n      'getSelectedSiblingOfItemAtIndex',\n      'isSelectableItemAtIndex',\n      'notifySelected',\n      'getMenuItemCount',\n      'focusItemAtIndex',\n      'focusListRoot',\n    ]);\n  });\n\n  it('exports strings', () => {\n    expect(MDCMenuFoundation.strings).toEqual(strings);\n  });\n\n  it('exports cssClasses', () => {\n    expect(MDCMenuFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCMenuFoundation.numbers).toEqual(menuNumbers);\n  });\n\n  it('destroy does not throw error', () => {\n    const {foundation} = setupTest();\n    expect(() => foundation.destroy).not.toThrow();\n  });\n\n  it('destroy does not throw error if destroyed immediately after keydown',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const event = {\n         key: 'Space',\n         target: 'My Element',\n         preventDefault: jasmine.createSpy('preventDefault')\n       } as unknown as KeyboardEvent;\n       mockAdapter\n           .elementContainsClass\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n           //  'EventTarget | null' is not assignable to parameter of type\n           //  'Expected<Element>'.\n           .withArgs(event.target, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'EventTarget\n       //  | null' is not assignable to parameter of type\n       //  'Expected<HTMLElement>'.\n       mockAdapter.getElementIndex.withArgs(event.target).and.returnValue(0);\n       foundation.handleKeydown(event);\n\n       expect(() => {\n         foundation.destroy();\n       }).not.toThrow();\n     });\n\n  it('destroy closes surface', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    expect(() => {\n      foundation.destroy();\n    }).not.toThrow();\n    expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n  });\n\n  it('handleKeydown does nothing if key is not space, enter, or tab', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const event = {key: 'N'} as KeyboardEvent;\n\n    foundation.handleKeydown(event);\n    expect(mockAdapter.closeSurface).not.toHaveBeenCalled();\n    expect(mockAdapter.elementContainsClass)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n        //  got 1.\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('handleKeydown tab key causes the menu to close', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const event = {key: 'Tab'} as KeyboardEvent;\n\n    foundation.handleKeydown(event);\n    expect(mockAdapter.closeSurface)\n        .toHaveBeenCalledWith(/** skipRestoreFocus */ true);\n    expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n    expect(mockAdapter.elementContainsClass)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n        //  got 1.\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('handleItemAction item action closes the menu', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const itemEl = document.createElement('li');\n\n    mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n\n    foundation.handleItemAction(itemEl);\n    expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n  });\n\n  it('handleItemAction item action emits selected event', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const itemEl = document.createElement('li');\n\n    mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n\n    foundation.handleItemAction(itemEl);\n    expect(mockAdapter.notifySelected).toHaveBeenCalledWith({index: 0});\n    expect(mockAdapter.notifySelected).toHaveBeenCalledTimes(1);\n  });\n\n  it('handleKeydown space/enter key inside an input does not prevent default on the event',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const event = {\n         key: 'Space',\n         target: {tagName: 'input'},\n         preventDefault: jasmine.createSpy('preventDefault')\n       } as unknown as KeyboardEvent;\n       mockAdapter\n           .elementContainsClass\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n           //  'EventTarget | null' is not assignable to parameter of type\n           //  'Expected<Element>'.\n           .withArgs(event.target, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'EventTarget\n       //  | null' is not assignable to parameter of type\n       //  'Expected<HTMLElement>'.\n       mockAdapter.getElementIndex.withArgs(event.target).and.returnValue(0);\n\n       foundation.handleKeydown(event);\n       (event as any).key = 'Enter';\n       foundation.handleKeydown(event);\n\n       expect(event.preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('handleItemAction item action event inside of a selection group ' +\n         'with additional markup does not cause loop',\n     () => {\n       // This test will timeout of there is an endless loop in the selection\n       // group logic.\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.elementContainsClass\n           .withArgs(jasmine.anything(), listClasses.ROOT)\n           .and.returnValue(false);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.elementContainsClass\n           .withArgs(jasmine.anything(), cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValue(false);\n\n       foundation.handleItemAction(itemEl);\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n\n       expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleItemAction item action event inside of a selection group with another element selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValue(true);\n       mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(true);\n       mockAdapter.getSelectedSiblingOfItemAtIndex.withArgs(0).and.returnValue(\n           1);\n       mockAdapter.getMenuItemCount.and.returnValue(5);\n\n       foundation.handleItemAction(itemEl);\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .toHaveBeenCalledWith(1, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.addClassToElementAtIndex)\n           .toHaveBeenCalledWith(0, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleItemAction item action event inside of a selection group with no element selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValue(true);\n       mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(true);\n       mockAdapter.getSelectedSiblingOfItemAtIndex.withArgs(0).and.returnValue(\n           -1);\n       mockAdapter.getMenuItemCount.and.returnValue(5);\n\n       foundation.handleItemAction(itemEl);\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .not.toHaveBeenCalledWith(\n               jasmine.any(Number), cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex)\n           .toHaveBeenCalledWith(0, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleItemAction item action event inside of a child element of a list item in a selection group with no ' +\n         'element selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValues(false, true);\n       mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(true);\n       mockAdapter.getMenuItemCount.and.returnValue(5);\n\n       foundation.handleItemAction(itemEl);\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .not.toHaveBeenCalledWith(\n               jasmine.any(Number), cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex)\n           .toHaveBeenCalledWith(0, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleItemAction item action event inside of a child element of a selection group (but not a list item) with ' +\n         'no element selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValue(false);\n       mockAdapter.elementContainsClass.withArgs(itemEl, listClasses.ROOT)\n           .and.returnValues(false, true);\n       mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(false);\n       mockAdapter.getMenuItemCount.and.returnValue(5);\n\n       foundation.handleItemAction(itemEl);\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .not.toHaveBeenCalledWith(\n               jasmine.any(Number), cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex)\n           .not.toHaveBeenCalledWith(\n               jasmine.any(Number), cssClasses.MENU_SELECTED_LIST_ITEM);\n     });\n\n  it('handleMenuSurfaceOpened menu focuses the list root element by default on menu surface opened',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.handleMenuSurfaceOpened();\n       expect(mockAdapter.focusListRoot).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleMenuSurfaceOpened menu focuses the first menu item when DefaultFocusState is set to FIRST_ITEM on menu ' +\n         'surface opened',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.setDefaultFocusState(DefaultFocusState.FIRST_ITEM);\n       foundation.handleMenuSurfaceOpened();\n       expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleMenuSurfaceOpened focuses the list root element when DefaultFocusState is set to LIST_ROOT',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.setDefaultFocusState(DefaultFocusState.LIST_ROOT);\n       foundation.handleMenuSurfaceOpened();\n       expect(mockAdapter.focusListRoot).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleMenuSurfaceOpened focuses the last item when DefaultFocusState is set to LAST_ITEM',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.getMenuItemCount.and.returnValue(5);\n       foundation.setDefaultFocusState(DefaultFocusState.LAST_ITEM);\n       foundation.handleMenuSurfaceOpened();\n       expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledWith(4);\n       expect(mockAdapter.focusItemAtIndex).toHaveBeenCalledTimes(1);\n     });\n\n  it('handleMenuSurfaceOpened does not focus anything when DefaultFocusState is set to NONE',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.setDefaultFocusState(DefaultFocusState.NONE);\n       foundation.handleMenuSurfaceOpened();\n       expect(mockAdapter.focusItemAtIndex)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.focusListRoot).not.toHaveBeenCalled();\n     });\n\n  it('#getSelectedIndex returns correct index', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isSelectableItemAtIndex.withArgs(1).and.returnValue(true);\n    const listItemEl = document.createElement('div');\n    mockAdapter.elementContainsClass\n        .withArgs(listItemEl, cssClasses.MENU_SELECTION_GROUP)\n        .and.returnValue(true);\n    mockAdapter.getSelectedSiblingOfItemAtIndex.withArgs(1).and.returnValue(-1);\n    mockAdapter.getMenuItemCount.and.returnValue(2);\n\n    expect(foundation.getSelectedIndex()).not.toBe(1);\n    foundation.setSelectedIndex(1);\n    expect(foundation.getSelectedIndex()).toBe(1);\n  });\n\n  it('setSelectedIndex calls addClass and addAttribute only', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const listItemEl = document.createElement('div');\n    mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(true);\n    mockAdapter.elementContainsClass\n        .withArgs(listItemEl, cssClasses.MENU_SELECTION_GROUP)\n        .and.returnValue(true);\n    mockAdapter.getSelectedSiblingOfItemAtIndex.withArgs(0).and.returnValue(-1);\n    mockAdapter.getMenuItemCount.and.returnValue(2);\n\n    foundation.setSelectedIndex(0);\n    expect(mockAdapter.removeClassFromElementAtIndex)\n        .not.toHaveBeenCalledWith(\n            jasmine.any(Number), cssClasses.MENU_SELECTED_LIST_ITEM);\n    expect(mockAdapter.removeAttributeFromElementAtIndex)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n        //  got 1.\n        .not.toHaveBeenCalledWith(strings.ARIA_CHECKED_ATTR);\n    expect(mockAdapter.addClassToElementAtIndex)\n        .toHaveBeenCalledWith(0, cssClasses.MENU_SELECTED_LIST_ITEM);\n    expect(mockAdapter.addAttributeToElementAtIndex)\n        .toHaveBeenCalledWith(0, strings.ARIA_CHECKED_ATTR, 'true');\n    expect(mockAdapter.addAttributeToElementAtIndex).toHaveBeenCalledTimes(1);\n  });\n\n  it('setSelectedIndex remove class and attribute, and adds class and attribute to newly selected item',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const listItemEl = document.createElement('div');\n       mockAdapter.isSelectableItemAtIndex.withArgs(0).and.returnValue(true);\n       mockAdapter.elementContainsClass\n           .withArgs(listItemEl, cssClasses.MENU_SELECTION_GROUP)\n           .and.returnValue(true);\n       mockAdapter.getMenuItemCount.and.returnValue(2);\n       mockAdapter.getSelectedSiblingOfItemAtIndex.withArgs(0).and.returnValue(\n           1);\n\n       foundation.setSelectedIndex(0);\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .toHaveBeenCalledWith(1, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.removeClassFromElementAtIndex)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.removeAttributeFromElementAtIndex)\n           .toHaveBeenCalledWith(1, strings.ARIA_CHECKED_ATTR);\n       expect(mockAdapter.removeAttributeFromElementAtIndex)\n           .toHaveBeenCalledTimes(1);\n       expect(mockAdapter.addClassToElementAtIndex)\n           .toHaveBeenCalledWith(0, cssClasses.MENU_SELECTED_LIST_ITEM);\n       expect(mockAdapter.addClassToElementAtIndex).toHaveBeenCalledTimes(1);\n       expect(mockAdapter.addAttributeToElementAtIndex)\n           .toHaveBeenCalledWith(0, strings.ARIA_CHECKED_ATTR, 'true');\n       expect(mockAdapter.addAttributeToElementAtIndex)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('setSelectedIndex throws error if index is not in range', () => {\n    const {foundation} = setupTest();\n    try {\n      foundation.setSelectedIndex(5);\n    } catch (e: any) {\n      expect(e.message).toEqual(\n          'MDCMenuFoundation: No list item at specified index.');\n    }\n  });\n\n  it('setEnabled calls addClass and addAttribute', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getMenuItemCount.and.returnValue(2);\n\n    foundation.setEnabled(0, false);\n    expect(mockAdapter.addClassToElementAtIndex)\n        .toHaveBeenCalledWith(0, listCssClasses.LIST_ITEM_DISABLED_CLASS);\n    expect(mockAdapter.addClassToElementAtIndex).toHaveBeenCalledTimes(1);\n    expect(mockAdapter.addAttributeToElementAtIndex)\n        .toHaveBeenCalledWith(0, strings.ARIA_DISABLED_ATTR, 'true');\n    expect(mockAdapter.addAttributeToElementAtIndex).toHaveBeenCalledTimes(1);\n  });\n\n  it('setEnabled calls removeClass and removeAttribute', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getMenuItemCount.and.returnValue(2);\n\n    foundation.setEnabled(0, true);\n    expect(mockAdapter.removeClassFromElementAtIndex)\n        .toHaveBeenCalledWith(0, listCssClasses.LIST_ITEM_DISABLED_CLASS);\n    expect(mockAdapter.removeClassFromElementAtIndex).toHaveBeenCalledTimes(1);\n    expect(mockAdapter.addAttributeToElementAtIndex)\n        .toHaveBeenCalledWith(0, strings.ARIA_DISABLED_ATTR, 'false');\n    expect(mockAdapter.addAttributeToElementAtIndex).toHaveBeenCalledTimes(1);\n  });\n\n  // Item Action\n\n  it('Item action event causes the menu to close', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const itemEl = document.createElement('li');\n    mockAdapter.elementContainsClass\n        .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n        .and.returnValue(true);\n    mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n\n    foundation.handleItemAction(itemEl);\n\n    expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n    expect(mockAdapter.closeSurface).toHaveBeenCalledWith(false);\n  });\n\n  it('closes the menu (with indication to not restore focus) on item action based on DOM attribute',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const itemEl = document.createElement('li');\n       mockAdapter.elementContainsClass\n           .withArgs(itemEl, listClasses.LIST_ITEM_CLASS)\n           .and.returnValue(true);\n       mockAdapter.getElementIndex.withArgs(itemEl).and.returnValue(0);\n       mockAdapter.getAttributeFromElementAtIndex\n           .withArgs(0, strings.SKIP_RESTORE_FOCUS)\n           .and.returnValue('true');\n\n       foundation.handleItemAction(itemEl);\n\n       expect(mockAdapter.closeSurface).toHaveBeenCalledTimes(1);\n       expect(mockAdapter.closeSurface).toHaveBeenCalledWith(true);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-menu/test/mdc-menu.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-menu.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-menu/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Event properties used by the adapter and foundation.\n */\nexport interface MDCMenuItemEventDetail {\n  index: number;\n}\n\n/**\n * Event properties specific to the default component implementation.\n */\nexport interface MDCMenuItemComponentEventDetail extends\n    MDCMenuItemEventDetail {\n  item: Element;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCMenuItemEvent extends Event {\n  readonly detail: MDCMenuItemEventDetail;\n}\n\nexport interface MDCMenuItemComponentEvent extends Event {\n  readonly detail: MDCMenuItemComponentEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-menu-surface/README.md",
    "content": "<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n"
  },
  {
    "path": "packages/mdc-menu-surface/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-menu-surface/_menusurface-theme.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/mixins' as shape-mixins;\n\n$fade-in-duration: 0.03s !default;\n$fade-out-duration: 0.075s !default;\n$scale-duration: 0.12s !default;\n$min-distance-from-edge: 32px !default;\n$z-index: 8 !default; // One above mdc-dialog\n$shape-radius: medium !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define menu-surface\n  .mdc-menu-surface {\n    @include feature-targeting.targets($feat-structure) {\n      $max-width: custom-properties.create(\n        --mdc-menu-max-width,\n        calc(100vw - #{$min-distance-from-edge})\n      );\n      @include theme.property(max-width, $max-width);\n      $max-height: custom-properties.create(\n        --mdc-menu-max-height,\n        calc(100vh - #{$min-distance-from-edge})\n      );\n      @include theme.property(max-height, $max-height);\n      z-index: $z-index;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity $fade-in-duration linear,\n        transform $scale-duration\n          animation-variables.$deceleration-curve-timing-function,\n        height 250ms animation-variables.$deceleration-curve-timing-function;\n    }\n\n    &--animating-closed {\n      @include feature-targeting.targets($feat-animation) {\n        transition: opacity $fade-out-duration linear;\n      }\n    }\n\n    @include fill-color(surface, $query);\n    @include ink-color(on-surface, $query);\n    @include shape-radius($shape-radius, false, $query);\n  }\n  // postcss-bem-linter: end\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/_menusurface.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/rtl/rtl';\n@use './menusurface-theme';\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include menusurface-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define menu-surface\n  .mdc-menu-surface {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n      position: absolute;\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      transform: scale(1);\n      transform-origin: top left;\n      opacity: 0;\n      overflow: auto;\n      will-change: transform, opacity;\n    }\n\n    &:focus {\n      @include feature-targeting.targets($feat-structure) {\n        outline: none;\n      }\n    }\n\n    &--animating-open {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        transform: scale(0.8);\n        opacity: 0;\n      }\n    }\n\n    // Render this after `--animating-open` to override `opacity` & `transform`\n    // CSS properties.\n    &--open {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n\n    &--animating-closed {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        opacity: 0;\n      }\n    }\n\n    @include elevation-mixins.elevation($z-value: 8, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(transform-origin, top left, top right);\n    }\n  }\n\n  .mdc-menu-surface--anchor {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      overflow: visible;\n    }\n  }\n\n  .mdc-menu-surface--fixed {\n    @include feature-targeting.targets($feat-structure) {\n      position: fixed;\n    }\n  }\n\n  .mdc-menu-surface--fullwidth {\n    @include feature-targeting.targets($feat-structure) {\n      width: 100%;\n    }\n  }\n  // postcss-bem-linter: end\n}\n\n// Used by filled variants of GM components to conditionally flatten the top\n// corners of the menu.\n@mixin flatten-top-when-opened-below($query: feature-targeting.all()) {\n  .mdc-menu-surface--is-open-below {\n    $feat-structure: feature-targeting.create-target($query, structure);\n\n    @include feature-targeting.targets($feat-structure) {\n      border-top-left-radius: 0px;\n      border-top-right-radius: 0px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"./index\" as mdc-menu-surface-*;\n"
  },
  {
    "path": "packages/mdc-menu-surface/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_menusurface.scss` or `_menusurface-theme.scss` instead.\n@forward './menusurface' show core-styles, flatten-top-when-opened-below;\n@forward './menusurface-theme' show ink-color, fill-color, shape-radius;\n"
  },
  {
    "path": "packages/mdc-menu-surface/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-menu-surface-* hide mdc-menu-surface-core-styles, mdc-menu-surface-ink-color, mdc-menu-surface-fill-color, mdc-menu-surface-shape-radius, mdc-menu-surface-base-;\n"
  },
  {
    "path": "packages/mdc-menu-surface/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_menusurface-theme.scss` instead.\n@forward './menusurface-theme' show $fade-in-duration, $fade-out-duration,\n  $scale-duration, $min-distance-from-edge, $z-index, $shape-radius;\n"
  },
  {
    "path": "packages/mdc-menu-surface/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\nimport {MDCMenuDimensions, MDCMenuDistance, MDCMenuPoint} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCMenuSurfaceAdapter {\n  addClass(className: string): void;\n  removeClass(className: string): void;\n  hasClass(className: string): boolean;\n  hasAnchor(): boolean;\n\n  isElementInContainer(el: Element): boolean;\n  isFocused(): boolean;\n  isRtl(): boolean;\n\n  getInnerDimensions(): MDCMenuDimensions;\n  getAnchorDimensions(): DOMRect|null;\n  getViewportDimensions(): MDCMenuDimensions;\n  getBodyDimensions(): MDCMenuDimensions;\n  getWindowScroll(): MDCMenuPoint;\n  setPosition(position: Partial<MDCMenuDistance>): void;\n  setMaxHeight(height: string): void;\n  setTransformOrigin(origin: string): void;\n  getOwnerDocument?(): Document;\n\n  /** Saves the element that was focused before the menu surface was opened. */\n  saveFocus(): void;\n\n  /**\n   * Restores focus to the element that was focused before the menu surface was\n   * opened.\n   */\n  restoreFocus(): void;\n\n  /** Emits an event when the menu surface is closed. */\n  notifyClose(): void;\n\n  /** Emits an event when the menu surface is closing. */\n  notifyClosing(): void;\n\n  /** Emits an event when the menu surface is opened. */\n  notifyOpen(): void;\n\n  /** Emits an event when the menu surface is opening. */\n  notifyOpening(): void;\n\n  /** Registers an event listener on the window. */\n  registerWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /** Deregisters an event listener on the window. */\n  deregisterWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {getCorrectPropertyName} from '@material/animation/util';\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCMenuSurfaceAdapter} from './adapter';\nimport {Corner, cssClasses, strings} from './constants';\nimport {MDCMenuSurfaceFoundation} from './foundation';\nimport {MDCMenuDistance} from './types';\n\ntype RegisterFunction = () => void;\n\n/** MDC Menu Surface Factory */\nexport type MDCMenuSurfaceFactory =\n    (el: HTMLElement, foundation?: MDCMenuSurfaceFoundation) => MDCMenuSurface;\n\n/** MDC Menu Surface */\nexport class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {\n  static override attachTo(root: HTMLElement): MDCMenuSurface {\n    return new MDCMenuSurface(root);\n  }\n\n  anchorElement!: Element|null;  // assigned in initialSyncWithDOM()\n\n  private previousFocus?: HTMLElement|SVGElement|null;\n\n  private handleKeydown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n  private handleBodyClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n\n  private registerBodyClickListener!:\n      RegisterFunction;  // assigned in initialSyncWithDOM()\n  private deregisterBodyClickListener!:\n      RegisterFunction;  // assigned in initialSyncWithDOM()\n\n  override initialSyncWithDOM() {\n    const parentEl = this.root.parentElement;\n    this.anchorElement =\n        parentEl && parentEl.classList.contains(cssClasses.ANCHOR) ? parentEl :\n                                                                     null;\n\n    if (this.root.classList.contains(cssClasses.FIXED)) {\n      this.setFixedPosition(true);\n    }\n\n    this.handleKeydown = (event) => {\n      this.foundation.handleKeydown(event);\n    };\n    this.handleBodyClick = (event) => {\n      this.foundation.handleBodyClick(event);\n    };\n\n    // capture so that no race between handleBodyClick and quickOpen when\n    // menusurface opened on button click which registers this listener\n    this.registerBodyClickListener = () => {\n      document.body.addEventListener(\n          'click', this.handleBodyClick, {capture: true});\n    };\n    this.deregisterBodyClickListener = () => {\n      document.body.removeEventListener(\n          'click', this.handleBodyClick, {capture: true});\n    };\n\n    this.listen('keydown', this.handleKeydown);\n    this.listen(strings.OPENED_EVENT, this.registerBodyClickListener);\n    this.listen(strings.CLOSED_EVENT, this.deregisterBodyClickListener);\n  }\n\n  override destroy() {\n    this.unlisten('keydown', this.handleKeydown);\n    this.unlisten(strings.OPENED_EVENT, this.registerBodyClickListener);\n    this.unlisten(strings.CLOSED_EVENT, this.deregisterBodyClickListener);\n    super.destroy();\n  }\n\n  isOpen(): boolean {\n    return this.foundation.isOpen();\n  }\n\n  open() {\n    this.foundation.open();\n  }\n\n  close(skipRestoreFocus = false) {\n    this.foundation.close(skipRestoreFocus);\n  }\n\n  set quickOpen(quickOpen: boolean) {\n    this.foundation.setQuickOpen(quickOpen);\n  }\n\n  /**\n   * Sets the foundation to use page offsets for a positioning when the menu is\n   * hoisted to the body.\n   */\n  setIsHoisted(isHoisted: boolean) {\n    this.foundation.setIsHoisted(isHoisted);\n  }\n\n  /** Sets the element that the menu-surface is anchored to. */\n  setMenuSurfaceAnchorElement(element: Element) {\n    this.anchorElement = element;\n  }\n\n  /** Sets the menu-surface to position: fixed. */\n  setFixedPosition(isFixed: boolean) {\n    if (isFixed) {\n      this.root.classList.add(cssClasses.FIXED);\n    } else {\n      this.root.classList.remove(cssClasses.FIXED);\n    }\n\n    this.foundation.setFixedPosition(isFixed);\n  }\n\n  /**\n   * Sets the absolute x/y position to position based on. Requires the menu to\n   * be hoisted.\n   */\n  setAbsolutePosition(x: number, y: number) {\n    this.foundation.setAbsolutePosition(x, y);\n    this.setIsHoisted(true);\n  }\n\n  /**\n   * @param corner Default anchor corner alignment of top-left surface corner.\n   */\n  setAnchorCorner(corner: Corner) {\n    this.foundation.setAnchorCorner(corner);\n  }\n\n  setAnchorMargin(margin: Partial<MDCMenuDistance>) {\n    this.foundation.setAnchorMargin(margin);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCMenuSurfaceAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      hasAnchor: () => !!this.anchorElement,\n      notifyClose: () => {\n        this.emit(MDCMenuSurfaceFoundation.strings.CLOSED_EVENT, {});\n      },\n      notifyClosing: () => {\n        this.emit(MDCMenuSurfaceFoundation.strings.CLOSING_EVENT, {});\n      },\n      notifyOpen: () => {\n        this.emit(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, {});\n      },\n      notifyOpening: () => {\n        this.emit(MDCMenuSurfaceFoundation.strings.OPENING_EVENT, {});\n      },\n      isElementInContainer: (el) => this.root.contains(el),\n      isRtl: () =>\n          getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',\n      setTransformOrigin: (origin) => {\n        const propertyName =\n            `${getCorrectPropertyName(window, 'transform')}-origin`;\n        this.root.style.setProperty(propertyName, origin);\n      },\n\n      isFocused: () => document.activeElement === this.root,\n      saveFocus: () => {\n        this.previousFocus =\n            document.activeElement as HTMLElement | SVGElement | null;\n      },\n      restoreFocus: () => {\n        if (this.root.contains(document.activeElement)) {\n          if (this.previousFocus && this.previousFocus.focus) {\n            this.previousFocus.focus();\n          }\n        }\n      },\n      getInnerDimensions: () => {\n        return {width: this.root.offsetWidth, height: this.root.offsetHeight};\n      },\n      getAnchorDimensions: () => this.anchorElement ?\n          this.anchorElement.getBoundingClientRect() :\n          null,\n      getViewportDimensions: () => {\n        return {width: window.innerWidth, height: window.innerHeight};\n      },\n      getBodyDimensions: () => {\n        return {\n          width: document.body.clientWidth,\n          height: document.body.clientHeight\n        };\n      },\n      getWindowScroll: () => {\n        return {x: window.pageXOffset, y: window.pageYOffset};\n      },\n      setPosition: (position) => {\n        const rootHTML = this.root;\n        rootHTML.style.left = 'left' in position ? `${position.left}px` : '';\n        rootHTML.style.right = 'right' in position ? `${position.right}px` : '';\n        rootHTML.style.top = 'top' in position ? `${position.top}px` : '';\n        rootHTML.style.bottom =\n            'bottom' in position ? `${position.bottom}px` : '';\n      },\n      setMaxHeight: (height) => {\n        this.root.style.maxHeight = height;\n      },\n      registerWindowEventHandler: (eventType, handler) => {\n        window.addEventListener(eventType, handler);\n      },\n      deregisterWindowEventHandler: (eventType, handler) => {\n        window.removeEventListener(eventType, handler);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCMenuSurfaceFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ANCHOR: 'mdc-menu-surface--anchor',\n  ANIMATING_CLOSED: 'mdc-menu-surface--animating-closed',\n  ANIMATING_OPEN: 'mdc-menu-surface--animating-open',\n  FIXED: 'mdc-menu-surface--fixed',\n  IS_OPEN_BELOW: 'mdc-menu-surface--is-open-below',\n  OPEN: 'mdc-menu-surface--open',\n  ROOT: 'mdc-menu-surface',\n};\n\n// tslint:disable:object-literal-sort-keys\nconst strings = {\n  CLOSED_EVENT: 'MDCMenuSurface:closed',\n  CLOSING_EVENT: 'MDCMenuSurface:closing',\n  OPENED_EVENT: 'MDCMenuSurface:opened',\n  OPENING_EVENT: 'MDCMenuSurface:opening',\n  FOCUSABLE_ELEMENTS: [\n    'button:not(:disabled)',\n    '[href]:not([aria-disabled=\"true\"])',\n    'input:not(:disabled)',\n    'select:not(:disabled)',\n    'textarea:not(:disabled)',\n    '[tabindex]:not([tabindex=\"-1\"]):not([aria-disabled=\"true\"])',\n  ].join(', '),\n};\n// tslint:enable:object-literal-sort-keys\n\nconst numbers = {\n  /** Total duration of menu-surface open animation. */\n  TRANSITION_OPEN_DURATION: 120,\n\n  /** Total duration of menu-surface close animation. */\n  TRANSITION_CLOSE_DURATION: 75,\n\n  /**\n   * Margin left to the edge of the viewport when menu-surface is at maximum\n   * possible height. Also used as a viewport margin.\n   */\n  MARGIN_TO_EDGE: 32,\n\n  /**\n   * Ratio of anchor width to menu-surface width for switching from corner\n   * positioning to center positioning.\n   */\n  ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO: 0.67,\n\n  /**\n   * Amount of time to wait before restoring focus when closing the menu\n   * surface. This is important because if a touch event triggered the menu\n   * close, and the subsequent mouse event occurs after focus is restored, then\n   * the restored focus would be lost.\n   */\n  TOUCH_EVENT_WAIT_MS: 30,\n};\n\n/**\n * Enum for bits in the {@see Corner) bitmap.\n */\nenum CornerBit {\n  BOTTOM = 1,\n  CENTER = 2,\n  RIGHT = 4,\n  FLIP_RTL = 8,\n}\n\n/**\n * Enum for representing an element corner for positioning the menu-surface.\n *\n * The START constants map to LEFT if element directionality is left\n * to right and RIGHT if the directionality is right to left.\n * Likewise END maps to RIGHT or LEFT depending on the directionality.\n */\nenum Corner {\n  TOP_LEFT = 0,\n  TOP_RIGHT = CornerBit.RIGHT,\n  BOTTOM_LEFT = CornerBit.BOTTOM,\n  BOTTOM_RIGHT =\n      CornerBit.BOTTOM | CornerBit.RIGHT,  // tslint:disable-line:no-bitwise\n  TOP_START = CornerBit.FLIP_RTL,\n  TOP_END =\n      CornerBit.FLIP_RTL | CornerBit.RIGHT,  // tslint:disable-line:no-bitwise\n  BOTTOM_START =\n      CornerBit.BOTTOM | CornerBit.FLIP_RTL,  // tslint:disable-line:no-bitwise\n  BOTTOM_END = CornerBit.BOTTOM | CornerBit.RIGHT |\n      CornerBit.FLIP_RTL,  // tslint:disable-line:no-bitwise\n}\n\nexport {cssClasses, strings, numbers, CornerBit, Corner};\n"
  },
  {
    "path": "packages/mdc-menu-surface/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCMenuSurfaceAdapter} from './adapter';\nimport {Corner, CornerBit, cssClasses, numbers, strings} from './constants';\nimport {MDCMenuDimensions, MDCMenuDistance, MDCMenuPoint} from './types';\n\ninterface AutoLayoutMeasurements {\n  anchorSize: MDCMenuDimensions;\n  bodySize: MDCMenuDimensions;\n  surfaceSize: MDCMenuDimensions;\n  viewportDistance: MDCMenuDistance;\n  viewportSize: MDCMenuDimensions;\n  windowScroll: MDCMenuPoint;\n}\n\n/** MDC Menu Surface Foundation */\nexport class MDCMenuSurfaceFoundation extends\n    MDCFoundation<MDCMenuSurfaceAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static get Corner() {\n    return Corner;\n  }\n\n  /**\n   * @see {@link MDCMenuSurfaceAdapter} for typing information on parameters and return types.\n   */\n  static override get defaultAdapter(): MDCMenuSurfaceAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      hasAnchor: () => false,\n\n      isElementInContainer: () => false,\n      isFocused: () => false,\n      isRtl: () => false,\n\n      getInnerDimensions: () => ({height: 0, width: 0}),\n      getAnchorDimensions: () => null,\n      getViewportDimensions: () => ({height: 0, width: 0}),\n      getBodyDimensions: () => ({height: 0, width: 0}),\n      getWindowScroll: () => ({x: 0, y: 0}),\n      setPosition: () => undefined,\n      setMaxHeight: () => undefined,\n      setTransformOrigin: () => undefined,\n\n      saveFocus: () => undefined,\n      restoreFocus: () => undefined,\n\n      notifyClose: () => undefined,\n      notifyClosing: () => undefined,\n      notifyOpen: () => undefined,\n      notifyOpening: () => undefined,\n      registerWindowEventHandler: () => undefined,\n      deregisterWindowEventHandler: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private isSurfaceOpen = false;\n  private isQuickOpen = false;\n  private isHoistedElement = false;\n  private isFixedPosition = false;\n  private isHorizontallyCenteredOnViewport = false;\n\n  private maxHeight = 0;\n  private openBottomBias = 0;\n\n  private openAnimationEndTimerId = 0;\n  private closeAnimationEndTimerId = 0;\n  private animationRequestId = 0;\n\n  private anchorCorner: Corner = Corner.TOP_START;\n\n  private resizeListener!:\n      SpecificEventListener<'resize'>;  // Assigned in #initialize.\n\n  /**\n   * Corner of the menu surface to which menu surface is attached to anchor.\n   *\n   *  Anchor corner --->+----------+\n   *                    |  ANCHOR  |\n   *                    +----------+\n   *  Origin corner --->+--------------+\n   *                    |              |\n   *                    |              |\n   *                    | MENU SURFACE |\n   *                    |              |\n   *                    |              |\n   *                    +--------------+\n   */\n  private originCorner: Corner = Corner.TOP_START;\n  private readonly anchorMargin:\n      MDCMenuDistance = {top: 0, right: 0, bottom: 0, left: 0};\n  private readonly position: MDCMenuPoint = {x: 0, y: 0};\n\n  private dimensions!: MDCMenuDimensions;         // assigned in open()\n  private measurements!: AutoLayoutMeasurements;  // assigned in open()\n\n  constructor(adapter?: Partial<MDCMenuSurfaceAdapter>) {\n    super({...MDCMenuSurfaceFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    const {ROOT, OPEN} = MDCMenuSurfaceFoundation.cssClasses;\n\n    if (!this.adapter.hasClass(ROOT)) {\n      throw new Error(`${ROOT} class required in root element.`);\n    }\n\n    if (this.adapter.hasClass(OPEN)) {\n      this.isSurfaceOpen = true;\n    }\n\n    this.resizeListener = this.handleResize.bind(this);\n    this.adapter.registerWindowEventHandler('resize', this.resizeListener);\n  }\n\n  override destroy() {\n    clearTimeout(this.openAnimationEndTimerId);\n    clearTimeout(this.closeAnimationEndTimerId);\n    // Cancel any currently running animations.\n    cancelAnimationFrame(this.animationRequestId);\n\n    this.adapter.deregisterWindowEventHandler('resize', this.resizeListener);\n  }\n\n  /**\n   * @param corner Default anchor corner alignment of top-left menu surface\n   *     corner.\n   */\n  setAnchorCorner(corner: Corner) {\n    this.anchorCorner = corner;\n  }\n\n  /**\n   * Flip menu corner horizontally.\n   */\n  flipCornerHorizontally() {\n    this.originCorner = this.originCorner ^ CornerBit.RIGHT;\n  }\n\n  /**\n   * @param margin Set of margin values from anchor.\n   */\n  setAnchorMargin(margin: Partial<MDCMenuDistance>) {\n    this.anchorMargin.top = margin.top || 0;\n    this.anchorMargin.right = margin.right || 0;\n    this.anchorMargin.bottom = margin.bottom || 0;\n    this.anchorMargin.left = margin.left || 0;\n  }\n\n  /** Used to indicate if the menu-surface is hoisted to the body. */\n  setIsHoisted(isHoisted: boolean) {\n    this.isHoistedElement = isHoisted;\n  }\n\n  /**\n   * Used to set the menu-surface calculations based on a fixed position menu.\n   */\n  setFixedPosition(isFixedPosition: boolean) {\n    this.isFixedPosition = isFixedPosition;\n  }\n\n  /**\n   * @return Returns true if menu is in fixed (`position: fixed`) position.\n   */\n  isFixed() {\n    return this.isFixedPosition;\n  }\n\n  /** Sets the menu-surface position on the page. */\n  setAbsolutePosition(x: number, y: number) {\n    this.position.x = this.isFinite(x) ? x : 0;\n    this.position.y = this.isFinite(y) ? y : 0;\n  }\n\n  /** Sets whether menu-surface should be horizontally centered to viewport. */\n  setIsHorizontallyCenteredOnViewport(isCentered: boolean) {\n    this.isHorizontallyCenteredOnViewport = isCentered;\n  }\n\n  setQuickOpen(quickOpen: boolean) {\n    this.isQuickOpen = quickOpen;\n  }\n\n  /**\n   * Sets maximum menu-surface height on open.\n   * @param maxHeight The desired max-height. Set to 0 (default) to\n   *     automatically calculate max height based on available viewport space.\n   */\n  setMaxHeight(maxHeight: number) {\n    this.maxHeight = maxHeight;\n  }\n\n  /**\n   * Set to a positive integer to influence the menu to preferentially open\n   * below the anchor instead of above.\n   * @param bias A value of `x` simulates an extra `x` pixels of available space\n   *     below the menu during positioning calculations.\n   */\n  setOpenBottomBias(bias: number) {\n    this.openBottomBias = bias;\n  }\n\n  isOpen() {\n    return this.isSurfaceOpen;\n  }\n\n  /**\n   * Open the menu surface.\n   */\n  open() {\n    if (this.isSurfaceOpen) {\n      return;\n    }\n\n    this.adapter.notifyOpening();\n    this.adapter.saveFocus();\n\n    if (this.isQuickOpen) {\n      this.isSurfaceOpen = true;\n      this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);\n      this.dimensions = this.adapter.getInnerDimensions();\n      this.autoposition();\n      this.adapter.notifyOpen();\n    } else {\n      this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_OPEN);\n      this.animationRequestId = requestAnimationFrame(() => {\n        this.dimensions = this.adapter.getInnerDimensions();\n        this.autoposition();\n        this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);\n        this.openAnimationEndTimerId = setTimeout(() => {\n          this.openAnimationEndTimerId = 0;\n          this.adapter.removeClass(\n              MDCMenuSurfaceFoundation.cssClasses.ANIMATING_OPEN);\n          this.adapter.notifyOpen();\n        }, numbers.TRANSITION_OPEN_DURATION);\n      });\n\n      this.isSurfaceOpen = true;\n    }\n\n    this.adapter.registerWindowEventHandler('resize', this.resizeListener);\n  }\n\n  /**\n   * Closes the menu surface.\n   */\n  close(skipRestoreFocus = false) {\n    if (!this.isSurfaceOpen) {\n      return;\n    }\n\n    this.adapter.notifyClosing();\n    this.adapter.deregisterWindowEventHandler('resize', this.resizeListener);\n\n    if (this.isQuickOpen) {\n      this.isSurfaceOpen = false;\n      if (!skipRestoreFocus) {\n        this.maybeRestoreFocus();\n      }\n\n      this.adapter.removeClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);\n      this.adapter.removeClass(\n          MDCMenuSurfaceFoundation.cssClasses.IS_OPEN_BELOW);\n      this.adapter.notifyClose();\n\n      return;\n    }\n\n    this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.ANIMATING_CLOSED);\n    requestAnimationFrame(() => {\n      this.adapter.removeClass(MDCMenuSurfaceFoundation.cssClasses.OPEN);\n      this.adapter.removeClass(\n          MDCMenuSurfaceFoundation.cssClasses.IS_OPEN_BELOW);\n      this.closeAnimationEndTimerId = setTimeout(() => {\n        this.closeAnimationEndTimerId = 0;\n        this.adapter.removeClass(\n            MDCMenuSurfaceFoundation.cssClasses.ANIMATING_CLOSED);\n        this.adapter.notifyClose();\n      }, numbers.TRANSITION_CLOSE_DURATION);\n    });\n\n    this.isSurfaceOpen = false;\n    if (!skipRestoreFocus) {\n      this.maybeRestoreFocus();\n    }\n  }\n\n  /** Handle clicks and close if not within menu-surface element. */\n  handleBodyClick(event: MouseEvent) {\n    const el = event.target as Element;\n    if (this.adapter.isElementInContainer(el)) {\n      return;\n    }\n    this.close();\n  }\n\n  /** Handle keys that close the surface. */\n  handleKeydown(event: KeyboardEvent) {\n    const {keyCode, key} = event;\n\n    const isEscape = key === 'Escape' || keyCode === 27;\n    if (isEscape) {\n      this.close();\n    }\n  }\n\n  /** Handles resize events on the window. */\n  private handleResize() {\n    this.dimensions = this.adapter.getInnerDimensions();\n    this.autoposition();\n  }\n\n  private autoposition() {\n    // Compute measurements for autoposition methods reuse.\n    this.measurements = this.getAutoLayoutmeasurements();\n\n    const corner = this.getoriginCorner();\n    const maxMenuSurfaceHeight = this.getMenuSurfaceMaxHeight(corner);\n    const verticalAlignment =\n        this.hasBit(corner, CornerBit.BOTTOM) ? 'bottom' : 'top';\n    let horizontalAlignment =\n        this.hasBit(corner, CornerBit.RIGHT) ? 'right' : 'left';\n    const horizontalOffset = this.getHorizontalOriginOffset(corner);\n    const verticalOffset = this.getVerticalOriginOffset(corner);\n    const {anchorSize, surfaceSize} = this.measurements;\n\n    const position: Partial<MDCMenuDistance> = {\n      [horizontalAlignment]: horizontalOffset,\n      [verticalAlignment]: verticalOffset,\n    };\n\n    // Center align when anchor width is comparable or greater than menu\n    // surface, otherwise keep corner.\n    if (anchorSize.width / surfaceSize.width >\n        numbers.ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO) {\n      horizontalAlignment = 'center';\n    }\n\n    // If the menu-surface has been hoisted to the body, it's no longer relative\n    // to the anchor element\n    if (this.isHoistedElement || this.isFixedPosition) {\n      this.adjustPositionForHoistedElement(position);\n    }\n\n    this.adapter.setTransformOrigin(\n        `${horizontalAlignment} ${verticalAlignment}`);\n    this.adapter.setPosition(position);\n    this.adapter.setMaxHeight(\n        maxMenuSurfaceHeight ? maxMenuSurfaceHeight + 'px' : '');\n\n    // If it is opened from the top then add is-open-below class\n    if (!this.hasBit(corner, CornerBit.BOTTOM)) {\n      this.adapter.addClass(MDCMenuSurfaceFoundation.cssClasses.IS_OPEN_BELOW);\n    }\n  }\n\n  /**\n   * @return Measurements used to position menu surface popup.\n   */\n  private getAutoLayoutmeasurements(): AutoLayoutMeasurements {\n    let anchorRect = this.adapter.getAnchorDimensions();\n    const bodySize = this.adapter.getBodyDimensions();\n    const viewportSize = this.adapter.getViewportDimensions();\n    const windowScroll = this.adapter.getWindowScroll();\n\n    if (!anchorRect) {\n      // tslint:disable:object-literal-sort-keys Positional properties are more readable when they're grouped together\n      anchorRect = {\n        top: this.position.y,\n        right: this.position.x,\n        bottom: this.position.y,\n        left: this.position.x,\n        width: 0,\n        height: 0,\n      } as any;\n      // tslint:enable:object-literal-sort-keys\n    }\n\n    return {\n      anchorSize: anchorRect!,\n      bodySize,\n      surfaceSize: this.dimensions,\n      viewportDistance: {\n        // tslint:disable:object-literal-sort-keys Positional properties are more readable when they're grouped together\n        top: anchorRect!.top,\n        right: viewportSize.width - anchorRect!.right,\n        bottom: viewportSize.height - anchorRect!.bottom,\n        left: anchorRect!.left,\n        // tslint:enable:object-literal-sort-keys\n      },\n      viewportSize,\n      windowScroll,\n    };\n  }\n\n  /**\n   * Computes the corner of the anchor from which to animate and position the\n   * menu surface.\n   *\n   * Only LEFT or RIGHT bit is used to position the menu surface ignoring RTL\n   * context. E.g., menu surface will be positioned from right side on TOP_END.\n   */\n  private getoriginCorner(): Corner {\n    let corner = this.originCorner;\n\n    const {viewportDistance, anchorSize, surfaceSize} = this.measurements;\n    const {MARGIN_TO_EDGE} = MDCMenuSurfaceFoundation.numbers;\n\n    const isAnchoredToBottom = this.hasBit(this.anchorCorner, CornerBit.BOTTOM);\n\n    let availableTop;\n    let availableBottom;\n    if (isAnchoredToBottom) {\n      availableTop =\n          viewportDistance.top - MARGIN_TO_EDGE + this.anchorMargin.bottom;\n      availableBottom =\n          viewportDistance.bottom - MARGIN_TO_EDGE - this.anchorMargin.bottom;\n    } else {\n      availableTop =\n          viewportDistance.top - MARGIN_TO_EDGE + this.anchorMargin.top;\n      availableBottom = viewportDistance.bottom - MARGIN_TO_EDGE +\n          anchorSize.height - this.anchorMargin.top;\n    }\n\n    const isAvailableBottom = availableBottom - surfaceSize.height > 0;\n    if (!isAvailableBottom &&\n        availableTop > availableBottom + this.openBottomBias) {\n      // Attach bottom side of surface to the anchor.\n      corner = this.setBit(corner, CornerBit.BOTTOM);\n    }\n\n    const isRtl = this.adapter.isRtl();\n    const isFlipRtl = this.hasBit(this.anchorCorner, CornerBit.FLIP_RTL);\n    const hasRightBit = this.hasBit(this.anchorCorner, CornerBit.RIGHT) ||\n        this.hasBit(corner, CornerBit.RIGHT);\n\n    // Whether surface attached to right side of anchor element.\n    let isAnchoredToRight = false;\n\n    // Anchored to start\n    if (isRtl && isFlipRtl) {\n      isAnchoredToRight = !hasRightBit;\n    } else {\n      // Anchored to right\n      isAnchoredToRight = hasRightBit;\n    }\n\n    let availableLeft;\n    let availableRight;\n    if (isAnchoredToRight) {\n      availableLeft =\n          viewportDistance.left + anchorSize.width + this.anchorMargin.left;\n      availableRight = viewportDistance.right - this.anchorMargin.left;\n    } else {\n      availableLeft = viewportDistance.left + this.anchorMargin.left;\n      availableRight =\n          viewportDistance.right + anchorSize.width - this.anchorMargin.left;\n    }\n\n    const isAvailableLeft = availableLeft - surfaceSize.width > 0;\n    const isAvailableRight = availableRight - surfaceSize.width > 0;\n    const isOriginCornerAlignedToEnd =\n        this.hasBit(corner, CornerBit.FLIP_RTL) &&\n        this.hasBit(corner, CornerBit.RIGHT);\n\n    if (isAvailableRight && isOriginCornerAlignedToEnd && isRtl ||\n        !isAvailableLeft && isOriginCornerAlignedToEnd) {\n      // Attach left side of surface to the anchor.\n      corner = this.unsetBit(corner, CornerBit.RIGHT);\n    } else if (\n        isAvailableLeft && isAnchoredToRight && isRtl ||\n        (isAvailableLeft && !isAnchoredToRight && hasRightBit) ||\n        (!isAvailableRight && availableLeft >= availableRight)) {\n      // Attach right side of surface to the anchor.\n      corner = this.setBit(corner, CornerBit.RIGHT);\n    }\n\n    return corner;\n  }\n\n  /**\n   * @param corner Origin corner of the menu surface.\n   * @return Maximum height of the menu surface, based on available space. 0\n   *     indicates should not be set.\n   */\n  private getMenuSurfaceMaxHeight(corner: Corner): number {\n    if (this.maxHeight > 0) {\n      return this.maxHeight;\n    }\n\n    const {viewportDistance} = this.measurements;\n\n    let maxHeight = 0;\n    const isBottomAligned = this.hasBit(corner, CornerBit.BOTTOM);\n    const isBottomAnchored = this.hasBit(this.anchorCorner, CornerBit.BOTTOM);\n    const {MARGIN_TO_EDGE} = MDCMenuSurfaceFoundation.numbers;\n\n    // When maximum height is not specified, it is handled from CSS.\n    if (isBottomAligned) {\n      maxHeight = viewportDistance.top + this.anchorMargin.top - MARGIN_TO_EDGE;\n      if (!isBottomAnchored) {\n        maxHeight += this.measurements.anchorSize.height;\n      }\n    } else {\n      maxHeight = viewportDistance.bottom - this.anchorMargin.bottom +\n          this.measurements.anchorSize.height - MARGIN_TO_EDGE;\n      if (isBottomAnchored) {\n        maxHeight -= this.measurements.anchorSize.height;\n      }\n    }\n\n    return maxHeight;\n  }\n\n  /**\n   * @param corner Origin corner of the menu surface.\n   * @return Horizontal offset of menu surface origin corner from corresponding\n   *     anchor corner.\n   */\n  private getHorizontalOriginOffset(corner: Corner): number {\n    const {anchorSize} = this.measurements;\n\n    // isRightAligned corresponds to using the 'right' property on the surface.\n    const isRightAligned = this.hasBit(corner, CornerBit.RIGHT);\n    const avoidHorizontalOverlap =\n        this.hasBit(this.anchorCorner, CornerBit.RIGHT);\n\n    if (isRightAligned) {\n      const rightOffset = avoidHorizontalOverlap ?\n          anchorSize.width - this.anchorMargin.left :\n          this.anchorMargin.right;\n\n      // For hoisted or fixed elements, adjust the offset by the difference\n      // between viewport width and body width so when we calculate the right\n      // value (`adjustPositionForHoistedElement`) based on the element\n      // position, the right property is correct.\n      if (this.isHoistedElement || this.isFixedPosition) {\n        return rightOffset -\n            (this.measurements.viewportSize.width -\n             this.measurements.bodySize.width);\n      }\n\n      return rightOffset;\n    }\n\n    return avoidHorizontalOverlap ? anchorSize.width - this.anchorMargin.right :\n                                    this.anchorMargin.left;\n  }\n\n  /**\n   * @param corner Origin corner of the menu surface.\n   * @return Vertical offset of menu surface origin corner from corresponding\n   *     anchor corner.\n   */\n  private getVerticalOriginOffset(corner: Corner): number {\n    const {anchorSize} = this.measurements;\n    const isBottomAligned = this.hasBit(corner, CornerBit.BOTTOM);\n    const avoidVerticalOverlap =\n        this.hasBit(this.anchorCorner, CornerBit.BOTTOM);\n\n    let y = 0;\n    if (isBottomAligned) {\n      y = avoidVerticalOverlap ? anchorSize.height - this.anchorMargin.top :\n                                 -this.anchorMargin.bottom;\n    } else {\n      y = avoidVerticalOverlap ?\n          (anchorSize.height + this.anchorMargin.bottom) :\n          this.anchorMargin.top;\n    }\n    return y;\n  }\n\n  /**\n   * Calculates the offsets for positioning the menu-surface when the\n   * menu-surface has been hoisted to the body.\n   */\n  private adjustPositionForHoistedElement(position: Partial<MDCMenuDistance>) {\n    const {windowScroll, viewportDistance, surfaceSize, viewportSize} =\n        this.measurements;\n\n    const props =\n        Object.keys(position) as Array<keyof Partial<MDCMenuDistance>>;\n\n    for (const prop of props) {\n      let value = position[prop] || 0;\n\n      if (this.isHorizontallyCenteredOnViewport &&\n          (prop === 'left' || prop === 'right')) {\n        position[prop] = (viewportSize.width - surfaceSize.width) / 2;\n        continue;\n      }\n\n      // Hoisted surfaces need to have the anchor elements location on the page\n      // added to the position properties for proper alignment on the body.\n      value += viewportDistance[prop];\n\n      // Surfaces that are absolutely positioned need to have additional\n      // calculations for scroll and bottom positioning.\n      if (!this.isFixedPosition) {\n        if (prop === 'top') {\n          value += windowScroll.y;\n        } else if (prop === 'bottom') {\n          value -= windowScroll.y;\n        } else if (prop === 'left') {\n          value += windowScroll.x;\n        } else {  // prop === 'right'\n          value -= windowScroll.x;\n        }\n      }\n\n      position[prop] = value;\n    }\n  }\n\n  /**\n   * The last focused element when the menu surface was opened should regain\n   * focus, if the user is focused on or within the menu surface when it is\n   * closed.\n   */\n  private maybeRestoreFocus() {\n    const isRootFocused = this.adapter.isFocused();\n    const ownerDocument = this.adapter.getOwnerDocument ?\n        this.adapter.getOwnerDocument() :\n        document;\n    const childHasFocus = ownerDocument.activeElement &&\n        this.adapter.isElementInContainer(ownerDocument.activeElement);\n    if (isRootFocused || childHasFocus) {\n      // Wait before restoring focus when closing the menu surface. This is\n      // important because if a touch event triggered the menu close, and the\n      // subsequent mouse event occurs after focus is restored, then the\n      // restored focus would be lost.\n      setTimeout(() => {\n        this.adapter.restoreFocus();\n      }, numbers.TOUCH_EVENT_WAIT_MS);\n    }\n  }\n\n  private hasBit(corner: Corner, bit: CornerBit): boolean {\n    return Boolean(corner & bit);  // tslint:disable-line:no-bitwise\n  }\n\n  private setBit(corner: Corner, bit: CornerBit): Corner {\n    return corner | bit;  // tslint:disable-line:no-bitwise\n  }\n\n  private unsetBit(corner: Corner, bit: CornerBit): Corner {\n    return corner ^ bit;\n  }\n\n  /**\n   * isFinite that doesn't force conversion to number type.\n   * Equivalent to Number.isFinite in ES2015, which is not supported in IE.\n   */\n  private isFinite(num: number): boolean {\n    return typeof num === 'number' && isFinite(num);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCMenuSurfaceFoundation;\n"
  },
  {
    "path": "packages/mdc-menu-surface/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-menu-surface/mdc-menu-surface.import.scss",
    "content": "@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"variables\" as mdc-menu-surface-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"mixins\" as mdc-menu-surface-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"mdc-menu-surface\";\n"
  },
  {
    "path": "packages/mdc-menu-surface/mdc-menu-surface.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './menusurface';\n@include menusurface.core-styles;\n"
  },
  {
    "path": "packages/mdc-menu-surface/package.json",
    "content": "{\n  \"name\": \"@material/menu-surface\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web menu surface component\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"menu surface\"\n  ],\n  \"main\": \"dist/mdc.menuSurface.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-menu-surface\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-menu-surface/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {getCorrectPropertyName} from '@material/animation/util';\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {Corner, cssClasses, strings} from '../constants';\nimport {MDCMenuSurface, MDCMenuSurfaceFoundation} from '../index';\n\nfunction getFixture(open = false, fixedPosition = false) {\n  const openClass = open ? 'mdc-menu-surface--open' : '';\n  const fixedClass = fixedPosition ? 'mdc-menu-surface--fixed' : '';\n\n  return createFixture(html`\n    <div class=\"mdc-menu-surface ${openClass} ${fixedClass}\" tabindex=\"-1\">\n      <ul class=\"mdc-deprecated-list\" role=\"menu\">\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\" tabindex=\"0\">Item</a>\n        <li role=\"separator\"></li>\n        <li class=\"mdc-deprecated-list-item\" role=\"menuitem\" tabindex=\"0\">Another Item</a>\n      </nav>\n    </div>\n  `);\n}\n\nfunction getAnchorFixture(menuFixture: HTMLElement) {\n  const anchorEl = createFixture(html`\n    <div class=\"mdc-menu-surface--anchor\">\n      <button class=\"mdc-button\">Open</button>\n    </div>\n  `);\n\n  anchorEl.appendChild(menuFixture);\n  return anchorEl;\n}\n\nfunction setupTest(\n    {open = false, fixedPosition = false, withAnchor = false} = {}) {\n  const root = getFixture(open, fixedPosition);\n  const mockFoundation = createMockFoundation(MDCMenuSurfaceFoundation);\n  const anchor = withAnchor ? getAnchorFixture(root) : undefined;\n  const component = new MDCMenuSurface(root, mockFoundation);\n  return {root, mockFoundation, anchor, component};\n}\n\ndescribe('MDCMenuSurface', () => {\n  it('attachTo initializes and returns a MDCMenuSurface instance', () => {\n    expect(MDCMenuSurface.attachTo(getFixture()) instanceof MDCMenuSurface)\n        .toBe(true);\n  });\n\n  it('initialSyncWithDOM registers key handler on the menu surface', () => {\n    const {root, component, mockFoundation} = setupTest();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.any(Event));\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n    component.destroy();\n  });\n\n  it('destroy deregisters key handler on the menu surface', () => {\n    const {root, component, mockFoundation} = setupTest();\n    component.destroy();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n  });\n\n  it('#isOpen', () => {\n    const {component, mockFoundation} = setupTest();\n    mockFoundation.isOpen.and.returnValue(true);\n    expect(component.isOpen()).toBe(true);\n\n    mockFoundation.isOpen.and.returnValue(false);\n    expect(component.isOpen()).toBe(false);\n  });\n\n  it('#open opens the menu surface', () => {\n    const {component, mockFoundation} = setupTest();\n    component.open();\n    expect(mockFoundation.open).toHaveBeenCalled();\n  });\n\n  it('#open calling open on button click does not close quick menu', () => {\n    const {root} = setupTest();\n    // not using mock as this case fails on integration rather than unit\n    const component = new MDCMenuSurface(root);\n    const button = document.createElement('button');\n    const listener = () => {\n      component.open();\n    };\n    let numTimesClosedCalled = 0;\n\n    button.addEventListener('click', listener);\n    root.addEventListener(strings.CLOSED_EVENT, () => {\n      numTimesClosedCalled += 1;\n    });\n    component.quickOpen = true;\n    document.body.appendChild(button);\n\n\n    expect(numTimesClosedCalled).toEqual(0);\n    emitEvent(button, 'click', {bubbles: true});\n    document.body.removeChild(button);\n\n    expect(component.isOpen()).toEqual(true);\n    expect(numTimesClosedCalled).toEqual(0);\n\n    component.destroy();\n  });\n\n  it(`${strings.OPENED_EVENT} causes the body click handler to be registered`,\n     () => {\n       const {root, mockFoundation} = setupTest();\n       emitEvent(root, strings.OPENED_EVENT);\n       emitEvent(document.body, 'click');\n       expect(mockFoundation.handleBodyClick)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleBodyClick).toHaveBeenCalledTimes(1);\n     });\n\n  it('#open does not throw error if no focusable elements', () => {\n    const {root, component, mockFoundation} = setupTest();\n\n    while (root.firstChild) {\n      root.removeChild(root.firstChild);\n    }\n\n    expect(() => {\n      component.open();\n    }).not.toThrow();\n    expect(mockFoundation.open).toHaveBeenCalled();\n  });\n\n  it('#close closes the menu surface', () => {\n    const {component, mockFoundation} = setupTest();\n    component.close();\n    expect(mockFoundation.close)\n        .toHaveBeenCalledWith(/* skipRestoreFocus */ false);\n  });\n\n  it(`${strings.CLOSED_EVENT} causes the body click handler to be deregistered`,\n     () => {\n       const {root, mockFoundation} = setupTest();\n       emitEvent(root, strings.OPENED_EVENT);\n       emitEvent(root, strings.CLOSED_EVENT);\n       emitEvent(document.body, 'click');\n       expect(mockFoundation.handleBodyClick)\n           .not.toHaveBeenCalledWith(jasmine.any(Event));\n     });\n\n  it('setMenuSurfaceAnchorElement', () => {\n    const {component} = setupTest();\n    const myElement = {} as unknown as Element;\n    component.setMenuSurfaceAnchorElement(myElement);\n    expect(component.anchorElement).toEqual(myElement);\n  });\n\n  it('anchorElement is properly initialized when the DOM contains an anchor',\n     () => {\n       const {component, anchor} = setupTest({withAnchor: true});\n       expect(component.anchorElement).toEqual(anchor as HTMLElement);\n     });\n\n  it('setIsHoisted', () => {\n    const {component, mockFoundation} = setupTest();\n    component.setIsHoisted(true);\n    expect(mockFoundation.setIsHoisted).toHaveBeenCalledWith(true);\n  });\n\n  it('setFixedPosition is called when CSS class is present', () => {\n    const {mockFoundation} = setupTest({fixedPosition: true});\n    expect(mockFoundation.setFixedPosition).toHaveBeenCalledWith(true);\n  });\n\n  it('setFixedPosition is true', () => {\n    const {root, component, mockFoundation} = setupTest();\n    component.setFixedPosition(true);\n    expect(root).toHaveClass(cssClasses.FIXED);\n    expect(mockFoundation.setFixedPosition).toHaveBeenCalledWith(true);\n  });\n\n  it('setFixedPosition is false', () => {\n    const {root, component, mockFoundation} = setupTest();\n    component.setFixedPosition(false);\n    expect(root).not.toHaveClass(cssClasses.FIXED);\n    expect(mockFoundation.setFixedPosition).toHaveBeenCalledWith(false);\n  });\n\n  it('setAbsolutePosition calls the foundation setAbsolutePosition function',\n     () => {\n       const {component, mockFoundation} = setupTest();\n       component.setAbsolutePosition(10, 10);\n       expect(mockFoundation.setAbsolutePosition).toHaveBeenCalledWith(10, 10);\n       expect(mockFoundation.setIsHoisted).toHaveBeenCalledWith(true);\n     });\n\n  it('setAnchorCorner', () => {\n    const {component, mockFoundation} = setupTest();\n    component.setAnchorCorner(Corner.TOP_START);\n    expect(mockFoundation.setAnchorCorner)\n        .toHaveBeenCalledWith(Corner.TOP_START);\n  });\n\n  it('setAnchorMargin with all object properties defined', () => {\n    const {component, mockFoundation} = setupTest();\n    component.setAnchorMargin({top: 0, right: 0, bottom: 0, left: 0});\n    expect(mockFoundation.setAnchorMargin)\n        .toHaveBeenCalledWith({top: 0, right: 0, bottom: 0, left: 0});\n  });\n\n  it('setAnchorMargin with empty object', () => {\n    const {component, mockFoundation} = setupTest();\n    component.setAnchorMargin({});\n    expect(mockFoundation.setAnchorMargin).toHaveBeenCalledWith({});\n  });\n\n  it('setQuickOpen', () => {\n    const {component, mockFoundation} = setupTest();\n    component.quickOpen = false;\n    expect(mockFoundation.setQuickOpen).toHaveBeenCalledWith(false);\n  });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#hasClass returns true if the root element has specified class',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('adapter#hasClass returns false if the root element does not have specified class',\n     () => {\n       const {component} = setupTest();\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(false);\n     });\n\n  it('adapter#getInnerDimensions returns the dimensions of the container',\n     () => {\n       const {root, component} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getInnerDimensions()\n                  .width)\n           .toEqual(root.offsetWidth);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getInnerDimensions()\n                  .height)\n           .toEqual(root.offsetHeight);\n     });\n\n  it(`adapter#notifyClose fires an ${strings.CLOSED_EVENT} custom event`,\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('notifyClose handler');\n       root.addEventListener(strings.CLOSED_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClose();\n       expect(handler).toHaveBeenCalled();\n     });\n\n  it(`adapter#notifyClosing fires an ${strings.CLOSING_EVENT} custom event`,\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('notifyClosing handler');\n       root.addEventListener(strings.CLOSING_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClosing();\n       expect(handler).toHaveBeenCalled();\n     });\n\n  it(`adapter#notifyOpen fires an ${strings.OPENED_EVENT} custom event`, () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('notifyOpen handler');\n    root.addEventListener(strings.OPENED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpen();\n    expect(handler).toHaveBeenCalled();\n  });\n\n  it(`adapter#notifyOpening fires an ${strings.OPENING_EVENT} custom event`,\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('notifyOpening handler');\n       root.addEventListener(strings.OPENING_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyOpening();\n       expect(handler).toHaveBeenCalled();\n     });\n\n  it('adapter#restoreFocus restores focus saved by adapter#saveFocus', () => {\n    const {root, component} = setupTest({open: true});\n    const button = document.createElement('button');\n    document.body.appendChild(button);\n    document.body.appendChild(root);\n    button.focus();\n    (component.getDefaultFoundation() as any).adapter.saveFocus();\n    root.focus();\n    (component.getDefaultFoundation() as any).adapter.restoreFocus();\n    expect(document.activeElement).toEqual(button);\n    document.body.removeChild(button);\n    document.body.removeChild(root);\n  });\n\n  it('adapter#restoreFocus does not restore focus if never called adapter#saveFocus',\n     () => {\n       const {root, component} = setupTest({open: true});\n       const button = document.createElement('button');\n       document.body.appendChild(button);\n       document.body.appendChild(root);\n       button.focus();\n       root.focus();\n       (component.getDefaultFoundation() as any).adapter.restoreFocus();\n       expect(document.activeElement).toEqual(root);\n       document.body.removeChild(button);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#restoreFocus does nothing if the active focused element is not in the menu-surface',\n     () => {\n       const {root, component} = setupTest({open: true});\n       const button = document.createElement('button');\n       document.body.appendChild(button);\n       document.body.appendChild(root);\n       button.focus();\n       (component.getDefaultFoundation() as any).adapter.restoreFocus();\n       expect(document.activeElement).toEqual(button);\n       document.body.removeChild(button);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#isFocused returns whether the menu surface is focused', () => {\n    const {root, component} = setupTest({open: true});\n    document.body.appendChild(root);\n    root.focus();\n    expect((component.getDefaultFoundation() as any).adapter.isFocused())\n        .toBe(true);\n    document.body.removeChild(root);\n  });\n\n  it('adapter#hasAnchor returns true if the menu surface has an anchor', () => {\n    const {component} = setupTest({open: true, withAnchor: true});\n    component.initialSyncWithDOM();\n    expect((component.getDefaultFoundation() as any).adapter.hasAnchor())\n        .toBe(true);\n  });\n\n  it('adapter#hasAnchor returns false if it does not have an anchor', () => {\n    const {root, component} = setupTest({open: true});\n    const notAnAnchor = document.createElement('div');\n    notAnAnchor.appendChild(root);\n    component.initialSyncWithDOM();\n    expect((component.getDefaultFoundation() as any).adapter.hasAnchor())\n        .toBe(false);\n  });\n\n  it('adapter#getAnchorDimensions returns the dimensions of the anchor element',\n     () => {\n       const {component, anchor} = setupTest({open: true, withAnchor: true}) as\n           {component: MDCMenuSurface, anchor: HTMLElement};\n       anchor.style.height = '21px';\n       anchor.style.width = '42px';\n       document.body.appendChild(anchor);\n       component.initialSyncWithDOM();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getAnchorDimensions()\n                  .height)\n           .toBeCloseTo(21);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getAnchorDimensions()\n                  .width)\n           .toBeCloseTo(42);\n       document.body.removeChild(anchor);\n     });\n\n  it('adapter#getAnchorDimensions returns undefined if there is no anchor element',\n     () => {\n       const {root, component} = setupTest({open: true});\n       document.body.appendChild(root);\n       component.initialSyncWithDOM();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getAnchorDimensions())\n           .toBe(null);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#getViewportDimensions returns the dimensions of the window',\n     () => {\n       const {root, component} = setupTest({open: true});\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getViewportDimensions()\n                  .height)\n           .toEqual(window.innerHeight);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getViewportDimensions()\n                  .width)\n           .toEqual(window.innerWidth);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#getBodyDimensions returns the body dimensions', () => {\n    const {root, component} = setupTest({open: true});\n    document.body.appendChild(root);\n    expect((component.getDefaultFoundation() as any)\n               .adapter.getBodyDimensions()\n               .height)\n        .toEqual(document.body.clientHeight);\n    expect((component.getDefaultFoundation() as any)\n               .adapter.getBodyDimensions()\n               .width)\n        .toEqual(document.body.clientWidth);\n    document.body.removeChild(root);\n  });\n\n  it('adapter#getWindowScroll returns the scroll position of the window when not scrolled',\n     () => {\n       const {root, component} = setupTest({open: true});\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getWindowScroll()\n                  .x)\n           .toEqual(window.pageXOffset);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getWindowScroll()\n                  .y)\n           .toEqual(window.pageYOffset);\n       document.body.removeChild(root);\n     });\n\n  it('adapter#isRtl returns true for RTL documents', () => {\n    const {component, anchor} = setupTest({open: true, withAnchor: true}) as\n        {component: MDCMenuSurface, anchor: HTMLElement};\n    anchor.setAttribute('dir', 'rtl');\n    document.body.appendChild(anchor);\n    expect((component.getDefaultFoundation() as any).adapter.isRtl())\n        .toBe(true);\n    document.body.removeChild(anchor);\n  });\n\n  it('adapter#isRtl returns false for explicit LTR documents', () => {\n    const {component, anchor} = setupTest({open: true, withAnchor: true}) as\n        {component: MDCMenuSurface, anchor: HTMLElement};\n    anchor.setAttribute('dir', 'ltr');\n    document.body.appendChild(anchor);\n    expect((component.getDefaultFoundation() as any).adapter.isRtl())\n        .toBe(false);\n    document.body.removeChild(anchor);\n  });\n\n  it('adapter#isRtl returns false for implicit LTR documents', () => {\n    const {component, anchor} = setupTest({open: true, withAnchor: true}) as\n        {component: MDCMenuSurface, anchor: HTMLElement};\n    document.body.appendChild(anchor);\n    expect((component.getDefaultFoundation() as any).adapter.isRtl())\n        .toBe(false);\n    document.body.removeChild(anchor);\n  });\n\n  it('adapter#isElementInContainer returns true if element is in the menu surface',\n     () => {\n       const {root, component, anchor} =\n           setupTest({open: true, withAnchor: true}) as\n           {root: HTMLElement, component: MDCMenuSurface, anchor: HTMLElement};\n       const button = document.createElement('button');\n       root.appendChild(button);\n       document.body.appendChild(anchor);\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isElementInContainer(button))\n           .toBe(true);\n       document.body.removeChild(anchor);\n     });\n\n  it('adapter#isElementInContainer returns true if element is the menu surface',\n     () => {\n       const {root, component, anchor} =\n           setupTest({open: true, withAnchor: true}) as\n           {root: HTMLElement, component: MDCMenuSurface, anchor: HTMLElement};\n       document.body.appendChild(anchor);\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isElementInContainer(root))\n           .toBe(true);\n       document.body.removeChild(anchor);\n     });\n\n  it('adapter#isElementInContainer returns false if element is not in the menu surface',\n     () => {\n       const {component, anchor} = setupTest({open: true, withAnchor: true}) as\n           {component: MDCMenuSurface, anchor: HTMLElement};\n       document.body.appendChild(anchor);\n       const button = document.createElement('button');\n       document.body.appendChild(button);\n\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isElementInContainer(button))\n           .toBe(false);\n       document.body.removeChild(anchor);\n       document.body.removeChild(button);\n     });\n\n  it('adapter#setTransformOrigin sets the correct transform origin on the menu surface element',\n     () => {\n       const {root, component} = setupTest();\n       // Write expected value and read canonical value from browser.\n       root.style.transformOrigin = 'left top 10px';\n       const expected = root.style.getPropertyValue(\n           `${getCorrectPropertyName(window, 'transform')}-origin`);\n       // Reset value.\n       root.style.transformOrigin = '';\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setTransformOrigin('left top 10px');\n       expect(root.style.getPropertyValue(\n                  `${getCorrectPropertyName(window, 'transform')}-origin`))\n           .toEqual(expected);\n     });\n\n  it('adapter#setPosition sets the correct position on the menu surface element',\n     () => {\n       const {root, component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setPosition({top: 10, left: 11});\n       expect(root.style.top).toEqual('10px');\n       expect(root.style.left).toEqual('11px');\n       (component.getDefaultFoundation() as any)\n           .adapter.setPosition({bottom: 10, right: 11});\n       expect(root.style.bottom).toEqual('10px');\n       expect(root.style.right).toEqual('11px');\n     });\n\n  it('adapter#setMaxHeight sets the maxHeight style on the menu surface element',\n     () => {\n       const {root, component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.setMaxHeight('100px');\n       expect(root.style.maxHeight).toEqual('100px');\n     });\n\n  it('adapter#registerWindowEventHandler uses the handler as a window resize listener',\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('resizeListener');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerWindowEventHandler('resize', handler);\n       emitEvent(window, 'resize');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n       window.removeEventListener('resize', handler);\n     });\n\n  it('adapter#deregisterWindowEventHandler unlistens the handler for window resize',\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('resizeListener');\n       window.addEventListener('resize', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterWindowEventHandler('resize', handler);\n       emitEvent(window, 'resize');\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n       // Just to be safe\n       window.removeEventListener('resize', handler);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-menu-surface/test/feature-targeting-any.test.scss",
    "content": "@use '../menusurface';\n@use '../menusurface-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include menusurface.core-styles($query: $query);\n    @include menusurface-theme.fill-color(surface, $query: $query);\n    @include menusurface-theme.ink-color(on-surface, $query: $query);\n    @include menusurface-theme.shape-radius(medium, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-menu-surface/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {Corner, cssClasses, numbers, strings} from '../constants';\nimport {MDCMenuSurfaceFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} =\n      setUpFoundationTest(MDCMenuSurfaceFoundation);\n  const size = {width: 500, height: 200};\n  mockAdapter.hasClass.withArgs(cssClasses.ROOT).and.returnValue(true);\n  mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(false);\n  mockAdapter.getViewportDimensions.and.returnValue(\n      {width: window.innerWidth, height: window.innerHeight});\n  mockAdapter.getInnerDimensions.and.returnValue(size);\n\n  return {foundation, mockAdapter};\n}\n\ninterface WithIsSurfaceOpen {\n  isSurfaceOpen: boolean;\n}\n\n// Various anchor dimensions.\ninterface AnchorDimension {\n  height: number;\n  width: number;\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n}\nconst smallTopLeft: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 20,\n  bottom: 40,\n  left: 20,\n  right: 60\n};\nconst smallTopRight: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 20,\n  bottom: 40,\n  left: 920,\n  right: 960\n};\nconst smallBottomLeft: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 920,\n  bottom: 940,\n  left: 20,\n  right: 60\n};\nconst smallBottomRight: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 920,\n  bottom: 940,\n  left: 920,\n  right: 960\n};\nconst smallCenter: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 490,\n  bottom: 510,\n  left: 480,\n  right: 520\n};\nconst smallAboveMiddleLeft: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 400,\n  bottom: 420,\n  left: 20,\n  right: 60\n};\nconst smallBelowMiddleLeft: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 600,\n  bottom: 620,\n  left: 20,\n  right: 60\n};\nconst wideCenter: AnchorDimension = {\n  height: 20,\n  width: 150,\n  top: 490,\n  bottom: 510,\n  left: 450,\n  right: 600\n};\nconst wideTopLeft: AnchorDimension = {\n  height: 20,\n  width: 150,\n  top: 20,\n  bottom: 40,\n  left: 20,\n  right: 170\n};\nconst closeToBottom: AnchorDimension = {\n  height: 20,\n  width: 40,\n  top: 800,\n  bottom: 820,\n  left: 480,\n  right: 520\n};\n\n/**\n * Initializes viewport, anchor and menu surface dimensions. Viewport is\n * 1000x1000. Default surface size is 100x200.\n * @param mockAdapter Mock double for the adapter.\n * @param anchorDimensions Approximate viewport corner where anchor is located.\n * @param isRtl Indicates whether layout is RTL.\n * @param menuSurfaceHeight Optional height of the menu surface.\n * @param scrollValue Optional scroll values of the page.\n */\nfunction initAnchorLayout(\n    mockAdapter: any, anchorDimensions: AnchorDimension, isRtl = false,\n    menuSurfaceHeight = 200, scrollValue = {\n      x: 0,\n      y: 0\n    }) {\n  mockAdapter.hasAnchor.and.returnValue(true);\n  mockAdapter.getViewportDimensions.and.returnValue(\n      {height: 1000, width: 1000});\n  mockAdapter.getAnchorDimensions.and.returnValue(anchorDimensions);\n  mockAdapter.isRtl.and.returnValue(isRtl);\n  mockAdapter.getInnerDimensions.and.returnValue(\n      {height: menuSurfaceHeight, width: 100});\n  mockAdapter.getBodyDimensions.and.returnValue({height: 1000, width: 1000});\n  mockAdapter.getWindowScroll.and.returnValue(scrollValue);\n}\n\nfunction testFoundation(desc: string, runTests: ({mockAdapter, foundation}: {\n                                        mockAdapter: any,\n                                        foundation: MDCMenuSurfaceFoundation,\n                                      }) => void) {\n  it(desc, () => {\n    const {mockAdapter, foundation} = setupTest();\n    runTests({mockAdapter, foundation});\n  });\n}\n\ndescribe('MDCMenuSurfaceFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports strings', () => {\n    expect(MDCMenuSurfaceFoundation.strings).toEqual(strings);\n  });\n\n  it('exports cssClasses', () => {\n    expect(MDCMenuSurfaceFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCMenuSurfaceFoundation.numbers).toEqual(numbers);\n  });\n\n  it('exports Corner', () => {\n    expect(MDCMenuSurfaceFoundation.Corner).toEqual(Corner);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCMenuSurfaceFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'hasAnchor',\n      'notifyClose',\n      'notifyClosing',\n      'notifyOpen',\n      'notifyOpening',\n      'isElementInContainer',\n      'isRtl',\n      'setTransformOrigin',\n      'isFocused',\n      'saveFocus',\n      'restoreFocus',\n      'getInnerDimensions',\n      'getAnchorDimensions',\n      'getViewportDimensions',\n      'getBodyDimensions',\n      'getWindowScroll',\n      'setPosition',\n      'setMaxHeight',\n      'registerWindowEventHandler',\n      'deregisterWindowEventHandler'\n    ]);\n  });\n\n  it('#init throws error when the root class is not present', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCMenuSurfaceFoundation);\n    mockAdapter.hasClass.withArgs(cssClasses.ROOT).and.returnValue(false);\n    expect(() => {\n      foundation.init();\n    }).toThrow();\n  });\n\n  testFoundation(\n      '#open adds the animation class to start an animation',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        expect(mockAdapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_OPEN);\n        expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n      });\n\n  testFoundation(\n      '#open does not add the animation class to start an animation when setQuickOpen is true',\n      ({foundation, mockAdapter}) => {\n        foundation.setQuickOpen(true);\n        foundation.open();\n        expect(mockAdapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.ANIMATING_OPEN);\n        expect(mockAdapter.removeClass)\n            .not.toHaveBeenCalledWith(cssClasses.ANIMATING_OPEN);\n      });\n\n  testFoundation(\n      '#open adds the open class to the menu surface',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n      });\n\n  testFoundation(\n      '#open removes the animation class at the end of the animation',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        expect(mockAdapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_OPEN);\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n        jasmine.clock().tick(numbers.TRANSITION_OPEN_DURATION);\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_OPEN);\n      });\n\n  testFoundation(\n      '#open emits the opening event at the beginning of the animation',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        expect(mockAdapter.notifyOpening).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#open emits the open event at the end of the animation',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(numbers.TRANSITION_OPEN_DURATION);\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.notifyOpen).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#open emits the open event when setQuickOpen is true',\n      ({foundation, mockAdapter}) => {\n        foundation.setQuickOpen(true);\n        foundation.open();\n        expect(mockAdapter.notifyOpen).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#open does not emit event when already closed',\n      ({foundation, mockAdapter}) => {\n        foundation.setQuickOpen(true);\n        foundation.open();\n        foundation.open();\n        expect(mockAdapter.notifyOpen).toHaveBeenCalledTimes(1);\n      });\n\n  /** Testing various layout cases for autopositioning */\n  testFoundation(\n      '#open from small anchor in center of viewport, default (TOP_START) anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter, true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from small anchor in center of viewport, TOP_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter, true);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 40, top: 0});\n      });\n\n  testFoundation(\n      '#open from small anchor in center of viewport, BOTTOM_START anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in center of viewport, BOTTOM_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 40, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, default (TOP_START) anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, TOP_END anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 40, top: 0});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, BOTTOM_START anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, BOTTOM_END anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.setAnchorCorner(Corner.BOTTOM_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 40, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in right bottom of viewport, default (TOP_START) anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomRight);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, bottom: -0});\n      });\n\n  testFoundation(\n      '#open from small anchor in right bottom of viewport, TOP_END anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomRight);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 40, bottom: -0});\n      });\n\n  testFoundation(\n      '#open from small anchor in right bottom of viewport, BOTTOM_START anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomRight);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, bottom: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in right bottom of viewport, BOTTOM_END anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomRight);\n        foundation.setAnchorCorner(Corner.BOTTOM_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 40, bottom: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, fixed position, no scroll',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true);\n        foundation.setFixedPosition(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 20, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, absolute position, no scroll',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from anchor in top left of viewport, absolute position, hoisted menu surface, no scroll',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true);\n        foundation.setIsHoisted(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 20, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, fixed position, scrollX/scrollY 5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        foundation.setFixedPosition(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 20, top: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in top left of viewport, absolute position, scrollX/scrollY 5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from anchor in top left of viewport, absolute position, hoisted menu surface, scrollX/scrollY ' +\n          '5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        foundation.setIsHoisted(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 25, top: 30});\n      });\n\n  testFoundation(\n      '#open from anchor in top left of viewport, absolute position, hoisted menu surface, horizontally centered on viewport ' +\n          '5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        foundation.setIsHoisted(true);\n        foundation.setIsHorizontallyCenteredOnViewport(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({\n          left: (mockAdapter.getViewportDimensions().width - 100) / 2,\n          top: 30\n        });\n      });\n\n  testFoundation(\n      '#open in absolute position at x/y=100, absolute position, hoisted menu surface, scrollX/scrollY ' +\n          '5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        mockAdapter.hasAnchor.and.returnValue(false);\n        mockAdapter.getAnchorDimensions.and.returnValue(undefined);\n        foundation.setIsHoisted(true);\n        foundation.setAbsolutePosition(100, 100);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 105, top: 110});\n      });\n\n  testFoundation(\n      '#open in absolute position at x/y=100, fixed position, hoisted menu surface, scrollY/scrollY 5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        mockAdapter.hasAnchor.and.returnValue(false);\n        mockAdapter.getAnchorDimensions.and.returnValue(undefined);\n        foundation.setIsHoisted(true);\n        foundation.setFixedPosition(true);\n        foundation.setAbsolutePosition(100, 100);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 100, top: 100});\n      });\n\n  testFoundation(\n      '#open in absolute position at x/y=INF, fixed position, hoisted menu surface, scrollY/scrollY 5px/10px',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, true, 200, {x: 5, y: 10});\n        mockAdapter.hasAnchor.and.returnValue(false);\n        mockAdapter.getAnchorDimensions.and.returnValue(undefined);\n        foundation.setIsHoisted(true);\n        foundation.setFixedPosition(true);\n        foundation.setAbsolutePosition(\n            Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from small anchor in left bottom of viewport, default (TOP_START) anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft, true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, bottom: -0});\n      });\n\n  testFoundation(\n      '#open from small anchor in left bottom of viewport, TOP_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft, true);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 40, bottom: -0});\n      });\n\n  testFoundation(\n      '#open from small anchor in left bottom of viewport, BOTTOM_START anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, bottom: 20});\n      });\n\n  testFoundation(\n      '#open from small anchor in left bottom of viewport, BOTTOM_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 40, bottom: 20});\n      });\n\n  testFoundation(\n      '#open tall surface restricts max height if set',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallAboveMiddleLeft, false, 700);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.setMaxHeight(150);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setMaxHeight).toHaveBeenCalledWith('150px');\n      });\n\n  testFoundation(\n      '#open tall surface from small anchor in left above middle of viewport, BOTTOM_START anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallAboveMiddleLeft, false, 700);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, top: 20});\n        expect(mockAdapter.setMaxHeight).toHaveBeenCalledWith('548px');\n      });\n\n  testFoundation(\n      '#open tall surface from small anchor in left below middle of viewport, BOTTOM_START anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBelowMiddleLeft, false, 700);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, bottom: 20});\n        expect(mockAdapter.setMaxHeight).toHaveBeenCalledWith('568px');\n      });\n\n  testFoundation(\n      '#open from wide anchor center of viewport, TOP_START anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideCenter);\n        foundation.setAnchorCorner(Corner.TOP_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open from wide anchor center of viewport, TOP_END anchor corner, LTR',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideCenter);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 150, top: 0});\n      });\n\n  testFoundation(\n      '#open from wide anchor center of viewport, BOTTOM_START anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideCenter, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 20});\n      });\n\n  testFoundation(\n      '#open from anchor center of viewport with large menu surface height, ' +\n          'BOTTOM_START anchor corner',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideCenter, true, 500);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 20});\n      });\n\n  testFoundation(\n      '#open from wide anchor center of viewport, BOTTOM_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideCenter, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 150, top: 20});\n      });\n\n  testFoundation(\n      '#open from wide anchor top left of viewport, TOP_END anchor corner, RTL',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideTopLeft, true);\n        foundation.setAnchorCorner(Corner.TOP_END);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 150, top: 0});\n      });\n\n  testFoundation(\n      '#open anchors the surface to the bottom left in LTR when not close to the bottom edge with margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.setAnchorMargin({left: 7, bottom: 10});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 7, top: 30});\n      });\n\n  testFoundation(\n      '#open anchors the surface to the bottom left in LTR when close to the bottom edge with margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.setAnchorMargin({top: 5, left: 7, bottom: 10});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 7, bottom: 15});\n      });\n\n  testFoundation(\n      '#open anchors the surface to the bottom left in RTL when close to the bottom & right edge with margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomRight, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.setAnchorMargin({top: 5, bottom: 10, right: 7});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 7, bottom: 15});\n      });\n\n  testFoundation(\n      '#open anchors the surface to the top right in RTL when close to the top & right edge with margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, true);\n        foundation.setAnchorCorner(Corner.TOP_START);\n        foundation.setAnchorMargin({right: 7, top: 5});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 7, top: 5});\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n      });\n\n  testFoundation(\n      '#open anchors hoisted surface to top right in RTL when near top right edge w/ margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, true);\n        foundation.setAnchorCorner(Corner.TOP_START);\n        foundation.setAnchorMargin({right: 7, top: 5});\n        foundation.setIsHoisted(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 47, top: 25});\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n      });\n\n  testFoundation(\n      '#open anchors hoisted surface to bottom left in RTL when near bottom left edge w/ margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft, true);\n        foundation.setAnchorCorner(Corner.BOTTOM_START);\n        foundation.setAnchorMargin({left: 7, bottom: 5});\n        foundation.setIsHoisted(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 27, bottom: 80});\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n      });\n\n  testFoundation(\n      '#open anchors fixed-position surface to top right in RTL when near top right edge w/ margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, true);\n        foundation.setAnchorCorner(Corner.TOP_START);\n        foundation.setAnchorMargin({right: 7, top: 5});\n        foundation.setFixedPosition(true);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 47, top: 25});\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n      });\n\n  testFoundation(\n      '#open anchors absolutely-position surface to top right in RTL when near top right edge w/ margin',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, true);\n        foundation.setAnchorCorner(Corner.TOP_START);\n        foundation.setAnchorMargin({right: 7, top: 5});\n        foundation.setIsHoisted(false);\n        foundation.setFixedPosition(false);\n        foundation.setAbsolutePosition(0, 0);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 7, top: 5});\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n      });\n\n  testFoundation(\n      'Should return the correct fixed position status', ({foundation}) => {\n        expect(foundation.isFixed()).toBeFalse();\n        foundation.setFixedPosition(true);\n        expect(foundation.isFixed()).toBeTrue();\n      });\n\n  testFoundation(\n      '#open from close to bottom of viewport, menu should autoposition to open upwards',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, closeToBottom);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('left bottom');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: 0, bottom: -0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from right side in LTR when corner is flipped horizontally.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from right side in LTR when corner is flipped horizontally and anchor is wider than menu.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, wideTopLeft);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('center top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from left side in LTR when corner is flipped horizontally and space is not available on the left side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from right side in LTR when corner is flipped horizontally and space is not available on the right side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is still positioned from right side in LTR when corner is flipped horizontally with anchor margin to provide enough space on the left side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.flipCornerHorizontally();\n        // Set the displacement far enough to account for the surface width.\n        const xDisplacement = 113;\n        foundation.setAnchorMargin(\n            {left: xDisplacement, right: -xDisplacement});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: -xDisplacement, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from left side in RTL when corner is flipped horizontally.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallCenter, /* isRtl */ true);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from left side in RTL when corner is flipped horizontally and space is not available on the left side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft, /* isRtl */ true);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition).toHaveBeenCalledWith({left: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is positioned from right side in RTL when corner is flipped horizontally and space is not available on the right side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, /* isRtl */ true);\n        foundation.flipCornerHorizontally();\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin)\n            .toHaveBeenCalledWith('right top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({right: 0, top: 0});\n      });\n\n  testFoundation(\n      '#open Surface is still positioned from left side in RTL when corner is flipped horizontally with anchor margin to provide enough space on the right side.',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopRight, /* isRtl */ true);\n        foundation.flipCornerHorizontally();\n        // Set the displacement far enough to account for the surface width.\n        const xDisplacement = 113;\n        foundation.setAnchorMargin(\n            {left: -xDisplacement, right: xDisplacement});\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setTransformOrigin).toHaveBeenCalledWith('left top');\n        expect(mockAdapter.setPosition)\n            .toHaveBeenCalledWith({left: -xDisplacement, top: 0});\n      });\n\n  testFoundation(\n      '#open adds the open-below class to the menu surface, from small anchor in top of viewport',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallTopLeft);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.IS_OPEN_BELOW);\n      });\n\n  testFoundation(\n      '#open does not add the open-below class to the menu surface, from small anchor in bottom of viewport',\n      ({foundation, mockAdapter}) => {\n        initAnchorLayout(mockAdapter, smallBottomLeft);\n        foundation.open();\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.IS_OPEN_BELOW);\n      });\n\n  testFoundation(\n      '#open registers window resize listener', ({foundation, mockAdapter}) => {\n        foundation.open();\n        expect(mockAdapter.registerWindowEventHandler).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close adds the animation class to start an animation',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.close();\n        expect(mockAdapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_CLOSED);\n      });\n\n  testFoundation(\n      '#close does not add animation class if quickOpen is set to true',\n      ({foundation, mockAdapter}) => {\n        foundation.setQuickOpen(true);\n        foundation.close();\n        expect(mockAdapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.ANIMATING_CLOSED);\n        expect(mockAdapter.removeClass)\n            .not.toHaveBeenCalledWith(cssClasses.ANIMATING_CLOSED);\n      });\n\n  testFoundation(\n      '#close removes the open class from the menu surface',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.close();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n      });\n\n  testFoundation(\n      '#close removes the animation class at the end of the animation',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.close();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_CLOSED);\n        jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.ANIMATING_CLOSED);\n        expect(mockAdapter.notifyClose).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close emits the close event at the end of the animation',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.close();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.notifyClose).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close emits the closing event immediately',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.close();\n        expect(mockAdapter.notifyClosing).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close emits the close event when quickOpen is true',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        foundation.setQuickOpen(true);\n        foundation.close();\n        expect(mockAdapter.notifyClose).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close does not emit event when already closed',\n      ({foundation, mockAdapter}) => {\n        foundation.setQuickOpen(true);\n        foundation.close();\n        expect(mockAdapter.notifyClose).toHaveBeenCalledTimes(0);\n      });\n\n  testFoundation(\n      '#close causes restoreFocus to be called if the menu-surface has focus',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        mockAdapter.isFocused.and.returnValue(true);\n        foundation.setQuickOpen(true);\n        foundation.close();\n        jasmine.clock().tick(numbers.TOUCH_EVENT_WAIT_MS);\n        expect(mockAdapter.restoreFocus).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close causes restoreFocus to be called if an element within the menu-surface has focus',\n      ({foundation, mockAdapter}) => {\n        (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n        mockAdapter.isFocused.and.returnValue(false);\n        mockAdapter.isElementInContainer.withArgs(jasmine.anything())\n            .and.returnValue(true);\n        foundation.setQuickOpen(true);\n        foundation.close();\n        jasmine.clock().tick(numbers.TOUCH_EVENT_WAIT_MS);\n        expect(mockAdapter.restoreFocus).toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close does not cause restoreFocus to be called if the active element is not within the menu-surface',\n      ({foundation, mockAdapter}) => {\n        mockAdapter.isFocused.and.returnValue(false);\n        mockAdapter.isElementInContainer.withArgs(jasmine.anything())\n            .and.returnValue(false);\n        foundation.setQuickOpen(true);\n        foundation.close();\n        jasmine.clock().tick(numbers.TOUCH_EVENT_WAIT_MS);\n        expect(mockAdapter.restoreFocus).not.toHaveBeenCalled();\n      });\n\n  testFoundation(\n      '#close deregisters window resize listener',\n      ({foundation, mockAdapter}) => {\n        foundation.open();\n        foundation.close();\n        expect(mockAdapter.deregisterWindowEventHandler).toHaveBeenCalled();\n      });\n\n  it('#isOpen returns true when the menu surface is open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n    expect(foundation.isOpen()).toBeTruthy();\n  });\n\n  it('#isOpen returns false when the menu surface is closed', () => {\n    const {foundation} = setupTest();\n\n    foundation.close();\n    expect(foundation.isOpen()).toBeFalsy();\n  });\n\n  it('#isOpen returns true when the menu surface is initiated with the open class present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(true);\n\n       foundation.init();\n       expect(foundation.isOpen()).toBeTruthy();\n     });\n\n  it('#isOpen returns false when the menu surface is initiated without the open class present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.OPEN).and.returnValue(false);\n\n       foundation.init();\n       expect(foundation.isOpen()).toBeFalsy();\n     });\n\n  it('#handleKeydown with Escape key closes the menu surface and sends close event',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const target = {};\n       const event = {target, key: 'Escape'} as KeyboardEvent;\n\n       (foundation as unknown as WithIsSurfaceOpen).isSurfaceOpen = true;\n       foundation.init();\n       foundation.handleKeydown(event);\n       jasmine.clock().tick(1);  // Run to frame.\n       jasmine.clock().tick(numbers.TRANSITION_CLOSE_DURATION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n       expect(mockAdapter.notifyClose).toHaveBeenCalled();\n     });\n\n  it('#handleKeydown on any other key, do not prevent default on the event',\n     () => {\n       const {foundation} = setupTest();\n       const target = {};\n       const preventDefault =\n           jasmine.createSpy('event.preventDefault') as Function;\n       const event = {target, key: 'Foo', preventDefault} as KeyboardEvent;\n\n       foundation.init();\n       foundation.handleKeydown(event);\n       // jasmine.clock().tick(numbers.SELECTED_TRIGGER_DELAY);\n       jasmine.clock().tick(1);  // Run to frame.\n       expect(preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('#handleBodyClick event closes the menu surface', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      target: {},\n    } as MouseEvent;\n\n    mockAdapter.hasClass.withArgs(MDCMenuSurfaceFoundation.cssClasses.OPEN)\n        .and.returnValue(true);\n    mockAdapter.isElementInContainer.withArgs(jasmine.anything())\n        .and.returnValue(false);\n\n    foundation.init();\n    foundation.open();\n    jasmine.clock().tick(numbers.TRANSITION_OPEN_DURATION);\n    jasmine.clock().tick(1);  // Run to frame.\n\n    foundation.handleBodyClick(mockevent);\n    jasmine.clock().tick(1);  // Run to frame.\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('on menu surface click does not emit close', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      target: {},\n    } as MouseEvent;\n    mockAdapter.isElementInContainer.withArgs(jasmine.anything())\n        .and.returnValue(true);\n    foundation.init();\n    foundation.open();\n    jasmine.clock().tick(1);  // Run to frame.\n    foundation.handleBodyClick(mockevent);\n    jasmine.clock().tick(1);  // Run to frame.\n    expect(mockAdapter.notifyClose).not.toHaveBeenCalled();\n  });\n\n  testFoundation(\n      'should cancel animation after destroy', ({foundation, mockAdapter}) => {\n        foundation.init();\n        jasmine.clock().tick(1);  // Run to frame.\n        foundation.open();\n        foundation.destroy();\n        jasmine.clock().tick(1);  // Run to frame.\n        jasmine.clock().tick(1);  // Run to frame.\n        expect(mockAdapter.setPosition).not.toHaveBeenCalled();\n      });\n});\n"
  },
  {
    "path": "packages/mdc-menu-surface/test/mdc-menu-surface.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-menu-surface.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-menu-surface/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCMenuDimensions {\n  width: number;\n  height: number;\n}\n\nexport interface MDCMenuDistance {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface MDCMenuPoint {\n  x: number;\n  y: number;\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-notched-outline/README.md",
    "content": "<!--docs:\ntitle: \"Notched Outline\"\nlayout: detail\nsection: components\nexcerpt: \"The notched outline is a border around either a Text Field or Select element\"\niconId: text_field\npath: /catalog/input-controls/notched-outline/\n-->\n\n# Notched Outline\n\nThe notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-field-variations\">Material Design guidelines: Text Field Variations</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Notched Outline on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/notched-outline\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-notched-outline\">\n  <span class=\"mdc-notched-outline__leading\"></span>\n  <span class=\"mdc-notched-outline__notch\">\n    <span class=\"mdc-floating-label\">Label</span>\n  </span>\n  <span class=\"mdc-notched-outline__trailing\"></span>\n</span>\n```\n\n> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when\n> used together with MDC Notched Outline.\n\n> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and\n> [MDC Select](../mdc-select/README.md#outlined-select) documentation for\n> information on using Notched Outline in the context of those components.\n\n### Styles\n\n```scss\n@use \"@material/notched-outline/mdc-notched-outline\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCNotchedOutline} from '@material/notched-outline';\n\nconst notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-notched-outline` | Mandatory. Container for the outline's sides and notch.\n`mdc-notched-outline--notched` | Modifier class to open the notched outline.\n`mdc-notched-outline--no-label` | Modifier class to use when the floating label is empty or not used.\n`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).\n`mdc-notched-outline__notch` | Mandatory. Element representing the notch.\n`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the border color of the notched outline.\n`stroke-width($width)` | Changes notched outline width to a specified pixel value.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.\n\n## `MDCNotchedOutline` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Opens the notch with the specified width.\n`closeNotch() => void` | Closes the notch, rendering a full outline.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCNotchedOutlineAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the notched outline element.\n`removeClass(className: string) => void` | Removes a class from the notched outline element.\n`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.\n`removeNotchWidthProperty() => void` | Removes the width property from the notch element.\n\n### `MDCNotchedOutlineFoundation`\n\nMethod Signature | Description\n--- | ---\n`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` class and updates the notch element's style based on `notchWidth`.\n`closeNotch() => void` | Removes the `mdc-notched-outline--notched` class.\n"
  },
  {
    "path": "packages/mdc-notched-outline/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-notched-outline/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/floating-label\" as mdc-floating-label-*;\n@forward \"./index\" as mdc-notched-outline-*;\n"
  },
  {
    "path": "packages/mdc-notched-outline/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_notched-outline.scss` or `_notched-outline-theme.scss` instead.\n@forward './notched-outline' show core-styles, base_;\n@forward './notched-outline-theme' show color, stroke-width, notch-offset,\n  shape-radius, floating-label-float-position,\n  floating-label-float-position-absolute, notch-max-width,\n  floating-label-float-font-size;\n"
  },
  {
    "path": "packages/mdc-notched-outline/_notched-outline-theme.scss",
    "content": "//\n// Copyright 2023 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION\n$min-leading-stroke-edge-position: 12px !default;\n// The gap between the stroke end and floating label\n// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE\n$notch-gutter-size: 4px !default;\n$border-width: 1px !default;\n$leading-width: 12px !default;\n$padding: 4px !default;\n// This variable keeps the before/after JS label centered in the notch when the font-size is changed.\n$label-adjust: 14% !default;\n/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in\n/// the middle when it is notched.\n$label-box-height: 13.5px !default;\n/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font\n/// size we add additional offset value.\n$label-adjust-absolute: 2.5px !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        border-top: $border-width solid;\n        border-bottom: $border-width solid;\n      }\n    }\n\n    &__leading {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, $border-width solid, none);\n\n        width: $leading-width;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, none, $border-width solid);\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% - #{$leading-width} * 2);\n      }\n    }\n  }\n}\n\n@mixin color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin stroke-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-width, $width);\n    }\n  }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline--notched .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: $stroke-width;\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $component-height: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Resolve the radius relative to the notched outline component's height. The\n  // component should provide its current height from its density. The resolved\n  // radius allows percentage radii to be converted to pixels.\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $component-height\n  );\n\n  // Grab the top-left radius. We'll need it to adjust the leading for the\n  // label notch if the resulting radius shape is larger than the default\n  // leading.\n  $top-left-radius: list.nth(\n    shape-functions.unpack-radius($resolved-radius),\n    1\n  );\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n\n  .mdc-notched-outline__leading {\n    // mask the leading to apply the top-left and bottom-left corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 1 0 0 1),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        // If the radius is bigger than the default leading width, we need to\n        // increase the leading width\n        width: $top-left-radius-px;\n        @if ($top-left-is-custom-prop) {\n          // The radius may be a custom property, in which case the above width\n          // is the IE11 fallback value.\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        // If the top-left radius is dynamic, the width of the leading is\n        // the max of whichever is larger: the default leading width or the\n        // value of the custom property.\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          width: max(#{$leading-width}, #{$var});\n        }\n      }\n    }\n  }\n\n  // Similar to above, adjust the max-width of the notch if we adjusted the\n  // leading's width.\n  .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        max-width: calc(100% - #{$top-left-radius-px} * 2);\n        @if ($top-left-is-custom-prop) {\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          max-width: calc(100% - max(#{$leading-width}, #{$var}) * 2);\n        }\n      }\n    }\n  }\n\n  .mdc-notched-outline__trailing {\n    // mask the leading to apply the top-right and bottom-right corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 0 1 1 0),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n  }\n}\n\n@mixin floating-label-float-position(\n  $positionY,\n  $positionX: 0%,\n  $scale: 0.75,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include floating-label-mixins.float-position(\n    $positionY + $label-adjust,\n    $positionX,\n    1,\n    $query: $query\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: ($scale * 1rem);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 1rem;\n      }\n    }\n  }\n}\n\n///\n/// Sets floating label position in notched outline when label is afloat.\n///\n/// @param {Number} $positionY Absolute Y-axis position in `px`.\n/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.\n/// @param {Number} $scale Defaults to `.75`.\n/// @param {Number} $font-size Defaults to `1rem`.\n///\n/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is\n///     center aligned in all the places.\n///\n@mixin floating-label-float-position-absolute(\n  $positionY,\n  $positionX: 0,\n  $scale: 0.75,\n  $font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $float-positionY: if(\n    meta.type-of($positionY) == 'calculation',\n    calc($positionY + $label-adjust-absolute),\n    $positionY + $label-adjust-absolute\n  );\n\n  @include floating-label-mixins.float-position(\n    $float-positionY,\n    $positionX,\n    $scale: 1,\n    $query: $query\n  );\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n  }\n\n  @include floating-label-float-font-size(\n    $scale: $scale,\n    $font-size: $font-size,\n    $query: $query\n  );\n}\n\n///\n/// Sets floating label font size in notched outline when label is afloat.\n///\n/// @param {Number} $scale Defaults to `.75`.\n/// @param {Number} $font-size Defaults to `1rem`.\n///\n@mixin floating-label-float-font-size(\n  $scale: 0.75,\n  $font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $font-size-value: if(\n    custom-properties.is-custom-prop($font-size),\n    custom-properties.get-declaration-value($font-size),\n    $font-size\n  );\n  // Check if $font-size-value is null. This mixin is typically called from a\n  // component's `theme-styles` mixin, meaning the $font-size value will be\n  // passed in via a call to map.get(...). When the value is missing from the\n  // theme map, a `null` value will be passed in -- which does NOT result in\n  // the default 1rem value we've set in the mixin definition being used. Due\n  // to our call to `calc()` in this mixin, $font-size values of `null` results\n  // in BUILD errors. To avoid having to perform null checks in all the mixin\n  // calls that eventually lead down to this one, we just do a null check in\n  // this mixin.\n  $font-size-value: if($font-size-value, $font-size-value, 1rem);\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: calc($scale * $font-size-value);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from\n  // this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: $font-size-value;\n      }\n    }\n  }\n}\n\n///\n/// Sets the max-width for the notch\n///\n/// @param {Number} $max-width Max-width for the notch\n///\n@mixin notch-max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      max-width: $max-width;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/_notched-outline.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use './notched-outline-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include notched-outline-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 0;\n      box-sizing: border-box;\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n      @include rtl.ignore-next-line();\n      text-align: left;\n      pointer-events: none;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        box-sizing: border-box;\n        height: 100%;\n        pointer-events: none;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        flex-grow: 1;\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        position: relative;\n        max-width: 100%;\n      }\n    }\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        text-overflow: clip;\n      }\n    }\n\n    &--upgraded .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% / 0.75);\n      }\n    }\n  }\n\n  .mdc-notched-outline--notched {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(padding, right, 8px);\n\n        border-top: none;\n      }\n    }\n  }\n\n  .mdc-notched-outline--no-label {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-notched-outline-* hide mdc-notched-outline-core-styles, mdc-notched-outline-color, mdc-notched-outline-stroke-width, mdc-notched-outline-notch-offset, mdc-notched-outline-shape-radius, mdc-notched-outline-floating-label-float-position, mdc-notched-outline-floating-label-float-position-absolute, mdc-notched-outline-base-;\n"
  },
  {
    "path": "packages/mdc-notched-outline/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_notched-outline-theme.scss` instead.\n@forward './notched-outline-theme' show $min-leading-stroke-edge-position,\n  $notch-gutter-size, $border-width, $leading-width, $padding, $label-adjust,\n  $label-box-height, $label-adjust-absolute;\n"
  },
  {
    "path": "packages/mdc-notched-outline/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCNotchedOutlineAdapter {\n  /**\n   * Adds a class to the root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Sets the width style property of the notch element.\n   */\n  setNotchWidthProperty(width: number): void;\n\n  /**\n   * Removes the width style property from the notch element.\n   */\n  removeNotchWidthProperty(): void;\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCFloatingLabelFoundation} from '@material/floating-label/foundation';\n\nimport {MDCNotchedOutlineAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\nimport {MDCNotchedOutlineFoundation} from './foundation';\n\n/** MDC Notched Outline Factory */\nexport type MDCNotchedOutlineFactory =\n    (el: HTMLElement, foundation?: MDCNotchedOutlineFoundation) =>\n        MDCNotchedOutline;\n\n/** MDC Notched Outline */\nexport class MDCNotchedOutline extends\n    MDCComponent<MDCNotchedOutlineFoundation> {\n  static override attachTo(root: HTMLElement): MDCNotchedOutline {\n    return new MDCNotchedOutline(root);\n  }\n\n  private notchElement!: HTMLElement;  // assigned in initialSyncWithDOM()\n\n  override initialSyncWithDOM() {\n    this.notchElement =\n        this.root.querySelector<HTMLElement>(strings.NOTCH_ELEMENT_SELECTOR)!;\n\n    const label = this.root.querySelector<HTMLElement>(\n        '.' + MDCFloatingLabelFoundation.cssClasses.ROOT);\n    if (label) {\n      label.style.transitionDuration = '0s';\n      this.root.classList.add(cssClasses.OUTLINE_UPGRADED);\n      requestAnimationFrame(() => {\n        label.style.transitionDuration = '';\n      });\n    } else {\n      this.root.classList.add(cssClasses.NO_LABEL);\n    }\n  }\n\n  /**\n   * Updates classes and styles to open the notch to the specified width.\n   * @param notchWidth The notch width in the outline.\n   */\n  notch(notchWidth: number) {\n    this.foundation.notch(notchWidth);\n  }\n\n  /**\n   * Updates classes and styles to close the notch.\n   */\n  closeNotch() {\n    this.foundation.closeNotch();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCNotchedOutlineAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setNotchWidthProperty: (width) => {\n        this.notchElement.style.setProperty('width', width + 'px');\n      },\n      removeNotchWidthProperty: () => {\n        this.notchElement.style.removeProperty('width');\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCNotchedOutlineFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',\n};\n\nconst numbers = {\n  // This should stay in sync with $mdc-notched-outline-padding * 2.\n  NOTCH_ELEMENT_PADDING: 8,\n};\n\nconst cssClasses = {\n  NO_LABEL: 'mdc-notched-outline--no-label',\n  OUTLINE_NOTCHED: 'mdc-notched-outline--notched',\n  OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',\n};\n\nexport {cssClasses, numbers, strings};\n"
  },
  {
    "path": "packages/mdc-notched-outline/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCNotchedOutlineAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\n\n/** MDC Notched Outline Foundation */\nexport class MDCNotchedOutlineFoundation extends\n    MDCFoundation<MDCNotchedOutlineAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  /**\n   * See {@link MDCNotchedOutlineAdapter} for typing information on parameters\n   * and return types.\n   */\n  static override get defaultAdapter(): MDCNotchedOutlineAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      setNotchWidthProperty: () => undefined,\n      removeNotchWidthProperty: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter?: Partial<MDCNotchedOutlineAdapter>) {\n    super({...MDCNotchedOutlineFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * Adds the outline notched selector and updates the notch width calculated\n   * based off of notchWidth.\n   */\n  notch(notchWidth: number) {\n    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;\n\n    if (notchWidth > 0) {\n      notchWidth +=\n          numbers.NOTCH_ELEMENT_PADDING;  // Add padding from left/right.\n    }\n\n    this.adapter.setNotchWidthProperty(notchWidth);\n    this.adapter.addClass(OUTLINE_NOTCHED);\n  }\n\n  /**\n   * Removes notched outline selector to close the notch in the outline.\n   */\n  closeNotch() {\n    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;\n    this.adapter.removeClass(OUTLINE_NOTCHED);\n    this.adapter.removeNotchWidthProperty();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCNotchedOutlineFoundation;\n"
  },
  {
    "path": "packages/mdc-notched-outline/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-notched-outline/mdc-notched-outline.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/floating-label/variables\" as mdc-floating-label-*;\n@forward \"variables\" as mdc-notched-outline-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/floating-label/mixins\" as mdc-floating-label-*;\n@forward \"mixins\" as mdc-notched-outline-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-notched-outline\";\n"
  },
  {
    "path": "packages/mdc-notched-outline/mdc-notched-outline.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/base/mixins' as base-mixins;\n@use './mixins';\n\n// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled\n@include base-mixins.emit-once('mdc-notched-outline') {\n  @include mixins.core-styles;\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/package.json",
    "content": "{\n  \"name\": \"@material/notched-outline\",\n  \"description\": \"The Material Components for the web notched-outline component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"notchedoutline\",\n    \"notched outline\"\n  ],\n  \"main\": \"dist/mdc.notchedOutline.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-notched-outline\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/floating-label\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-notched-outline/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCNotchedOutline} from '../../mdc-notched-outline/index';\nimport {createFixture, html} from '../../../testing/dom';\n\nfunction getFixture() {\n  return createFixture(html`\n    <span class=\"mdc-notched-outline\">\n      <span class=\"mdc-notched-outline__leading\"></span>\n      <span class=\"mdc-notched-outline__notch\"></span>\n      <span class=\"mdc-notched-outline__trailing\"></span>\n    </span>\n  `);\n}\n\ndescribe('MDCNotchedOutline', () => {\n  it('attachTo returns an MDCNotchedOutline instance', () => {\n    expect(\n        MDCNotchedOutline.attachTo(getFixture()) instanceof MDCNotchedOutline)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCNotchedOutline(root);\n    return {root, component};\n  }\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    (component.getDefaultFoundation() as any).adapter.setNotchWidthProperty(50);\n    (component.getDefaultFoundation() as any)\n        .adapter.removeNotchWidthProperty();\n    const path =\n        root.querySelector<HTMLElement>('.mdc-notched-outline__notch')!;\n    expect(path.style.width).toEqual('');\n  });\n\n  it('#adapter.setNotchWidthProperty sets the width property on the notched element',\n     () => {\n       const {root, component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setNotchWidthProperty(50);\n       const path =\n           root.querySelector<HTMLElement>('.mdc-notched-outline__notch')!;\n       expect(path.style.width).toEqual('50px');\n     });\n});\n"
  },
  {
    "path": "packages/mdc-notched-outline/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as notched-outline;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include notched-outline.core-styles($query: $query);\n    @include notched-outline.color(red, $query: $query);\n    @include notched-outline.stroke-width(1337px, $query: $query);\n    @include notched-outline.notch-offset(1337px, $query: $query);\n    @include notched-outline.shape-radius(42px, $query: $query);\n    @include notched-outline.floating-label-float-position(\n      100%,\n      $query: $query\n    );\n    @include notched-outline.floating-label-float-position-absolute(\n      100px,\n      $query: $query\n    );\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-notched-outline/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCNotchedOutlineFoundation} from '../../mdc-notched-outline/foundation';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nconst {cssClasses, numbers, strings} = MDCNotchedOutlineFoundation;\n\ndescribe('MDCNotchedOutlineFoundation', () => {\n  it('exports cssClasses', () => {\n    expect(MDCNotchedOutlineFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCNotchedOutlineFoundation.numbers).toEqual(numbers);\n  });\n\n  it('exports strings', () => {\n    expect(MDCNotchedOutlineFoundation.strings).toEqual(strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCNotchedOutlineFoundation, [\n      'addClass',\n      'removeClass',\n      'setNotchWidthProperty',\n      'removeNotchWidthProperty',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCNotchedOutlineFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#notch adds the notched class and sets the width of the element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const notchWidth = 30;\n    foundation.notch(notchWidth);\n    expect(mockAdapter.setNotchWidthProperty)\n        .toHaveBeenCalledWith(\n            notchWidth +\n            MDCNotchedOutlineFoundation.numbers.NOTCH_ELEMENT_PADDING);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(\n            MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED);\n  });\n\n  it('#closeNotch removes the notch selector and removes the width property',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.closeNotch();\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(\n               MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED);\n       expect(mockAdapter.removeNotchWidthProperty).toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-notched-outline/test/mdc-notched-outline.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-notched-outline.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-progress-indicator/README.md",
    "content": "<!--docs:\ntitle: \"Progress Indicator\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design-styled progress indicators.\"\niconId: progress_linear\npath: /catalog/progress-indicator/\n-->\n\n# Progress Indicators\n\nThe MDC Progress Indicator component exposes common foundation and component interfaces for a progress indicator. Components that implement these interfaces include [linear progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress) and [circular progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-circular-progress).\n[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).\n\n## Installation\n\n```\nnpm install @material/progress-indicator\n```\n\n## Basic Usage\n\n### MDCProgressIndicatorFoundation API\n\nMDC Progress Indicator Foundation exposes the following methods:\n\n| Method Signature | Description |\n| --- | --- |\n| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |\n| `isDeterminate() => boolean` | Whether or not the component is in determinate state. |\n| `setProgress(value: number) => void` | Sets the progress to this value. Value should be between [0, 1]. |\n| `getProgress() => number` | The current progress value in the interval [0,1]. |\n| `open() => void` | Puts the component in the open state. |\n| `close() => void` | Puts the component in the closed state. |\n| `isClosed() => boolean` | Whether or not the progress indicator is closed. |\n\n### MDCProgressIndicator Component API\n\nMDC Progress Indicator exposes the following API:\n\n| Method Signature | Description |\n| --- | --- |\n| `determinate: boolean` | Whether the indicator is in the determinate or indeterminate state. |\n| `progress: number` | The current progress. Value should be between [0, 1]. |\n| `open() => void` | Puts the component in the open state. |\n| `close() => void` | Puts the component in the closed state. |\n"
  },
  {
    "path": "packages/mdc-progress-indicator/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * The interface for MDC's progress indicators.\n *\n * @public\n */\nexport interface MDCProgressIndicator {\n  /**\n   * Toggles the component between the determinate and indeterminate state.\n   */\n  determinate: boolean;\n\n  /**\n   * The current progress value. Value should be between [0, 1].\n   */\n  progress: number;\n\n  /**\n   * Puts the component in the open state.\n   */\n  open(): void;\n\n  /**\n   * Puts the component in the closed state.\n   */\n  close(): void;\n}\n"
  },
  {
    "path": "packages/mdc-progress-indicator/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * The interface for the foundation of MDC's progress indicators.\n *\n * @public\n */\nexport interface MDCProgressIndicatorFoundation {\n  /**\n   * Toggles the component between the determinate and indeterminate state.\n   *\n   * @param isDeterminate - Whether the component is in determinate state\n   */\n  setDeterminate(isDeterminate: boolean): void;\n\n  /**\n   * @return Whether the component is determinate.\n   */\n  isDeterminate(): boolean;\n\n  /**\n   * Sets the current progress value.\n   *\n   * @param value - the current progress value, should be between [0,1]\n   */\n  setProgress(value: number): void;\n\n  /**\n   * @return the current progress value [0,1];\n   */\n  getProgress(): number;\n\n  /**\n   * Puts the component in the open state.\n   */\n  open(): void;\n\n  /**\n   * Puts the component in the closed state.\n   */\n  close(): void;\n\n  /**\n   * @return Whether the component is closed.\n   */\n  isClosed(): boolean;\n}\n"
  },
  {
    "path": "packages/mdc-progress-indicator/package.json",
    "content": "{\n  \"name\": \"@material/progress-indicator\",\n  \"description\": \"The Material Components for the web interface for Progress Indicators\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-progress-indicator\"\n  },\n  \"dependencies\": {\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-radio/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-radio/README.md",
    "content": "<!--docs:\ntitle: \"Radio Buttons\"\nlayout: detail\nsection: components\niconId: radio_button\npath: /catalog/input-controls/radio-buttons/\n-->\n\n# Selection controls: radio buttons\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nUse radio buttons to:\n\n* Select a single option from a list\n* Expose all available options\n* If available options can be collapsed, consider using a dropdown menu instead to use less space.\n\n![Radio button hero example for menu options](images/radio-button-hero.png)\n\n**Contents**\n\n* [Using radio buttons](#using-radio-buttons)\n* [Radio buttons](#radio-buttons)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using radio buttons\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.\n\n### Installing radio buttons\n\n```\nnpm install @material/radio\n```\n\n### Styles\n\n```scss\n@use \"@material/radio/styles\";\n@use \"@material/form-field\";\n\n@include form-field.core-styles;\n```\n\n**Note: The form field styles are only required when the radio button is used with the form field.**\n\n### JavaScript instantiation\n\nThe radio button will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating `MDCRadio` on the `mdc-radio` element. To activate the ripple effect upon interacting with the label, you must also instantiate `MDCFormField` on the `mdc-form-field` element and set the `MDCRadio` instance as its `input`.\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCRadio} from '@material/radio';\n\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nformField.input = radio;\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making radio buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48px x 48px.\nTo meet this requirement, add the `mdc-radio--touch` class to your radio as follows:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <div class=\"mdc-radio mdc-radio--touch\">\n    <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" checked>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n    <div class=\"mdc-radio__ripple\"></div>\n    <div class=\"mdc-radio__focus-ring\"></div>\n  </div>\n</div>\n```\n\nNote that the outer  `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\nThe `mdc-radio__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused radio button.\n\n## Radio buttons\n\nWe recommend using MDC Radio with [MDC Form Field](../mdc-form-field) for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.\n\n### Radio button example\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-radio\">\n    <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" checked>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n    <div class=\"mdc-radio__ripple\"></div>\n    <div class=\"mdc-radio__focus-ring\"></div>\n  </div>\n  <label for=\"radio-1\">Radio 1</label>\n</div>\n```\n\n### Radio button states\n\nRadio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.\n\n![Radio button states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are selected or unselected](images/radio-button-states.png)\n\n## Other variants\n\n### Disabled radio buttons\n\nTo disable a radio button, add the `mdc-radio--disabled` class to the root element and set the `disabled` attribute on the `<input>` element.\nDisabled radio buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-radio mdc-radio--disabled\">\n    <input class=\"mdc-radio__native-control\" type=\"radio\" id=\"radio-1\" name=\"radios\" disabled>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n    <div class=\"mdc-radio__ripple\"></div>\n    <div class=\"mdc-radio__focus-ring\"></div>\n  </div>\n  <label for=\"radio-1\">Radio 1</label>\n</div>\n```\n\n## API\n\n### Sass mixins\n\nMDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button\n`checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button\n`ink-color($color)` | Sets the ink color of an enabled radio button\n`disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button\n`disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button\n`disabled-ink-color($color)` | Sets the ink color of a disabled radio button\n`focus-indicator-color($color)` | Sets the color of the focus indicator\n`touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$ripple-size`.\n`ripple-size($size)` | Sets custom ripple size of radio.\n`density($density-scale)` | Sets density scale for radio. Supported density scale values are `-3`, `-2`, `-1` and `0` (default).\n\n## `MDCRadio` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the radio's checked state\n`disabled` | Boolean | Setter/getter for the radio's disabled state. Setter proxies to foundation's `setDisabled` method\n`value` | String | Setter/getter for the radio's value\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Radio button for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCRadioAdapter`\n\nMethod Signature | Description\n--- | ---\n`setNativeControlDisabled(disabled: boolean) => void` | Sets the input's `disabled` property to the given value\n`addClass(className: string) => void` | Adds a class to the root element\n`removeClass(className: string) => void` | Removes a class from the root element\n\n### `MDCRadioFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control\n"
  },
  {
    "path": "packages/mdc-radio/_functions.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./radio-all-deprecated\" as mdc-radio-* hide $mdc-radio-ripple-target, mdc-radio-core-styles, mdc-radio-without-ripple, mdc-radio-ripple, mdc-radio-unchecked-stroke-color, mdc-radio-checked-stroke-color, mdc-radio-ink-color, mdc-radio-disabled-unchecked-stroke-color, mdc-radio-disabled-checked-stroke-color, mdc-radio-disabled-ink-color, mdc-radio-focus-indicator-color, mdc-radio-touch-target, mdc-radio-density, mdc-radio-ripple-size, mdc-radio-touch-target-reset-, mdc-radio-if-enabled-, mdc-radio-if-enabled-unchecked-, mdc-radio-if-enabled-checked-, mdc-radio-if-disabled-, mdc-radio-if-disabled-unchecked-, mdc-radio-if-disabled-checked-, mdc-radio-ink-color-, mdc-radio-stroke-color-;\n"
  },
  {
    "path": "packages/mdc-radio/_functions.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_radio.scss' module instead.\n@forward './radio' show enter, exit;\n"
  },
  {
    "path": "packages/mdc-radio/_index.scss",
    "content": "@forward './radio-theme';\n"
  },
  {
    "path": "packages/mdc-radio/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"./radio-all-deprecated\" as mdc-radio-*;\n"
  },
  {
    "path": "packages/mdc-radio/_mixins.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './radio' or './radio-theme' instead.\n@forward './radio' show $ripple-target, core-styles, without-ripple, ripple;\n@forward './radio-theme' show unchecked-stroke-color, checked-stroke-color, ink-color, disabled-unchecked-stroke-color, disabled-checked-stroke-color, disabled-ink-color, focus-indicator-color, touch-target, density, ripple-size, touch-target-reset_, if-enabled_, if-enabled-unchecked_, if-enabled-checked_, if-disabled_, if-disabled-unchecked_, if-disabled-checked_, ink-color_, stroke-color_;\n"
  },
  {
    "path": "packages/mdc-radio/_radio-all-deprecated.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-radio/_radio-theme.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/density/functions' as density-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/density/variables' as density-variables;\n@use '@material/theme/theme-color';\n@use '@material/ripple/ripple-theme';\n\n$ripple-size: 40px !default;\n$icon-size: 20px !default;\n$transition-duration: 120ms !default;\n$ripple-opacity: 0.14 !default;\n$baseline-theme-color: secondary !default;\n$unchecked-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$disabled-circle-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  size: (\n    minimum: $minimum-size,\n    default: $ripple-size,\n    maximum: $maximum-size,\n  ),\n) !default;\n\n$ripple-target: '.mdc-radio__ripple';\n$unselected-ripple-target: '.mdc-radio__native-control:enabled:not(:checked) ~ #{$ripple-target}';\n$custom-property-prefix: 'radio';\n\n// TODO(b/188417756): `icon-size` token key is not supported.\n$light-theme: (\n  disabled-selected-icon-color: theme-color.$on-surface,\n  disabled-selected-icon-opacity: 0.38,\n  disabled-unselected-icon-color: theme-color.$on-surface,\n  disabled-unselected-icon-opacity: 0.38,\n  selected-focus-icon-color: theme-color.$primary,\n  selected-focus-state-layer-color: theme-color.$primary,\n  selected-focus-state-layer-opacity: 0.12,\n  selected-hover-icon-color: theme-color.$primary,\n  selected-hover-state-layer-color: theme-color.$primary,\n  selected-hover-state-layer-opacity: 0.04,\n  selected-icon-color: theme-color.$primary,\n  selected-pressed-icon-color: theme-color.$primary,\n  selected-pressed-state-layer-color: theme-color.$primary,\n  selected-pressed-state-layer-opacity: 0.1,\n  state-layer-size: $ripple-size,\n  unselected-focus-icon-color: theme-color.$on-surface,\n  unselected-focus-state-layer-color: theme-color.$on-surface,\n  unselected-focus-state-layer-opacity: 0.12,\n  unselected-hover-icon-color: theme-color.$on-surface,\n  unselected-hover-state-layer-color: theme-color.$on-surface,\n  unselected-hover-state-layer-opacity: 0.04,\n  unselected-icon-color: theme-color.$on-surface,\n  unselected-pressed-icon-color: theme-color.$on-surface,\n  unselected-pressed-state-layer-color: theme-color.$on-surface,\n  unselected-pressed-state-layer-opacity: 0.1,\n);\n\n@mixin theme($theme) {\n  @include theme.validate-theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include _disabled-selected-icon-color(\n    map.get($theme, disabled-selected-icon-color)\n  );\n  @include _disabled-selected-icon-opacity(\n    map.get($theme, disabled-selected-icon-opacity)\n  );\n  @include _disabled-unselected-icon-color(\n    map.get($theme, disabled-unselected-icon-color)\n  );\n  @include _disabled-unselected-icon-opacity(\n    map.get($theme, disabled-unselected-icon-opacity)\n  );\n\n  // selected\n  @include ripple-theme.focus() {\n    @include _selected-icon-color(map.get($theme, selected-focus-icon-color));\n    @include _selected-state-layer-color(\n      map.get($theme, selected-focus-state-layer-color)\n    );\n    @include _selected-focus-state-layer-opacity(\n      map.get($theme, selected-focus-state-layer-opacity)\n    );\n  }\n  @include ripple-theme.hover() {\n    @include _selected-icon-color(map.get($theme, selected-hover-icon-color));\n    @include _selected-state-layer-color(\n      map.get($theme, selected-hover-state-layer-color)\n    );\n    @include _selected-hover-state-layer-opacity(\n      map.get($theme, selected-hover-state-layer-opacity)\n    );\n  }\n  @include _selected-icon-color(map.get($theme, selected-icon-color));\n  @include ripple-theme.active() {\n    @include _selected-icon-color(map.get($theme, selected-pressed-icon-color));\n    @include _selected-state-layer-color(\n      map.get($theme, selected-pressed-state-layer-color)\n    );\n    @include _selected-pressed-state-layer-opacity(\n      map.get($theme, selected-pressed-state-layer-opacity)\n    );\n  }\n\n  // unselected\n  @include ripple-theme.focus() {\n    @include _unselected-icon-color(\n      map.get($theme, unselected-focus-icon-color)\n    );\n    @include _unselected-state-layer-color(\n      map.get($theme, unselected-focus-state-layer-color)\n    );\n    @include _unselected-focus-state-layer-opacity(\n      map.get($theme, unselected-focus-state-layer-opacity)\n    );\n  }\n  @include ripple-theme.hover() {\n    @include _unselected-icon-color(\n      map.get($theme, unselected-hover-icon-color)\n    );\n    @include _unselected-state-layer-color(\n      map.get($theme, unselected-hover-state-layer-color)\n    );\n    @include _unselected-hover-state-layer-opacity(\n      map.get($theme, unselected-hover-state-layer-opacity)\n    );\n  }\n  @include _unselected-icon-color(map.get($theme, unselected-icon-color));\n  @include ripple-theme.active() {\n    @include _unselected-icon-color(\n      map.get($theme, unselected-pressed-icon-color)\n    );\n    @include _unselected-state-layer-color(\n      map.get($theme, unselected-pressed-state-layer-color)\n    );\n    @include _unselected-pressed-state-layer-opacity(\n      map.get($theme, unselected-pressed-state-layer-opacity)\n    );\n  }\n\n  @include ripple-size(map.get($theme, state-layer-size));\n  // Set touch target size same as ripple size.\n  @include touch-target(\n    $size: map.get($theme, state-layer-size),\n    $ripple-size: map.get($theme, state-layer-size)\n  );\n}\n\n@mixin _disabled-selected-icon-color($color) {\n  @include disabled-checked-stroke-color($color);\n  @include disabled-ink-color($color);\n}\n\n@mixin _disabled-selected-icon-opacity($opacity) {\n  @include _disabled-checked-stroke-opacity($opacity);\n  @include _disabled-ink-opacity($opacity);\n}\n\n@mixin _disabled-unselected-icon-color($color) {\n  @include disabled-unchecked-stroke-color($color);\n}\n\n@mixin _disabled-unselected-icon-opacity($opacity) {\n  @include _disabled-unchecked-stroke-opacity($opacity);\n}\n\n@mixin _selected-icon-color($color) {\n  @include checked-stroke-color($color);\n  @include ink-color($color);\n}\n\n@mixin _selected-state-layer-color($color) {\n  @include ripple-theme.states-base-color(\n    $color: $color,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin _selected-hover-state-layer-opacity($opacity) {\n  @include ripple-theme.states-hover-opacity(\n    $opacity: $opacity,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin _selected-focus-state-layer-opacity($opacity) {\n  @include ripple-theme.states-focus-opacity(\n    $opacity: $opacity,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin _selected-pressed-state-layer-opacity($opacity) {\n  @include ripple-theme.states-press-opacity(\n    $opacity: $opacity,\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin _unselected-icon-color($color) {\n  @include unchecked-stroke-color($color);\n}\n\n@mixin _unselected-state-layer-color($color) {\n  @include ripple-theme.states-base-color(\n    $color: $color,\n    $ripple-target: $unselected-ripple-target\n  );\n}\n\n@mixin _unselected-hover-state-layer-opacity($opacity) {\n  @include ripple-theme.states-hover-opacity(\n    $opacity: $opacity,\n    $ripple-target: $unselected-ripple-target\n  );\n}\n\n@mixin _unselected-focus-state-layer-opacity($opacity) {\n  @include ripple-theme.states-focus-opacity(\n    $opacity: $opacity,\n    $ripple-target: $unselected-ripple-target\n  );\n}\n\n@mixin _unselected-pressed-state-layer-opacity($opacity) {\n  @include ripple-theme.states-press-opacity(\n    $opacity: $opacity,\n    $ripple-target: $unselected-ripple-target\n  );\n}\n\n///\n/// Sets the stroke color of an unchecked, enabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin unchecked-stroke-color($color, $query: feature-targeting.all()) {\n  @include _if-enabled-unchecked {\n    @include _stroke-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets the stroke color of a checked, enabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin checked-stroke-color($color, $query: feature-targeting.all()) {\n  @include _if-enabled-checked {\n    @include _stroke-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets the ink color of an enabled radio button.\n/// @param {Color} $color - The desired ink color.\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _ink-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets the stroke color of an unchecked, disabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin disabled-unchecked-stroke-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  @include _if-disabled-unchecked {\n    @include _stroke-color($color, $query: $query);\n  }\n}\n\n@mixin _disabled-unchecked-stroke-opacity($opacity) {\n  @include _if-disabled-unchecked {\n    @include _stroke-opacity($opacity);\n  }\n}\n\n///\n/// Sets the stroke color of a checked, disabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin disabled-checked-stroke-color($color, $query: feature-targeting.all()) {\n  @include if-disabled-checked_ {\n    @include _stroke-color($color, $query: $query);\n  }\n}\n\n@mixin _disabled-checked-stroke-opacity($opacity) {\n  @include if-disabled-checked_ {\n    @include _stroke-opacity($opacity);\n  }\n}\n\n///\n/// Sets the ink color of a disabled radio button.\n/// @param {Color} $color - The desired ink color\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include _ink-color($color, $query: $query);\n  }\n}\n\n@mixin _disabled-ink-opacity($opacity) {\n  @include if-disabled_ {\n    @include _ink-opacity($opacity);\n  }\n}\n\n@mixin focus-indicator-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-radio__background::before {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom\n/// ripple size.\n///\n/// @param {Number} $size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.\n///\n@mixin touch-target(\n  $size: $ripple-size,\n  $ripple-size: $ripple-size,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $offset: 'calc((__ripple_size - __size) / 2)';\n  $replace: (\n    __ripple_size: $ripple-size,\n    __size: $size,\n  );\n\n  .mdc-radio__native-control {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property('top', $offset, $replace: $replace);\n      @include theme.property('right', $offset, $replace: $replace);\n      @include theme.property('left', $offset, $replace: $replace);\n      @include theme.property('width', $size);\n      @include theme.property('height', $size);\n    }\n  }\n}\n\n///\n/// Sets density scale for radio.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values\n///     `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $size: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: size,\n  );\n\n  @include ripple-size($size, $query: $query);\n  // Sets touch target size same as ripple size.\n  @include touch-target($size: $size, $ripple-size: $size, $query: $query);\n\n  @if $density-scale != 0 {\n    @include touch-target-reset_($query: $query);\n  }\n}\n\n///\n/// Sets radio ripple size.\n///\n/// @param {Number} $size - Ripple size in `px`.\n///\n@mixin ripple-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $replace: (\n    __size: $size,\n    __icon_size: $icon-size,\n  );\n\n  @include feature-targeting.targets($feat-structure) {\n    $padding: 'calc((__size - __icon_size) / 2)';\n\n    @include theme.property('padding', $padding, $replace: $replace);\n  }\n\n  .mdc-radio__background::before {\n    @include feature-targeting.targets($feat-structure) {\n      $padding-offset: 'calc(-1 * (__size - __icon_size) / 2)';\n\n      @include theme.property('top', $padding-offset, $replace: $replace);\n      @include theme.property('left', $padding-offset, $replace: $replace);\n      @include theme.property('width', $size);\n      @include theme.property('height', $size);\n    }\n  }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin: 0;\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled state.\n/// @access private\n///\n@mixin _if-enabled {\n  .mdc-radio__native-control:enabled + {\n    @content;\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled & unchecked state.\n/// @access private\n///\n@mixin _if-enabled-unchecked {\n  .mdc-radio__native-control:enabled:not(:checked) + {\n    @content;\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled & checked state.\n/// @access private\n///\n@mixin _if-enabled-checked {\n  .mdc-radio__native-control:enabled:checked + {\n    @content;\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n  [aria-disabled='true'] .mdc-radio__native-control,\n  .mdc-radio__native-control:disabled {\n    + {\n      @content;\n    }\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled & unchecked state.\n/// @access private\n///\n@mixin _if-disabled-unchecked {\n  [aria-disabled='true'] .mdc-radio__native-control,\n  .mdc-radio__native-control:disabled {\n    &:not(:checked) + {\n      @content;\n    }\n  }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled & checked state.\n/// @access private\n///\n@mixin if-disabled-checked_ {\n  [aria-disabled='true'] .mdc-radio__native-control,\n  .mdc-radio__native-control:disabled {\n    &:checked + {\n      @content;\n    }\n  }\n}\n\n///\n/// Sets the ink color for radio. This is wrapped in a mixin\n/// that qualifies state such as `_if-enabled`\n/// @access private\n///\n@mixin _ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-radio__background .mdc-radio__inner-circle {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin _ink-opacity($opacity) {\n  .mdc-radio__background .mdc-radio__inner-circle {\n    @include theme.property(opacity, $opacity);\n  }\n}\n\n///\n/// Sets the stroke color for radio. This is wrapped in a mixin\n/// that qualifies state such as `_if-enabled`\n/// @access private\n///\n@mixin _stroke-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-radio__background .mdc-radio__outer-circle {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin _stroke-opacity($opacity) {\n  .mdc-radio__background .mdc-radio__outer-circle {\n    @include theme.property(opacity, $opacity);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-radio/_radio.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/animation/animation';\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/touch-target/variables' as touch-target-variables;\n@use './radio-theme';\n@use '@material/focus-ring/focus-ring';\n\n$ripple-target: radio-theme.$ripple-target;\n\n///\n/// Radio core styles.\n///\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-radio {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n      position: relative;\n      flex: 0 0 auto;\n      box-sizing: content-box;\n      width: radio-theme.$icon-size;\n      height: radio-theme.$icon-size;\n      cursor: pointer;\n      /* @alternate */\n      will-change: opacity, transform, border-color, color;\n      &[hidden] {\n        display: none;\n      }\n    }\n\n    // Container for radio circles and ripple.\n    &__background {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        position: relative;\n        box-sizing: border-box;\n        width: radio-theme.$icon-size;\n        height: radio-theme.$icon-size;\n      }\n\n      &::before {\n        @include feature-targeting.targets($feat-structure) {\n          position: absolute;\n          transform: scale(0, 0);\n          border-radius: 50%;\n          opacity: 0;\n          pointer-events: none;\n          content: '';\n        }\n\n        @include feature-targeting.targets($feat-animation) {\n          transition: exit(opacity), exit(transform);\n        }\n      }\n    }\n\n    &__outer-circle {\n      @include feature-targeting.targets($feat-structure) {\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        border-width: 2px;\n        border-style: solid;\n        border-radius: 50%;\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: exit(border-color);\n      }\n    }\n\n    &__inner-circle {\n      @include feature-targeting.targets($feat-structure) {\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        transform: scale(0, 0);\n        border-width: 10px;\n        border-style: solid;\n        border-radius: 50%;\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: exit(transform), exit(border-color);\n      }\n    }\n\n    &__native-control {\n      @include feature-targeting.targets($feat-structure) {\n        position: absolute;\n        margin: 0;\n        padding: 0;\n        opacity: 0;\n        cursor: inherit;\n        z-index: 1;\n      }\n    }\n\n    &--touch {\n      @include touch-target-mixins.margin(\n        $component-height: radio-theme.$ripple-size,\n        $component-width: radio-theme.$ripple-size,\n        $query: $query\n      );\n      @include radio-theme.touch-target(\n        $size: touch-target-variables.$height,\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus {\n      .mdc-radio__focus-ring {\n        @include focus-ring.focus-ring(\n          $container-outer-padding-vertical: 0,\n          $container-outer-padding-horizontal: 0,\n          $query: $query\n        );\n      }\n    }\n  }\n\n  .mdc-radio__native-control:checked,\n  .mdc-radio__native-control:disabled {\n    + .mdc-radio__background {\n      @include feature-targeting.targets($feat-animation) {\n        transition: enter(opacity), enter(transform);\n      }\n\n      .mdc-radio__outer-circle {\n        @include feature-targeting.targets($feat-animation) {\n          transition: enter(border-color);\n        }\n      }\n\n      .mdc-radio__inner-circle {\n        @include feature-targeting.targets($feat-animation) {\n          transition: enter(transform), enter(border-color);\n        }\n      }\n    }\n  }\n\n  .mdc-radio--disabled {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  .mdc-radio__native-control:checked {\n    + .mdc-radio__background {\n      .mdc-radio__inner-circle {\n        @include feature-targeting.targets($feat-structure) {\n          transform: scale(0.5);\n        }\n\n        @include feature-targeting.targets($feat-animation) {\n          transition: enter(transform), enter(border-color);\n        }\n      }\n    }\n  }\n\n  .mdc-radio__native-control:disabled,\n  [aria-disabled='true'] .mdc-radio__native-control {\n    + .mdc-radio__background {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: default;\n      }\n    }\n  }\n\n  .mdc-radio__native-control:focus {\n    + .mdc-radio__background::before {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n        opacity: map.get(ripple-theme.$dark-ink-opacities, focus);\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: enter(opacity), enter(transform);\n      }\n    }\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  // postcss-bem-linter: define radio\n  @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-radio {\n    @include radio-theme.unchecked-stroke-color(\n      radio-theme.$unchecked-color,\n      $query: $query\n    );\n    @include radio-theme.checked-stroke-color(\n      radio-theme.$baseline-theme-color,\n      $query: $query\n    );\n    @include radio-theme.ink-color(\n      radio-theme.$baseline-theme-color,\n      $query: $query\n    );\n    @include radio-theme.disabled-unchecked-stroke-color(\n      radio-theme.$disabled-circle-color,\n      $query: $query\n    );\n    @include radio-theme.disabled-checked-stroke-color(\n      radio-theme.$disabled-circle-color,\n      $query: $query\n    );\n    @include radio-theme.disabled-ink-color(\n      radio-theme.$disabled-circle-color,\n      $query: $query\n    );\n    @include radio-theme.focus-indicator-color(\n      radio-theme.$baseline-theme-color,\n      $query: $query\n    );\n    @include radio-theme.density(radio-theme.$density-scale, $query: $query);\n\n    @include dom.forced-colors-mode {\n      &.mdc-radio--disabled {\n        @include radio-theme.disabled-unchecked-stroke-color(\n          GrayText,\n          $query: $query\n        );\n        @include radio-theme.disabled-checked-stroke-color(\n          GrayText,\n          $query: $query\n        );\n        @include radio-theme.disabled-ink-color(GrayText, $query: $query);\n      }\n    }\n  }\n\n  @include static-styles($query: $query);\n  // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-radio {\n    @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n    @include ripple.radius-unbounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include ripple-theme.states(\n      $color: radio-theme.$baseline-theme-color,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n\n    &.mdc-ripple-upgraded,\n    &.mdc-ripple-upgraded--background-focused {\n      .mdc-radio__background::before {\n        @include feature-targeting.targets($feat-structure) {\n          content: none;\n        }\n      }\n    }\n  }\n\n  #{$ripple-target} {\n    @include ripple.target-common($query: $query);\n  }\n}\n\n@function enter($name) {\n  @return animation.enter($name, radio-theme.$transition-duration);\n}\n\n@function exit($name) {\n  @return animation.exit-temporary($name, radio-theme.$transition-duration);\n}\n"
  },
  {
    "path": "packages/mdc-radio/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./radio-all-deprecated\" as mdc-radio-* hide $mdc-radio-ripple-target, mdc-radio-core-styles, mdc-radio-without-ripple, mdc-radio-ripple, mdc-radio-unchecked-stroke-color, mdc-radio-checked-stroke-color, mdc-radio-ink-color, mdc-radio-disabled-unchecked-stroke-color, mdc-radio-disabled-checked-stroke-color, mdc-radio-disabled-ink-color, mdc-radio-focus-indicator-color, mdc-radio-touch-target, mdc-radio-density, mdc-radio-ripple-size, mdc-radio-touch-target-reset-, mdc-radio-if-enabled-, mdc-radio-if-enabled-unchecked-, mdc-radio-if-enabled-checked-, mdc-radio-if-disabled-, mdc-radio-if-disabled-unchecked-, mdc-radio-if-disabled-checked-, mdc-radio-ink-color-, mdc-radio-stroke-color-, mdc-radio-enter, mdc-radio-exit;\n"
  },
  {
    "path": "packages/mdc-radio/_variables.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './radio-theme' module instead.\n@forward './radio-theme' show $ripple-size, $icon-size, $transition-duration, $ripple-opacity, $baseline-theme-color, $unchecked-color, $disabled-circle-color, $minimum-size, $maximum-size, $density-scale, $density-config;\n"
  },
  {
    "path": "packages/mdc-radio/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCRadioAdapter {\n  addClass(className: string): void;\n  removeClass(className: string): void;\n  setNativeControlDisabled(disabled: boolean): void;\n}\n"
  },
  {
    "path": "packages/mdc-radio/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {applyPassive} from '@material/dom/events';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCRadioAdapter} from './adapter';\nimport {MDCRadioFoundation} from './foundation';\n\n/** MDC Radio */\nexport class MDCRadio extends MDCComponent<MDCRadioFoundation> implements\n    MDCRippleCapableSurface {\n  static override attachTo(root: HTMLElement) {\n    return new MDCRadio(root);\n  }\n\n  get checked(): boolean {\n    return this.nativeControl.checked;\n  }\n\n  set checked(checked: boolean) {\n    this.nativeControl.checked = checked;\n  }\n\n  get disabled() {\n    return this.nativeControl.disabled;\n  }\n\n  set disabled(disabled: boolean) {\n    this.foundation.setDisabled(disabled);\n  }\n\n  get value() {\n    return this.nativeControl.value;\n  }\n\n  set value(value: string) {\n    this.nativeControl.value = value;\n  }\n\n  get ripple(): MDCRipple {\n    return this.rippleSurface;\n  }\n\n  private readonly rippleSurface: MDCRipple = this.createRipple();\n\n  override destroy() {\n    this.rippleSurface.destroy();\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCRadioAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setNativeControlDisabled: (disabled) => this.nativeControl.disabled =\n          disabled,\n    };\n    return new MDCRadioFoundation(adapter);\n  }\n\n  private createRipple(): MDCRipple {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      registerInteractionHandler: (eventType, handler) => {\n        this.nativeControl.addEventListener(eventType, handler, applyPassive());\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.nativeControl.removeEventListener(\n            eventType, handler, applyPassive());\n      },\n      // Radio buttons technically go \"active\" whenever there is *any* keyboard\n      // interaction. This is not the UI we desire.\n      isSurfaceActive: () => false,\n      isUnbounded: () => true,\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCRipple(this.root, new MDCRippleFoundation(adapter));\n  }\n\n  private get nativeControl(): HTMLInputElement {\n    const {NATIVE_CONTROL_SELECTOR} = MDCRadioFoundation.strings;\n    const el =\n        this.root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR);\n    if (!el) {\n      throw new Error(\n          `Radio component requires a ${NATIVE_CONTROL_SELECTOR} element`);\n    }\n    return el;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-radio/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  NATIVE_CONTROL_SELECTOR: '.mdc-radio__native-control',\n};\n\nconst cssClasses = {\n  DISABLED: 'mdc-radio--disabled',\n  ROOT: 'mdc-radio',\n};\n\nexport {strings, cssClasses};\n"
  },
  {
    "path": "packages/mdc-radio/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCRadioAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Radio Foundation */\nexport class MDCRadioFoundation extends MDCFoundation<MDCRadioAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCRadioAdapter {\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      setNativeControlDisabled: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCRadioAdapter>) {\n    super({...MDCRadioFoundation.defaultAdapter, ...adapter});\n  }\n\n  setDisabled(disabled: boolean) {\n    const {DISABLED} = MDCRadioFoundation.cssClasses;\n    this.adapter.setNativeControlDisabled(disabled);\n    if (disabled) {\n      this.adapter.addClass(DISABLED);\n    } else {\n      this.adapter.removeClass(DISABLED);\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCRadioFoundation;\n"
  },
  {
    "path": "packages/mdc-radio/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-radio/mdc-radio.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"variables\" as mdc-radio-*;\n@forward \"mixins\" as mdc-radio-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"functions\" as mdc-radio-*;\n@forward \"mdc-radio\";\n"
  },
  {
    "path": "packages/mdc-radio/mdc-radio.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-radio/package.json",
    "content": "{\n  \"name\": \"@material/radio\",\n  \"description\": \"The Material Components for the web radio component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"radio\"\n  ],\n  \"main\": \"dist/mdc.radio.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-radio\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/touch-target\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-radio/styles.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './radio';\n@include radio.core-styles;\n"
  },
  {
    "path": "packages/mdc-radio/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipple} from '../../mdc-ripple/index';\nimport {supportsCssVariables} from '../../mdc-ripple/util';\nimport {createFixture, html} from '../../../testing/dom';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {MDCRadio, MDCRadioFoundation} from '../index';\n\nconst {NATIVE_CONTROL_SELECTOR} = MDCRadioFoundation.strings;\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-radio\">\n      <input type=\"radio\" id=\"my-radio\" name=\"my-radio-group\"\n             class=\"mdc-radio__native-control\" aria-labelledby=\"my-radio-label\">\n      <div class=\"mdc-radio__background\">\n        <div class=\"mdc-radio__outer-circle\"></div>\n        <div class=\"mdc-radio__inner-circle\"></div>\n      </div>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCRadio(root);\n  return {root, component};\n}\n\ndescribe('MDCRadio', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCRadio instance', () => {\n    expect(MDCRadio.attachTo(getFixture()) instanceof MDCRadio).toBeTruthy();\n  });\n\n  if (supportsCssVariables(window)) {\n    it('#constructor initializes the root element with a ripple', () => {\n      const {root} = setupTest();\n      jasmine.clock().tick(1);\n      expect(root).toHaveClass('mdc-ripple-upgraded');\n    });\n\n    it('#destroy removes the ripple', () => {\n      const {root, component} = setupTest();\n      jasmine.clock().tick(1);\n      component.destroy();\n      jasmine.clock().tick(1);\n      expect(root).not.toHaveClass('mdc-ripple-upgraded');\n    });\n  }\n\n  it('get/set checked updates the checked value of the native radio element',\n     () => {\n       const {root, component} = setupTest();\n       const radio =\n           root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n       component.checked = true;\n       expect(radio.checked).toBeTruthy();\n       expect(component.checked).toEqual(radio.checked);\n     });\n\n  it('get/set disabled updates the disabled value of the native radio element',\n     () => {\n       const {root, component} = setupTest();\n       const radio =\n           root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n       component.disabled = true;\n       expect(radio.disabled).toBeTruthy();\n       expect(component.disabled).toEqual(radio.disabled);\n       component.disabled = false;\n       expect(radio.disabled).toBeFalsy();\n       expect(component.disabled).toEqual(radio.disabled);\n     });\n\n  it('get/set value updates the value of the native radio element', () => {\n    const {root, component} = setupTest();\n    const radio =\n        root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n    component.value = 'new value';\n    expect(radio.value).toEqual('new value');\n    expect(component.value).toEqual(radio.value);\n  });\n\n  it('get ripple returns a MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBeTruthy();\n  });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.setNativeControlDisabled sets the native control element\\'s disabled property to true',\n     () => {\n       const {root, component} = setupTest();\n       const radio = root.querySelector<HTMLElement>(NATIVE_CONTROL_SELECTOR) as\n           HTMLInputElement;\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setNativeControlDisabled(true);\n       expect(radio.disabled).toBe(true);\n     });\n\n  it('#adapter.setNativeControlDisabled sets the native control element\\'s disabled property to false',\n     () => {\n       const {root, component} = setupTest();\n       const radio = root.querySelector<HTMLElement>(NATIVE_CONTROL_SELECTOR) as\n           HTMLInputElement;\n       radio.disabled = true;\n\n       (component.getDefaultFoundation() as any)\n           .adapter.setNativeControlDisabled(false);\n       expect(radio.disabled).toBe(false);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-radio/test/feature-targeting-any.test.scss",
    "content": "@use '../radio';\n@use '../radio-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include radio.core-styles($query: $query);\n    @include radio-theme.unchecked-stroke-color(red, $query: $query);\n    @include radio-theme.checked-stroke-color(red, $query: $query);\n    @include radio-theme.ink-color(red, $query: $query);\n    @include radio-theme.focus-indicator-color(red, $query: $query);\n    @include radio.ripple($query: $query);\n    @include radio.without-ripple($query: $query);\n    @include radio-theme.touch-target(900px, $query: $query);\n    @include radio-theme.density(-1, $query: $query);\n    @include radio-theme.ripple-size(0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-radio/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCRadioFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCRadioFoundation);\n  return {foundation, mockAdapter};\n}\n\ndescribe('MDCRadioFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCRadioFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCRadioFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    const {defaultAdapter} = MDCRadioFoundation;\n    const methods =\n        Object.keys(defaultAdapter)\n            .filter((k) => typeof (defaultAdapter as any)[k] === 'function');\n\n    expect(methods.length).toEqual(Object.keys(defaultAdapter).length);\n    expect(methods).toEqual(\n        ['addClass', 'removeClass', 'setNativeControlDisabled']);\n    methods.forEach((m) => {\n      expect(() => (defaultAdapter as any)[m]).not.toThrow();\n    });\n  });\n\n  it('#setDisabled calls adapter.setNativeControlDisabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.setNativeControlDisabled).toHaveBeenCalledWith(true);\n  });\n\n  it('#setDisabled adds mdc-radio--disabled to the radio element when set to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCRadioFoundation.cssClasses.DISABLED);\n     });\n\n  it('#setDisabled removes mdc-radio--disabled from the radio element when set to false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCRadioFoundation.cssClasses.DISABLED);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-radio/test/mdc-radio.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-radio.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-ripple/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-ripple/README.md",
    "content": "<!--docs:\ntitle: \"Ripples\"\nlayout: detail\nsection: components\nexcerpt: \"Ink ripple touch feedback effect.\"\niconId: ripple\npath: /catalog/ripples/\n-->\n\n# Ripple\n\nMDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.\n\nMDC Ripple also works without JavaScript, where it gracefully degrades to a simpler CSS-Only implementation.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-states\">Material Design guidelines: States</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/ripple\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/ripple\n```\n\n## Usage\n\nA ripple can be applied to a variety of elements to represent interactive surfaces. Several MDC Web components, such as Button, FAB, Checkbox and Radio, also use ripples.\n\nA ripple can be added to an element through either a JavaScript or CSS-only implementation. When a ripple is initialized on an element using JS, it dynamically adds a `mdc-ripple-upgraded` class to that element. If ripple JS is not initialized but Sass mixins are included on the element, the ripple uses a simpler CSS-only implementation which relies on the `:hover`, `:focus`, and `:active` pseudo-classes.\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-ripple-surface` | Adds a ripple to the element\n`mdc-ripple-surface--primary` | Sets the ripple color to the theme primary color\n`mdc-ripple-surface--accent` | Sets the ripple color to the theme secondary color\n\n### Sass APIs\n\nIn order to fully style the ripple effect for different states (hover/focus/pressed), the following mixins must be included:\n\n* `surface`, for base styles\n* Either `radius-bounded` or `radius-unbounded`, to appropriately size the ripple on the surface\n* Either the basic or advanced `states` mixins, as explained below\n\n##### Using basic states mixins\n```css\n@use \"@material/ripple\";\n\n.my-surface {\n  @include ripple.surface;\n  @include ripple.radius-bounded;\n  @include ripple.states;\n}\n```\n\n##### Using advanced states mixins\n```css\n.my-surface {\n  @include ripple.surface;\n  @include ripple.radius-bounded;\n  @include ripple.states-base-color(black);\n  @include ripple.states-opacities((hover: .1, focus: .3, press: .4));\n}\n```\n\nThese APIs use pseudo-elements for the ripple effect: `::before` for the background, and `::after` for the foreground.\n\n#### Ripple Mixins\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Adds base styles for a ripple surface\n`radius-bounded($radius)` | Adds styles for the radius of the ripple effect,<br>for bounded ripple surfaces\n`radius-unbounded($radius)` | Adds styles for the radius of the ripple effect,<br>for unbounded ripple surfaces\n\n> _NOTE_: It is mandatory to include _either_ `radius-bounded` or `radius-unbounded`. In both cases, `$radius` is optional and defaults to `100%`.\n\n#### Basic States Mixins\n\nMixin | Description\n--- | ---\n`states($color, $has-nested-focusable-element)` | Mandatory. Adds state and ripple styles in the given color\n`states-activated($color, $has-nested-focusable-element)` | Optional. Adds state and ripple styles for activated states in the given color\n`states-selected($color, $has-nested-focusable-element)` | Optional. Adds state and ripple styles for selected states in the given color\n\n> _NOTE_: Each of the mixins above adds ripple styles using the indicated color, deciding opacity values based on whether the passed color is light or dark.\n\n> _NOTE_: The `states-activated` and `states-selected` mixins add the appropriate state styles to the root element containing `&--activated` or `&--selected` modifier classes respectively.\n\n> _NOTE_: `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) inside the root element.\n\n#### Advanced States Mixins\n\nWhen using the advanced states mixins instead of the basic states mixins, every one of the mixins below should be included at least once.\n\nThese mixins can also be used to emit activated or selected styles, by applying them within a selector for\n`&--activated` or `&--selected` modifier classes.\n\nMixin | Description\n--- | ---\n`states-base-color($color)` | Mandatory. Sets up base state styles using the provided color\n`states-opacities($opacity-map, $has-nested-focusable-element)` | Sets the opacity of the ripple in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify one or more of these states as keys. States not specified in the map resort to default opacity values.\n\n> _NOTE_: `$has-nested-focusable-element` defaults to `false` but should be set to `true` if the component contains a focusable element (e.g. an input) inside the root element.\n\n> _DEPRECATED_: The individual mixins `states-hover-opacity($opacity)`, `states-focus-opacity($opacity, $has-nested-focusable-element)`, and `states-press-opacity($opacity)` are deprecated in favor of the unified `states-opacities($opacity-map, $has-nested-focusable-element)` mixin above.\n\n#### Sass Functions\n\nFunction | Description\n--- | ---\n`states-opacity($color, $state)` | Returns the appropriate default opacity to apply to the given color in the given state (hover, focus, press, selected, or activated)\n\n### `MDCRipple`\n\nThe `MDCRipple` JavaScript component allows for programmatic activation / deactivation of the ripple, for interdependent interaction between\ncomponents. For example, this is used for making form field labels trigger the ripples in their corresponding input elements.\n\nTo use the `MDCRipple` component, first [import the `MDCRipple` JS](../../docs/importing-js.md). Then, initialize the ripple with the correct DOM element.\n\n```javascript\nconst surface = document.querySelector<HTMLElement>('.my-surface');\nconst ripple = new MDCRipple(surface);\n```\n\nYou can also use `attachTo()` as an alias if you don't care about retaining a reference to the\nripple.\n\n```javascript\nMDCRipple.attachTo(document.querySelector<HTMLElement>('.my-surface'));\n```\n\nProperty | Value Type | Description\n--- | --- | ---\n`unbounded` | Boolean | Whether or not the ripple is unbounded\n> _NOTE_: Surfaces for bounded ripples should have the `overflow` property set to `hidden`, while surfaces for unbounded ripples should have it set to `visible`.\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate` method\n`deactivate() => void` | Proxies to the foundation's `deactivate` method\n`layout() => void` | Proxies to the foundation's `layout` method\n`handleFocus() => void` | Handles focus event on the ripple surface\n`handleBlur() => void` | Handles blur event on the ripple surface\n\n### `MDCRippleAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `browserSupportsCssVars() => boolean` | Whether or not the given browser supports CSS Variables. |\n| `isUnbounded() => boolean` | Whether or not the ripple should be considered unbounded. |\n| `isSurfaceActive() => boolean` | Whether or not the surface the ripple is acting upon is [active](https://www.w3.org/TR/css3-selectors/#useraction-pseudos) |\n| `isSurfaceDisabled() => boolean` | Whether or not the ripple is attached to a disabled component |\n| `addClass(className: string) => void` | Adds a class to the ripple surface |\n| `removeClass(className: string) => void` | Removes a class from the ripple surface |\n| `containsEventTarget(target: EventTarget) => boolean` | Whether or not the ripple surface contains the given event target |\n| `registerInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event handler on the ripple surface |\n| `deregisterInteractionHandler(eventType: string, handler: EventListener) => void` | Unregisters an event handler on the ripple surface |\n| `registerDocumentInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event handler on the documentElement |\n| `deregisterDocumentInteractionHandler(eventType: string, handler: EventListener) => void` | Unregisters an event handler on the documentElement |\n| `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the ripple surface (or its viewport) resizes |\n| `deregisterResizeHandler(handler: Function) => void` | Unregisters a handler to be called when the ripple surface (or its viewport) resizes |\n| `updateCssVariable(varName: string, value: (string or null)) => void` | Sets the CSS property `varName` on the ripple surface to the value specified |\n| `computeBoundingRect() => ClientRect` | Returns the ClientRect for the surface |\n| `getWindowPageOffset() => {x: number, y: number}` | Returns the `page{X,Y}Offset` values for the window object |\n\n> _NOTE_: When implementing `browserSupportsCssVars`, please take the [Safari 9](#caveat-safari) considerations into account. We provide a `supportsCssVariables` function within the `util.js` which we recommend using, as it handles this for you.\n\n### `MDCRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Triggers an activation of the ripple (the first stage, which happens when the ripple surface is engaged via interaction, such as a `mousedown` or a `pointerdown` event). It expands from the center.\n`deactivate() => void` | Triggers a deactivation of the ripple (the second stage, which happens when the ripple surface is engaged via interaction, such as a `mouseup` or a `pointerup` event). It expands from the center.\n`layout() => void` | Recomputes all dimensions and positions for the ripple element. Useful if a ripple surface's position or dimension is changed programmatically.\n`setUnbounded(unbounded: boolean) => void` | Sets the ripple to be unbounded or not, based on the given boolean.\n\n## Tips/Tricks\n\n### Using a sentinel element for a ripple\n\nUsually, you'll want to leverage `::before` and `::after` pseudo-elements when integrating the ripple into MDC Web components. If you can't use pseudo-elements, create a sentinel element inside your root element. The sentinel element covers the root element's surface.\n\n```html\n<div class=\"my-component\">\n  <div class=\"mdc-ripple-surface\"></div>\n  <!-- your component DOM -->\n</div>\n```\n\n### Unbounded ripple\n\nYou can set a ripple to be _unbounded_, such as those used for MDC Checkboxes and MDC Radio Buttons, either imperatively in JS _or_ declaratively using the DOM.\n\n#### Using JS\n\nSet the `unbounded` property on the `MDCRipple` component.\n\n```javascript\nconst ripple = new MDCRipple(root);\nripple.unbounded = true;\n```\n\n#### Using DOM\n\nAdd a `data-mdc-ripple-is-unbounded` attribute to your root element.\n\n```html\n<div class=\"my-surface\" data-mdc-ripple-is-unbounded>\n  <p>A surface</p>\n</div>\n```\n\n### MDCRipple with custom functionality\n\nUsually, you'll want to use `MDCRipple` _along_ with the component for the actual UI element you're trying to add a\nripple to. `MDCRipple` has a static `createAdapter(instance)` method that can be used to instantiate a ripple within\nany `MDCComponent` that requires custom adapter functionality.\n\n```ts\nclass MyMDCComponent extends MDCComponent {\n  constructor() {\n    super(...arguments);\n    const foundation = new MDCRippleFoundation({\n      ...MDCRipple.createAdapter(this),\n      isSurfaceActive: () => this.isActive, /* Custom functionality */\n    });\n    this.ripple = new MDCRipple(this.root, foundation);\n  }\n}\n```\n\n### Handling keyboard events for custom UI components\n\nDifferent keyboard events activate different elements. For example, the space key activates buttons, while the enter key activates links.\n\n`MDCRipple` uses the `adapter.isSurfaceActive()` method to detect whether or not a keyboard event has activated the surface the ripple is on. Our vanilla implementation of the adapter does this by checking whether the `:active` pseudo-class has been applied to the ripple surface. However, this approach will _not_ work for custom components that the browser does not apply this pseudo-class to.\n\nTo make your component work properly with keyboard events, you'll have to listen for both `keydown` and `keyup` events to set some state that determines whether or not the surface is \"active\".\n\n```ts\nclass MyComponent {\n  constructor(element) {\n    this.root = element;\n    this.active = false;\n    this.root.addEventListener('keydown', event => {\n      if (isSpace(event)) {\n        this.active = true;\n      }\n    });\n    this.root.addEventListener('keyup', event => {\n      if (isSpace(event)) {\n        this.active = false;\n      }\n    });\n    const foundation = new MDCRippleFoundation(\n      ...MDCRipple.createAdapter(this),\n      // ...\n      isSurfaceActive: () => this.active\n    });\n    this.ripple = new MDCRipple(this.root, foundation);\n  }\n}\n```\n\n### Specifying known element dimensions for asynchronous style loading\n\nIf you asynchronously load style resources, such as loading stylesheets dynamically or loading fonts, then `adapter.getClientRect()` may return _incorrect_ dimensions if the ripple is initialized before the stylesheet/font has loaded. In this case, you can override the default behavior of `getClientRect()` to return the correct results.\n\nFor example, if you know an icon font sizes its elements to `24px` width and height:\n```js\nconst foundation = new MDCRippleFoundation({\n  // ...\n  computeBoundingRect: () => {\n    const {left, top} = element.getBoundingClientRect();\n    const dim = 24;\n    return {\n      left,\n      top,\n      width: dim,\n      height: dim,\n      right: left + dim,\n      bottom: top + dim\n    };\n  }\n});\nthis.ripple = new MDCRipple(this.root, foundation);\n```\n\n### The util API\n\nExternal frameworks and libraries can use the following utility methods when integrating a component.\n\nMethod Signature | Description\n--- | ---\n`util.supportsCssVariables(windowObj, forceRefresh = false) => Boolean` | Determine whether the current browser supports CSS variables (custom properties)\n`util.getNormalizedEventCoords(ev, pageOffset, clientRect) => object` | Determines X/Y coordinates of an event normalized for touch events and ripples\n\n> _NOTE_: The function `util.supportsCssVariables` cache its results; `forceRefresh` will force recomputation, but is used mainly for testing and should not be necessary in normal use.\n\n## Caveats\n\n### Caveat: Safari 9\n\n> TL;DR ripples are disabled in Safari 9 because of a bug with CSS variables.\n\nThe ripple works by updating CSS variables used by pseudo-elements. Unfortunately, in Safari 9.1, there is a bug where updating a CSS variable on an element will _not_ trigger a style recalculation on that element's pseudo-elements (try out [this codepen](http://codepen.io/traviskaufman/pen/jARYOR) in Chrome, and then in Safari 9.1 to see the issue). Webkit builds which have this bug fixed (e.g. the builds used in Safari 10+)\nsupport [CSS 4 Hex Notation](https://drafts.csswg.org/css-color/#hex-notation) while those without the fix don't. We feature-detect whether we are working with a WebKit build that can handle our usage of CSS variables.\n\n### Caveat: Mobile Safari\n\n> TL;DR for CSS-only ripple styles to work as intended, register a `touchstart` event handler on the affected element or its ancestor.\n\nMobile Safari does not trigger `:active` styles noticeably by default, as\n[documented](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5)\nin the Safari Web Content Guide. This effectively suppresses the intended pressed state styles for CSS-only ripple surfaces. This behavior can be remedied by registering a `touchstart` event handler on the element, or on any common ancestor of the desired elements.\n\nSee [this StackOverflow answer](https://stackoverflow.com/a/33681490) for additional information on mobile Safari's behavior.\n"
  },
  {
    "path": "packages/mdc-ripple/_functions.import.scss",
    "content": "@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"./index\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-keyframes-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n"
  },
  {
    "path": "packages/mdc-ripple/_functions.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_ripple-theme.scss' instead.\n@forward './ripple-theme' show states-opacity, states-opacities_;\n"
  },
  {
    "path": "packages/mdc-ripple/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./keyframes\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-ripple/_keyframes.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-, mdc-states-opacity, mdc-states-opacities-;\n@forward \"./index\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n"
  },
  {
    "path": "packages/mdc-ripple/_keyframes.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_ripple.scss' instead.\n@forward './ripple' show keyframes_;\n"
  },
  {
    "path": "packages/mdc-ripple/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"./index\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n"
  },
  {
    "path": "packages/mdc-ripple/_mixins.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_ripple.scss' or '_ripple-theme.scss' Sass modules\n/// instead.\n@forward './ripple' show core-styles, surface-styles, unbounded-styles, common, surface, radius-bounded, radius-unbounded, target-common;\n@forward './ripple-theme' show states-base-color, states-opacities, states-hover-opacity, states-focus-opacity, states-focus-opacity-properties_, states-press-opacity, states, states-activated, states-selected, states-interactions_, target-selector;\n"
  },
  {
    "path": "packages/mdc-ripple/_ripple-theme.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n  hover: 0.04,\n  focus: 0.12,\n  press: 0.12,\n  selected: 0.08,\n  activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n  hover: 0.08,\n  focus: 0.24,\n  press: 0.24,\n  selected: 0.16,\n  activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n  focus-state-layer-color: theme-color.$on-surface,\n  focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n  hover-state-layer-color: theme-color.$on-surface,\n  hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n  pressed-state-layer-color: theme-color.$on-surface,\n  pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @if shadow-dom.$css-selector-fallback-declarations {\n    .mdc-ripple-surface {\n      @include theme-styles($theme);\n    }\n  }\n}\n\n$_ripple-theme: (\n  hover-state-layer-color: null,\n  focus-state-layer-color: null,\n  pressed-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  focus-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  // TODO(b/191298796): Support states layer color for every interactive states.\n  // Use only hover state layer color, ignoring focus and pressed color.\n  // Consider replacing states-base-color with states-colors.\n  @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n  @include theme.validate-theme-styles($_ripple-theme, $theme);\n\n  @include states-base-color(\n    map.get($theme, hover-state-layer-color),\n    $ripple-target: $ripple-target\n  );\n  @include states-hover-opacity(\n    map.get($theme, hover-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-focus-opacity(\n    map.get($theme, focus-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-press-opacity(\n    map.get($theme, pressed-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n}\n\n/// @deprecated Use states-colors instead.\n@mixin states-base-color(\n  $color,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @if not custom-properties.is-custom-prop($color) {\n      $color: custom-properties.create(\n        ripple-color,\n        theme-color.get-custom-property($color)\n      );\n    }\n\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes ripple color in `hover` and `press` states\n/// @param {map} $color-map - map specifying custom opacity of zero or more states\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-colors(\n  $color-map: (),\n  $ripple-target: '&',\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if map.get($color-map, hover) {\n    @include hover-state-layer-selector($ripple-target) {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, map.get($color-map, hover));\n      }\n    }\n  }\n\n  @if map.get($color-map, press) {\n    @include press-state-layer-selector($ripple-target) {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, map.get($color-map, press));\n      }\n    }\n  }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n  $opacity-map: (),\n  $has-nested-focusable-element: false,\n  $ripple-target: '&',\n  $query: feature-targeting.all()\n) {\n  // Ensure sufficient specificity to override base state opacities\n  @if map.get($opacity-map, hover) {\n    @include states-hover-opacity(\n      map.get($opacity-map, hover),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, focus) {\n    @include states-focus-opacity(\n      map.get($opacity-map, focus),\n      $ripple-target: $ripple-target,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, press) {\n    @include states-press-opacity(\n      map.get($opacity-map, press),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n}\n\n@mixin states-hover-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity and not custom-properties.is-custom-prop($opacity) {\n    $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n  }\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover,\n  &.mdc-ripple-surface--hover {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(opacity, $opacity);\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity(\n  $opacity,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  // Focus overrides hover by reusing the ::before pseudo-element.\n  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n  // but undesirable in general in case of nested stateful components.\n  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n  @if $has-nested-focusable-element {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus,\n    &:focus-within {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  } @else {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n    }\n\n    // Note that this duration is only effective on focus, not blur\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: 75ms;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin states-press-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Styles for non-upgraded (CSS-only) stateful surfaces\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n    }\n\n    &:not(.mdc-ripple-upgraded) {\n      @include press-state-layer-selector($ripple-target) {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity $fade-out-duration linear;\n        }\n      }\n\n      &:active {\n        @include press-state-layer-selector($ripple-target) {\n          @include feature-targeting.targets($feat-animation) {\n            transition-duration: $fade-in-duration;\n          }\n\n          // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n          @include feature-targeting.targets($feat-color) {\n            @include theme.property(opacity, $opacity);\n          }\n        }\n      }\n    }\n\n    &.mdc-ripple-upgraded {\n      @include feature-targeting.targets($feat-color) {\n        // Upgraded ripple should always emit custom property, regardless of\n        // configuration, since ripple itself feature detects custom property\n        // support at runtime.\n        @include custom-properties.configure($emit-custom-properties: true) {\n          @include theme.property(\n            custom-properties.create(ripple-fg-opacity, $opacity)\n          );\n        }\n      }\n    }\n  }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n  $color: theme-color.prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include states-interactions_(\n    $color: $color,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target,\n    $opacity-map: $opacity-map\n  );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $activated-opacity: states-opacity($color, activated);\n\n  &--activated {\n    // Stylelint seems to think that '&' qualifies as a type selector here?\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-activated-opacity,\n            $activated-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $activated-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $selected-opacity: states-opacity($color, selected);\n\n  &--selected {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-selected-opacity,\n            $selected-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $selected-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include target-selector($ripple-target) {\n    @include states-base-color($color, $query);\n  }\n\n  @if $opacity-map == null {\n    $opacity-map: (\n      hover: states-opacity($color, hover) + $opacity-modifier,\n      focus: states-opacity($color, focus) + $opacity-modifier,\n      press: states-opacity($color, press) + $opacity-modifier,\n    );\n  }\n\n  @include states-opacities(\n    $opacity-map,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $ripple-target: $ripple-target,\n    $query: $query\n  );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n  @if $ripple-target == '&' {\n    @content;\n  } @else {\n    #{$ripple-target} {\n      @content;\n    }\n  }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n  #{$_hover-selector},\n  #{$_focus-selector},\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n@mixin hover() {\n  #{$_hover-selector} {\n    @content;\n  }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n  #{$_focus-selector} {\n    @content;\n  }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n  @include pressed() {\n    @content;\n  }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n  $ripple-target,\n  $content-root-selector: '&',\n  $query: feature-targeting.all()\n) {\n  // Needed for IE11. Without this, IE11 renders the state layer completely\n  // underneath the container, making it invisible.\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  #{$content-root-selector} {\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 0;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, -1)\n      );\n    }\n  }\n}\n\n@function states-opacity($color, $state) {\n  $color-value: theme-color.prop-value($color);\n  $opacity-map: if(\n    theme-color.tone($color-value) == 'light',\n    $light-ink-opacities,\n    $dark-ink-opacities\n  );\n\n  @if not map.has-key($opacity-map, $state) {\n    @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n  }\n\n  @return map.get($opacity-map, $state);\n}\n\n/// @deprecated Use hover-state-layer-selector instead.\n@mixin states-background-selector($ripple-target) {\n  @include hover-state-layer-selector($ripple-target) {\n    @content;\n  }\n}\n\n@mixin hover-state-layer-selector($ripple-target) {\n  #{$ripple-target}::before {\n    @content;\n  }\n}\n\n@mixin press-state-layer-selector($ripple-target) {\n  #{$ripple-target}::after {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-ripple/_ripple.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query: $query);\n\n  .mdc-ripple-surface {\n    @include ripple-theme.states($query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-ripple-surface {\n    @include surface($query: $query);\n    @include radius-bounded($query: $query);\n    @include surface-styles($query: $query);\n  }\n\n  .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n  .mdc-ripple-upgraded--unbounded {\n    @include radius-unbounded($query: $query);\n    @include unbounded-styles($query: $query);\n  }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n///     a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states($color, $query: $query);\n  @include ripple-theme.states-activated($color, $query: $query);\n  @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: relative;\n    outline: none;\n    overflow: hidden;\n  }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    overflow: visible;\n  }\n}\n\n@mixin common($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n  // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n  // mdc-ripple.scss.)\n  @include feature-targeting.targets($feat-animation) {\n    @include base-mixins.emit-once('mdc-ripple/common/animation') {\n      @include keyframes_;\n    }\n  }\n}\n\n@mixin surface(\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    --mdc-ripple-fg-size: 0;\n    --mdc-ripple-left: 0;\n    --mdc-ripple-top: 0;\n    --mdc-ripple-fg-scale: 1;\n    --mdc-ripple-fg-translate-end: 0;\n    --mdc-ripple-fg-translate-start: 0;\n\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    // TODO(b/151931961): Remove the following block once resolved\n    @if $include-will-change {\n      will-change: transform, opacity;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      border-radius: 50%;\n      opacity: 0;\n      pointer-events: none;\n      content: '';\n    }\n  }\n\n  #{$ripple-target}::before {\n    @include feature-targeting.targets($feat-animation) {\n      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n      transition: opacity ripple-theme.$states-wash-duration linear,\n        background-color ripple-theme.$states-wash-duration linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 1)\n      );\n    }\n  }\n\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 0)\n      );\n    }\n  }\n\n  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: 0;\n        @include rtl.ignore-next-line();\n        left: 0;\n        transform: scale(0);\n        transform-origin: center center;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--unbounded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: var(--mdc-ripple-top, 0);\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, 0);\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-activation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n            forwards,\n          mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-deactivation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        // Retain transform from mdc-ripple-fg-radius-in activation\n        @include rtl.ignore-next-line();\n        transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n          scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n  }\n}\n\n@mixin radius-bounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{$radius});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{$radius});\n      width: $radius * 2;\n      height: $radius * 2;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n@mixin radius-unbounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{math.div($radius, 2)});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{math.div($radius, 2)});\n      width: $radius;\n      height: $radius;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    // Necessary for clicks on other inner elements (e.g. close icon in chip)\n    // to go through.\n    pointer-events: none;\n  }\n}\n\n@mixin keyframes_ {\n  @keyframes mdc-ripple-fg-radius-in {\n    from {\n      animation-timing-function: variables2.$standard-curve-timing-function;\n      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n      // that custom properties are supported within the browser before adding this class, we can\n      // safely use them without a fallback.\n      @include rtl.ignore-next-line();\n      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n    }\n\n    to {\n      @include rtl.ignore-next-line();\n      transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n        scale(var(--mdc-ripple-fg-scale, 1));\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-in {\n    from {\n      animation-timing-function: linear;\n      opacity: 0;\n    }\n\n    to {\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-out {\n    from {\n      animation-timing-function: linear;\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n\n    to {\n      opacity: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-ripple/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-states-base-color, mdc-states-opacities, mdc-states-hover-opacity, mdc-states-focus-opacity, mdc-states-focus-opacity-properties-, mdc-states-press-opacity, mdc-states, mdc-states-activated, mdc-states-selected, mdc-radius-bounded, mdc-radius-unbounded, mdc-states-interactions-, mdc-target-selector, mdc-target-common, mdc-keyframes-, mdc-states-opacity, mdc-states-opacities-;\n@forward \"./index\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-core-styles, mdc-ripple-common, mdc-ripple-surface, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-radius-bounded, mdc-ripple-radius-unbounded, mdc-ripple-states-interactions-, mdc-ripple-target-selector, mdc-ripple-target-common, mdc-ripple-keyframes-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n"
  },
  {
    "path": "packages/mdc-ripple/_variables.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_ripple-theme.scss' instead.\n@forward './ripple-theme' show $fade-in-duration, $fade-out-duration, $translate-duration, $states-wash-duration, $dark-ink-opacities, $light-ink-opacities, $pressed-dark-ink-opacity, $pressed-light-ink-opacity;\n"
  },
  {
    "path": "packages/mdc-ripple/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\nimport {MDCRipplePoint} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCRippleAdapter {\n  browserSupportsCssVars(): boolean;\n\n  isUnbounded(): boolean;\n\n  isSurfaceActive(): boolean;\n\n  isSurfaceDisabled(): boolean;\n\n  addClass(className: string): void;\n\n  removeClass(className: string): void;\n\n  containsEventTarget(target: EventTarget|null): boolean;\n\n  registerInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  deregisterInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  registerDocumentInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  deregisterDocumentInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  registerResizeHandler(handler: SpecificEventListener<'resize'>): void;\n\n  deregisterResizeHandler(handler: SpecificEventListener<'resize'>): void;\n\n  updateCssVariable(varName: string, value: string|null): void;\n\n  computeBoundingRect(): DOMRect;\n\n  getWindowPageOffset(): MDCRipplePoint;\n}\n"
  },
  {
    "path": "packages/mdc-ripple/common.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.common;\n"
  },
  {
    "path": "packages/mdc-ripple/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {applyPassive} from '@material/dom/events';\nimport {matches} from '@material/dom/ponyfill';\n\nimport {MDCRippleAdapter} from './adapter';\nimport {MDCRippleFoundation} from './foundation';\nimport {MDCRippleAttachOpts, MDCRippleCapableSurface} from './types';\nimport * as util from './util';\n\n/** MDC Ripple Factory */\nexport type MDCRippleFactory =\n    (el: HTMLElement, foundation?: MDCRippleFoundation) => MDCRipple;\n\n/** MDC Ripple */\nexport class MDCRipple extends MDCComponent<MDCRippleFoundation> implements\n    MDCRippleCapableSurface {\n  static override attachTo(root: HTMLElement, opts: MDCRippleAttachOpts = {\n    isUnbounded: undefined\n  }): MDCRipple {\n    const ripple = new MDCRipple(root);\n    // Only override unbounded behavior if option is explicitly specified\n    if (opts.isUnbounded !== undefined) {\n      ripple.unbounded = opts.isUnbounded;\n    }\n    return ripple;\n  }\n\n  static createAdapter(instance: MDCRippleCapableSurface): MDCRippleAdapter {\n    return {\n      addClass: (className) => {\n        instance.root.classList.add(className);\n      },\n      browserSupportsCssVars: () => util.supportsCssVariables(window),\n      computeBoundingRect: () => instance.root.getBoundingClientRect(),\n      containsEventTarget: (target) => instance.root.contains(target as Node),\n      deregisterDocumentInteractionHandler: (eventType, handler) => {\n        document.documentElement.removeEventListener(\n            eventType, handler, applyPassive());\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        instance.root.removeEventListener(eventType, handler, applyPassive());\n      },\n      deregisterResizeHandler: (handler) => {\n        window.removeEventListener('resize', handler);\n      },\n      getWindowPageOffset: () =>\n          ({x: window.pageXOffset, y: window.pageYOffset}),\n      isSurfaceActive: () => matches(instance.root, ':active'),\n      isSurfaceDisabled: () => Boolean(instance.disabled),\n      isUnbounded: () => Boolean(instance.unbounded),\n      registerDocumentInteractionHandler: (eventType, handler) => {\n        document.documentElement.addEventListener(\n            eventType, handler, applyPassive());\n      },\n      registerInteractionHandler: (eventType, handler) => {\n        instance.root.addEventListener(eventType, handler, applyPassive());\n      },\n      registerResizeHandler: (handler) => {\n        window.addEventListener('resize', handler);\n      },\n      removeClass: (className) => {\n        instance.root.classList.remove(className);\n      },\n      updateCssVariable: (varName, value) => {\n        instance.root.style.setProperty(varName, value);\n      },\n    };\n  }\n\n  disabled = false;\n\n  private isUnbounded?: boolean;\n\n  get unbounded(): boolean {\n    return Boolean(this.isUnbounded);\n  }\n\n  set unbounded(unbounded: boolean) {\n    this.isUnbounded = Boolean(unbounded);\n    this.setUnbounded();\n  }\n\n  activate() {\n    this.foundation.activate();\n  }\n\n  deactivate() {\n    this.foundation.deactivate();\n  }\n\n  layout() {\n    this.foundation.layout();\n  }\n\n  override getDefaultFoundation() {\n    return new MDCRippleFoundation(MDCRipple.createAdapter(this));\n  }\n\n  override initialSyncWithDOM() {\n    const root = this.root;\n    this.isUnbounded = 'mdcRippleIsUnbounded' in root.dataset;\n  }\n\n  /**\n   * Closure Compiler throws an access control error when directly accessing a\n   * protected or private property inside a getter/setter, like unbounded above.\n   * By accessing the protected property inside a method, we solve that problem.\n   * That's why this function exists.\n   */\n  private setUnbounded() {\n    this.foundation.setUnbounded(Boolean(this.isUnbounded));\n  }\n}\n"
  },
  {
    "path": "packages/mdc-ripple/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport const cssClasses = {\n  // Ripple is a special case where the \"root\" component is really a \"mixin\" of\n  // sorts,\n  // given that it's an 'upgrade' to an existing component. That being said it\n  // is the root\n  // CSS class that all other CSS classes derive from.\n  BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',\n  FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',\n  FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',\n  ROOT: 'mdc-ripple-upgraded',\n  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',\n};\n\nexport const strings = {\n  VAR_FG_SCALE: '--mdc-ripple-fg-scale',\n  VAR_FG_SIZE: '--mdc-ripple-fg-size',\n  VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',\n  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',\n  VAR_LEFT: '--mdc-ripple-left',\n  VAR_TOP: '--mdc-ripple-top',\n};\n\nexport const numbers = {\n  DEACTIVATION_TIMEOUT_MS:\n      225,  // Corresponds to $mdc-ripple-translate-duration (i.e. activation\n            // animation duration)\n  FG_DEACTIVATION_MS: 150,  // Corresponds to $mdc-ripple-fade-out-duration\n                            // (i.e. deactivation animation duration)\n  INITIAL_ORIGIN_SCALE: 0.6,\n  PADDING: 10,\n  TAP_DELAY_MS:\n      300,  // Delay between touch and simulated mouse events on touch devices\n};\n"
  },
  {
    "path": "packages/mdc-ripple/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCRippleAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\nimport {MDCRipplePoint} from './types';\nimport {getNormalizedEventCoords} from './util';\n\ninterface ActivationStateType {\n  isActivated?: boolean;\n  hasDeactivationUXRun?: boolean;\n  wasActivatedByPointer?: boolean;\n  wasElementMadeActive?: boolean;\n  activationEvent?: Event;\n  isProgrammatic?: boolean;\n}\n\ninterface FgTranslationCoordinates {\n  startPoint: MDCRipplePoint;\n  endPoint: MDCRipplePoint;\n}\n\ninterface Coordinates {\n  left: number;\n  top: number;\n}\n\ninterface EventHandlerNonNull {\n  (event: Event): any;\n}\n\ntype ActivationEventType = 'touchstart'|'pointerdown'|'mousedown'|'keydown';\ntype DeactivationEventType = 'touchend'|'pointerup'|'mouseup'|'contextmenu';\n\n// Activation events registered on the root element of each instance for\n// activation\nconst ACTIVATION_EVENT_TYPES: ActivationEventType[] = [\n  'touchstart',\n  'pointerdown',\n  'mousedown',\n  'keydown',\n];\n\n// Deactivation events registered on documentElement when a pointer-related down\n// event occurs\nconst POINTER_DEACTIVATION_EVENT_TYPES: DeactivationEventType[] = [\n  'touchend',\n  'pointerup',\n  'mouseup',\n  'contextmenu',\n];\n\n// simultaneous nested activations\nlet activatedTargets: Array<EventTarget|null> = [];\n\n/** MDC Ripple Foundation */\nexport class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCRippleAdapter {\n    return {\n      addClass: () => undefined,\n      browserSupportsCssVars: () => true,\n      computeBoundingRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      containsEventTarget: () => true,\n      deregisterDocumentInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      deregisterResizeHandler: () => undefined,\n      getWindowPageOffset: () => ({x: 0, y: 0}),\n      isSurfaceActive: () => true,\n      isSurfaceDisabled: () => true,\n      isUnbounded: () => true,\n      registerDocumentInteractionHandler: () => undefined,\n      registerInteractionHandler: () => undefined,\n      registerResizeHandler: () => undefined,\n      removeClass: () => undefined,\n      updateCssVariable: () => undefined,\n    };\n  }\n\n  private activationAnimationHasEnded = false;\n  private activationState: ActivationStateType;\n  private activationTimer = 0;\n  private fgDeactivationRemovalTimer = 0;\n  private fgScale = '0';\n  private frame = {width: 0, height: 0};\n  private initialSize = 0;\n  private layoutFrame = 0;\n  private maxRadius = 0;\n  private unboundedCoords: Coordinates = {left: 0, top: 0};\n\n  private readonly activationTimerCallback: () => void;\n  private readonly activateHandler: EventHandlerNonNull;\n  private readonly deactivateHandler: EventHandlerNonNull;\n  private readonly focusHandler: EventHandlerNonNull;\n  private readonly blurHandler: EventHandlerNonNull;\n  private readonly resizeHandler: EventHandlerNonNull;\n\n  private previousActivationEvent?: Event;\n\n  constructor(adapter?: Partial<MDCRippleAdapter>) {\n    super({...MDCRippleFoundation.defaultAdapter, ...adapter});\n\n    this.activationState = this.defaultActivationState();\n\n    this.activationTimerCallback = () => {\n      this.activationAnimationHasEnded = true;\n      this.runDeactivationUXLogicIfReady();\n    };\n    this.activateHandler = (e) => {\n      this.activateImpl(e);\n    };\n    this.deactivateHandler = () => {\n      this.deactivateImpl();\n    };\n    this.focusHandler = () => {\n      this.handleFocus();\n    };\n    this.blurHandler = () => {\n      this.handleBlur();\n    };\n    this.resizeHandler = () => {\n      this.layout();\n    };\n  }\n\n  override init() {\n    const supportsPressRipple = this.supportsPressRipple();\n\n    this.registerRootHandlers(supportsPressRipple);\n\n    if (supportsPressRipple) {\n      const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;\n      requestAnimationFrame(() => {\n        this.adapter.addClass(ROOT);\n        if (this.adapter.isUnbounded()) {\n          this.adapter.addClass(UNBOUNDED);\n          // Unbounded ripples need layout logic applied immediately to set\n          // coordinates for both shade and ripple\n          this.layoutInternal();\n        }\n      });\n    }\n  }\n\n  override destroy() {\n    if (this.supportsPressRipple()) {\n      if (this.activationTimer) {\n        clearTimeout(this.activationTimer);\n        this.activationTimer = 0;\n        this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);\n      }\n\n      if (this.fgDeactivationRemovalTimer) {\n        clearTimeout(this.fgDeactivationRemovalTimer);\n        this.fgDeactivationRemovalTimer = 0;\n        this.adapter.removeClass(\n            MDCRippleFoundation.cssClasses.FG_DEACTIVATION);\n      }\n\n      const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;\n      requestAnimationFrame(() => {\n        this.adapter.removeClass(ROOT);\n        this.adapter.removeClass(UNBOUNDED);\n        this.removeCssVars();\n      });\n    }\n\n    this.deregisterRootHandlers();\n    this.deregisterDeactivationHandlers();\n  }\n\n  /**\n   * @param event Optional event containing position information.\n   */\n  activate(event?: Event): void {\n    this.activateImpl(event);\n  }\n\n  deactivate(): void {\n    this.deactivateImpl();\n  }\n\n  layout(): void {\n    if (this.layoutFrame) {\n      cancelAnimationFrame(this.layoutFrame);\n    }\n    this.layoutFrame = requestAnimationFrame(() => {\n      this.layoutInternal();\n      this.layoutFrame = 0;\n    });\n  }\n\n  setUnbounded(unbounded: boolean): void {\n    const {UNBOUNDED} = MDCRippleFoundation.cssClasses;\n    if (unbounded) {\n      this.adapter.addClass(UNBOUNDED);\n    } else {\n      this.adapter.removeClass(UNBOUNDED);\n    }\n  }\n\n  handleFocus(): void {\n    requestAnimationFrame(() => {\n      this.adapter.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);\n    });\n  }\n\n  handleBlur(): void {\n    requestAnimationFrame(() => {\n      this.adapter.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);\n    });\n  }\n\n  /**\n   * We compute this property so that we are not querying information about the\n   * client until the point in time where the foundation requests it. This\n   * prevents scenarios where client-side feature-detection may happen too\n   * early, such as when components are rendered on the server and then\n   * initialized at mount time on the client.\n   */\n  private supportsPressRipple(): boolean {\n    return this.adapter.browserSupportsCssVars();\n  }\n\n  private defaultActivationState(): ActivationStateType {\n    return {\n      activationEvent: undefined,\n      hasDeactivationUXRun: false,\n      isActivated: false,\n      isProgrammatic: false,\n      wasActivatedByPointer: false,\n      wasElementMadeActive: false,\n    };\n  }\n\n  /**\n   * supportsPressRipple Passed from init to save a redundant function call\n   */\n  private registerRootHandlers(supportsPressRipple: boolean) {\n    if (supportsPressRipple) {\n      for (const eventType of ACTIVATION_EVENT_TYPES) {\n        this.adapter.registerInteractionHandler(eventType, this.activateHandler);\n      }\n      if (this.adapter.isUnbounded()) {\n        this.adapter.registerResizeHandler(this.resizeHandler);\n      }\n    }\n\n    this.adapter.registerInteractionHandler('focus', this.focusHandler);\n    this.adapter.registerInteractionHandler('blur', this.blurHandler);\n  }\n\n  private registerDeactivationHandlers(event: Event) {\n    if (event.type === 'keydown') {\n      this.adapter.registerInteractionHandler('keyup', this.deactivateHandler);\n    } else {\n      for (const eventType of POINTER_DEACTIVATION_EVENT_TYPES) {\n        this.adapter.registerDocumentInteractionHandler(\n            eventType, this.deactivateHandler);\n      }\n    }\n  }\n\n  private deregisterRootHandlers() {\n    for (const eventType of ACTIVATION_EVENT_TYPES) {\n      this.adapter.deregisterInteractionHandler(eventType, this.activateHandler);\n    }\n    this.adapter.deregisterInteractionHandler('focus', this.focusHandler);\n    this.adapter.deregisterInteractionHandler('blur', this.blurHandler);\n\n    if (this.adapter.isUnbounded()) {\n      this.adapter.deregisterResizeHandler(this.resizeHandler);\n    }\n  }\n\n  private deregisterDeactivationHandlers() {\n    this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler);\n    for (const eventType of POINTER_DEACTIVATION_EVENT_TYPES) {\n      this.adapter.deregisterDocumentInteractionHandler(\n          eventType, this.deactivateHandler);\n    }\n  }\n\n  private removeCssVars() {\n    const rippleStrings = MDCRippleFoundation.strings;\n    const keys =\n        Object.keys(rippleStrings) as Array<keyof typeof rippleStrings>;\n    keys.forEach((key) => {\n      if (key.indexOf('VAR_') === 0) {\n        this.adapter.updateCssVariable(rippleStrings[key], null);\n      }\n    });\n  }\n\n  private activateImpl(event?: Event) {\n    if (this.adapter.isSurfaceDisabled()) {\n      return;\n    }\n\n    const activationState = this.activationState;\n    if (activationState.isActivated) {\n      return;\n    }\n\n    // Avoid reacting to follow-on events fired by touch device after an\n    // already-processed user interaction\n    const previousActivationEvent = this.previousActivationEvent;\n    const isSameInteraction = previousActivationEvent && event !== undefined &&\n        previousActivationEvent.type !== event.type;\n    if (isSameInteraction) {\n      return;\n    }\n\n    activationState.isActivated = true;\n    activationState.isProgrammatic = event === undefined;\n    activationState.activationEvent = event;\n    activationState.wasActivatedByPointer = activationState.isProgrammatic ?\n        false :\n        event !== undefined &&\n            (event.type === 'mousedown' || event.type === 'touchstart' ||\n             event.type === 'pointerdown');\n\n    const hasActivatedChild = event !== undefined &&\n        activatedTargets.length > 0 &&\n        activatedTargets.some(\n            (target) => this.adapter.containsEventTarget(target));\n    if (hasActivatedChild) {\n      // Immediately reset activation state, while preserving logic that\n      // prevents touch follow-on events\n      this.resetActivationState();\n      return;\n    }\n\n    if (event !== undefined) {\n      activatedTargets.push(event.target);\n      this.registerDeactivationHandlers(event);\n    }\n\n    activationState.wasElementMadeActive = this.checkElementMadeActive(event);\n    if (activationState.wasElementMadeActive) {\n      this.animateActivation();\n    }\n\n    requestAnimationFrame(() => {\n      // Reset array on next frame after the current event has had a chance to\n      // bubble to prevent ancestor ripples\n      activatedTargets = [];\n\n      if (!activationState.wasElementMadeActive && event !== undefined &&\n          ((event as KeyboardEvent).key === ' ' ||\n           (event as KeyboardEvent).keyCode === 32)) {\n        // If space was pressed, try again within an rAF call to detect :active,\n        // because different UAs report active states inconsistently when\n        // they're called within event handling code:\n        // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971\n        // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741\n        // We try first outside rAF to support Edge, which does not exhibit this\n        // problem, but will crash if a CSS variable is set within a rAF\n        // callback for a submit button interaction (#2241).\n        activationState.wasElementMadeActive = this.checkElementMadeActive(event);\n        if (activationState.wasElementMadeActive) {\n          this.animateActivation();\n        }\n      }\n\n      if (!activationState.wasElementMadeActive) {\n        // Reset activation state immediately if element was not made active.\n        this.activationState = this.defaultActivationState();\n      }\n    });\n  }\n\n  private checkElementMadeActive(event?: Event) {\n    return (event !== undefined && event.type === 'keydown') ?\n        this.adapter.isSurfaceActive() :\n        true;\n  }\n\n  private animateActivation() {\n    const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} =\n        MDCRippleFoundation.strings;\n    const {FG_DEACTIVATION, FG_ACTIVATION} = MDCRippleFoundation.cssClasses;\n    const {DEACTIVATION_TIMEOUT_MS} = MDCRippleFoundation.numbers;\n\n    this.layoutInternal();\n\n    let translateStart = '';\n    let translateEnd = '';\n\n    if (!this.adapter.isUnbounded()) {\n      const {startPoint, endPoint} = this.getFgTranslationCoordinates();\n      translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n      translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n    }\n\n    this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);\n    this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);\n    // Cancel any ongoing activation/deactivation animations\n    clearTimeout(this.activationTimer);\n    clearTimeout(this.fgDeactivationRemovalTimer);\n    this.rmBoundedActivationClasses();\n    this.adapter.removeClass(FG_DEACTIVATION);\n\n    // Force layout in order to re-trigger the animation.\n    this.adapter.computeBoundingRect();\n    this.adapter.addClass(FG_ACTIVATION);\n    this.activationTimer = setTimeout(() => {\n      this.activationTimerCallback();\n    }, DEACTIVATION_TIMEOUT_MS);\n  }\n\n  private getFgTranslationCoordinates(): FgTranslationCoordinates {\n    const {activationEvent, wasActivatedByPointer} = this.activationState;\n\n    let startPoint;\n    if (wasActivatedByPointer) {\n      startPoint = getNormalizedEventCoords(\n          activationEvent,\n          this.adapter.getWindowPageOffset(),\n          this.adapter.computeBoundingRect(),\n      );\n    } else {\n      startPoint = {\n        x: this.frame.width / 2,\n        y: this.frame.height / 2,\n      };\n    }\n    // Center the element around the start point.\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    const endPoint = {\n      x: (this.frame.width / 2) - (this.initialSize / 2),\n      y: (this.frame.height / 2) - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private runDeactivationUXLogicIfReady() {\n    // This method is called both when a pointing device is released, and when\n    // the activation animation ends. The deactivation animation should only run\n    // after both of those occur.\n    const {FG_DEACTIVATION} = MDCRippleFoundation.cssClasses;\n    const {hasDeactivationUXRun, isActivated} = this.activationState;\n    const activationHasEnded = hasDeactivationUXRun || !isActivated;\n\n    if (activationHasEnded && this.activationAnimationHasEnded) {\n      this.rmBoundedActivationClasses();\n      this.adapter.addClass(FG_DEACTIVATION);\n      this.fgDeactivationRemovalTimer = setTimeout(() => {\n        this.adapter.removeClass(FG_DEACTIVATION);\n      }, numbers.FG_DEACTIVATION_MS);\n    }\n  }\n\n  private rmBoundedActivationClasses() {\n    const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;\n    this.adapter.removeClass(FG_ACTIVATION);\n    this.activationAnimationHasEnded = false;\n    this.adapter.computeBoundingRect();\n  }\n\n  private resetActivationState() {\n    this.previousActivationEvent = this.activationState.activationEvent;\n    this.activationState = this.defaultActivationState();\n    // Touch devices may fire additional events for the same interaction within\n    // a short time. Store the previous event until it's safe to assume that\n    // subsequent events are for new interactions.\n    setTimeout(\n        () => this.previousActivationEvent = undefined,\n        MDCRippleFoundation.numbers.TAP_DELAY_MS);\n  }\n\n  private deactivateImpl(): void {\n    const activationState = this.activationState;\n    // This can happen in scenarios such as when you have a keyup event that\n    // blurs the element.\n    if (!activationState.isActivated) {\n      return;\n    }\n\n    const state: ActivationStateType = {...activationState};\n\n    if (activationState.isProgrammatic) {\n      requestAnimationFrame(() => {\n        this.animateDeactivation(state);\n      });\n      this.resetActivationState();\n    } else {\n      this.deregisterDeactivationHandlers();\n      requestAnimationFrame(() => {\n        this.activationState.hasDeactivationUXRun = true;\n        this.animateDeactivation(state);\n        this.resetActivationState();\n      });\n    }\n  }\n\n  private animateDeactivation({wasActivatedByPointer, wasElementMadeActive}:\n                                  ActivationStateType) {\n    if (wasActivatedByPointer || wasElementMadeActive) {\n      this.runDeactivationUXLogicIfReady();\n    }\n  }\n\n  private layoutInternal() {\n    this.frame = this.adapter.computeBoundingRect();\n    const maxDim = Math.max(this.frame.height, this.frame.width);\n\n    // Surface diameter is treated differently for unbounded vs. bounded\n    // ripples. Unbounded ripple diameter is calculated smaller since the\n    // surface is expected to already be padded appropriately to extend the\n    // hitbox, and the ripple is expected to meet the edges of the padded hitbox\n    // (which is typically square). Bounded ripples, on the other hand, are\n    // fully expected to expand beyond the surface's longest diameter\n    // (calculated based on the diagonal plus a constant padding), and are\n    // clipped at the surface's border via `overflow: hidden`.\n    const getBoundedRadius = () => {\n      const hypotenuse = Math.sqrt(\n          Math.pow(this.frame.width, 2) + Math.pow(this.frame.height, 2));\n      return hypotenuse + MDCRippleFoundation.numbers.PADDING;\n    };\n\n    this.maxRadius = this.adapter.isUnbounded() ? maxDim : getBoundedRadius();\n\n    // Ripple is sized as a fraction of the largest dimension of the surface,\n    // then scales up using a CSS scale transform\n    const initialSize =\n        Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);\n    // Unbounded ripple size should always be even number to equally center\n    // align.\n    if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {\n      this.initialSize = initialSize - 1;\n    } else {\n      this.initialSize = initialSize;\n    }\n    this.fgScale = `${this.maxRadius / this.initialSize}`;\n\n    this.updateLayoutCssVars();\n  }\n\n  private updateLayoutCssVars() {\n    const {\n      VAR_FG_SIZE,\n      VAR_LEFT,\n      VAR_TOP,\n      VAR_FG_SCALE,\n    } = MDCRippleFoundation.strings;\n\n    this.adapter.updateCssVariable(VAR_FG_SIZE, `${this.initialSize}px`);\n    this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale);\n\n    if (this.adapter.isUnbounded()) {\n      this.unboundedCoords = {\n        left: Math.round((this.frame.width / 2) - (this.initialSize / 2)),\n        top: Math.round((this.frame.height / 2) - (this.initialSize / 2)),\n      };\n\n      this.adapter.updateCssVariable(\n          VAR_LEFT, `${this.unboundedCoords.left}px`);\n      this.adapter.updateCssVariable(VAR_TOP, `${this.unboundedCoords.top}px`);\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCRippleFoundation;\n"
  },
  {
    "path": "packages/mdc-ripple/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-ripple/mdc-ripple.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"keyframes\" as mdc-ripple-*;\n@forward \"mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"functions\" as mdc-*;\n@forward \"mdc-ripple\";\n"
  },
  {
    "path": "packages/mdc-ripple/mdc-ripple.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Use 'styles.css' instead.\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-ripple/package.json",
    "content": "{\n  \"name\": \"@material/ripple\",\n  \"description\": \"The Material Components for the web Ink Ripple effect for web element interactions\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"ripple\"\n  ],\n  \"main\": \"dist/mdc.ripple.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-ripple\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-ripple/styles.scss",
    "content": "//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.common;\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-ripple/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {cssClasses} from '../../mdc-ripple/constants';\nimport {MDCRipple} from '../../mdc-ripple/index';\nimport * as util from '../../mdc-ripple/util';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nfunction getFixture(unbounded = false) {\n  const el = document.createElement('div');\n  if (unbounded) {\n    el.setAttribute('data-mdc-ripple-is-unbounded', '');\n  }\n  return el;\n}\n\ndescribe('MDCRipple', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a ripple', () => {\n    const root = getFixture();\n    const component = MDCRipple.attachTo(root);\n    expect(component instanceof MDCRipple).toBeTruthy();\n  });\n\n  it('attachTo makes ripple unbounded when given as an option', () => {\n    const root = getFixture();\n    const component = MDCRipple.attachTo(root, {isUnbounded: true});\n    expect(component.unbounded).toBeTruthy();\n  });\n\n  it('attachTo does not override unbounded data attr when omitted', () => {\n    const root = getFixture(true);\n    const component = MDCRipple.attachTo(root);\n    expect(component.unbounded).toBeTruthy();\n  });\n\n  it('attachTo overrides unbounded data attr when explicitly specified', () => {\n    const root = getFixture(true);\n    const component = MDCRipple.attachTo(root, {isUnbounded: false});\n    expect(component.unbounded).toBeFalsy();\n  });\n\n  it('createAdapter() returns the same adapter used by default for the ripple',\n     () => {\n       const root = getFixture();\n       const component = MDCRipple.attachTo(root);\n       expect(Object.keys(MDCRipple.createAdapter({root})))\n           .toEqual(Object.keys(component['foundation']['adapter']));\n     });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCRipple(root);\n    return {root, component};\n  }\n\n  it(`set unbounded() adds ${cssClasses.UNBOUNDED} when truthy`, () => {\n    const {root, component} = setupTest();\n    component.unbounded = true;\n    expect(root).toHaveClass(cssClasses.UNBOUNDED);\n  });\n\n  it(`set unbounded() removes ${cssClasses.UNBOUNDED} when falsy`, () => {\n    const {root, component} = setupTest();\n    root.classList.add(cssClasses.UNBOUNDED);\n    component.unbounded = false;\n    expect(root).not.toHaveClass(cssClasses.UNBOUNDED);\n  });\n\n  it('activate() delegates to the foundation', () => {\n    const {component} = setupTest();\n    component['foundation'].activate = jasmine.createSpy('');\n    component.activate();\n    expect(component['foundation'].activate).toHaveBeenCalled();\n  });\n\n  it('deactivate() delegates to the foundation', () => {\n    const {component} = setupTest();\n    component['foundation'].deactivate = jasmine.createSpy('');\n    component.deactivate();\n    expect(component['foundation'].deactivate).toHaveBeenCalled();\n  });\n\n  it('layout() delegates to the foundation', () => {\n    const {component} = setupTest();\n    component['foundation'].layout = jasmine.createSpy('');\n    component.layout();\n    expect(component['foundation'].layout).toHaveBeenCalled();\n  });\n\n  it('adapter#browserSupportsCssVars delegates to util', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any)\n               .adapter.browserSupportsCssVars(window))\n        .toEqual(util.supportsCssVariables(window));\n  });\n\n  it('adapter#isUnbounded delegates to unbounded getter', () => {\n    const {component} = setupTest();\n    component.unbounded = true;\n    expect((component.getDefaultFoundation() as any).adapter.isUnbounded())\n        .toBe(true);\n  });\n\n  it('adapter#isSurfaceDisabled delegates to component\\'s disabled getter',\n     () => {\n       const {component} = setupTest();\n       component.disabled = true;\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.isSurfaceDisabled())\n           .toBe(true);\n     });\n\n  it('adapter#addClass adds a class to the root', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#containsEventTarget returns true if the passed element is a descendant of the root element',\n     () => {\n       const {root, component} = setupTest();\n       const child = getFixture();\n       const notChild = getFixture();\n       root.appendChild(child);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.containsEventTarget(child))\n           .toBe(true);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.containsEventTarget(notChild))\n           .toBe(false);\n     });\n\n  it('adapter#registerInteractionHandler proxies to addEventListener on the root element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('interactionHandler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerInteractionHandler('foo', handler);\n       emitEvent(root, 'foo');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#deregisterInteractionHandler proxies to removeEventListener on the root element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('interactionHandler');\n       root.addEventListener('foo', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterInteractionHandler('foo', handler);\n       emitEvent(root, 'foo');\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#registerDocumentInteractionHandler proxies to addEventListener on the documentElement',\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interactionHandler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerDocumentInteractionHandler('foo', handler);\n       emitEvent(document.documentElement, 'foo');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#deregisterDocumentInteractionHandler proxies to removeEventListener on the documentElement',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('interactionHandler');\n       root.addEventListener('foo', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterDocumentInteractionHandler('foo', handler);\n       emitEvent(document.documentElement, 'foo');\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('adapter#registerResizeHandler uses the handler as a window resize listener',\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('resizeHandler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerResizeHandler(handler);\n       emitEvent(window, 'resize');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n       window.removeEventListener('resize', handler);\n     });\n\n  it('adapter#deregisterResizeHandler unlistens the handler for window resize',\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('resizeHandler');\n       window.addEventListener('resize', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterResizeHandler(handler);\n       emitEvent(window, 'resize');\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n       // Just to be safe\n       window.removeEventListener('resize', handler);\n     });\n\n  if (util.supportsCssVariables(window)) {\n    it('adapter#updateCssVariable calls setProperty on root style with varName and value',\n       () => {\n         const {root, component} = setupTest();\n         (component.getDefaultFoundation() as any)\n             .adapter.updateCssVariable('--foo', 'red');\n         expect(root.style.getPropertyValue('--foo')).toEqual('red');\n       });\n  }\n\n  it('adapter#computeBoundingRect calls getBoundingClientRect() on root',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.computeBoundingRect())\n           .toEqual(root.getBoundingClientRect());\n       document.body.removeChild(root);\n     });\n\n  it('adapter#getWindowPageOffset returns page{X,Y}Offset as {x,y} respectively',\n     () => {\n       const {component} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getWindowPageOffset())\n           .toEqual({\n             x: window.pageXOffset,\n             y: window.pageYOffset,\n           });\n     });\n\n  it(`handleFocus() adds class ${cssClasses.BG_FOCUSED}`, () => {\n    const {root, component} = setupTest();\n    component['foundation'].handleFocus();\n    jasmine.clock().tick(1);\n    expect(root).toHaveClass(cssClasses.BG_FOCUSED);\n  });\n\n  it(`handleBlur() removes class ${cssClasses.BG_FOCUSED}`, () => {\n    const {root, component} = setupTest();\n    root.classList.add(cssClasses.BG_FOCUSED);\n    component['foundation'].handleBlur();\n    jasmine.clock().tick(1);\n    expect(root).not.toHaveClass(cssClasses.BG_FOCUSED);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/feature-targeting-any.test.scss",
    "content": "@use '../ripple';\n@use '../ripple-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include ripple.core-styles($query: $query);\n    @include ripple.common($query: $query);\n    @include ripple.surface($query: $query);\n    @include ripple.target-common($query: $query);\n    @include ripple-theme.states-base-color(red, $query: $query);\n    @include ripple-theme.states-hover-opacity(1, $query: $query);\n    @include ripple-theme.states-focus-opacity(1, $query: $query);\n    @include ripple-theme.states-press-opacity(1, $query: $query);\n    @include ripple-theme.states($query: $query);\n    @include ripple-theme.states-activated(red, $query: $query);\n    @include ripple-theme.states-selected(red, $query: $query);\n    @include ripple.radius-bounded($query: $query);\n    @include ripple.radius-unbounded($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-ripple/test/foundation-activation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {cssClasses, numbers, strings} from '../../mdc-ripple/constants';\nimport {MDCRippleFoundation} from '../../mdc-ripple/foundation';\nimport {captureHandlers, checkNumTimesSpyCalledWithArgs} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nimport {setupTest, testFoundation} from './helpers';\n\ndescribe('MDCRippleFoundation - Activation Logic', () => {\n  setUpMdcTestEnvironment();\n\n  testFoundation(\n      'does nothing if component if isSurfaceDisabled is true',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        adapter.isSurfaceDisabled.and.returnValue(true);\n\n        handlers['mousedown']();\n\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'adds activation classes on mousedown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']();\n        jasmine.clock().tick(1);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'sets FG position from the coords to the center within surface on mousedown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const left = 50;\n        const top = 50;\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n        const pageX = 100;\n        const pageY = 75;\n\n        adapter.computeBoundingRect.and.returnValue({width, height, left, top});\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX, pageY});\n        jasmine.clock().tick(1);\n\n        const startPosition = {\n          x: pageX - left - (initialSize / 2),\n          y: pageY - top - (initialSize / 2),\n        };\n\n        const endPosition = {\n          x: (width / 2) - (initialSize / 2),\n          y: (height / 2) - (initialSize / 2),\n        };\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_START,\n                `${startPosition.x}px, ${startPosition.y}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_END,\n                `${endPosition.x}px, ${endPosition.y}px`);\n      });\n\n  testFoundation(\n      'adds activation classes on touchstart',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'sets FG position from the coords to the center within surface on touchstart',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const left = 50;\n        const top = 50;\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n        const pageX = 100;\n        const pageY = 75;\n\n        adapter.computeBoundingRect.and.returnValue({width, height, left, top});\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX, pageY}]});\n        jasmine.clock().tick(1);\n\n        const startPosition = {\n          x: pageX - left - (initialSize / 2),\n          y: pageY - top - (initialSize / 2),\n        };\n\n        const endPosition = {\n          x: (width / 2) - (initialSize / 2),\n          y: (height / 2) - (initialSize / 2),\n        };\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_START,\n                `${startPosition.x}px, ${startPosition.y}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_END,\n                `${endPosition.x}px, ${endPosition.y}px`);\n      });\n\n  testFoundation(\n      'adds activation classes on pointerdown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['pointerdown']();\n        jasmine.clock().tick(1);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'sets FG position from the coords to the center within surface on pointerdown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const left = 50;\n        const top = 50;\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n        const pageX = 100;\n        const pageY = 75;\n\n        adapter.computeBoundingRect.and.returnValue({width, height, left, top});\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['pointerdown']({pageX, pageY});\n        jasmine.clock().tick(1);\n\n        const startPosition = {\n          x: pageX - left - (initialSize / 2),\n          y: pageY - top - (initialSize / 2),\n        };\n\n        const endPosition = {\n          x: (width / 2) - (initialSize / 2),\n          y: (height / 2) - (initialSize / 2),\n        };\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_START,\n                `${startPosition.x}px, ${startPosition.y}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_END,\n                `${endPosition.x}px, ${endPosition.y}px`);\n      });\n\n  testFoundation(\n      'adds activation classes on keydown when surface is made active on same frame',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.isSurfaceActive.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']();\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 1);\n      });\n\n  testFoundation(\n      'adds activation classes on keydown when surface only reflects :active on next frame for space keydown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.isSurfaceActive.and.returnValues(false, true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']({key: ' '});\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n\n        jasmine.clock().tick(1);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'does not add activation classes on keydown when surface is not made active',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.isSurfaceActive.and.returnValues(false, false);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']({key: ' '});\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'sets FG position to center on non-pointer activation',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const left = 50;\n        const top = 50;\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n\n        adapter.computeBoundingRect.and.returnValue({width, height, left, top});\n        adapter.isSurfaceActive.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']();\n        jasmine.clock().tick(1);\n\n        const position = {\n          x: (width / 2) - (initialSize / 2),\n          y: (height / 2) - (initialSize / 2),\n        };\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_START,\n                `${position.x}px, ${position.y}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_END,\n                `${position.x}px, ${position.y}px`);\n      });\n\n  testFoundation(\n      'adds activation classes on programmatic activation',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isSurfaceActive.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        foundation.activate();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'programmatic activation immediately after interaction',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n\n        adapter.isSurfaceActive.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n        documentHandlers['touchend']();\n        jasmine.clock().tick(1);\n\n        foundation.activate();\n        jasmine.clock().tick(1);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 2);\n      });\n\n  testFoundation(\n      'sets FG position to center on non-pointer activation',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const left = 50;\n        const top = 50;\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n\n        adapter.computeBoundingRect.and.returnValue({width, height, left, top});\n        adapter.isSurfaceActive.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']();\n        jasmine.clock().tick(1);\n\n        const position = {\n          x: (width / 2) - (initialSize / 2),\n          y: (height / 2) - (initialSize / 2),\n        };\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_START,\n                `${position.x}px, ${position.y}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_FG_TRANSLATE_END,\n                `${position.x}px, ${position.y}px`);\n      });\n\n  testFoundation(\n      'does not redundantly add classes on touchstart followed by mousedown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n        handlers['mousedown']();\n        jasmine.clock().tick(1);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 1);\n      });\n\n  testFoundation(\n      'does not redundantly add classes on touchstart followed by pointerstart',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n        handlers['pointerdown']();\n        jasmine.clock().tick(1);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 1);\n      });\n\n  testFoundation(\n      'removes deactivation classes on activate to ensure ripples can be retriggered',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']();\n        jasmine.clock().tick(1);\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n        handlers['mousedown']();\n        jasmine.clock().tick(1);\n\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'will not activate multiple ripples on same frame if one surface descends from another',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const secondRipple = setupTest();\n        const firstHandlers =\n            captureHandlers(adapter, 'registerInteractionHandler');\n        const secondHandlers =\n            captureHandlers(secondRipple.adapter, 'registerInteractionHandler');\n        secondRipple.adapter.containsEventTarget.and.returnValue(true);\n        foundation.init();\n        secondRipple.foundation.init();\n        jasmine.clock().tick(1);\n\n        firstHandlers['mousedown']();\n        secondHandlers['mousedown']();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n        expect(secondRipple.adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'will not activate multiple ripples on same frame for parent surface w/ touch follow-on events',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const secondRipple = setupTest();\n        const firstHandlers =\n            captureHandlers(adapter, 'registerInteractionHandler');\n        const secondHandlers =\n            captureHandlers(secondRipple.adapter, 'registerInteractionHandler');\n        secondRipple.adapter.containsEventTarget.and.returnValue(true);\n        foundation.init();\n        secondRipple.foundation.init();\n        jasmine.clock().tick(1);\n\n        firstHandlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        secondHandlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        // Simulated mouse events on touch devices always happen after a delay,\n        // not on the same frame\n        jasmine.clock().tick(1);\n        firstHandlers['mousedown']();\n        secondHandlers['mousedown']();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n        expect(secondRipple.adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'will activate multiple ripples on same frame for surfaces without an ancestor/descendant relationship',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const secondRipple = setupTest();\n        const firstHandlers =\n            captureHandlers(adapter, 'registerInteractionHandler');\n        const secondHandlers =\n            captureHandlers(secondRipple.adapter, 'registerInteractionHandler');\n        secondRipple.adapter.containsEventTarget.and.returnValue(false);\n        foundation.init();\n        secondRipple.foundation.init();\n        jasmine.clock().tick(1);\n\n        firstHandlers['mousedown']();\n        secondHandlers['mousedown']();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n        expect(secondRipple.adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'displays the foreground ripple on activation when unbounded',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.computeBoundingRect.and.returnValue(\n            {width: 100, height: 100, left: 0, top: 0});\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      'clears translation custom properties when unbounded in case ripple was switched from bounded',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['pointerdown']({pageX: 100, pageY: 75});\n        jasmine.clock().tick(1);\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_TRANSLATE_START, '');\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_TRANSLATE_END, '');\n      });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/foundation-deactivation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {cssClasses, numbers} from '../../mdc-ripple/constants';\nimport {MDCRippleFoundation} from '../../mdc-ripple/foundation';\nimport {captureHandlers, checkNumTimesSpyCalledWithArgs} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nimport {testFoundation} from './helpers';\n\nconst {DEACTIVATION_TIMEOUT_MS} = numbers;\n\ndescribe('MDCRippleFoundation - Deactivation logic', () => {\n  setUpMdcTestEnvironment();\n  testFoundation(\n      'runs deactivation UX on touchend after touchstart',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n\n        documentHandlers['touchend']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        // NOTE: here and below, we use {times: 2} as these classes are removed\n        // during activation as well in order to support re-triggering the\n        // ripple. We want to test that this is called a *second* time when\n        // deactivating.\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX on pointerup after pointerdown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['pointerdown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        documentHandlers['pointerup']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX on contextmenu after pointerdown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['pointerdown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        documentHandlers['contextmenu']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX on mouseup after mousedown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX on contextmenu after mousedown',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        documentHandlers['contextmenu']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation on keyup after keydown when keydown makes surface active',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.isSurfaceActive.and.returnValue(true);\n\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']({key: 'Space'});\n        jasmine.clock().tick(1);\n\n        handlers['keyup']({key: 'Space'});\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'does not run deactivation on keyup after keydown if keydown did not make surface active',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        adapter.isSurfaceActive.and.returnValue(false);\n\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['keydown']({key: 'Space'});\n        jasmine.clock().tick(1);\n\n        handlers['keyup']({key: 'Space'});\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        // Note that all of these should be called 0 times since a keydown that\n        // does not make a surface active should never activate it in the first\n        // place.\n        expect(adapter.removeClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX on public deactivate() call',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        foundation.activate();\n        jasmine.clock().tick(1);\n\n        foundation.deactivate();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'runs deactivation UX when activation UX timer finishes first (activation held for a long time)',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        expect(adapter.addClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'clears any pending deactivation UX timers when re-triggered',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        // Trigger the first interaction\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n        // Simulate certain amount of delay between first and second interaction\n        jasmine.clock().tick(20);\n\n        // Trigger the second interaction\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        // Verify that deactivation timer was called 3 times:\n        // - Once during the initial activation\n        // - Once again during the second activation when the ripple was\n        // re-triggered\n        // - A third and final time when the deactivation UX timer runs\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 3);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_DEACTIVATION], 1);\n      });\n\n  testFoundation(\n      'clears any pending foreground deactivation class removal timers when re-triggered',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        // Trigger the first interaction\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n\n        // Tick the clock such that the deactivation UX gets run, but _not_ so\n        // the foreground deactivation removal timer gets run\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        // Sanity check that the foreground deactivation class removal was only\n        // called once within the activation code.\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_DEACTIVATION], 1);\n\n        // Trigger another activation\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        // Tick the clock past the time when the initial foreground deactivation\n        // timer would have ran.\n        jasmine.clock().tick(numbers.FG_DEACTIVATION_MS);\n\n        // Verify that the foreground deactivation class removal was only called\n        // twice: once within the original activation, and again within this\n        // subsequent activation; NOT by means of any timers firing.\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_DEACTIVATION], 2);\n      });\n\n  testFoundation(\n      'waits until activation UX timer runs before removing active fill classes',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        documentHandlers['mouseup']();\n        // Test conditions slightly before the timeout lapses (subtracting ~2\n        // frames due to runToFrame above)\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS - 32);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 1);\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n\n        jasmine.clock().tick(32);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_DEACTIVATION], 1);\n      });\n\n  testFoundation(\n      'waits until actual deactivation UX is needed if animation finishes before deactivating',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 1);\n        expect(adapter.addClass)\n            .not.toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      'only re-activates when there are no additional pointer events to be processed',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        const documentHandlers =\n            captureHandlers(adapter, 'registerDocumentInteractionHandler');\n\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        // Simulate Android 6 / Chrome latest event flow.\n        handlers['pointerdown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        handlers['touchstart']({changedTouches: [{pageX: 0, pageY: 0}]});\n        jasmine.clock().tick(1);\n\n        jasmine.clock().tick(DEACTIVATION_TIMEOUT_MS);\n        documentHandlers['pointerup']();\n        jasmine.clock().tick(1);\n\n        // At this point, the deactivation UX should have run, since the initial\n        // activation was triggered by a pointerdown event.\n        checkNumTimesSpyCalledWithArgs(\n            adapter.removeClass, [cssClasses.FG_ACTIVATION], 2);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_DEACTIVATION], 1);\n\n        // Also at this point, all of the document event handlers should have\n        // been deregistered so no more will be called.\n        ['mouseup', 'pointerup', 'touchend'].forEach((type) => {\n          expect(adapter.deregisterDocumentInteractionHandler)\n              .toHaveBeenCalledWith(type, jasmine.any(Function));\n        });\n\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n\n        // Verify that activation only happened once, at pointerdown\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 1);\n\n        documentHandlers['mouseup']();\n        jasmine.clock().tick(1);\n        jasmine.clock().tick(numbers.TAP_DELAY_MS);\n\n        // Finally, verify that since mouseup happened, we can re-activate the\n        // ripple.\n        handlers['mousedown']({pageX: 0, pageY: 0});\n        jasmine.clock().tick(1);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.addClass, [cssClasses.FG_ACTIVATION], 2);\n      });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/foundation-general-events.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {cssClasses, strings} from '../../mdc-ripple/constants';\nimport {MDCRippleFoundation} from '../../mdc-ripple/foundation';\nimport {captureHandlers, checkNumTimesSpyCalledWithArgs} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nimport {testFoundation} from './helpers';\n\ndescribe('MDCRippleFoundation - General Events', () => {\n  setUpMdcTestEnvironment();\n  testFoundation(\n      're-lays out the component on resize event for unbounded ripple',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(true);\n        adapter.computeBoundingRect.and.returnValues(\n            {\n              width: 100,\n              height: 200,\n            },\n            {\n              width: 50,\n              height: 100,\n            });\n        let resizeHandler: Function|undefined;\n        adapter.registerResizeHandler.withArgs(jasmine.any(Function))\n            .and.callFake((handler: Function) => {\n              resizeHandler = handler;\n            });\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_SIZE, '120px');\n\n        (resizeHandler as Function)();\n\n        jasmine.clock().tick(1);\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_SIZE, '60px');\n      });\n\n  testFoundation(\n      'debounces layout within the same frame on resize',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(true);\n        adapter.computeBoundingRect.and.returnValue(\n            {\n              width: 100,\n              height: 200,\n            },\n            {\n              width: 50,\n              height: 100,\n            });\n        let resizeHandler: Function|undefined;\n        adapter.registerResizeHandler.withArgs(jasmine.any(Function))\n            .and.callFake((handler: Function) => {\n              resizeHandler = handler;\n            });\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        (resizeHandler as Function)();\n        (resizeHandler as Function)();\n        (resizeHandler as Function)();\n        jasmine.clock().tick(1);\n        checkNumTimesSpyCalledWithArgs(\n            adapter.updateCssVariable, [strings.VAR_FG_SIZE, '120px'], 2);\n      });\n\n  testFoundation(\n      'activates the background on focus',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['focus']();\n        jasmine.clock().tick(1);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.BG_FOCUSED);\n      });\n\n  testFoundation(\n      'deactivates the background on blur',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers = captureHandlers(adapter, 'registerInteractionHandler');\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        handlers['blur']();\n        jasmine.clock().tick(1);\n        expect(adapter.removeClass).toHaveBeenCalledWith(cssClasses.BG_FOCUSED);\n      });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {cssClasses, numbers, strings} from '../../mdc-ripple/constants';\nimport {MDCRippleFoundation} from '../../mdc-ripple/foundation';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\n\nimport {testFoundation} from './helpers';\n\ndescribe('MDCRippleFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('cssClasses returns constants.cssClasses', () => {\n    expect(MDCRippleFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('strings returns constants.strings', () => {\n    expect(MDCRippleFoundation.strings).toEqual(strings);\n  });\n\n  it('numbers returns constants.numbers', () => {\n    expect(MDCRippleFoundation.numbers).toEqual(numbers);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCRippleFoundation, [\n      'browserSupportsCssVars',\n      'isUnbounded',\n      'isSurfaceActive',\n      'isSurfaceDisabled',\n      'addClass',\n      'removeClass',\n      'containsEventTarget',\n      'registerInteractionHandler',\n      'deregisterInteractionHandler',\n      'registerDocumentInteractionHandler',\n      'deregisterDocumentInteractionHandler',\n      'registerResizeHandler',\n      'deregisterResizeHandler',\n      'updateCssVariable',\n      'computeBoundingRect',\n      'getWindowPageOffset',\n    ]);\n  });\n\n  testFoundation(\n      `#init calls adapter.addClass(\"${cssClasses.ROOT}\")`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.ROOT);\n      });\n\n  testFoundation(\n      '#init adds unbounded class when adapter indicates unbounded',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.UNBOUNDED);\n      });\n\n  testFoundation(\n      '#init does not add unbounded class when adapter does not indicate unbounded (default)',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).not.toHaveBeenCalledWith(cssClasses.UNBOUNDED);\n      });\n\n  testFoundation(\n      '#init gracefully exits when css variables are not supported',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        expect(adapter.addClass).not.toHaveBeenCalledWith(cssClasses.ROOT);\n      },\n      /* isCssVarsSupported*/ false);\n\n  testFoundation(\n      '#init registers events for interactions on root element',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.init();\n\n        expect(adapter.registerInteractionHandler)\n            .toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Function));\n      });\n\n  testFoundation(\n      '#init registers a resize handler for unbounded ripple',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.init();\n\n        expect(adapter.registerResizeHandler)\n            .toHaveBeenCalledWith(jasmine.any(Function));\n      });\n\n  testFoundation(\n      '#init does not register a resize handler for bounded ripple',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(false);\n        foundation.init();\n\n        expect(adapter.registerResizeHandler)\n            .not.toHaveBeenCalledWith(jasmine.any(Function));\n      });\n\n  testFoundation(\n      '#init only registers focus/blur if CSS custom properties not supported',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.browserSupportsCssVars.and.returnValue(false);\n        foundation.init();\n\n        expect(adapter.registerInteractionHandler).toHaveBeenCalledTimes(2);\n        expect(adapter.registerInteractionHandler)\n            .toHaveBeenCalledWith('focus', jasmine.any(Function));\n        expect(adapter.registerInteractionHandler)\n            .toHaveBeenCalledWith('blur', jasmine.any(Function));\n      });\n\n  testFoundation(\n      '#destroy unregisters all bound interaction handlers',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const handlers: {[key: string]: Function} = {};\n\n        adapter.registerInteractionHandler\n            .withArgs(jasmine.any(String), jasmine.any(Function))\n            .and.callFake((type: string, handler: Function) => {\n              handlers[type] = handler;\n            });\n        foundation.init();\n        foundation.destroy();\n\n        Object.keys(handlers).forEach((type) => {\n          expect(adapter.deregisterInteractionHandler)\n              .toHaveBeenCalledWith(type, handlers[type]);\n        });\n\n        expect(adapter.deregisterDocumentInteractionHandler)\n            .toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Function));\n      });\n\n  testFoundation(\n      '#destroy unregisters the resize handler for unbounded ripple',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        let resizeHandler;\n        adapter.isUnbounded.and.returnValue(true);\n        adapter.registerResizeHandler.withArgs(jasmine.any(Function))\n            .and.callFake((handler: Function) => {\n              resizeHandler = handler;\n            });\n        foundation.init();\n        foundation.destroy();\n\n        expect(adapter.deregisterResizeHandler)\n            .toHaveBeenCalledWith(resizeHandler);\n      });\n\n  testFoundation(\n      '#destroy does not unregister resize handler for bounded ripple',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.isUnbounded.and.returnValue(false);\n        foundation.init();\n        foundation.destroy();\n\n        expect(adapter.deregisterResizeHandler)\n            .not.toHaveBeenCalledWith(jasmine.any(Function));\n      });\n\n  testFoundation(\n      `#destroy removes ${cssClasses.ROOT}`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.destroy();\n        jasmine.clock().tick(1);\n        expect(adapter.removeClass).toHaveBeenCalledWith(cssClasses.ROOT);\n      });\n\n  testFoundation(\n      `#destroy removes ${cssClasses.UNBOUNDED}`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.destroy();\n        jasmine.clock().tick(1);\n        expect(adapter.removeClass).toHaveBeenCalledWith(cssClasses.UNBOUNDED);\n      });\n\n  testFoundation(\n      `#destroy removes ${\n          cssClasses.FG_ACTIVATION} if activation is interrupted`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation['activationTimer'] = 1;\n        foundation.destroy();\n        jasmine.clock().tick(1);\n\n        expect(foundation['activationTimer']).toEqual(0);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_ACTIVATION);\n      });\n\n  testFoundation(\n      `#destroy removes ${\n          cssClasses.FG_DEACTIVATION} if deactivation is interrupted`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation['fgDeactivationRemovalTimer'] = 1;\n        foundation.destroy();\n        jasmine.clock().tick(1);\n\n        expect(foundation['fgDeactivationRemovalTimer']).toEqual(0);\n        expect(adapter.removeClass)\n            .toHaveBeenCalledWith(cssClasses.FG_DEACTIVATION);\n      });\n\n  testFoundation(\n      '#destroy removes all CSS variables',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const cssVars =\n            Object.keys(strings)\n                .filter((s) => s.indexOf('VAR') === 0)\n                .map((s) => (strings as {[key: string]: string})[s]);\n        foundation.destroy();\n        jasmine.clock().tick(1);\n        cssVars.forEach((cssVar) => {\n          expect(adapter.updateCssVariable).toHaveBeenCalledWith(cssVar, null);\n        });\n      });\n\n  testFoundation(\n      '#destroy clears the timer if activation is interrupted',\n      ({foundation}: {foundation: MDCRippleFoundation}) => {\n        foundation.init();\n        jasmine.clock().tick(1);\n\n        foundation['activationTimer'] = 1;\n        foundation.destroy();\n        jasmine.clock().tick(1);\n\n        expect(foundation['activationTimer']).toEqual(0);\n      });\n\n  testFoundation(\n      '#destroy when CSS custom properties are not supported',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        adapter.browserSupportsCssVars.and.returnValue(false);\n        foundation.destroy();\n        jasmine.clock().tick(1);\n\n        // #destroy w/o CSS vars still calls event deregistration functions (to\n        // deregister focus/blur; the rest are no-ops)\n        expect(adapter.deregisterInteractionHandler)\n            .toHaveBeenCalledWith('focus', jasmine.any(Function));\n        expect(adapter.deregisterInteractionHandler)\n            .toHaveBeenCalledWith('blur', jasmine.any(Function));\n        // #destroy w/o CSS vars doesn't change any CSS classes or custom\n        // properties\n        expect(adapter.removeClass)\n            .not.toHaveBeenCalledWith(jasmine.any(String));\n        expect(adapter.updateCssVariable)\n            .not.toHaveBeenCalledWith(jasmine.any(String), jasmine.any(String));\n      });\n\n  testFoundation(\n      `#layout sets ${\n          strings.VAR_FG_SIZE} to the circumscribing circle's diameter`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n\n        adapter.computeBoundingRect.and.returnValue({width, height});\n        foundation.layout();\n        jasmine.clock().tick(1);\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_SIZE, `${initialSize}px`);\n      });\n\n  testFoundation(\n      `#layout always sets ${strings.VAR_FG_SIZE} to even number`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const width = 36;\n        const height = 36;\n\n        adapter.computeBoundingRect.and.returnValue({width, height});\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.layout();\n        jasmine.clock().tick(1);\n\n        const isEvenNumber = () => {\n          return {\n            asymmetricMatch: function(compareTo: string) {\n              return parseInt(compareTo, 10) % 2 === 0;\n            },\n            jasmineToString: function() {\n              return 'is even number';\n            }\n          };\n        };\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_SIZE, isEvenNumber());\n      });\n\n  testFoundation(\n      `#layout sets ${\n          strings.VAR_FG_SCALE} based on the difference between the ` +\n          'proportion of the max radius and the initial size',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const width = 200;\n        const height = 100;\n\n        adapter.computeBoundingRect.and.returnValue({width, height});\n        foundation.layout();\n        jasmine.clock().tick(1);\n\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n        const surfaceDiameter =\n            Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));\n        const maxRadius = surfaceDiameter + numbers.PADDING;\n        const fgScale = `${maxRadius / initialSize}`;\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(strings.VAR_FG_SCALE, fgScale);\n      });\n\n  testFoundation(\n      `#layout centers via ${strings.VAR_LEFT} and ${\n          strings.VAR_TOP} when unbounded`,\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        const width = 200;\n        const height = 100;\n        const maxSize = Math.max(width, height);\n        const initialSize = maxSize * numbers.INITIAL_ORIGIN_SCALE;\n\n        adapter.computeBoundingRect.and.returnValue({width, height});\n        adapter.isUnbounded.and.returnValue(true);\n        foundation.layout();\n        jasmine.clock().tick(1);\n\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_LEFT,\n                `${Math.round((width / 2) - (initialSize / 2))}px`);\n        expect(adapter.updateCssVariable)\n            .toHaveBeenCalledWith(\n                strings.VAR_TOP,\n                `${Math.round((height / 2) - (initialSize / 2))}px`);\n      });\n\n  testFoundation(\n      '#setUnbounded adds unbounded class when unbounded is truthy',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.setUnbounded(true);\n        expect(adapter.addClass).toHaveBeenCalledWith(cssClasses.UNBOUNDED);\n      });\n\n  testFoundation(\n      '#setUnbounded removes unbounded class when unbounded is falsy',\n      ({adapter,\n        foundation}: {adapter: any, foundation: MDCRippleFoundation}) => {\n        foundation.setUnbounded(false);\n        expect(adapter.removeClass).toHaveBeenCalledWith(cssClasses.UNBOUNDED);\n      });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/helpers.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {MDCRippleFoundation} from '../../mdc-ripple/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\n\nexport function setupTest(isCssVarsSupported = true) {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCRippleFoundation);\n  // TODO: Wait until b/208710526 is fixed, then remove this autogenerated error\n  // suppression.\n  //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'undefined' is not\n  //  assignable to parameter of type 'boolean'.\n  mockAdapter.isUnbounded.and.returnValue(undefined);\n  mockAdapter.isSurfaceDisabled.and.returnValue(false);\n  mockAdapter.isSurfaceActive.and.returnValue(false);\n  mockAdapter.containsEventTarget.and.returnValue(false);\n  mockAdapter.browserSupportsCssVars.and.returnValue(isCssVarsSupported);\n  mockAdapter.computeBoundingRect.and.returnValue(\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n      //  number; height: number; left: number; top: number; }' is not\n      //  assignable to parameter of type 'DOMRect'.\n      {width: 0, height: 0, left: 0, top: 0});\n  mockAdapter.getWindowPageOffset.and.returnValue({x: 0, y: 0});\n  return {foundation, adapter: mockAdapter};\n}\n\nexport function testFoundation(\n    desc: string, runTests: Function, isCssVarsSupported = true) {\n  it(desc, () => {\n    const {adapter, foundation} = setupTest(isCssVarsSupported);\n    runTests({adapter, foundation});\n  });\n}\n\n// Creates a mock window object with all members necessary to test\n// util.supportsCssVariables in cases where window.CSS.supports indicates the\n// feature is supported.\nexport function createMockWindowForCssVariables() {\n  const getComputedStyle = jasmine.createSpy('window.getComputedStyle');\n  const remove = () => mockWindow.appendedNodes--;\n  const mockDoc = {\n    head: {\n      appendChild: () => mockWindow.appendedNodes++,\n    },\n    body: {\n      appendChild: () => mockWindow.appendedNodes++,\n    },\n    createElement: jasmine.createSpy('document.createElement'),\n  };\n\n  getComputedStyle.withArgs(jasmine.anything()).and.returnValue({\n    borderTopStyle: 'none',\n  });\n\n  mockDoc.createElement.withArgs('div').and.returnValue({\n    remove: remove,\n    parentNode: {\n      removeChild: () => mockWindow.appendedNodes--,\n    },\n  });\n\n  const mockWindow = {\n    // Expose count of nodes that have been appended and not removed, to be\n    // verified in tests\n    appendedNodes: 0,\n    CSS: {\n      supports: jasmine.createSpy('.supports'),\n    },\n    document: mockDoc,\n    getComputedStyle: getComputedStyle,\n  };\n  return mockWindow;\n}\n"
  },
  {
    "path": "packages/mdc-ripple/test/mdc-ripple.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-ripple.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-ripple/test/util.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from '../../mdc-ripple/util';\n\nimport {createMockWindowForCssVariables} from './helpers';\n\ndescribe('MDCRipple - util', () => {\n  it('#supportsCssVariables returns true when CSS.supports() returns true for css vars',\n     () => {\n       const windowObj = createMockWindowForCssVariables();\n       windowObj.CSS.supports.withArgs('--css-vars', jasmine.anything())\n           .and.returnValue(true);\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(false);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeTruthy();\n       expect(windowObj.appendedNodes).toEqual(0);\n     });\n\n  it('#supportsCssVariables returns true when feature-detecting its way around Safari < 10',\n     () => {\n       const windowObj = createMockWindowForCssVariables();\n       windowObj.CSS.supports.withArgs('--css-vars', jasmine.anything())\n           .and.returnValue(false);\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(true);\n       windowObj.CSS.supports.withArgs('color', '#00000000')\n           .and.returnValue(true);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeTruthy();\n\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(false);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeFalsy();\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(true);\n\n       windowObj.CSS.supports.withArgs('color', '#00000000')\n           .and.returnValue(false);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeFalsy();\n       expect(windowObj.appendedNodes).toEqual(0);\n     });\n\n  it('#supportsCssVariables returns true when getComputedStyle returns null (e.g. Firefox hidden iframes)',\n     () => {\n       const windowObj = createMockWindowForCssVariables();\n       windowObj.CSS.supports.withArgs('--css-vars', jasmine.anything())\n           .and.returnValue(true);\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(false);\n       windowObj.getComputedStyle.withArgs(jasmine.anything())\n           .and.returnValue(null);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeTruthy();\n       expect(windowObj.appendedNodes).toEqual(0);\n     });\n\n  it('#supportsCssVariables returns false when CSS.supports() returns false for css vars',\n     () => {\n       const windowObj = {\n         CSS: {\n           supports: jasmine.createSpy('.supports'),\n         },\n       };\n       windowObj.CSS.supports.withArgs('--css-vars', jasmine.anything())\n           .and.returnValue(false);\n       windowObj.CSS.supports.withArgs(jasmine.stringMatching(/\\(--css-vars:/))\n           .and.returnValue(false);\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeFalsy();\n     });\n\n  it('#supportsCssVariables returns false when CSS.supports is not a function',\n     () => {\n       const windowObj = {\n         CSS: {\n           supports: 'nope',\n         },\n       };\n       expect(util.supportsCssVariables(windowObj as any, true)).toBeFalsy();\n     });\n\n  it('#supportsCssVariables returns false when CSS is not an object', () => {\n    const windowObj = {\n      CSS: null,\n    };\n    expect(util.supportsCssVariables(windowObj as any, true)).toBeFalsy();\n  });\n\n  it('#getNormalizedEventCoords maps event coords into the relative coordinates of the given rect',\n     () => {\n       const ev = {type: 'mousedown', pageX: 70, pageY: 70};\n       const pageOffset = {x: 10, y: 10};\n       const clientRect = {left: 50, top: 50};\n\n       expect(util.getNormalizedEventCoords(\n                  ev as any, pageOffset, clientRect as any))\n           .toEqual({\n             x: 10,\n             y: 10,\n           });\n     });\n\n  it('#getNormalizedEventCoords works with touchstart events', () => {\n    const ev = {type: 'touchstart', changedTouches: [{pageX: 70, pageY: 70}]};\n    const pageOffset = {x: 10, y: 10};\n    const clientRect = {left: 50, top: 50};\n\n    expect(\n        util.getNormalizedEventCoords(ev as any, pageOffset, clientRect as any))\n        .toEqual({\n          x: 10,\n          y: 10,\n        });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-ripple/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCRipplePoint {\n  x: number;\n  y: number;\n}\n\n/**\n * Options passed in when attaching a ripple to an object.\n */\nexport interface MDCRippleAttachOpts {\n  isUnbounded?: boolean;\n}\n\n/**\n * See Material Design spec for more details on when to use ripples.\n * https://material.io/guidelines/motion/choreography.html#choreography-creation\n * unbounded Whether or not the ripple bleeds out of the bounds of the element.\n * disabled Whether or not the ripple is attached to a disabled component.\n */\nexport interface MDCRippleCapableSurface {\n  root: HTMLElement;\n  unbounded?: boolean;\n  disabled?: boolean;\n}\n"
  },
  {
    "path": "packages/mdc-ripple/util.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipplePoint} from './types';\n\n/**\n * Stores result from supportsCssVariables to avoid redundant processing to\n * detect CSS custom variable support.\n */\nlet supportsCssVariablesCache: boolean|undefined;\n\n/** Checks if the window supports CSS Variables */\nexport function supportsCssVariables(\n    windowObj: typeof globalThis, forceRefresh = false): boolean {\n  const {CSS} = windowObj;\n  let supportsCssVars = supportsCssVariablesCache;\n  if (typeof supportsCssVariablesCache === 'boolean' && !forceRefresh) {\n    return supportsCssVariablesCache;\n  }\n\n  const supportsFunctionPresent = CSS && typeof CSS.supports === 'function';\n  if (!supportsFunctionPresent) {\n    return false;\n  }\n\n  const explicitlySupportsCssVars = CSS.supports('--css-vars', 'yes');\n  // See: https://bugs.webkit.org/show_bug.cgi?id=154669\n  // See: README section on Safari\n  const weAreFeatureDetectingSafari10plus =\n      (CSS.supports('(--css-vars: yes)') && CSS.supports('color', '#00000000'));\n\n  supportsCssVars =\n      explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus;\n\n  if (!forceRefresh) {\n    supportsCssVariablesCache = supportsCssVars;\n  }\n  return supportsCssVars;\n}\n\n/** Gets the normalized events coordinates */\nexport function getNormalizedEventCoords(\n    event: Event|undefined, pageOffset: MDCRipplePoint,\n    clientRect: DOMRect): MDCRipplePoint {\n  if (!event) {\n    return {x: 0, y: 0};\n  }\n  const {x, y} = pageOffset;\n  const documentX = x + clientRect.left;\n  const documentY = y + clientRect.top;\n\n  let normalizedX;\n  let normalizedY;\n  // Determine touch point relative to the ripple container.\n  if (event.type === 'touchstart') {\n    const touchEvent = event as TouchEvent;\n    normalizedX = touchEvent.changedTouches[0].pageX - documentX;\n    normalizedY = touchEvent.changedTouches[0].pageY - documentY;\n  } else {\n    const mouseEvent = event as MouseEvent;\n    normalizedX = mouseEvent.pageX - documentX;\n    normalizedY = mouseEvent.pageY - documentY;\n  }\n\n  return {x: normalizedX, y: normalizedY};\n}\n"
  },
  {
    "path": "packages/mdc-rtl/README.md",
    "content": "<!--docs:\ntitle: \"RTL\"\nlayout: detail\nsection: components\nexcerpt: \"Right-to-left and bi-directional text layout via SCSS helpers.\"\npath: /catalog/rtl/\n-->\n\n# RTL\n\nUIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-bidirectionality\">Material Design guidelines: Bidirectionality</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/rtl\n```\n\n## Usage\n\n### Sass Mixins\n\n`rtl` is the most flexible mixin, because it can work with multiple CSS properties. All other RTL mixins logic could be engineered by only using `rtl`, but we provide these mixins for convenience.\n\nBoth `reflexive-property` and `reflexive-box` work with one base box-model property, e.g. margin, border, padding. But `reflexive-property` is more flexible because it accepts different left and right values. `reflexive-box` assumes the left and right values are the same, and therefore that the box-model is symmetrical.\n\n`reflexive-position` is the least flexible mixin. It only works with one horizontal position property, \"left\" or \"right\". It also assumes the left and right values are the same.\n\n| Mixin | Description |\n| ----------------------------------------------- | - |\n| `rtl($root-selector)` | Creates a rule that is applied when the root element is within an RTL context |\n| `reflexive-box($base-property, $default-direction, $value, $root-selector)` | Applies the value to the `#{$base-property}-#{$default-direction}` property  in a LTR context, and flips the direction in an RTL context. **This mixin zeros out the original value in an RTL context.**  |\n| `reflexive-property($base-property, $left-value, $right-value, $root-selector)` | Emits rules that assign `#{$base-property}`-left to `#{left-value}` and `#{base-property}`-right to `#{right-value}` in a LTR context, and vice versa in a RTL context. **Basically it flips values between a LTR and RTL context.** |\n| `reflexive-position($position-property, $value, $root-selector)` | Applies the value to the specified position in a LTR context, and flips the direction in an RTL context. `$position-property` is a horizontal position, either \"left\" or \"right\". |\n| `reflexive($left-property, $left-value, $right-property, $right-value, $root-selector)` | Applies the pair of property values to the specified position in a LTR context, and flips the direction in an RTL context. |\n\n**A note about [dir=\"rtl\"]**: `rtl($root-selector)` checks for `[dir=\"rtl\"]` on the ancestor element. This works in most cases, it will sometimes lead to false negatives for more complex layouts, e.g.\n\n```html\n<html dir=\"rtl\">\n  <!-- ... -->\n  <div dir=\"ltr\">\n    <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n  </div>\n</html>\n```\n\nUnfortunately, we've found that this is the best we can do for now. In the future, selectors such as [:dir](http://mdn.io/:dir) will help us mitigate this.\n"
  },
  {
    "path": "packages/mdc-rtl/_index.scss",
    "content": "@forward './rtl';\n"
  },
  {
    "path": "packages/mdc-rtl/_mixins.import.scss",
    "content": "@forward \"./index\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"./index\" as mdc-* show mdc-rtl;\n"
  },
  {
    "path": "packages/mdc-rtl/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_rtl.scss' module instead.\n@forward './rtl' show rtl, reflexive-box, reflexive-property, reflexive-position, reflexive, property_;\n"
  },
  {
    "path": "packages/mdc-rtl/_rtl.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n///   padding-left: 4px;\n///\n///   @include rtl {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n/// }\n///\n/// @example - css\n///   .mdc-foo {\n///     padding-left: 4px;\n///   }\n///\n///   [dir=\"rtl\"] .mdc-foo,\n///   .mdc-foo[dir=\"rtl\"] {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n///   <!-- ... -->\n///   <div dir=\"ltr\">\n///     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n///   </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n  @if ($include) {\n    $dir-rtl: '[dir=rtl]';\n\n    $rtl-selectors: list.join(\n      selector.nest($dir-rtl, &),\n      selector-ext.append-strict(&, $dir-rtl)\n    );\n\n    @at-root {\n      #{$rtl-selectors} {\n        /*rtl:begin:ignore*/\n        @content;\n        /*rtl:end:ignore*/\n      }\n    }\n  }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 8px;\n//   margin-right: 0;\n//\n//   @include rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 0;\n//   margin-right: 8px;\n//\n//   @include rtl {\n//     margin-left: 8px;\n//     margin-right: 0;\n//   }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n  $base-property,\n  $default-direction,\n  $value,\n  $replace: null\n) {\n  @if (list.index((right, left), $default-direction) == null) {\n    @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n  }\n\n  $left-value: $value;\n  $right-value: 0;\n\n  @if ($default-direction == right) {\n    $left-value: 0;\n    $right-value: $value;\n  }\n\n  @include reflexive-property(\n    $base-property,\n    $left-value,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: auto;\n//   margin-right: 12px;\n//\n//   @include rtl {\n//     margin-left: 12px;\n//     margin-right: auto;\n//   }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n  $base-property,\n  $left-value,\n  $right-value,\n  $replace: null\n) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include reflexive(\n    $prop-left,\n    $left-value,\n    $prop-right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 0;\n//   right: initial;\n//\n//   @include rtl {\n//     left: initial;\n//     right: 0;\n//   }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n  @if (list.index((right, left), $position-property) == null) {\n    @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n  }\n\n  // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n  $left-value: $value;\n  $right-value: initial;\n\n  @if ($position-property == right) {\n    $right-value: $value;\n    $left-value: initial;\n  }\n\n  @include reflexive(\n    left,\n    $left-value,\n    right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 2px;\n//   right: 5px;\n//\n//   @include rtl {\n//     right: 2px;\n//     left: 5px;\n//   }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $replace: null\n) {\n  $left-replace: null;\n  $right-replace: null;\n  @if $replace {\n    @if meta.type-of($left-value) == 'string' {\n      $left-replace: $replace;\n    }\n\n    @if meta.type-of($right-value) == 'string' {\n      $right-replace: $replace;\n    }\n\n    @if $left-replace == null and $right-replace == null {\n      @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n    }\n\n    // If any replacements are null, treat the entire value as null (do not\n    // emit anything).\n    @each $name, $replacement in $replace {\n      @if $replacement == null {\n        $left-value: null;\n        $right-value: null;\n      }\n    }\n  }\n\n  // Do not emit if either value are null\n  @if $left-value and $right-value {\n    @include _property($left-property, $left-value, $replace: $left-replace);\n    @include _property($right-property, $right-value, $replace: $right-replace);\n\n    @include rtl {\n      @include _property(\n        $left-property,\n        $right-value,\n        $replace: $right-replace\n      );\n      @include _property($right-property, $left-value, $replace: $left-replace);\n    }\n  }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n  @include gss.annotate(\n    (\n      noflip: $include,\n    )\n  );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n  @include theme.property(\n    $property,\n    $value,\n    $replace: $replace,\n    $gss: (noflip: $include)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-rtl/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-rtl-* hide mdc-rtl-rtl, mdc-rtl-reflexive-box, mdc-rtl-reflexive-property, mdc-rtl-reflexive-position, mdc-rtl-reflexive, mdc-rtl-property-;\n"
  },
  {
    "path": "packages/mdc-rtl/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_rtl.scss' module instead.\n@forward './rtl' show $include;\n"
  },
  {
    "path": "packages/mdc-rtl/package.json",
    "content": "{\n  \"name\": \"@material/rtl\",\n  \"description\": \"Material Components for the web RTL Scss helpers\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"rtl\",\n    \"right to left\"\n  ],\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-rtl\"\n  },\n  \"dependencies\": {\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-rtl/test/disable-include-rtl.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\n\ndescribe('disable-include-rtl.test.scss', () => {\n  it('emits no [dir=rtl] selectors when `include` is disabled (false)', () => {\n    const filePath = path.join(__dirname, 'disable-include-rtl.test.css');\n    const css = fs.readFileSync(filePath, 'utf8').trim();\n    expect(css).not.toContain('[dir=rtl]');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-rtl/test/disable-include-rtl.test.scss",
    "content": "@use '../index' with (\n  $include: false,\n);\n@use '@material/button/mdc-button';\n@use '@material/textfield/mdc-text-field';\n@use '@material/typography/mdc-typography';\n"
  },
  {
    "path": "packages/mdc-rtl/test/rtl.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\n\ndescribe('rtl.test.scss', () => {\n  let css = '';\n\n  beforeAll(() => {\n    const filePath = path.join(__dirname, 'rtl.test.css');\n    css = fs.readFileSync(filePath, 'utf8').trim();\n  });\n\n  it('should not add [dir=rtl] after pseudo element', () => {\n    expect(css).not.toContain('.test-pseudo-element::before[dir=rtl]');\n    expect(css).toContain('.test-pseudo-element[dir=rtl]::before');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-rtl/test/rtl.test.scss",
    "content": "@use '../rtl';\n\n.test-pseudo-element {\n  &::before {\n    @include rtl.rtl {\n      margin-right: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-rtl/test/theme.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\n\ndescribe('theme.test.scss', () => {\n  it('emits custom properties using theme.property()', () => {\n    const filePath = path.join(__dirname, 'theme.test.css');\n    const css = fs.readFileSync(filePath, 'utf8').trim();\n    expect(css).toEqual(`.test {\n  /* @noflip */ /*rtl:ignore*/\n  margin-left: 0;\n  /* @noflip */ /*rtl:ignore*/\n  margin-right: 8px;\n  /* @alternate */\n  /* @noflip */ /*rtl:ignore*/\n  margin-right: var(--margin-prop, 8px);\n}\n[dir=rtl] .test, .test[dir=rtl] {\n  /*rtl:begin:ignore*/\n  /* @noflip */ /*rtl:ignore*/\n  margin-left: 8px;\n  /* @alternate */\n  /* @noflip */ /*rtl:ignore*/\n  margin-left: var(--margin-prop, 8px);\n  /* @noflip */ /*rtl:ignore*/\n  margin-right: 0;\n  /*rtl:end:ignore*/\n}`);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-rtl/test/theme.test.scss",
    "content": "@use '@material/theme/custom-properties';\n@use '../mixins' as rtl;\n\n.test {\n  @include rtl.reflexive-box(\n    margin,\n    right,\n    custom-properties.create(--margin-prop, 8px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-segmented-button/README.md",
    "content": "# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\n"
  },
  {
    "path": "packages/mdc-segmented-button/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Index: Forward mixins of theme modules for client use\n\n@forward './segmented-button/segmented-button-theme';\n@forward './segment/segment-theme';\n"
  },
  {
    "path": "packages/mdc-segmented-button/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './segmented-button/index';\nexport * from './segment/index';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-segmented-button/package.json",
    "content": "{\n    \"name\": \"@material/segmented-button\",\n    \"version\": \"14.0.0\",\n    \"description\": \"The Material Components for the web segmented button component\",\n    \"license\": \"MIT\",\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"https://github.com/material-components/material-components-web.git\",\n        \"directory\": \"packages/mdc-segmented-button\"\n    },\n    \"keywords\": [\n        \"material components\",\n        \"material design\",\n        \"segmented button\"\n    ],\n    \"publishConfig\": {\n        \"access\": \"public\"\n    },\n    \"dependencies\": {\n        \"@material/base\": \"^14.0.0\",\n        \"@material/elevation\": \"^14.0.0\",\n        \"@material/feature-targeting\": \"^14.0.0\",\n        \"@material/ripple\": \"^14.0.0\",\n        \"@material/theme\": \"^14.0.0\",\n        \"@material/touch-target\": \"^14.0.0\",\n        \"@material/typography\": \"^14.0.0\",\n        \"tslib\": \"^2.1.0\"\n    }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/_segment-ripple.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use './segment-theme';\n\n$ripple-target: '.mdc-segmented-button__ripple';\n\n@mixin ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-segmented-button__segment {\n    @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include ripple-theme.states(\n      segment-theme.$selected-ink-color,\n      true,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n    @include feature-targeting.targets($feat-structure) {\n      overflow: hidden;\n    }\n\n    #{$ripple-target} {\n      @include ripple.target-common($query: $query);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/_segment-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Theme: Variables, functions, and mixins required to theme component segment\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme-color';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n\n$on-surface: theme-color.$on-surface;\n$surface: theme-color.$surface;\n$primary: theme-color.$primary;\n\n$unselected-ink-color: rgba($on-surface, 0.6);\n$outline-color: rgba($on-surface, 0.12);\n$unselected-container-fill-color: rgba($surface, 1);\n$selected-ink-color: rgba($primary, 1);\n$selected-container-fill-color: rgba($primary, 0.08);\n\n$height: 36px;\n$min-width: 48px;\n$horizontal-padding: 12px;\n$border-width: 1px;\n$border-radius: 4px;\n$icon-width: 24px;\n$icon-font-size: 18px;\n$label-padding: 6px;\n$touch-target-height: 48px;\n\n/// Sets the border color of the segment\n/// @param {String} $color - Color of segment outline\n@mixin outline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $property: custom-properties.create(\n    --mdc-segmented-button-outline-color,\n    $color\n  );\n\n  .mdc-segmented-button__segment {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property('border-color', $property);\n    }\n  }\n}\n\n/// Sets the text and icon color within the segment when it is not selected\n/// @param {String} $color - Color of text and icon in segment\n@mixin unselected-ink-color($color, $query: feature-targeting.all()) {\n  .mdc-segmented-button__segment {\n    $property: custom-properties.create(\n      --mdc-segmented-button-unselected-ink-color,\n      $color\n    );\n    @include _ink-color($property, $query);\n  }\n}\n\n/// Sets the background fill color of the segment when it is not selected\n/// @param {String} $color - Color of segment background\n@mixin unselected-container-fill-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  .mdc-segmented-button__segment {\n    $property: custom-properties.create(\n      --mdc-segmented-button-unselected-container-fill-color,\n      $color\n    );\n    @include _container-fill-color($property, $query);\n  }\n}\n\n/// Sets the text and icon color within the segment when it is selected\n/// @param {String} $color - Color of text and icon in segment\n@mixin selected-ink-color($color, $query: feature-targeting.all()) {\n  .mdc-segmented-button__segment--selected {\n    $property: custom-properties.create(\n      --mdc-segmented-button-selected-ink-color,\n      $color\n    );\n    @include _ink-color($property, $query);\n  }\n}\n\n/// Sets the background fill color of the segment when it is not selected\n/// @param {String} $color - Color of segment background\n@mixin selected-container-fill-color($color, $query: feature-targeting.all()) {\n  .mdc-segmented-button__segment--selected {\n    $property: custom-properties.create(\n      --mdc-segmented-button-selected-container-fill-color,\n      $color\n    );\n    @include _container-fill-color($property, $query);\n  }\n}\n\n/// Sets the text and icon color\n/// @param {Map} $property - Custom property of text and icon color\n@mixin _ink-color($property, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property('color', $property);\n  }\n}\n\n/// Sets the background fill color\n/// @param {Map} $property - Custom property of background color\n@mixin _container-fill-color($property, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property('background-color', $property);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/_segment.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Core: Define complete styles to render component segment, including base and theme styles\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use '@material/touch-target/touch-target';\n@use '@material/elevation/elevation';\n@use '@material/elevation/elevation-theme';\n@use './segment-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include touch-target.wrapper($query);\n  @include elevation.overlay-common($query);\n\n  @include _unselected($query);\n  @include _selected($query);\n\n  .mdc-segmented-button__segment {\n    @include base($query);\n\n    &:hover {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: pointer;\n      }\n    }\n\n    // Removes ripple's focus outline\n    &:focus {\n      @include feature-targeting.targets($feat-structure) {\n        outline-width: 0;\n      }\n    }\n\n    &:first-child {\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: segment-theme.$border-radius 0 0\n          segment-theme.$border-radius;\n      }\n    }\n\n    &:last-child {\n      @include feature-targeting.targets($feat-structure) {\n        border-right-width: segment-theme.$border-width;\n        border-radius: 0 segment-theme.$border-radius\n          segment-theme.$border-radius 0;\n      }\n    }\n\n    .mdc-segmented-button__segment__touch {\n      @include touch-target.touch-target($query: $query);\n    }\n\n    .mdc-segmented-button__segment--touch {\n      @include touch-target.margin(\n        $component-height: segment-theme.$touch-target-height,\n        $query: $query\n      );\n    }\n  }\n\n  // maintains visual design when inside a touch-target-wrapper\n  // This could also be accomplished with --first/--last classes\n  .mdc-touch-target-wrapper {\n    .mdc-segmented-button__segment {\n      border-radius: 0;\n      border-right-width: 0;\n    }\n\n    &:first-child .mdc-segmented-button__segment {\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: segment-theme.$border-radius 0 0\n          segment-theme.$border-radius;\n      }\n    }\n\n    &:last-child .mdc-segmented-button__segment {\n      @include feature-targeting.targets($feat-structure) {\n        border-right-width: segment-theme.$border-width;\n        border-radius: 0 segment-theme.$border-radius\n          segment-theme.$border-radius 0;\n      }\n    }\n  }\n\n  .mdc-segmented-button__icon {\n    @include icon($query);\n  }\n\n  .mdc-segmented-button__icon + .mdc-segmented-button__label {\n    @include label($query);\n  }\n}\n\n@mixin base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // elevation mixins contain ripple effect to segment boundaries\n  @include elevation-theme.overlay-surface-position($query: $query);\n  @include elevation-theme.overlay-dimensions(100%, $query: $query);\n  @include typography.typography(button, $query);\n  @include feature-targeting.targets($feat-structure) {\n    display: inline-flex;\n    vertical-align: top;\n    align-items: center;\n    height: segment-theme.$height;\n    min-width: segment-theme.$min-width;\n    padding: 0 segment-theme.$horizontal-padding;\n    border-width: segment-theme.$border-width 0 segment-theme.$border-width\n      segment-theme.$border-width;\n  }\n}\n\n@mixin _unselected($query: feature-targeting.all()) {\n  @include segment-theme.outline-color(segment-theme.$outline-color, $query);\n  @include segment-theme.unselected-ink-color(\n    segment-theme.$unselected-ink-color,\n    $query\n  );\n  @include segment-theme.unselected-container-fill-color(\n    segment-theme.$unselected-container-fill-color,\n    $query\n  );\n}\n\n@mixin _selected($query: feature-targeting.all()) {\n  @include segment-theme.selected-ink-color(\n    segment-theme.$selected-ink-color,\n    $query\n  );\n  @include segment-theme.selected-container-fill-color(\n    segment-theme.$selected-container-fill-color,\n    $query\n  );\n}\n\n@mixin icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: segment-theme.$icon-width;\n  }\n  @include feature-targeting.targets($feat-typography) {\n    font-size: segment-theme.$icon-font-size;\n  }\n}\n\n@mixin label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    padding-left: segment-theme.$label-padding;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCSegmentedButtonSegmentAdapter {\n  /**\n   * @return Returns true if wrapping segmented button is single select\n   */\n  isSingleSelect(): boolean;\n\n  /**\n   * @param attrName Attribute of interest\n   * @return Returns segment's attribute value if it is set, otherwise returns\n   * null\n   */\n  getAttr(attrName: string): string|null;\n\n  /**\n   * Sets segment's attribute value to new value\n   *\n   * @param attrName Attribute of interest\n   * @param value New value of attribute\n   */\n  setAttr(attrName: string, value: string): void;\n\n  /**\n   * Adds css class to segment\n   *\n   * @param className Class to add\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes css class from segment\n   *\n   * @param className Class to remove\n   */\n  removeClass(className: string): void;\n\n  /**\n   * @param className Class of interest\n   * @return Returns true if segment has css class, otherwise returns false\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Emits event about segment to wrapping segmented button\n   *\n   * @param selected Represents whether segment is currently selected\n   * @event selected With detail - SegmentDetail\n   */\n  notifySelectedChange(selected: boolean): void;\n\n  /**\n   * @return Returns bounding rectangle for ripple effect\n   */\n  getRootBoundingClientRect(): DOMRect;\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {SegmentDetail} from '../types';\n\nimport {MDCSegmentedButtonSegmentAdapter} from './adapter';\nimport {events} from './constants';\nimport {MDCSegmentedButtonSegmentFoundation} from './foundation';\n\n/**\n * MDCSegmentedButtonSegment factory type.\n */\nexport type MDCSegmentedButtonSegmentFactory =\n    (el: HTMLElement, foundation?: MDCSegmentedButtonSegmentFoundation) =>\n        MDCSegmentedButtonSegment;\n\n/**\n * Implementation of MDCSegmentedButtonSegmentFoundation\n */\nexport class MDCSegmentedButtonSegment extends\n    MDCComponent<MDCSegmentedButtonSegmentFoundation> implements\n        MDCRippleCapableSurface {\n  get ripple(): MDCRipple {\n    return this.rippleComponent;\n  }\n\n  static override attachTo(root: HTMLElement) {\n    return new MDCSegmentedButtonSegment(root);\n  }\n\n  private index!: number;            // assigned in setIndex by parent\n  private isSingleSelect!: boolean;  // assigned in setIsSingleSelect by parent\n  private rippleComponent!: MDCRipple;  // assigned in initialize\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM\n\n  override initialize(\n      rippleFactory: MDCRippleFactory = (el, foundation) =>\n          new MDCRipple(el, foundation)) {\n    const rippleAdapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      computeBoundingRect: () => this.foundation.getDimensions()\n    };\n    this.rippleComponent =\n        rippleFactory(this.root, new MDCRippleFoundation(rippleAdapter));\n  }\n\n  override initialSyncWithDOM() {\n    this.handleClick = () => {\n      this.foundation.handleClick();\n    };\n\n    this.listen(events.CLICK, this.handleClick);\n  }\n\n  override destroy() {\n    this.ripple.destroy();\n\n    this.unlisten(events.CLICK, this.handleClick);\n\n    super.destroy();\n  }\n\n  override getDefaultFoundation(): MDCSegmentedButtonSegmentFoundation {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCSegmentedButtonSegmentAdapter = {\n      isSingleSelect: () => {\n        return this.isSingleSelect;\n      },\n      getAttr: (attrName) => {\n        return this.root.getAttribute(attrName);\n      },\n      setAttr: (attrName, value) => {\n        this.safeSetAttribute(this.root, attrName, value);\n      },\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => {\n        return this.root.classList.contains(className);\n      },\n      notifySelectedChange: (selected) => {\n        this.emit<SegmentDetail>(\n            events.SELECTED,\n            {index: this.index, selected, segmentId: this.getSegmentId()},\n            true /* shouldBubble */\n        );\n      },\n      getRootBoundingClientRect: () => {\n        return this.root.getBoundingClientRect();\n      }\n    };\n    return new MDCSegmentedButtonSegmentFoundation(adapter);\n  }\n\n  /**\n   * Sets segment's index value\n   *\n   * @param index Segment's index within wrapping segmented button\n   */\n  setIndex(index: number) {\n    this.index = index;\n  }\n\n  /**\n   * Sets segment's isSingleSelect value\n   *\n   * @param isSingleSelect True if wrapping segmented button is single select\n   */\n  setIsSingleSelect(isSingleSelect: boolean) {\n    this.isSingleSelect = isSingleSelect;\n  }\n\n  /**\n   * @return Returns true if segment is currently selected, otherwise returns\n   * false\n   */\n  isSelected(): boolean {\n    return this.foundation.isSelected();\n  }\n\n  /**\n   * Sets segment to be selected\n   */\n  setSelected() {\n    this.foundation.setSelected();\n  }\n\n  /**\n   * Sets segment to be not selected\n   */\n  setUnselected() {\n    this.foundation.setUnselected();\n  }\n\n  /**\n   * @return Returns segment's segmentId if it was set by client\n   */\n  getSegmentId(): string|undefined {\n    return this.foundation.getSegmentId();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Boolean strings for segment\n */\nexport const booleans = {\n  TRUE: 'true',\n  FALSE: 'false'\n};\n\n/**\n * Attributes referenced by segment\n */\nexport const attributes = {\n  ARIA_CHECKED: 'aria-checked',\n  ARIA_PRESSED: 'aria-pressed',\n  DATA_SEGMENT_ID: 'data-segment-id'\n};\n\n/**\n * Events received or emitted by segment\n */\nexport const events = {\n  CLICK: 'click',\n  SELECTED: 'selected'\n};\n\n/**\n * Style classes for segment\n */\nexport const cssClasses = {\n  SELECTED: 'mdc-segmented-button__segment--selected'\n};\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCSegmentedButtonSegmentAdapter} from './adapter';\nimport {attributes, booleans, cssClasses} from './constants';\n\nconst emptyClientRect = {\n  bottom: 0,\n  height: 0,\n  left: 0,\n  right: 0,\n  top: 0,\n  width: 0,\n} as any;\n\n/** MDC Segmented Button Segment Foundation */\nexport class MDCSegmentedButtonSegmentFoundation extends\n    MDCFoundation<MDCSegmentedButtonSegmentAdapter> {\n  static override get defaultAdapter(): MDCSegmentedButtonSegmentAdapter {\n    return {\n      isSingleSelect: () => false, getAttr: () => '', setAttr: () => undefined,\n                      addClass: () => undefined, removeClass: () => undefined,\n                      hasClass: () => false,\n                      notifySelectedChange: () => undefined,\n                      getRootBoundingClientRect: () => emptyClientRect,\n    }\n  }\n\n  constructor(adapter?: Partial<MDCSegmentedButtonSegmentAdapter>) {\n    super({...MDCSegmentedButtonSegmentFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * @return Returns true if segment is currently selected, otherwise returns\n   * false\n   */\n  isSelected(): boolean {\n    return this.adapter.hasClass(cssClasses.SELECTED);\n  }\n\n  /**\n   * Sets segment to be selected\n   */\n  setSelected() {\n    this.adapter.addClass(cssClasses.SELECTED);\n    this.setAriaAttr(booleans.TRUE);\n  }\n\n  /**\n   * Sets segment to be not selected\n   */\n  setUnselected() {\n    this.adapter.removeClass(cssClasses.SELECTED);\n    this.setAriaAttr(booleans.FALSE);\n  }\n\n  /**\n   * @return Returns segment's segmentId if it was set by client\n   */\n  getSegmentId(): string|undefined {\n    return this.adapter.getAttr(attributes.DATA_SEGMENT_ID) ?? undefined;\n  }\n\n  /**\n   * Called when segment is clicked. If the wrapping segmented button is single\n   * select, doesn't allow segment to be set to not selected. Otherwise, toggles\n   * segment's selected status. Finally, emits event to wrapping segmented\n   * button.\n   *\n   * @event selected With detail - SegmentDetail\n   */\n  handleClick(): void {\n    if (this.adapter.isSingleSelect()) {\n      this.setSelected();\n    } else {\n      this.toggleSelection();\n    }\n    this.adapter.notifySelectedChange(this.isSelected());\n  }\n\n  /**\n   * @return Returns bounding rectangle for ripple effect\n   */\n  getDimensions(): DOMRect {\n    return this.adapter.getRootBoundingClientRect();\n  }\n\n  /**\n   * Sets segment from not selected to selected, or selected to not selected\n   */\n  private toggleSelection() {\n    if (this.isSelected()) {\n      this.setUnselected();\n    } else {\n      this.setSelected();\n    }\n  }\n\n  /**\n   * Sets appropriate aria attribute, based on wrapping segmented button's\n   * single selected value, to new value\n   *\n   * @param value Value that represents selected status\n   */\n  private setAriaAttr(value: string) {\n    if (this.adapter.isSingleSelect()) {\n      this.adapter.setAttr(attributes.ARIA_CHECKED, value);\n    } else {\n      this.adapter.setAttr(attributes.ARIA_PRESSED, value);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './foundation';\nexport * from './component';\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {emitEvent} from '../../../../testing/dom/events';\nimport {attributes, booleans, cssClasses, events} from '../constants';\nimport {MDCSegmentedButtonSegment} from '../index';\n\nimport {testStrings} from './constants';\n\nconst getFixtureMultiSelectWithLabel = () => {\n  return createFixture(html`\n    <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n      <div class=\"mdc-segmented-button__label\">Segment Label</div>\n    </button>\n  `);\n};\n\nconst setupTest = () => {\n  const root = getFixtureMultiSelectWithLabel();\n  const component = new MDCSegmentedButtonSegment(root);\n  const adapter = (component.getDefaultFoundation() as any).adapter;\n  return {root, component, adapter};\n};\n\n/**\n * TODO: add tests for ripple, touch, and having icon\n */\ndescribe('MDCSegmentedButtonSegment', () => {\n  it('attachTo return an MDCSegmentedButtonSegment instance', () => {\n    expect(\n        MDCSegmentedButtonSegment.attachTo(getFixtureMultiSelectWithLabel())\n            instanceof MDCSegmentedButtonSegment)\n        .toBeTruthy();\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('handle selected');\n    component.listen(events.SELECTED, handler);\n\n    emitEvent(root, events.CLICK);\n    expect(handler).toHaveBeenCalledTimes(1);\n\n    component.unlisten(events.SELECTED, handler);\n    component.destroy();\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('handle selected');\n    component.listen(events.SELECTED, handler);\n    component.destroy();\n\n    emitEvent(root, events.CLICK);\n    expect(handler).not.toHaveBeenCalled();\n\n    component.unlisten(events.SELECTED, handler);\n  });\n\n  describe('Adapter', () => {\n    it('#isSingleSelect returns value of isSingleSelect', () => {\n      const {component, adapter} = setupTest();\n\n      component.setIsSingleSelect(true);\n      expect(adapter.isSingleSelect()).toBeTrue();\n\n      component.setIsSingleSelect(false);\n      expect(adapter.isSingleSelect()).toBeFalse();\n\n      component.destroy();\n    });\n\n    it('#getAttr returns value of attribute of root element', () => {\n      const {root, component, adapter} = setupTest();\n\n      root.setAttribute(testStrings.ATTRIBUTE, booleans.FALSE);\n      expect(adapter.getAttr(testStrings.ATTRIBUTE)).toEqual(booleans.FALSE);\n      root.setAttribute(testStrings.ATTRIBUTE, booleans.TRUE);\n      expect(adapter.getAttr(testStrings.ATTRIBUTE)).toEqual(booleans.TRUE);\n      root.removeAttribute(testStrings.ATTRIBUTE);\n      expect(adapter.getAttr(testStrings.ATTRIBUTE)).toEqual(null);\n\n      component.destroy();\n    });\n\n    it('#setAttr sets the value of attribute of root element', () => {\n      const {root, component, adapter} = setupTest();\n\n      adapter.setAttr(testStrings.ATTRIBUTE, booleans.TRUE);\n      expect(root.getAttribute(testStrings.ATTRIBUTE)).toEqual(booleans.TRUE);\n      adapter.setAttr(testStrings.ATTRIBUTE, booleans.FALSE);\n      expect(root.getAttribute(testStrings.ATTRIBUTE)).toEqual(booleans.FALSE);\n\n      component.destroy();\n    });\n\n    it('#addClass adds class to root element', () => {\n      const {root, component, adapter} = setupTest();\n\n      root.classList.remove(testStrings.CLASS);\n      adapter.addClass(testStrings.CLASS);\n      expect(root).toHaveClass(testStrings.CLASS);\n\n      component.destroy();\n    });\n\n    it('#removeClass removes class from root element', () => {\n      const {root, component, adapter} = setupTest();\n\n      root.classList.add(testStrings.CLASS);\n      adapter.removeClass(testStrings.CLASS);\n      expect(root).not.toHaveClass(testStrings.CLASS);\n\n      component.destroy();\n    });\n\n    it('#hasClass returns whether root element has class', () => {\n      const {root, component, adapter} = setupTest();\n\n      root.classList.add(testStrings.CLASS);\n      expect(adapter.hasClass(testStrings.CLASS)).toBeTrue();\n      root.classList.remove(testStrings.CLASS);\n      expect(adapter.hasClass(testStrings.CLASS)).toBeFalse();\n\n      component.destroy();\n    });\n\n    it(`#notifySelectedChange emits ${\n           events.SELECTED} event with SegmentDetail`,\n       () => {\n         const {root, component, adapter} = setupTest();\n         const handler = jasmine.createSpy('selected handler');\n         component.listen(events.SELECTED, handler);\n\n         const index = 0;\n         component.setIndex(index);\n         root.setAttribute(attributes.DATA_SEGMENT_ID, testStrings.SEGMENT_ID);\n\n         adapter.notifySelectedChange(true);\n         expect(handler).toHaveBeenCalledWith(jasmine.anything());\n         expect(handler.calls.mostRecent().args[0].detail.index).toEqual(index);\n         expect(handler.calls.mostRecent().args[0].detail.selected).toBeTrue();\n         expect(handler.calls.mostRecent().args[0].detail.segmentId)\n             .toEqual(testStrings.SEGMENT_ID);\n\n         adapter.notifySelectedChange(false);\n         expect(handler.calls.mostRecent().args[0].detail.index).toEqual(index);\n         expect(handler.calls.mostRecent().args[0].detail.selected).toBeFalse();\n         expect(handler.calls.mostRecent().args[0].detail.segmentId)\n             .toEqual(testStrings.SEGMENT_ID);\n\n         component.unlisten(events.SELECTED, handler);\n         component.destroy();\n       });\n  });\n\n  it('#isSelected returns whether segment is selected', () => {\n    const {root, component} = setupTest();\n\n    root.classList.add(cssClasses.SELECTED);\n    expect(component.isSelected()).toBeTrue();\n\n    root.classList.remove(cssClasses.SELECTED);\n    expect(component.isSelected()).toBeFalse();\n\n    component.destroy();\n  });\n\n  it('#setSelected sets segment to be selected', () => {\n    const {root, component} = setupTest();\n\n    root.classList.remove(cssClasses.SELECTED);\n    root.setAttribute(attributes.ARIA_PRESSED, booleans.FALSE);\n    component.setIsSingleSelect(false);\n    component.setSelected();\n    expect(root).toHaveClass(cssClasses.SELECTED);\n    expect(root.getAttribute(attributes.ARIA_PRESSED)).toEqual(booleans.TRUE);\n\n    root.classList.remove(cssClasses.SELECTED);\n    root.setAttribute(attributes.ARIA_CHECKED, booleans.FALSE);\n    component.setIsSingleSelect(true);\n    component.setSelected();\n    expect(root).toHaveClass(cssClasses.SELECTED);\n    expect(root.getAttribute(attributes.ARIA_CHECKED)).toEqual(booleans.TRUE);\n\n    component.destroy();\n  });\n\n  it('#setUnselected sets segment to be not selected', () => {\n    const {root, component} = setupTest();\n\n    component.setUnselected();\n    expect(root).not.toHaveClass(cssClasses.SELECTED);\n\n    root.classList.add(cssClasses.SELECTED);\n    root.setAttribute(attributes.ARIA_PRESSED, booleans.TRUE);\n    component.setIsSingleSelect(false);\n    component.setUnselected();\n    expect(root).not.toHaveClass(cssClasses.SELECTED);\n    expect(root.getAttribute(attributes.ARIA_PRESSED)).toEqual(booleans.FALSE);\n\n    root.classList.add(cssClasses.SELECTED);\n    root.setAttribute(attributes.ARIA_CHECKED, booleans.TRUE);\n    component.setIsSingleSelect(true);\n    component.setUnselected();\n    expect(root).not.toHaveClass(cssClasses.SELECTED);\n    expect(root.getAttribute(attributes.ARIA_CHECKED)).toEqual(booleans.FALSE);\n\n    component.destroy();\n  });\n\n  it('#getSegmentId returns segment\\'s segmentId if it has one', () => {\n    const {root, component} = setupTest();\n\n    root.setAttribute(attributes.DATA_SEGMENT_ID, testStrings.SEGMENT_ID);\n    expect(component.getSegmentId()).toEqual(testStrings.SEGMENT_ID);\n\n    root.removeAttribute(attributes.DATA_SEGMENT_ID);\n    expect(component.getSegmentId()).toEqual(undefined);\n\n    component.destroy();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/test/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Strings constants to be used for tests\n */\nexport const testStrings = {\n  SEGMENT_ID: 'test-segment-id',\n  CLASS: 'test-class',\n  ATTRIBUTE: 'data-test-attribute'\n};\n"
  },
  {
    "path": "packages/mdc-segmented-button/segment/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {attributes, booleans, cssClasses} from '../constants';\nimport {MDCSegmentedButtonSegmentFoundation} from '../foundation';\n\ndescribe('MDCSegmentedButtonSegmentFoundation', () => {\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSegmentedButtonSegmentFoundation, [\n      'isSingleSelect', 'getAttr', 'setAttr', 'addClass', 'removeClass',\n      'hasClass', 'notifySelectedChange', 'getRootBoundingClientRect'\n    ]);\n  });\n\n  const setupTest = (selected: boolean, singleSelect: boolean) => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCSegmentedButtonSegmentFoundation);\n    mockAdapter.hasClass.withArgs(cssClasses.SELECTED)\n        .and.returnValue(selected);\n    mockAdapter.isSingleSelect.and.returnValue(singleSelect);\n    mockAdapter.getAttr.and.callFake((name: string) => {\n      let isSelected = false;\n      if ((singleSelect && name === attributes.ARIA_PRESSED) ||\n          (!singleSelect && name === attributes.ARIA_CHECKED)) {\n        return null;\n      } else if (name === attributes.ARIA_CHECKED) {\n        isSelected = singleSelect;\n      } else if (name === attributes.ARIA_PRESSED) {\n        isSelected = !singleSelect;\n      }\n      return (selected && isSelected) ? booleans.TRUE : booleans.FALSE;\n    });\n\n    // Need calls to mocked methods to change mocked state\n    mockAdapter.addClass.and.callFake((cssClass: string) => {\n      mockAdapter.hasClass.withArgs(cssClass).and.returnValue(true);\n    });\n    mockAdapter.removeClass.and.callFake((cssClass: string) => {\n      mockAdapter.hasClass.withArgs(cssClass).and.returnValue(false);\n    });\n    mockAdapter.setAttr.and.callFake((name: string, value: string|null) => {\n      mockAdapter.getAttr.withArgs(name).and.returnValue(value);\n    });\n\n    return {foundation, mockAdapter};\n  };\n\n  const setupSelectedTest = (singleSelect: boolean = false) => {\n    return setupTest(true, singleSelect);\n  };\n\n  const setupUnselectedTest = (singleSelect: boolean = false) => {\n    return setupTest(false, singleSelect);\n  };\n\n  it('#isSelected returns true if segment is selected', () => {\n    const {foundation} = setupSelectedTest();\n    expect(foundation.isSelected()).toBeTruthy();\n  });\n\n  it('#isSelected returns false if segment is unselected', () => {\n    const {foundation} = setupUnselectedTest();\n    expect(foundation.isSelected()).toBeFalsy();\n  });\n\n  it('#getSegmentId returns segment id', () => {\n    const {foundation, mockAdapter} = setupSelectedTest();\n    mockAdapter.getAttr.withArgs(attributes.DATA_SEGMENT_ID)\n        .and.returnValue('segment0');\n    expect(foundation.getSegmentId()).toEqual('segment0');\n  });\n\n  describe('Selection toggling', () => {\n    it('#setSelected adds the `selected` css class and if singleSelect then sets aria-checked to true',\n       () => {\n         const {foundation, mockAdapter} = setupUnselectedTest(true);\n         foundation.setSelected();\n\n         expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_CHECKED, booleans.TRUE);\n       });\n\n    it('#setSelected adds the `selected` css class and if not singleSelect then sets aria-pressed to true',\n       () => {\n         const {foundation, mockAdapter} = setupUnselectedTest();\n         foundation.setSelected();\n\n         expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_PRESSED, booleans.TRUE);\n       });\n\n    it('#setUnselected removes the `selected` css class and if singleSelect then sets aria-checked to false',\n       () => {\n         const {foundation, mockAdapter} = setupSelectedTest(true);\n         foundation.setUnselected();\n\n         expect(mockAdapter.removeClass)\n             .toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_CHECKED, booleans.FALSE);\n       });\n\n    it('#setUnselected removes the `selected` css class and if not singleSelect then sets aria-pressed to false',\n       () => {\n         const {foundation, mockAdapter} = setupSelectedTest();\n         foundation.setUnselected();\n\n         expect(mockAdapter.removeClass)\n             .toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_PRESSED, booleans.FALSE);\n       });\n  });\n\n  describe('Click handling', () => {\n    it('#handleClick if singleSelect and previously unselected: selects segment, sets aria-checked to true, and notifies parent',\n       () => {\n         const {foundation, mockAdapter} = setupUnselectedTest(true);\n         foundation.handleClick();\n\n         expect(mockAdapter.hasClass(cssClasses.SELECTED)).toBeTruthy();\n         expect(mockAdapter.getAttr(attributes.ARIA_CHECKED)).toBeTruthy();\n         expect(mockAdapter.notifySelectedChange).toHaveBeenCalledWith(true);\n       });\n\n    it('#handleClick if singleSelect and previously selected: changes nothing and notifies parent',\n       () => {\n         const {foundation, mockAdapter} = setupSelectedTest(true);\n         foundation.handleClick();\n\n         expect(mockAdapter.hasClass(cssClasses.SELECTED)).toBeTruthy();\n         expect(mockAdapter.getAttr(attributes.ARIA_CHECKED)).toBeTruthy();\n         expect(mockAdapter.notifySelectedChange).toHaveBeenCalledWith(true);\n       });\n\n    it('#handleClick if not singleSelect and previously unselected: selects segment, sets aria-pressed to true, and notifies parent',\n       () => {\n         const {foundation, mockAdapter} = setupUnselectedTest();\n         foundation.handleClick();\n\n         expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_PRESSED, booleans.TRUE);\n         expect(mockAdapter.notifySelectedChange).toHaveBeenCalledWith(true);\n       });\n\n    it('#handleClick if not singleSelect and previously selected: unselects segment, sets aria-pressed to false, and notifies parent',\n       () => {\n         const {foundation, mockAdapter} = setupSelectedTest();\n         foundation.handleClick();\n\n         expect(mockAdapter.removeClass)\n             .toHaveBeenCalledWith(cssClasses.SELECTED);\n         expect(mockAdapter.setAttr)\n             .toHaveBeenCalledWith(attributes.ARIA_PRESSED, booleans.FALSE);\n         expect(mockAdapter.notifySelectedChange).toHaveBeenCalledWith(false);\n       });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/_segmented-button-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Theme: Variables, functions, and mixins required to theme component\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/_segmented-button.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Core: Define complete styles to render component, including base and theme styles\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use './segmented-button-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-segmented-button {\n    $feat-structure: feature-targeting.create-target($query, structure);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n      // Removes spacing between segments\n      font-size: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {SegmentDetail} from '../types';\n\nexport interface MDCSegmentedButtonAdapter {\n  /**\n   * @param className Class of interest\n   * @return Returns true if segmented button has css class, otherwise returns\n   * false\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * @return Returns child segments represented as readonly list of\n   * SegmentDetails\n   */\n  getSegments(): readonly SegmentDetail[];\n\n  /**\n   * Sets identified child segment to be selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  selectSegment(indexOrSegmentId: number|string): void;\n\n  /**\n   * Sets identified child segment to be not selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  unselectSegment(indexOrSegmentId: number|string): void;\n\n  /**\n   * Emits event about changed child segment to client\n   *\n   * @param detail Changed child segment represented as a SegmentDetail\n   * @event change With detail - SegmentDetail\n   */\n  notifySelectedChange(detail: SegmentDetail): void;\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener} from '@material/base/types';\n\nimport {MDCSegmentedButtonSegment, MDCSegmentedButtonSegmentFactory} from '../segment/component';\nimport {MDCSegmentedButtonEvent, SegmentDetail} from '../types';\n\nimport {MDCSegmentedButtonAdapter} from './adapter';\nimport {events, selectors} from './constants';\nimport {MDCSegmentedButtonFoundation} from './foundation';\n\n/** MDC Segmented Button */\nexport class MDCSegmentedButton extends\n    MDCComponent<MDCSegmentedButtonFoundation> {\n  static override attachTo(root: HTMLElement): MDCSegmentedButton {\n    return new MDCSegmentedButton(root);\n  }\n\n  get segments(): readonly MDCSegmentedButtonSegment[] {\n    return this.segmentsList.slice();\n  }\n\n  private segmentsList!: MDCSegmentedButtonSegment[];  // assigned in initialize\n  private segmentFactory!:\n      (el: HTMLElement) => MDCSegmentedButtonSegment;  // assigned in initialize\n  private handleSelected!:\n      CustomEventListener<MDCSegmentedButtonEvent>;  // assigned in\n                                                     // initialSyncWithDOM\n\n  override initialize(\n      segmentFactory: MDCSegmentedButtonSegmentFactory = (el) =>\n          new MDCSegmentedButtonSegment(el)) {\n    this.segmentFactory = segmentFactory;\n    this.segmentsList = this.instantiateSegments(this.segmentFactory);\n  }\n\n  /**\n   * @param segmentFactory Factory to create new child segments\n   * @return Returns list of child segments found in DOM\n   */\n  private instantiateSegments(segmentFactory: MDCSegmentedButtonSegmentFactory):\n      MDCSegmentedButtonSegment[] {\n    const segmentElements =\n        Array.from(this.root.querySelectorAll<HTMLElement>(selectors.SEGMENT));\n    return segmentElements.map((el) => segmentFactory(el));\n  }\n\n  override initialSyncWithDOM() {\n    this.handleSelected = (event) => {\n      this.foundation.handleSelected(event.detail);\n    };\n    this.listen(events.SELECTED, this.handleSelected);\n\n    const isSingleSelect = this.foundation.isSingleSelect();\n    for (let i = 0; i < this.segmentsList.length; i++) {\n      const segment = this.segmentsList[i];\n      segment.setIndex(i);\n      segment.setIsSingleSelect(isSingleSelect);\n    }\n\n    const selectedSegments =\n        this.segmentsList.filter((segment) => segment.isSelected());\n    if (isSingleSelect && selectedSegments.length === 0 &&\n        this.segmentsList.length > 0) {\n      throw new Error(\n          'No segment selected in singleSelect mdc-segmented-button');\n    } else if (isSingleSelect && selectedSegments.length > 1) {\n      throw new Error(\n          'Multiple segments selected in singleSelect mdc-segmented-button');\n    }\n  }\n\n  override destroy() {\n    for (const segment of this.segmentsList) {\n      segment.destroy();\n    }\n\n    this.unlisten(events.SELECTED, this.handleSelected);\n\n    super.destroy();\n  }\n\n  override getDefaultFoundation(): MDCSegmentedButtonFoundation {\n    const adapter: MDCSegmentedButtonAdapter = {\n      hasClass: (className) => {\n        return this.root.classList.contains(className);\n      },\n      getSegments: () => {\n        return this.mappedSegments();\n      },\n      selectSegment: (indexOrSegmentId) => {\n        const segmentDetail = this.mappedSegments().find(\n            (detail) => detail.index === indexOrSegmentId ||\n                detail.segmentId === indexOrSegmentId);\n        if (segmentDetail) {\n          this.segmentsList[segmentDetail.index].setSelected();\n        }\n      },\n      unselectSegment: (indexOrSegmentId) => {\n        const segmentDetail = this.mappedSegments().find(\n            (detail) => detail.index === indexOrSegmentId ||\n                detail.segmentId === indexOrSegmentId);\n        if (segmentDetail) {\n          this.segmentsList[segmentDetail.index].setUnselected();\n        }\n      },\n      notifySelectedChange: (detail) => {\n        this.emit<SegmentDetail>(\n            events.CHANGE, detail, true /* shouldBubble */\n        );\n      }\n    };\n    return new MDCSegmentedButtonFoundation(adapter);\n  }\n\n  /**\n   * @return Returns readonly list of selected child segments as SegmentDetails\n   */\n  getSelectedSegments(): readonly SegmentDetail[] {\n    return this.foundation.getSelectedSegments();\n  }\n\n  /**\n   * Sets identified segment to be selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  selectSegment(indexOrSegmentId: number|string) {\n    this.foundation.selectSegment(indexOrSegmentId);\n  }\n\n  /**\n   * Sets identified segment to be not selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  unselectSegment(indexOrSegmentId: number|string) {\n    this.foundation.unselectSegment(indexOrSegmentId);\n  }\n\n  /**\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   * @return Returns true if identified child segment is currently selected,\n   * otherwise returns false\n   */\n  isSegmentSelected(indexOrSegmentId: number|string): boolean {\n    return this.foundation.isSegmentSelected(indexOrSegmentId);\n  }\n\n  /**\n   * @return Returns child segments mapped to readonly SegmentDetail list\n   */\n  private mappedSegments(): readonly SegmentDetail[] {\n    return this.segmentsList.map(\n        (segment: MDCSegmentedButtonSegment, index: number) => {\n          return {\n            index,\n            selected: segment.isSelected(),\n            segmentId: segment.getSegmentId()\n          };\n        });\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Selectors used by segmented-button\n */\nexport const selectors = {\n  SEGMENT: '.mdc-segmented-button__segment'\n};\n\n/**\n * Events received or emitted by segmented-button\n */\nexport const events = {\n  SELECTED: 'selected',\n  CHANGE: 'change'\n};\n\n/**\n * Style classes for segmented-button\n */\nexport const cssClasses = {\n  SINGLE_SELECT: 'mdc-segmented-button--single-select'\n};\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {SegmentDetail} from '../types';\n\nimport {MDCSegmentedButtonAdapter} from './adapter';\nimport {cssClasses} from './constants';\n\n/** MDC Segmented Button Foundation */\nexport class MDCSegmentedButtonFoundation extends\n    MDCFoundation<MDCSegmentedButtonAdapter> {\n  static override get defaultAdapter(): MDCSegmentedButtonAdapter {\n    return {\n      hasClass: () => false,\n      getSegments: () => [],\n      selectSegment: () => undefined,\n      unselectSegment: () => undefined,\n      notifySelectedChange: () => undefined\n    };\n  }\n\n  constructor(adapter?: Partial<MDCSegmentedButtonAdapter>) {\n    super({...MDCSegmentedButtonFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * Sets identified child segment to be selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  selectSegment(indexOrSegmentId: number|string) {\n    this.adapter.selectSegment(indexOrSegmentId);\n  }\n\n  /**\n   * Sets identified child segment to be not selected\n   *\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   */\n  unselectSegment(indexOrSegmentId: number|string) {\n    this.adapter.unselectSegment(indexOrSegmentId);\n  }\n\n  /**\n   * @return Returns currently selected child segments as readonly list of\n   * SegmentDetails\n   */\n  getSelectedSegments(): readonly SegmentDetail[] {\n    return this.adapter.getSegments().filter(\n        segmentDetail => segmentDetail.selected);\n  }\n\n  /**\n   * @param indexOrSegmentId Number index or string segmentId that identifies\n   * child segment\n   * @return Returns true if identified child segment is currently selected,\n   * otherwise returns false\n   */\n  isSegmentSelected(indexOrSegmentId: number|string|undefined): boolean {\n    return this.adapter.getSegments().some(\n        segmentDetail => (segmentDetail.index === indexOrSegmentId ||\n                          segmentDetail.segmentId === indexOrSegmentId) &&\n            segmentDetail.selected);\n  }\n\n  /**\n   * @return Returns true if segmented button is single select, otherwise\n   * returns false\n   */\n  isSingleSelect(): boolean {\n    return this.adapter.hasClass(cssClasses.SINGLE_SELECT);\n  }\n\n  /**\n   * Called when child segment's selected status may have changed. If segmented\n   * button is single select, unselects all child segments other than identified\n   * child segment. Finally, emits event to client.\n   *\n   * @param detail Child segment affected represented as SegmentDetail\n   * @event change With detail - SegmentDetail\n   */\n  handleSelected(detail: SegmentDetail) {\n    if (this.isSingleSelect()) {\n      this.unselectPrevSelected(detail.index);\n    }\n    this.adapter.notifySelectedChange(detail);\n  }\n\n  /**\n   * Sets all child segments to be not selected except for child segment\n   * identified by index\n   *\n   * @param index Index of child segment to not unselect\n   */\n  private unselectPrevSelected(index: number) {\n    for (const selectedSegment of this.getSelectedSegments()) {\n      if (selectedSegment.index !== index) {\n        this.unselectSegment(selectedSegment.index);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './foundation';\nexport * from './component';\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {emitEvent} from '../../../../testing/dom/events';\nimport {attributes} from '../../segment/constants';\nimport {MDCSegmentedButtonSegment} from '../../segment/index';\nimport {cssClasses, events} from '../constants';\nimport {MDCSegmentedButton} from '../index';\n\nimport {testCssClasses, testIndices, testSegmentIds, testSelectors} from './constants';\n\nfunction getFixtureMultiWithLabel() {\n  return createFixture(html`\n    <div class=\"mdc-segmented-button\" role=\"group\">\n      <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n        <div class=\"mdc-segmented-button__label\">Segment Label</div>\n      </button>\n      <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n        <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n      </button>\n      <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n        <div class=\"mdc-segmented-button__label\">Segment Label</div>\n        <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n      </button>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixtureMultiWithLabel();\n  const component = new MDCSegmentedButton(root);\n  const adapter = (component.getDefaultFoundation() as any).adapter;\n  return {root, component, adapter};\n}\n\nfunction setAllSelected(els: NodeListOf<Element>) {\n  Array.from(els).forEach((el: Element) => {\n    el.classList.add(testCssClasses.SELECTED);\n  });\n}\n\nfunction setAllUnselected(els: NodeListOf<Element>) {\n  Array.from(els).forEach((el: Element) => {\n    el.classList.remove(testCssClasses.SELECTED);\n  });\n}\n\ndescribe('MDCSegmentedButton', () => {\n  it('#attachTo returns an MDCSegmentedButton instance', () => {\n    expect(\n        MDCSegmentedButton.attachTo(getFixtureMultiWithLabel()) instanceof\n        MDCSegmentedButton)\n        .toBeTruthy();\n  });\n\n  it('#constructor instantiates child segment components', () => {\n    const {component} = setupTest();\n    expect(component.segments.length).toEqual(3);\n    expect(component.segments[0])\n        .toEqual(jasmine.any(MDCSegmentedButtonSegment));\n    expect(component.segments[1])\n        .toEqual(jasmine.any(MDCSegmentedButtonSegment));\n    expect(component.segments[2])\n        .toEqual(jasmine.any(MDCSegmentedButtonSegment));\n    component.destroy();\n  });\n\n  it('#destroy cleans up child segment components', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('handle click');\n    for (let i = 0; i < component.segments.length; i++) {\n      component.segments[i].listen('click', handler);\n    }\n    component.destroy();\n    emitEvent(root, 'click');\n    expect(handler).not.toHaveBeenCalled();\n  });\n\n  it('#initialSyncWithDOM sets up event handlers', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('handle change');\n    component.listen(events.CHANGE, handler);\n\n    emitEvent(root, events.SELECTED);\n    expect(handler).toHaveBeenCalled();\n\n    component.unlisten(events.CHANGE, handler);\n    component.destroy();\n  });\n\n  it('#destroy removes event handlers', () => {\n    const {root, component} = setupTest();\n    const handler = jasmine.createSpy('handle change');\n    component.listen(events.CHANGE, handler);\n    component.destroy();\n\n    emitEvent(root, events.SELECTED);\n    expect(handler).not.toHaveBeenCalled();\n\n    component.unlisten(events.CHANGE, handler);\n  });\n\n  it('#initialSyncWithDOM sets children\\'s \\'index\\' and \\'isSingleSelect\\' values',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('handle selected');\n       component.listen(events.SELECTED, handler);\n       const isSingleSelect = root.classList.contains(cssClasses.SINGLE_SELECT);\n\n       for (let i = 0; i < component.segments.length; i++) {\n         const segmentAdapter =\n             (component.segments[i].getDefaultFoundation() as any).adapter;\n         segmentAdapter.notifySelectedChange(true);\n\n         expect(handler.calls.mostRecent().args[0].detail.index).toEqual(i);\n         expect(segmentAdapter.isSingleSelect()).toEqual(isSingleSelect);\n       }\n\n       component.destroy();\n     });\n\n  describe('Adapter', () => {\n    it('#hasClass returns whether root element has test class', () => {\n      const {root, component, adapter} = setupTest();\n\n      root.classList.add(testCssClasses.TEST_CLASS);\n      expect(adapter.hasClass(testCssClasses.TEST_CLASS)).toBeTrue();\n      root.classList.remove(testCssClasses.TEST_CLASS);\n      expect(adapter.hasClass(testCssClasses.TEST_CLASS)).toBeFalse();\n\n      component.destroy();\n    });\n\n    it('#getSegments returns child segments as readonly SegmentDetails array',\n       () => {\n         const {component, adapter} = setupTest();\n\n         const segments = adapter.getSegments();\n         expect(segments.length).toEqual(3);\n         for (let i = 0; i < segments.length; i++) {\n           expect(segments[i].index).toEqual(i);\n           expect(segments[i].hasOwnProperty('selected')).toBeTrue();\n           expect(segments[i].hasOwnProperty('segmentId')).toBeTrue();\n         }\n\n         component.destroy();\n       });\n\n    it('#selectSegment selects identified child segment if found', () => {\n      const {root, component, adapter} = setupTest();\n\n      const segments =\n          root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n      segments[testIndices.SELECTED].setAttribute(\n          attributes.DATA_SEGMENT_ID, testSegmentIds.SELECTED_SEGMENT_ID);\n\n      setAllUnselected(segments);\n      adapter.selectSegment(testIndices.SELECTED);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i].classList.contains(testCssClasses.SELECTED))\n            .toEqual(i === testIndices.SELECTED);\n      }\n\n      setAllUnselected(segments);\n      adapter.selectSegment(testSegmentIds.SELECTED_SEGMENT_ID);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i].classList.contains(testCssClasses.SELECTED))\n            .toEqual(i === testIndices.SELECTED);\n      }\n\n      component.destroy();\n    });\n\n    it('#selectSegment selects no child segment if none is identified', () => {\n      const {root, component, adapter} = setupTest();\n\n      const segments =\n          root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n      setAllUnselected(segments);\n\n      adapter.selectSegment(testIndices.NOT_PRESENT);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i]).not.toHaveClass(testCssClasses.SELECTED);\n      }\n\n      adapter.selectSegment(testSegmentIds.NOT_PRESENT_SEGMENT_ID);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i]).not.toHaveClass(testCssClasses.SELECTED);\n      }\n\n      component.destroy();\n    });\n\n    it('#unselectSegment unselectes identified child segment if found', () => {\n      const {root, component, adapter} = setupTest();\n\n      const segments =\n          root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n      segments[testIndices.UNSELECTED].setAttribute(\n          attributes.DATA_SEGMENT_ID, testSegmentIds.UNSELECTED_SEGMENT_ID);\n\n      setAllSelected(segments);\n      adapter.unselectSegment(testIndices.UNSELECTED);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i].classList.contains(testCssClasses.SELECTED))\n            .toEqual(i !== testIndices.UNSELECTED);\n      }\n\n      setAllSelected(segments);\n      adapter.unselectSegment(testSegmentIds.UNSELECTED_SEGMENT_ID);\n      for (let i = 0; i < segments.length; i++) {\n        expect(segments[i].classList.contains(testCssClasses.SELECTED))\n            .toEqual(i !== testIndices.UNSELECTED);\n      }\n\n      component.destroy();\n    });\n\n    it('#unselectSegment unselects no child segment if none is identified',\n       () => {\n         const {root, component, adapter} = setupTest();\n\n         const segments =\n             root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n         setAllSelected(segments);\n\n         adapter.unselectSegment(testIndices.NOT_PRESENT);\n         for (let i = 0; i < segments.length; i++) {\n           expect(segments[i]).toHaveClass(testCssClasses.SELECTED);\n         }\n\n         adapter.unselectSegment(testSegmentIds.NOT_PRESENT_SEGMENT_ID);\n         for (let i = 0; i < segments.length; i++) {\n           expect(segments[i]).toHaveClass(testCssClasses.SELECTED);\n         }\n\n         component.destroy();\n       });\n\n    it(`#notifySelectedChange emits ${events.CHANGE} with SegmentDetail`,\n       () => {\n         const {component, adapter} = setupTest();\n         const handler = jasmine.createSpy('change handler');\n\n         component.listen(events.CHANGE, handler);\n\n         adapter.notifySelectedChange({\n           index: testIndices.SELECTED,\n           selected: true,\n           segmentId: testSegmentIds.SELECTED_SEGMENT_ID\n         });\n         expect(handler).toHaveBeenCalledWith(jasmine.anything());\n         expect(handler.calls.mostRecent().args[0].detail.index)\n             .toEqual(testIndices.SELECTED);\n         expect(handler.calls.mostRecent().args[0].detail.selected).toBeTrue();\n         expect(handler.calls.mostRecent().args[0].detail.segmentId)\n             .toEqual(testSegmentIds.SELECTED_SEGMENT_ID);\n\n         component.unlisten(events.CHANGE, handler);\n         component.destroy();\n       });\n  });\n\n  it('#getSelectedSegments returns selected child segments as a SegmentDetail list',\n     () => {\n       const {root, component} = setupTest();\n\n       const segments =\n           root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n       setAllSelected(segments);\n\n       const selectedSegments = component.getSelectedSegments();\n       expect(selectedSegments.length).toEqual(segments.length);\n       for (let i = 0; i < selectedSegments.length; i++) {\n         expect(selectedSegments[i].index).toEqual(i);\n         expect(selectedSegments[i].selected).toBeTrue();\n         expect(selectedSegments[i].hasOwnProperty('segmentId')).toBeTrue();\n       }\n\n       setAllUnselected(segments);\n       expect(component.getSelectedSegments().length).toEqual(0);\n\n       component.destroy();\n     });\n\n  it('#selectSegment selects identified child segment', () => {\n    const {root, component} = setupTest();\n\n    const segments = root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n    const selectedSegment = segments[testIndices.SELECTED];\n    selectedSegment.setAttribute(\n        attributes.DATA_SEGMENT_ID, testSegmentIds.SELECTED_SEGMENT_ID);\n\n    setAllUnselected(segments);\n    component.selectSegment(testIndices.SELECTED);\n    expect(selectedSegment).toHaveClass(testCssClasses.SELECTED);\n\n    setAllUnselected(segments);\n    component.selectSegment(testSegmentIds.SELECTED_SEGMENT_ID);\n    expect(selectedSegment).toHaveClass(testCssClasses.SELECTED);\n\n    component.destroy();\n  });\n\n  it('#unselectSegment unselects identified child segment', () => {\n    const {root, component} = setupTest();\n\n    const segments = root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n    const unselectedSegment = segments[testIndices.UNSELECTED];\n    unselectedSegment.setAttribute(\n        attributes.DATA_SEGMENT_ID, testSegmentIds.UNSELECTED_SEGMENT_ID);\n\n    setAllSelected(segments);\n    component.unselectSegment(testIndices.UNSELECTED);\n    expect(unselectedSegment).not.toHaveClass(testCssClasses.SELECTED);\n\n    setAllSelected(segments);\n    component.unselectSegment(testSegmentIds.UNSELECTED_SEGMENT_ID);\n    expect(unselectedSegment).not.toHaveClass(testCssClasses.SELECTED);\n\n    component.destroy();\n  });\n\n  it('#isSegmentSelected returns whether identified child segment is selected',\n     () => {\n       const {root, component} = setupTest();\n\n       const segments =\n           root.querySelectorAll<HTMLElement>(testSelectors.SEGMENT);\n       const selectedSegment = segments[testIndices.SELECTED];\n       const unselectedSegment = segments[testIndices.UNSELECTED];\n       selectedSegment.classList.add(testCssClasses.SELECTED);\n       selectedSegment.setAttribute(\n           attributes.DATA_SEGMENT_ID, testSegmentIds.SELECTED_SEGMENT_ID);\n       unselectedSegment.classList.remove(testCssClasses.SELECTED);\n       unselectedSegment.setAttribute(\n           attributes.DATA_SEGMENT_ID, testSegmentIds.UNSELECTED_SEGMENT_ID);\n\n       expect(component.isSegmentSelected(testIndices.SELECTED)).toBeTrue();\n       expect(component.isSegmentSelected(testSegmentIds.SELECTED_SEGMENT_ID))\n           .toBeTrue();\n       expect(component.isSegmentSelected(testIndices.UNSELECTED)).toBeFalse();\n       expect(component.isSegmentSelected(testSegmentIds.UNSELECTED_SEGMENT_ID))\n           .toBeFalse();\n       expect(component.isSegmentSelected(testIndices.NOT_PRESENT)).toBeFalse();\n       expect(\n           component.isSegmentSelected(testSegmentIds.NOT_PRESENT_SEGMENT_ID))\n           .toBeFalse();\n\n       component.destroy();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/test/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * String constants for segmented button tests\n */\nexport const testCssClasses = {\n  TEST_CLASS: 'test-class',\n  SELECTED: 'mdc-segmented-button__segment--selected'\n};\n\n/**\n * CSS class selectors for segmented button tests\n */\nexport const testSelectors = {\n  SEGMENT: '.mdc-segmented-button__segment'\n}\n\n/**\n * Indices for segments used in tests\n */\nexport enum testIndices {\n  NOT_PRESENT = -1,\n  UNSELECTED = 0,\n  SELECTED = 1\n}\n\n/**\n * SegmentIds for segments used in tests\n */\nexport const testSegmentIds = {\n  NOT_PRESENT_SEGMENT_ID: 'segment-1',\n  UNSELECTED_SEGMENT_ID: 'segment0',\n  SELECTED_SEGMENT_ID: 'segment1'\n};\n"
  },
  {
    "path": "packages/mdc-segmented-button/segmented-button/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {cssClasses} from '../constants';\nimport {MDCSegmentedButtonFoundation} from '../foundation';\n\nimport {testIndices, testSegmentIds} from './constants';\n\ndescribe('MDCSegmentedButtonFoundation', () => {\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSegmentedButtonFoundation, [\n      'hasClass', 'getSegments', 'selectSegment', 'unselectSegment',\n      'notifySelectedChange'\n    ]);\n  });\n\n  const setupSingleSelectTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCSegmentedButtonFoundation);\n    mockAdapter.hasClass.withArgs(cssClasses.SINGLE_SELECT)\n        .and.returnValue(true);\n    return {foundation, mockAdapter};\n  };\n\n  const setupMultiSelectTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCSegmentedButtonFoundation);\n    mockAdapter.hasClass.withArgs(cssClasses.SINGLE_SELECT)\n        .and.returnValue(false);\n    return {foundation, mockAdapter};\n  };\n\n  const setupSegmentTest = (singleSelect: boolean = false) => {\n    const {foundation, mockAdapter} =\n        singleSelect ? setupSingleSelectTest() : setupMultiSelectTest();\n    mockAdapter.getSegments.and.callFake(() => {\n      const l = [];\n      l[testIndices.UNSELECTED] = {\n        'index': testIndices.UNSELECTED,\n        'selected': false,\n        'segmentId': testSegmentIds.UNSELECTED_SEGMENT_ID\n      };\n      l[testIndices.SELECTED] = {\n        'index': testIndices.SELECTED,\n        'selected': true,\n        'segmentId': testSegmentIds.SELECTED_SEGMENT_ID\n      };\n      return l;\n    });\n    return {foundation, mockAdapter};\n  };\n\n  it('#unselectSegment does not emit an event', () => {\n    const {foundation, mockAdapter} = setupSegmentTest();\n    const selectedSegment = mockAdapter.getSegments()[testIndices.SELECTED];\n\n    foundation.unselectSegment(selectedSegment.segmentId!);\n    expect(mockAdapter.notifySelectedChange).toHaveBeenCalledTimes(0);\n  });\n\n  it('#getSelectedSegments returns selected segments', () => {\n    const {foundation, mockAdapter} = setupSegmentTest();\n    const selectedSegment = mockAdapter.getSegments()[testIndices.SELECTED];\n    const selectedSegments = foundation.getSelectedSegments();\n\n    expect(selectedSegments.length).toEqual(1);\n    expect(selectedSegments[0].index).toEqual(selectedSegment.index);\n    expect(selectedSegments[0].selected).toBeTruthy();\n    expect(selectedSegments[0].segmentId).toEqual(selectedSegment.segmentId);\n  });\n\n  it('#selectSegment does not emit an event', () => {\n    const {foundation, mockAdapter} = setupSegmentTest();\n    const unselectedSegment = mockAdapter.getSegments()[testIndices.UNSELECTED];\n\n    foundation.selectSegment(unselectedSegment.index);\n    expect(mockAdapter.notifySelectedChange).toHaveBeenCalledTimes(0);\n  });\n\n  describe('Single selection', () => {\n    it('#isSingleSelect returns true if single select', () => {\n      const {foundation} = setupSegmentTest(true);\n      expect(foundation.isSingleSelect()).toBeTruthy();\n    });\n\n    it('#handleSelected unselects segment if single select and another segment was selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest(true);\n         const newSelectedSegment =\n             mockAdapter.getSegments()[testIndices.UNSELECTED];\n         const newUnselectedSegment =\n             mockAdapter.getSegments()[testIndices.SELECTED];\n         newSelectedSegment.selected = true;\n\n         foundation.handleSelected(newSelectedSegment);\n         expect(mockAdapter.unselectSegment).toHaveBeenCalledTimes(1);\n         if (typeof mockAdapter.unselectSegment.calls.mostRecent().args[0] ===\n             'number') {\n           expect(mockAdapter.unselectSegment)\n               .toHaveBeenCalledWith(newUnselectedSegment.index);\n         } else {\n           expect(mockAdapter.unselectSegment)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'string | undefined' is not assignable to parameter of type\n               //  'Expected<string | number>'.\n               .toHaveBeenCalledWith(newUnselectedSegment.segmentId);\n         }\n         expect(mockAdapter.notifySelectedChange)\n             .toHaveBeenCalledWith(newSelectedSegment);\n       });\n  });\n\n  describe('Multi selection', () => {\n    it('#isSingleSelect returns false if multi select', () => {\n      const {foundation} = setupSegmentTest();\n      expect(foundation.isSingleSelect()).toBeFalsy();\n    });\n\n    it('#handleSelected changes nothing if multi select and segment is selected or unselected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const newUnselectedSegment =\n             mockAdapter.getSegments()[testIndices.SELECTED];\n         const newSelectedSegment =\n             mockAdapter.getSegments()[testIndices.UNSELECTED];\n         newUnselectedSegment.selected = false;\n         newSelectedSegment.selected = true;\n\n         foundation.handleSelected(newUnselectedSegment);\n         expect(mockAdapter.selectSegment).toHaveBeenCalledTimes(0);\n         expect(mockAdapter.unselectSegment).toHaveBeenCalledTimes(0);\n         expect(mockAdapter.notifySelectedChange)\n             .toHaveBeenCalledWith(newUnselectedSegment);\n\n         foundation.handleSelected(newSelectedSegment);\n         expect(mockAdapter.selectSegment).toHaveBeenCalledTimes(0);\n         expect(mockAdapter.unselectSegment).toHaveBeenCalledTimes(0);\n         expect(mockAdapter.notifySelectedChange)\n             .toHaveBeenCalledWith(newSelectedSegment);\n       });\n  });\n\n  describe('Segment selections by index', () => {\n    it('#isSegmentSelected returns true if segment at index is selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const selectedSegment =\n             mockAdapter.getSegments()[testIndices.SELECTED];\n         expect(foundation.isSegmentSelected(selectedSegment.index))\n             .toBeTruthy();\n       });\n\n    it('#isSegmentSelected returns false if segment at index is not selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const unselectedSegment =\n             mockAdapter.getSegments()[testIndices.UNSELECTED];\n         expect(foundation.isSegmentSelected(unselectedSegment.index))\n             .toBeFalsy();\n       });\n\n    it('#isSegmentSelected returns false if no segment is at index', () => {\n      const {foundation} = setupSegmentTest();\n      expect(foundation.isSegmentSelected(testIndices.NOT_PRESENT)).toBeFalsy();\n    });\n\n    it('#selectSegment selects segment at index if it is unselected', () => {\n      const {foundation, mockAdapter} = setupSegmentTest();\n      const unselectedSegment =\n          mockAdapter.getSegments()[testIndices.UNSELECTED];\n\n      foundation.selectSegment(unselectedSegment.index);\n      expect(mockAdapter.selectSegment)\n          .toHaveBeenCalledWith(unselectedSegment.index);\n    });\n\n    it('#unselectSegment unselects segment at index if it is selected', () => {\n      const {foundation, mockAdapter} = setupSegmentTest();\n      const selectedSegment = mockAdapter.getSegments()[testIndices.SELECTED];\n\n      foundation.unselectSegment(selectedSegment.index);\n      expect(mockAdapter.unselectSegment)\n          .toHaveBeenCalledWith(selectedSegment.index);\n    });\n  });\n\n  describe('Segment selections by segmentId', () => {\n    it('#isSegmentSelected returns true if segment with segmentId is selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const selectedSegment =\n             mockAdapter.getSegments()[testIndices.SELECTED];\n         expect(foundation.isSegmentSelected(selectedSegment.segmentId))\n             .toBeTruthy();\n       });\n\n    it('#isSegmentSelected returns false if segment with segmentId is not selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const unselectedSegment =\n             mockAdapter.getSegments()[testIndices.UNSELECTED];\n         expect(foundation.isSegmentSelected(unselectedSegment.segmentId))\n             .toBeFalsy();\n       });\n\n    it('#isSegmentSelected returns false if no segment has segmentId', () => {\n      const {foundation} = setupSegmentTest();\n      expect(\n          foundation.isSegmentSelected(testSegmentIds.NOT_PRESENT_SEGMENT_ID))\n          .toBeFalsy();\n    });\n\n    it('#selectSegment selects segment with segmentId if it is unselected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const unselectedSegment =\n             mockAdapter.getSegments()[testIndices.UNSELECTED];\n\n         foundation.selectSegment(unselectedSegment.segmentId!);\n         expect(mockAdapter.selectSegment)\n             // TODO: Wait until b/208710526 is fixed, then remove this\n             // autogenerated error suppression.\n             //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'string\n             //  | undefined' is not assignable to parameter of type\n             //  'Expected<string | number>'.\n             .toHaveBeenCalledWith(unselectedSegment.segmentId);\n       });\n\n    it('#unselectSegment unselects segment with segmentId if it is selected',\n       () => {\n         const {foundation, mockAdapter} = setupSegmentTest();\n         const selectedSegment =\n             mockAdapter.getSegments()[testIndices.SELECTED];\n\n         foundation.unselectSegment(selectedSegment.segmentId!);\n         expect(mockAdapter.unselectSegment)\n             // TODO: Wait until b/208710526 is fixed, then remove this\n             // autogenerated error suppression.\n             //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'string\n             //  | undefined' is not assignable to parameter of type\n             //  'Expected<string | number>'.\n             .toHaveBeenCalledWith(selectedSegment.segmentId);\n       });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-segmented-button/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// CSS: Emit CSS required to style component\n\n@use './segmented-button/segmented-button';\n@use './segment/segment';\n@use './segment/segment-ripple';\n\n@include segmented-button.core-styles();\n@include segment.core-styles();\n@include segment-ripple.ripple();\n"
  },
  {
    "path": "packages/mdc-segmented-button/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Event detail triggered by a click on a segment. This event detail is used\n * to alert the segment-button to the change and trigger a DOM event.\n */\nexport interface SegmentDetail {\n  index: number;\n  selected: boolean;\n  segmentId?: string;\n}\n\n/**\n * Event emitted by segment to alert the segment-button of a change in its\n * selected status.\n */\nexport interface MDCSegmentedButtonEvent extends Event {\n  readonly detail: SegmentDetail;\n}\n"
  },
  {
    "path": "packages/mdc-select/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-select/README.md",
    "content": "<!--docs:\ntitle: \"Select Menus\"\nlayout: detail\nsection: components\niconId: menu\npath: /catalog/input-controls/select-menus/\n-->\n\n# Select Menus\n\nMDC Select provides Material Design single-option select menus, using the MDC menu.\nThe Select component is fully accessible, and supports RTL rendering.\n\n## Important Changes\n\nSelect is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields\">Material Design guidelines: Text Fields</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/select\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/select\n```\n\n## Basic Usage\n\nThe select uses an [`MDCMenu`](../mdc-menu) component instance to contain the list of options, but uses the\n`data-value` attribute instead of `value` to represent the options' values.\n\n> _NOTE_: The `data-value` attribute _must_ be present on each option.\n\nThe select requires that you set the `width` of the `mdc-select` element. This is best done through the use of another class (e.g. `demo-width-class` in the example HTML and CSS below).\n\n### HTML\n\nThe HTML for the select component follows the WAI-ARIA recommendations for\n[Collapsible Dropdown Listboxes](https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html) in order to meet WCAG and ARIA accessibility standards, and to be compatible with assistive technology like screen readers.\n\nThe following example applies ARIA attributes that provide the semantic structure required for assistive technology:\n\n```html\n<div class=\"mdc-select mdc-select--filled demo-width-class\">\n  <div class=\"mdc-select__anchor\"\n       role=\"button\"\n       aria-haspopup=\"listbox\"\n       aria-expanded=\"false\"\n       aria-labelledby=\"demo-label demo-selected-text\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span id=\"demo-label\" class=\"mdc-floating-label\">Pick a Food Group</span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span id=\"demo-selected-text\" class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n    <span class=\"mdc-line-ripple\"></span>\n  </div>\n\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">\n    <ul class=\"mdc-deprecated-list\" role=\"listbox\" aria-label=\"Food picker listbox\">\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" aria-selected=\"true\" data-value=\"\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" aria-selected=\"false\" data-value=\"grains\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Bread, Cereal, Rice, and Pasta\n        </span>\n      </li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--disabled\" aria-selected=\"false\" data-value=\"vegetables\" aria-disabled=\"true\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Vegetables\n        </span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" aria-selected=\"false\" data-value=\"fruit\" role=\"option\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">\n          Fruit\n        </span>\n      </li>\n    </ul>\n  </div>\n</div>\n```\n\n> _NOTE_: The menu width matches the width of the select by default. To set\nmenu to its natural width, remove `mdc-menu-surface--fullwidth` from the menu\nsurface.\n\n### Styles\n\nWhen using the select, you will also need to load the Menu and List components' styles.\n\n```scss\n@use \"@material/list/mdc-list\";\n@use \"@material/menu-surface/mdc-menu-surface\";\n@use \"@material/menu/mdc-menu\";\n@use \"@material/select/styles\";\n\n.demo-width-class {\n  width: 400px;\n}\n```\n\n### Theming\n\n```scss\n@use '@material/select';\n\n.my-demo-select {\n  @include select.filled-density(-2);\n}\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSelect} from '@material/select';\n\nconst select = new MDCSelect(document.querySelector('.mdc-select'));\n\nselect.listen('MDCSelect:change', () => {\n  alert(`Selected option at index ${select.selectedIndex} with value \"${select.value}\"`);\n});\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Outlined Select\n\nThe Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the\n`mdc-select--outlined` modifier class on the root element. All other elements for each type of select remain the\nsame.\n\n```html\n<div class=\"mdc-select mdc-select--outlined\">\n  <div class=\"mdc-select__anchor\" aria-labelledby=\"outlined-select-label\">\n    <span class=\"mdc-notched-outline\">\n      <span class=\"mdc-notched-outline__leading\"></span>\n      <span class=\"mdc-notched-outline__notch\">\n        <span id=\"outlined-select-label\" class=\"mdc-floating-label\">Pick a Food Group</span>\n      </span>\n      <span class=\"mdc-notched-outline__trailing\"></span>\n    </span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span id=\"demo-selected-text\" class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Other elements from the select remain. -->\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">...</div>\n</div>\n```\n\n### Additional Information\n\n#### Select with hidden input (for HTML forms)\n\nFor convenient submission of Select's value in HTML forms, a hidden input\nelement may be added under the root element. The component will synchronize its\nvalue with that of the hidden input.\n\n```html\n<div class=\"mdc-select mdc-select--filled demo-width-class\">\n  <input type=\"hidden\" name=\"demo-input\">\n  <div class=\"mdc-select__anchor\">\n    <!-- Rest of component omitted for brevity -->\n  </div>\n</div>\n\n```\n\n#### Select with pre-selected option\n\nTo indicate a select component that has a pre-selected value, use the `mdc-deprecated-list-item--selected` class\nto set the selected item. The select also needs the text from the selected element copied to the\n`mdc-select__selected-text` element.\n\n```html\n<div class=\"mdc-select mdc-select--filled demo-width-class\">\n  <div class=\"mdc-select__anchor\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span class=\"mdc-floating-label mdc-floating-label--float-above\">Pick a Food Group</span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span class=\"mdc-select__selected-text\">Vegetables</span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n    <span class=\"mdc-line-ripple\"></span>\n  </div>\n\n  <div class=\"mdc-select__menu demo-width-class mdc-menu mdc-menu-surface\">\n    <ul class=\"mdc-deprecated-list\">\n      <li class=\"mdc-deprecated-list-item\" data-value=\"\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"grains\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Bread, Cereal, Rice, and Pasta</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"vegetables\" aria-selected=\"true\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Vegetables</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"fruit\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n      </li>\n    </ul>\n  </div>\n</div>\n```\n\n#### Using the floating label as the placeholder\n\nLeave the `mdc-select__selected-text` element empty and don't specify an element as selected.\nIf leaving the field empty should be a valid option, include an `mdc-deprecated-list-item` element at the beginning of\nthe list with an empty `data-value` attribute.\n\n```html\n<li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" aria-selected=\"true\" role=\"option\" data-value=\"\"></li>\n```\n\n#### Required select\n\nTo style a select menu as required and enable validation, add the `mdc-select--required` class to the `mdc-select` element\nand set the `aria-required` attribute on the `mdc-select__anchor` element to be `\"true\"`.\n\n```html\n<div class=\"mdc-select mdc-select--filled mdc-select--required\">\n  <div class=\"mdc-select__anchor\" aria-required=\"true\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span class=\"mdc-floating-label\">Pick a Food Group</span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n    <span class=\"mdc-line-ripple\"></span>\n  </div>\n\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n    ...\n  </div>\n</div>\n```\n\n> _NOTE_: To programmatically set a select as required, use the `required` property in the `MDCSelect` API.\n\n#### Disabled select\n\nAdd the `mdc-select--disabled` class to the `mdc-select` element, set the\n`aria-disabled` attribute on the `mdc-select__selected-text` element to\nbe `\"true\"`, and set the disabled attribute any hidden input element.\n\n```html\n<div class=\"mdc-select mdc-select--filled mdc-select--disabled\">\n  <div class=\"mdc-select__anchor\" aria-disabled=\"true\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span class=\"mdc-floating-label\">Pick a Food Group</span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n    <span class=\"mdc-line-ripple\"></span>\n  </div>\n\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n    ...\n  </div>\n</div>\n```\n\n> _NOTE_: To programmatically set a select as disabled, use the `disabled` property in the `MDCSelect` API.\n\n#### Disabled options\n\nAdd the `mdc-deprecated-list-item--disabled` class to list items that are disabled.\nDisabled list items are removed from the list items index and are ignored entirely. You cannot\nprogrammatically select a disabled list item.\n\n```html\n<div class=\"mdc-select mdc-select--filled\">\n  <div class=\"mdc-select__anchor\">\n    ...\n  </div>\n\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n    <ul class=\"mdc-deprecated-list\">\n      <li class=\"mdc-deprecated-list-item\" data-value=\"\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"grains\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Bread, Cereal, Rice, and Pasta</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected mdc-deprecated-list-item--disabled\" data-value=\"vegetables\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Vegetables</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"fruit\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n      </li>\n    </ul>\n  </div>\n</div>\n```\n\n### Select with Helper Text\n\nThe helper text provides supplemental information and/or validation messages to users. It appears when the select\nelement is focused and disappears on blur by default, or it can be persistent.\nSee [here](helper-text/) for more information on using helper text.\n\n### Select with Leading  Icons\n\nLeading icons can be added within the default or outlined variant of MDC Select as visual indicators as\nwell as interaction targets. See [here](icon/) for more information on using icons.\n\n### Select with No Label\n\nA label is not required if a separate, adjacent label is provided elsewhere. To correctly style\nMDC Select without a label, add the class `mdc-select--no-label` and remove the label from the\nstructure.\n\n#### Filled\n\n```html\n<div class=\"mdc-select mdc-select--filled mdc-select--no-label demo-width-class\">\n  <div class=\"mdc-select__anchor\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n    <span class=\"mdc-line-ripple\"></span>\n  </div>\n\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">\n    <ul class=\"mdc-deprecated-list\">\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"\" aria-selected=\"true\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"grains\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Bread, Cereal, Rice, and Pasta</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"vegetables\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Vegetables</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" data-value=\"fruit\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n      </li>\n    </ul>\n  </div>\n</div>\n```\n\n#### Outlined\n\n```html\n<div class=\"mdc-select mdc-select--outlined mdc-select--no-label demo-width-class\">\n  <div class=\"mdc-select__anchor\">\n    <span class=\"mdc-notched-outline\">\n      <span class=\"mdc-notched-outline__leading\"></span>\n      <span class=\"mdc-notched-outline__trailing\"></span>\n    </span>\n    <span class=\"mdc-select__selected-text-container\">\n      <span class=\"mdc-select__selected-text\"></span>\n    </span>\n    <span class=\"mdc-select__dropdown-icon\">\n      <svg\n          class=\"mdc-select__dropdown-icon-graphic\"\n          viewBox=\"7 10 10 5\" focusable=\"false\">\n        <polygon\n            class=\"mdc-select__dropdown-icon-inactive\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 10 12 15 17 10\">\n        </polygon>\n        <polygon\n            class=\"mdc-select__dropdown-icon-active\"\n            stroke=\"none\"\n            fill-rule=\"evenodd\"\n            points=\"7 15 12 10 17 15\">\n        </polygon>\n      </svg>\n    </span>\n  </div>\n\n  <!-- Other elements from the select remain. -->\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">...</div>\n</div>\n```\n\n## Style Customization\n\n#### CSS Classes\n\n| Class | Description |\n| --- | --- |\n| `mdc-select` | Mandatory. |\n| `mdc-select__anchor` | Mandatory. This element should be placed within the `mdc-select` element. |\n| `mdc-select__menu` | Mandatory. This class should be placed on the `mdc-menu` element within the `mdc-select` element. |\n| `mdc-select__dropdown-icon` | Mandatory. Should be placed on an `i` element within the `mdc-select__anchor` element. Used for the dropdown arrow svg and animation.\n| `mdc-select__selected-text-container` | Mandatory. This class wraps the `mdc-select__selected-text` and facilitates `text-overflow: ellipsis` on it. |\n| `mdc-select__selected-text` | Mandatory. This class should be placed on a `span` within the `mdc-select__anchor` element. |\n| `mdc-select__icon` | Optional. Should be placed on an `i` or `svg` element within the `mdc-select__anchor` element. Used for the leading icon.\n| `mdc-select--activated` | Optional. Styles the activated state of select. This class will be added automatically when menu is opened.\n| `mdc-select--disabled` | Optional. Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `<select>` element. |\n| `mdc-select--outlined` | Optional. Styles the select as outlined select. |\n| `mdc-select--with-leading-icon` | Styles the select as a select with a leading icon. |\n| `mdc-select--no-label` | Styles the select as a select without a label. |\n> _NOTE_: To further customize the [MDCMenu](./../mdc-menu) or the [MDCList](./../mdc-list) component contained within the select, please refer to their respective documentation.\n\n### Sass Mixins\n\nMixins should be included in the context of a custom class applied to the component's root element, e.g. `.my-select`.\n\nMixin | Description\n--- | ---\n`ink-color($state)` | Customizes the color of the selected item displayed in the select. Accepts a Map for `default` and `disabled` states.\n`container-fill-color($state)` | Customizes the background color of the select. Accepts a Map for `default` and `disabled` states.\n`dropdown-icon-color($state)` | Customizes the dropdown icon color of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.\n`label-color($state)` | Customizes the label color of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.\n`label-floating-color($state)` | Customizes the label color of the select when the label is floating. Accepts a Map for `default` and `hover` states.\n`bottom-line-color($state)` | Customizes the color of the bottom line of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.\n`filled-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to filled select variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`outline-color($state)` | Customizes the color of the notched outline. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.\n`outline-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets the border radius of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`filled-density($density-scale)` | Sets density scale for the filled select variant (Excluding filled select with leading icon).\n`filled-with-leading-icon-density($density-scale)` | Sets density scale for filled select with leading icon.\n`outlined-density($density-scale)` | Sets density scale for outlined select (Excluding outlined select with leading icon).\n`outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined select with leading icon.\n`filled-height($height)` | Sets height of the filled select variant (Excluding filled select with leading icon).\n`filled-with-leading-icon-height($height)` | Sets height of filled select with leading icon variant.\n`outlined-height($height)` | Sets height of outlined select variant (Excluding outlined select with leading icon).\n`outlined-with-leading-icon-height($height)` | Sets height of outlined select with leading icon variant.\n`variable-width($min-width)` | Sets the select behavior to change width dynamically based on content.\n\n> _NOTE_: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).\n\n## `MDCSelect` API\n\nThe `MDCSelect` component API is modeled after a subset of the `HTMLSelectElement` functionality.\n\nProperty | Type | Description\n--- | --- | ---\n`value` | `string` | The `value`/`data-value` of the currently selected option.\n`selectedIndex` | `number` | The index of the currently selected option. Set to -1 if no option is currently selected. Changing this property will update the select element.\n`disabled` | `boolean` | Whether or not the component is disabled. Setting this sets the disabled state on the component.\n`useDefaultValidation` | `boolean` | Whether or not to use the default validation scheme where a required select must be non-empty. Set to false for custom validation.\n`valid` | `boolean` | Whether or not the component is in a valid state. Setting this updates styles on the component, but does not affect the native validity state.\n`required` | `boolean` | Whether or not the component is required. Setting this updates the `required` or `aria-required` attribute on the component and enables validation.\n`leadingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setLeadingIconAriaLabel` method.\n`leadingIconContent` | `string` (write-only) | Proxies to the foundation's `setLeadingIconContent` method.\n`helperTextContent` | `string` (write-only)| Proxies to the foundation's `setHelperTextContent` method when set.\n`ripple` | `MDCRipple` | Ripple instance attached to outlined select variant, or `null` for all other variants.\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Re-calculates if the notched outline should be notched and if the label should float. Proxies to the foundation's `layout()` method.\n`layoutOptions() => void` | Synchronizes the list of options with the state of the foundation. Proxies to the foundation's `layoutOptions()` method. Call this whenever menu options are dynamically updated.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCSelect:change` | `{value: string, index: number}` | Used to indicate when an element has been selected. This event also includes the value of the item and the index.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Select for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSelectAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the select element. |\n| `removeClass(className: string) => void` | Removes a class from the select element. |\n| `hasClass(className: string) => boolean` | Returns true if the select element has the className in its classList. |\n| `activateBottomLine() => void` | Activates the bottom line component. |\n| `deactivateBottomLine() => void` | Deactivates the bottom line component. |\n| `hasLabel() => boolean` | Returns true if the select contains a label. |\n| `floatLabel(value: boolean) => void` | Floats or defloats label. |\n| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |\n| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |\n| `notchOutline(labelWidth: number) => void` | Switches the notched outline element to its \"notched state.\" |\n| `closeOutline() => void` | Switches the notched outline element to its closed state. |\n| `setDisabled(isDisabled: boolean) => void` | Enables or disables the select. |\n| `openMenu() => void` | Opens the menu and applies activated styling. |\n| `setRippleCenter(normalizedX: number) => void` | Sets the line ripple center to the provided normalizedX value. |\n| `notifyChange(value: string) => void` | Emits the `MDCSelect:change` event when an element is selected. |\n| `setSelectedText(text: string) => void` | Sets the text content of the selectedText element to the given string. |\n| `isSelectAnchorFocused() => boolean` | Returns whether the select anchor element is focused. |\n| `getSelectAnchorAttr(attr: string) => string` | Gets the given attribute on the select anchor element. |\n| `setSelectAnchorAttr(attr: string, value: string) => void` | Sets the given attribute on the select anchor element. |\n| `removeSelectAnchorAttr(attr: string) => void` | Removes the given attribute on the select anchor element. |\n| `openMenu() => void` | Causes the menu element in the select to open. |\n| `closeMenu() => void` | Causes the menu element in the select to close. |\n| `getAnchorElement() => Element` | Returns the select anchor element. |\n| `setMenuAnchorElement(anchorEl: Element) => void` | Sets the menu anchor element. |\n| `setMenuAnchorCorner(anchorCorner: Corner) => void` | Sets the menu anchor corner. |\n| `setMenuWrapFocus(wrapFocus: boolean) => void` | Sets whether the menu should wrap focus. |\n| `focusMenuItemAtIndex(index: number) => void` | Focuses the menu item at the given index. |\n| `getMenuItemValues() => string[]` | Returns an array representing the VALUE_ATTR attributes of each menu item. |\n| `getMenuItemCount() => number` | Returns the number of menu items. |\n| `getMenuItemTextAtIndex(index: number) => string` | Gets the text content of the menu item element at the given index. |\n| `getSelectedIndex() => number` | Returns the selected index in the menu. |\n| `setSelectedIndex() => number` | Sets the selected index in the menu. |\n| `isTypeaheadInProgress() => boolean` | Returns whether typeahead is in progress in the menu. |\n| `typeaheadMatchItem: (nextChar: string, startingIndex: number) => number` | Adds a character to the list typeahead buffer and returns index of the next item in the list matching the buffer. |\n### `MDCSelectFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |\n| `getDisabled() => boolean` | Gets the disabled state. |\n| `setDisabled(isDisabled: boolean) => void` | Updates the disabled state. |\n| `handleFocus() => void` | Handles a focus event on the `select` element. |\n| `handleBlur() => void` | Handles a blur event on the `select` element. |\n| `handleClick(normalizedX: number) => void` | Sets the line ripple center to the normalizedX for the line ripple. |\n| `handleMenuOpened() => void` | Handles menu or menu surface opened event.\n| `handleMenuClosed() => void` | Handles menu or menu surface closed event.\n| `handleMenuItemAction() => void` | Handles menu selected event.\n| `handleChange() => void` | Handles a change to the `select` element's value. This must be called both for `change` events and programmatic changes requested via the component API. |\n| `handleKeydown(event: KeyboardEvent) => void` | Handles opening the menu when the `mdc-select__selected-text` element is focused and the user presses the `Enter` or `Space` key. |\n| `getSelectedIndex() => number` | Returns the index of the currently selected menu item. |\n| `setSelectedIndex(index: number) => void` | Handles setting the `mdc-select__selected-text` element and closing the menu. Also causes the label to float and outline to notch if needed. |\n| `getValue() => string` | Handles getting the value through the adapter. |\n| `setValue() => string` | Sets the selected index to the index of the menu item with the given value. |\n| `setUseDefaultValidation(useDefaultValidation: boolean) => void` | Enables or disables the default validation scheme where a required select must be non-empty. Set to false for custom validation.|\n| `setValid(isValid: boolean) => void` | Sets the valid state through the adapter. Note that default validation scheme where a required select is invalid if empty will still be honored subsequently unless `setUseDefaultValidation(false)` is also called.|\n| `isValid() => boolean` | Gets the valid state through the adapter's `checkValidity` API. |\n| `setRequired(isRequired: boolean) => void` | Sets the required state through the adapter. |\n| `getRequired() => boolean` | Gets the required state through the adapter. |\n| `init() => void` | Initializes the foundation. |\n| `layout() => void` | Re-calculates if the notched outline should be notched and if the label should float. |\n| `layoutOptions() => void` | Synchronizes the list of options with the state of the foundation. Call this whenever menu options are dynamically updated. |\n| `setLeadingIconAriaLabel(label: string) => void` | Sets the aria label of the leading icon. |\n| `setLeadingIconContent(content: string) => void` | Sets the text content of the leading icon. |\n| `setHelperTextContent(content: string) => void` | Sets the content of the helper text. |\n\n`MDCSelectFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCSelectFoundation`.\n"
  },
  {
    "path": "packages/mdc-select/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './select-helper-text-theme';\n@forward './select-icon-theme';\n@forward './select-theme' hide theme-styles;\n"
  },
  {
    "path": "packages/mdc-select/_mixins.import.scss",
    "content": "@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/floating-label\" as mdc-floating-label-*;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/notched-outline\" as mdc-notched-outline-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"./index\" as mdc-select-*;\n@forward \"@material/line-ripple\" as mdc-line-ripple-*;\n"
  },
  {
    "path": "packages/mdc-select/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './select-theme' show min-width, ink-color, disabled-ink-color, container-fill-color, disabled-container-fill-color, dropdown-icon-color, disabled-dropdown-icon-color, hover-dropdown-icon-color, focused-dropdown-icon-color, focused-label-color, label-floating-color, hover-label-floating-color, bottom-line-color, hover-bottom-line-color, focused-bottom-line-color, label-color, hover-label-color, disabled-label-color, outline-color, hover-outline-color, focused-outline-color, disabled-outline-color, filled-shape-radius, outline-shape-radius, filled-density, filled-with-leading-icon-density, outlined-density, outlined-with-leading-icon-density, filled-height, filled-with-leading-icon-height, outlined-height, outlined-with-leading-icon-height;\n@forward './select' show core-styles;\n"
  },
  {
    "path": "packages/mdc-select/_select-filled-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './select-theme';\n@use './select-shared-theme';\n\n$_light-theme: (\n  menu-cascading-menu-indicator-icon-color: null,\n  menu-cascading-menu-indicator-icon-size: null,\n  menu-container-color: null,\n  menu-container-elevation: null,\n  menu-container-shadow-color: null,\n  menu-container-shape: null,\n  menu-container-surface-tint-layer-color: null,\n  menu-divider-color: null,\n  menu-divider-height: null,\n  menu-list-item-container-height: null,\n  menu-list-item-focus-state-layer-color: null,\n  menu-list-item-focus-state-layer-opacity: null,\n  menu-list-item-hover-state-layer-color: null,\n  menu-list-item-hover-state-layer-opacity: null,\n  menu-list-item-label-text-color: null,\n  menu-list-item-label-text-font: null,\n  menu-list-item-label-text-line-height: null,\n  menu-list-item-label-text-size: null,\n  menu-list-item-label-text-tracking: null,\n  menu-list-item-label-text-type: null,\n  menu-list-item-label-text-weight: null,\n  menu-list-item-pressed-state-layer-color: null,\n  menu-list-item-pressed-state-layer-opacity: null,\n  menu-list-item-selected-container-color: null,\n  menu-list-item-with-leading-icon-leading-icon-color: null,\n  menu-list-item-with-leading-icon-leading-icon-size: null,\n  menu-list-item-with-trailing-icon-trailing-icon-color: null,\n  menu-list-item-with-trailing-icon-trailing-icon-size: null,\n  text-field-active-indicator-color: null,\n  text-field-active-indicator-height: null,\n  text-field-caret-color: null,\n  text-field-container-color: null,\n  text-field-container-height: null,\n  text-field-container-shape: null,\n  text-field-disabled-active-indicator-color: null,\n  text-field-disabled-active-indicator-height: null,\n  text-field-disabled-active-indicator-opacity: null,\n  text-field-disabled-container-color: null,\n  text-field-disabled-container-opacity: null,\n  text-field-disabled-input-text-color: null,\n  text-field-disabled-input-text-opacity: null,\n  text-field-disabled-label-text-color: null,\n  text-field-disabled-label-text-opacity: null,\n  text-field-disabled-leading-icon-color: null,\n  text-field-disabled-leading-icon-opacity: null,\n  text-field-disabled-supporting-text-color: null,\n  text-field-disabled-supporting-text-opacity: null,\n  text-field-disabled-trailing-icon-color: null,\n  text-field-disabled-trailing-icon-opacity: null,\n  text-field-error-active-indicator-color: null,\n  text-field-error-caret-color: null,\n  text-field-error-focus-active-indicator-color: null,\n  text-field-error-focus-caret-color: null,\n  text-field-error-focus-input-text-color: null,\n  text-field-error-focus-label-text-color: null,\n  text-field-error-focus-leading-icon-color: null,\n  text-field-error-focus-supporting-text-color: null,\n  text-field-error-focus-trailing-icon-color: null,\n  text-field-error-hover-active-indicator-color: null,\n  text-field-error-hover-caret-color: null,\n  text-field-error-hover-input-text-color: null,\n  text-field-error-hover-label-text-color: null,\n  text-field-error-hover-leading-icon-color: null,\n  text-field-error-hover-state-layer-color: null,\n  text-field-error-hover-state-layer-opacity: null,\n  text-field-error-hover-supporting-text-color: null,\n  text-field-error-hover-trailing-icon-color: null,\n  text-field-error-input-text-color: null,\n  text-field-error-label-text-color: null,\n  text-field-error-leading-icon-color: null,\n  text-field-error-supporting-text-color: null,\n  text-field-error-trailing-icon-color: null,\n  text-field-focus-active-indicator-color: null,\n  text-field-focus-active-indicator-height: null,\n  text-field-focus-caret-color: null,\n  text-field-focus-input-text-color: null,\n  text-field-focus-label-text-color: null,\n  text-field-focus-leading-icon-color: null,\n  text-field-focus-supporting-text-color: null,\n  text-field-focus-trailing-icon-color: null,\n  text-field-hover-active-indicator-color: null,\n  text-field-hover-active-indicator-height: null,\n  text-field-hover-caret-color: null,\n  text-field-hover-input-text-color: null,\n  text-field-hover-label-text-color: null,\n  text-field-hover-leading-icon-color: null,\n  text-field-hover-state-layer-color: null,\n  text-field-hover-state-layer-opacity: null,\n  text-field-hover-supporting-text-color: null,\n  text-field-hover-trailing-icon-color: null,\n  text-field-input-text-color: null,\n  text-field-input-text-font: null,\n  text-field-input-text-line-height: null,\n  text-field-input-text-size: null,\n  text-field-input-text-tracking: null,\n  text-field-input-text-type: null,\n  text-field-input-text-weight: null,\n  text-field-label-text-color: null,\n  text-field-label-text-font: null,\n  text-field-label-text-line-height: null,\n  text-field-label-text-populated-line-height: null,\n  text-field-label-text-populated-size: null,\n  text-field-label-text-size: null,\n  text-field-label-text-tracking: null,\n  text-field-label-text-type: null,\n  text-field-label-text-weight: null,\n  text-field-leading-icon-color: null,\n  text-field-leading-icon-size: null,\n  text-field-supporting-text-color: null,\n  text-field-supporting-text-font: null,\n  text-field-supporting-text-line-height: null,\n  text-field-supporting-text-size: null,\n  text-field-supporting-text-tracking: null,\n  text-field-supporting-text-type: null,\n  text-field-supporting-text-weight: null,\n  text-field-trailing-icon-color: null,\n  text-field-trailing-icon-size: null,\n);\n\n$custom-property-prefix: 'filled-select';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: select-shared-theme.resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: select-shared-theme.resolve-theme($theme, $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include select-theme.theme-styles($theme, $resolvers: $resolvers);\n\n  @if map.get($theme, text-field-container-height) {\n    @include select-theme.filled-height(\n      map.get($theme, text-field-container-height)\n    );\n  }\n  @if map.get($theme, text-field-container-shape) {\n    @include select-theme.filled-shape-radius(\n      map.get($theme, text-field-container-shape)\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-filled.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/menu-surface/mixins' as menu-surface-mixins;\n@use '@material/rtl/rtl';\n@use './select-icon-theme';\n@use './select-theme';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select--filled {\n    @include menu-surface-mixins.flatten-top-when-opened-below($query: $query);\n\n    &.mdc-select--focused.mdc-line-ripple::after {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1, 2);\n        opacity: 1;\n      }\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select--filled {\n    @include select-theme.filled-height(select-theme.$height, $query: $query);\n    @include select-theme.filled-shape-radius(\n      select-theme.$shape-radius,\n      $query: $query\n    );\n\n    @include select-theme.container-fill-color(\n      (\n        default: select-theme.$fill-color,\n        disabled: select-theme.$disabled-fill-color,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.bottom-line-color(\n      (\n        default: select-theme.$bottom-line-idle-color,\n        focus: primary,\n        hover: select-theme.$bottom-line-hover-color,\n        disabled: select-theme.$disabled-bottom-line-color,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.truncate-floating-label-max-width(\n      $leading-icon-size: 0,\n      $dropdown-icon-size: select-icon-theme.$icon-size,\n      $query: $query\n    );\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-position(\n          left,\n          select-theme.$outline-label-offset\n        );\n      }\n    }\n\n    &.mdc-select--with-leading-icon {\n      @include select-theme.leading-icon-floating-label-position(\n        select-icon-theme.$icon-size,\n        $query: $query\n      );\n\n      @include select-theme.truncate-floating-label-max-width(\n        $leading-icon-size: select-icon-theme.$icon-size,\n        $dropdown-icon-size: select-icon-theme.$icon-size,\n        $query: $query\n      );\n    }\n  }\n\n  .mdc-select--invalid {\n    @include select-theme.bottom-line-color(\n      (\n        default: select-theme.$error-color,\n        hover: select-theme.$error-color,\n        focus: select-theme.$error-color,\n      ),\n      $query: $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-helper-text-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/variables' as theme-variables;\n\n$helper-text-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;\n$disabled-helper-text-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n\n@mixin helper-text-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(.mdc-select--disabled) {\n    @include _helper-text-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n  }\n\n  &.mdc-select--disabled {\n    @include _helper-text-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin helper-text-validation-color(\n  $color-or-map,\n  $query: feature-targeting.all()\n) {\n  &:not(.mdc-select--disabled) {\n    @include _helper-text-validation-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:not(.mdc-select--focused):hover {\n      @include _helper-text-validation-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n}\n\n// Private mixins\n\n@mixin _helper-text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    & + .mdc-select-helper-text {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin _helper-text-validation-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    &.mdc-select--invalid + .mdc-select-helper-text--validation-msg {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-helper-text.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/variables';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/typography/mixins' as typography-mixins;\n\n@mixin helper-text-core-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select-helper-text {\n    @include feature-targeting.targets($feat-structure) {\n      margin: 0;\n      @include rtl.reflexive-property(margin, 16px, 16px);\n    }\n    @include typography-mixins.typography(caption, $query: $query);\n    @include typography-mixins.text-baseline(16px, $query: $query);\n  }\n\n  .mdc-select-helper-text--validation-msg {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity 180ms variables.$standard-curve-timing-function;\n    }\n  }\n\n  .mdc-select--invalid + .mdc-select-helper-text--validation-msg,\n  .mdc-select-helper-text--validation-msg-persistent {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-icon-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/variables' as theme-variables;\n\n$icon-size: 24px !default;\n$dense-icon-size: 20px !default;\n$icon-horizontal-margin: 12px !default;\n\n$icon-color: rgba(theme-variables.prop-value(on-surface), 0.54) !default;\n$disabled-icon-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n\n///\n/// Customizes the size (both width and height) of the icon.\n/// @param {Number} $size - the intended icon size.\n///\n@mixin size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-select__icon {\n      @include theme.property(width, $size);\n      @include theme.property(height, $size);\n      @include theme.property(font-size, $size);\n    }\n  }\n}\n\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(.mdc-select--disabled) {\n    @include _icon-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n  }\n\n  &.mdc-select--disabled {\n    @include _icon-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin icon-horizontal-margins($left, $right, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-select__icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, $left, $right);\n    }\n  }\n}\n\n@mixin _icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    .mdc-select__icon {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-icon.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use './select-icon-theme';\n\n@mixin icon-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select--with-leading-icon {\n    @include _icon($query: $query);\n    @include select-icon-theme.icon-horizontal-margins(\n      $left: select-icon-theme.$icon-horizontal-margin,\n      $right: select-icon-theme.$icon-horizontal-margin,\n      $query: $query\n    );\n  }\n\n  .mdc-select__icon:not([tabindex]),\n  .mdc-select__icon[tabindex='-1'] {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n}\n\n@mixin _icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-select__icon {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n      box-sizing: border-box;\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      user-select: none;\n      flex-shrink: 0;\n      align-self: center;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      background-color: transparent;\n      fill: currentColor;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-outlined-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:map';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/tokens/resolvers';\n@use './select-theme';\n@use './select-shared-theme';\n\n$_light-theme: (\n  menu-cascading-menu-indicator-icon-color: null,\n  menu-cascading-menu-indicator-icon-size: null,\n  menu-container-color: null,\n  menu-container-elevation: null,\n  menu-container-shadow-color: null,\n  menu-container-shape: null,\n  menu-container-surface-tint-layer-color: null,\n  menu-divider-color: null,\n  menu-divider-height: null,\n  menu-list-item-container-height: null,\n  menu-list-item-focus-state-layer-color: null,\n  menu-list-item-focus-state-layer-opacity: null,\n  menu-list-item-hover-state-layer-color: null,\n  menu-list-item-hover-state-layer-opacity: null,\n  menu-list-item-label-text-color: null,\n  menu-list-item-label-text-font: null,\n  menu-list-item-label-text-line-height: null,\n  menu-list-item-label-text-size: null,\n  menu-list-item-label-text-tracking: null,\n  menu-list-item-label-text-type: null,\n  menu-list-item-label-text-weight: null,\n  menu-list-item-pressed-state-layer-color: null,\n  menu-list-item-pressed-state-layer-opacity: null,\n  menu-list-item-selected-container-color: null,\n  menu-list-item-with-leading-icon-leading-icon-color: null,\n  menu-list-item-with-leading-icon-leading-icon-size: null,\n  menu-list-item-with-trailing-icon-trailing-icon-color: null,\n  menu-list-item-with-trailing-icon-trailing-icon-size: null,\n  text-field-caret-color: null,\n  text-field-container-color: null,\n  text-field-container-height: null,\n  text-field-container-shape: null,\n  text-field-disabled-input-text-color: null,\n  text-field-disabled-input-text-opacity: null,\n  text-field-disabled-label-text-color: null,\n  text-field-disabled-label-text-opacity: null,\n  text-field-disabled-leading-icon-color: null,\n  text-field-disabled-leading-icon-opacity: null,\n  text-field-disabled-outline-color: null,\n  text-field-disabled-outline-opacity: null,\n  text-field-disabled-outline-width: null,\n  text-field-disabled-supporting-text-color: null,\n  text-field-disabled-supporting-text-opacity: null,\n  text-field-disabled-trailing-icon-color: null,\n  text-field-disabled-trailing-icon-opacity: null,\n  text-field-error-caret-color: null,\n  text-field-error-focus-caret-color: null,\n  text-field-error-focus-input-text-color: null,\n  text-field-error-focus-label-text-color: null,\n  text-field-error-focus-leading-icon-color: null,\n  text-field-error-focus-outline-color: null,\n  text-field-error-focus-supporting-text-color: null,\n  text-field-error-focus-trailing-icon-color: null,\n  text-field-error-hover-caret-color: null,\n  text-field-error-hover-input-text-color: null,\n  text-field-error-hover-label-text-color: null,\n  text-field-error-hover-leading-icon-color: null,\n  text-field-error-hover-outline-color: null,\n  text-field-error-hover-state-layer-color: null,\n  text-field-error-hover-state-layer-opacity: null,\n  text-field-error-hover-supporting-text-color: null,\n  text-field-error-hover-trailing-icon-color: null,\n  text-field-error-input-text-color: null,\n  text-field-error-label-text-color: null,\n  text-field-error-leading-icon-color: null,\n  text-field-error-outline-color: null,\n  text-field-error-supporting-text-color: null,\n  text-field-error-trailing-icon-color: null,\n  text-field-focus-caret-color: null,\n  text-field-focus-input-text-color: null,\n  text-field-focus-label-text-color: null,\n  text-field-focus-leading-icon-color: null,\n  text-field-focus-outline-color: null,\n  text-field-focus-outline-width: null,\n  text-field-focus-supporting-text-color: null,\n  text-field-focus-trailing-icon-color: null,\n  text-field-hover-caret-color: null,\n  text-field-hover-input-text-color: null,\n  text-field-hover-label-text-color: null,\n  text-field-hover-leading-icon-color: null,\n  text-field-hover-outline-color: null,\n  text-field-hover-outline-width: null,\n  text-field-hover-state-layer-color: null,\n  text-field-hover-state-layer-opacity: null,\n  text-field-hover-supporting-text-color: null,\n  text-field-hover-trailing-icon-color: null,\n  text-field-input-text-color: null,\n  text-field-input-text-font: null,\n  text-field-input-text-line-height: null,\n  text-field-input-text-size: null,\n  text-field-input-text-tracking: null,\n  text-field-input-text-type: null,\n  text-field-input-text-weight: null,\n  text-field-label-text-color: null,\n  text-field-label-text-font: null,\n  text-field-label-text-line-height: null,\n  text-field-label-text-populated-line-height: null,\n  text-field-label-text-populated-size: null,\n  text-field-label-text-size: null,\n  text-field-label-text-tracking: null,\n  text-field-label-text-type: null,\n  text-field-label-text-weight: null,\n  text-field-leading-icon-color: null,\n  text-field-leading-icon-size: null,\n  text-field-outline-color: null,\n  text-field-outline-width: null,\n  text-field-supporting-text-color: null,\n  text-field-supporting-text-font: null,\n  text-field-supporting-text-line-height: null,\n  text-field-supporting-text-size: null,\n  text-field-supporting-text-tracking: null,\n  text-field-supporting-text-type: null,\n  text-field-supporting-text-weight: null,\n  text-field-trailing-icon-color: null,\n  text-field-trailing-icon-size: null,\n);\n\n$custom-property-prefix: 'outlined-select';\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($_light-theme, $theme);\n  $theme: select-shared-theme.resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties($theme, $custom-property-prefix);\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($_light-theme, $theme);\n  $theme: select-shared-theme.resolve-theme($theme, $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include select-theme.theme-styles($theme, $resolvers: $resolvers);\n\n  @if map.get($theme, text-field-container-height) {\n    @include select-theme.outlined-height(\n      map.get($theme, text-field-container-height),\n      $label-font-size: map.get($theme, text-field-label-text-size)\n    );\n    &.mdc-select--with-leading-icon {\n      @include select-theme.outlined-with-leading-icon-height(\n        map.get($theme, text-field-container-height),\n        $label-font-size: map.get($theme, text-field-label-text-size)\n      );\n    }\n  }\n  @if map.get($theme, text-field-container-shape) {\n    @include select-theme.outline-shape-radius(\n      map.get($theme, text-field-container-shape),\n      $height: map.get($theme, text-field-container-height)\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-outlined.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/rtl/rtl';\n@use './select-icon-theme';\n@use './select-theme';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-select--outlined {\n    @include feature-targeting.targets($feat-structure) {\n      border: none;\n    }\n\n    .mdc-select__anchor {\n      @include floating-label-mixins.shake-animation(\n        select-outlined,\n        $query: $query\n      );\n      @include notched-outline-mixins.floating-label-float-position-absolute(\n        select-theme.$outlined-label-position-y,\n        $query: $query\n      );\n      @include notched-outline-mixins.notch-offset(\n        notched-outline-variables.$border-width,\n        $query: $query\n      );\n      @include select-theme.center-aligned($query: $query);\n\n      @include feature-targeting.targets($feat-structure) {\n        display: flex;\n        // To eliminate extra gap between helper text & outlined select in IE.\n        align-items: baseline;\n        overflow: visible;\n      }\n    }\n\n    .mdc-select__selected-text-container {\n      @include feature-targeting.targets($feat-structure) {\n        display: flex;\n        border: none;\n        z-index: 1;\n      }\n\n      @include feature-targeting.targets($feat-color) {\n        background-color: transparent;\n      }\n    }\n\n    .mdc-select__icon {\n      @include feature-targeting.targets($feat-structure) {\n        z-index: 2;\n      }\n    }\n\n    .mdc-menu-surface {\n      @include feature-targeting.targets($feat-structure) {\n        margin-bottom: 8px;\n      }\n    }\n\n    &.mdc-select--no-label .mdc-menu-surface,\n    .mdc-menu-surface--is-open-below {\n      @include feature-targeting.targets($feat-structure) {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n\n  .mdc-select--outlined {\n    $feat-structure: feature-targeting.create-target($query, structure);\n    $feat-color: feature-targeting.create-target($query, color);\n\n    @include select-theme.outlined-height(select-theme.$height, $query: $query);\n    @include select-theme.outline-shape-radius(\n      select-theme.$shape-radius,\n      $query: $query\n    );\n\n    @include select-theme.container-fill-color(\n      (\n        default: transparent,\n        disabled: transparent,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.outline-color(\n      (\n        default: select-theme.$outlined-idle-border,\n        hover: select-theme.$outlined-hover-border,\n        focus: primary,\n        disabled: select-theme.$disabled-outline-color,\n      ),\n      $query: $query\n    );\n    @include select-theme.outline-width(\n      (\n        focus: select-theme.$outlined-stroke-width,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.truncate-notched-outline-max-width(\n      $leading-icon-size: 0,\n      $dropdown-icon-size: select-icon-theme.$icon-size,\n      $query: $query\n    );\n\n    .mdc-select__anchor {\n      @include floating-label-mixins.shake-animation(\n        select-outlined,\n        $query: $query\n      );\n      @include notched-outline-mixins.floating-label-float-position-absolute(\n        select-theme.$outlined-label-position-y,\n        $query: $query\n      );\n      @include notched-outline-mixins.notch-offset(\n        notched-outline-variables.$border-width,\n        $query: $query\n      );\n      @include select-theme.center-aligned($query: $query);\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        line-height: 1.15rem;\n\n        @include rtl.reflexive-position(\n          left,\n          notched-outline-variables.$padding\n        );\n      }\n    }\n\n    &.mdc-select--focused {\n      @include notched-outline-mixins.notch-offset(\n        select-theme.$outlined-stroke-width,\n        $query: $query\n      );\n    }\n\n    &.mdc-select--invalid {\n      @include select-theme.outline-color(\n        (\n          default: select-theme.$error-color,\n          hover: select-theme.$error-color,\n          focus: select-theme.$error-color,\n        ),\n        $query: $query\n      );\n    }\n\n    &.mdc-select--with-leading-icon {\n      @include select-theme.outlined-with-leading-icon-floating-label-position-animation(\n        select-theme.$height,\n        select-icon-theme.$icon-size,\n        $query: $query\n      );\n      @include select-theme.truncate-notched-outline-max-width(\n        $leading-icon-size: select-icon-theme.$icon-size,\n        $dropdown-icon-size: select-icon-theme.$icon-size,\n        $query: $query\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-ripple.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use './select-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-select__anchor {\n    @include ripple.surface(\n      $ripple-target: select-theme.$ripple-target,\n      $query: $query\n    );\n    @include ripple.radius-bounded(\n      $ripple-target: select-theme.$ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-base-color(\n      select-theme.$ink-color,\n      $ripple-target: select-theme.$ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-opacities(\n      (\n        hover: ripple-theme.states-opacity(select-theme.$ink-color, hover),\n        focus: ripple-theme.states-opacity(select-theme.$ink-color, focus),\n      ),\n      $ripple-target: select-theme.$ripple-target,\n      $query: $query\n    );\n\n    #{select-theme.$ripple-target} {\n      @include ripple.target-common($query: $query);\n    }\n  }\n\n  .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected {\n    @include list-mixins.deprecated-ripple-states(on-surface, $query: $query);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-shared-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use 'sass:meta';\n\n@function resolve-theme($theme, $resolvers) {\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-elevation($theme, map.get($resolvers, elevation))\n  );\n  @return $theme;\n}\n\n@function _resolve-theme-elevation($theme, $resolver) {\n  $elevation: map.get($theme, menu-container-elevation);\n  $shadow-color: map.get($theme, menu-container-shadow-color);\n  @if $elevation and $shadow-color {\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: $elevation,\n      $shadow-color: $shadow-color\n    );\n    $theme: map.set($theme, menu-container-elevation, $resolved-value);\n  }\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-select/_select-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/tokens/resolvers';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/line-ripple/mixins' as line-ripple-mixins;\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/evolution-mixins' as list-evolution-mixins;\n@use '@material/menu-surface/mixins' as menu-surface-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/gss';\n@use '@material/theme/keys';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/variables' as theme-variables;\n@use '@material/typography/mixins' as typography-mixins;\n@use '@material/typography/typography';\n@use './select-helper-text-theme';\n@use './select-icon-theme';\n@use './select-shared-theme';\n\n$ripple-target: '.mdc-select__ripple';\n\n@function get-outlined-label-position-y($select-anchor-height) {\n  @if custom-properties.is-custom-prop($select-anchor-height) {\n    $value: custom-properties.get-declaration-value($select-anchor-height);\n    @return calc(\n      calc($value / 2) +\n        math.div(notched-outline-variables.$label-box-height, 2)\n    );\n  } @else {\n    @return math.div($select-anchor-height, 2) +\n      math.div(notched-outline-variables.$label-box-height, 2);\n  }\n}\n\n$arrow-padding: 52px !default;\n$label-padding: 16px !default;\n$height: 56px !default;\n$minimum-height-for-filled-label: 52px !default;\n$filled-baseline-top: 40px !default;\n$selected-text-height: 28px !default;\n$anchor-padding-left: 16px !default;\n$anchor-padding-left-with-leading-icon: 0 !default;\n$anchor-padding-right: 0 !default;\n$outlined-stroke-width: 2px !default;\n$default-width: 200px !default;\n$shape-radius: small !default;\n\n$minimum-height: 40px !default;\n$minimum-height-for-filled-label: 52px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n\n$ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !default;\n$dropdown-icon-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.54\n) !default;\n$label-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;\n$focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !default;\n$bottom-line-idle-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.42\n) !default;\n$bottom-line-hover-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.87\n) !default;\n\n$fill-color: color.mix(\n  theme-variables.prop-value(on-surface),\n  theme-variables.prop-value(surface),\n  4%\n) !default;\n\n// Disabled Styles\n$disabled-label-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-ink-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-fill-color: color.mix(\n  theme-variables.prop-value(on-surface),\n  theme-variables.prop-value(surface),\n  2%\n) !default;\n$disabled-fill-border: rgba(\n  theme-variables.prop-value(on-surface),\n  0.06\n) !default;\n$disabled-bottom-line-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.06\n) !default;\n$disabled-dropdown-icon-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-outline-color: rgba(\n  theme-variables.prop-value(on-surface),\n  0.06\n) !default;\n\n$outlined-idle-border: rgba(\n  theme-variables.prop-value(on-surface),\n  0.38\n) !default;\n$outlined-hover-border: rgba(\n  theme-variables.prop-value(on-surface),\n  0.87\n) !default;\n\n$label-position-y: 106% !default;\n$outline-label-offset: 16px !default;\n$outlined-label-position-y: get-outlined-label-position-y($height) !default;\n$outlined-with-leading-icon-label-position-x: 32px !default;\n\n$dropdown-transition-duration: 150ms !default;\n// Transition durartions to active state\n$icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration !default;\n$icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration !default;\n// Transition durartions to inactive state\n$icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration !default;\n$icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration !default;\n\n// Error colors\n$error-color: error !default;\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include container-fill-color(\n    (\n      default: map.get($theme, text-field-container-color),\n      disabled: map.get($theme, text-field-disabled-container-color),\n    )\n  );\n  @include outline-color(\n    (\n      default: map.get($theme, text-field-outline-color),\n      hover: map.get($theme, text-field-hover-outline-color),\n      focus: map.get($theme, text-field-focus-outline-color),\n      disabled: map.get($theme, text-field-disabled-outline-color),\n    )\n  );\n  @include _error-outline-color(\n    (\n      default: map.get($theme, text-field-error-outline-color),\n      hover: map.get($theme, text-field-error-hover-outline-color),\n      focus: map.get($theme, text-field-error-focus-outline-color),\n    )\n  );\n  @include outline-width(\n    (\n      default: map.get($theme, text-field-outline-width),\n      hover: map.get($theme, text-field-hover-outline-width),\n      focus: map.get($theme, text-field-focus-outline-width),\n    )\n  );\n  @include _menu-container-color(map.get($theme, menu-container-color));\n  @include _menu-container-elevation(map.get($theme, menu-container-elevation));\n  @include _menu-container-shape(map.get($theme, menu-container-shape));\n  @include _menu-container-surface-tint-layer-color(\n    map.get($theme, menu-container-surface-tint-layer-color)\n  );\n  @include _menu-divider-color(map.get($theme, menu-divider-color));\n  @include _menu-divider-height(map.get($theme, menu-divider-height));\n  @include _menu-list-item-container-height(\n    map.get($theme, menu-list-item-container-height)\n  );\n  @include _menu-list-item-label-text-color(\n    map.get($theme, menu-list-item-label-text-color)\n  );\n  @include _menu-list-item-label-text-typography(\n    (\n      font: map.get($theme, menu-list-item-label-text-font),\n      line-height: map.get($theme, menu-list-item-label-text-line-height),\n      size: map.get($theme, menu-list-item-label-text-size),\n      tracking: map.get($theme, menu-list-item-label-text-tracking),\n      weight: map.get($theme, menu-list-item-label-text-weight),\n    )\n  );\n  @include _menu-list-item-state-layer(\n    (\n      focus-state-layer-color:\n        map.get($theme, menu-list-item-focus-state-layer-color),\n      focus-state-layer-opacity:\n        map.get($theme, menu-list-item-focus-state-layer-opacity),\n      hover-state-layer-color:\n        map.get($theme, menu-list-item-hover-state-layer-color),\n      hover-state-layer-opacity:\n        map.get($theme, menu-list-item-hover-state-layer-opacity),\n      pressed-state-layer-color:\n        map.get($theme, menu-list-item-pressed-state-layer-color),\n      pressed-state-layer-opacity:\n        map.get($theme, menu-list-item-pressed-state-layer-opacity),\n    )\n  );\n  @include _menu-list-item-selected-container-color(\n    map.get($theme, menu-list-item-selected-container-color)\n  );\n  @include _menu-list-item-with-leading-icon-leading-icon-color(\n    map.get($theme, menu-list-item-with-leading-icon-leading-icon-color)\n  );\n  @include _menu-list-item-with-leading-icon-leading-icon-size(\n    map.get($theme, menu-list-item-with-leading-icon-leading-icon-size)\n  );\n  // TODO: Create new mixin for trailing icon theming when select supports it.\n  @include _menu-list-item-with-leading-icon-leading-icon-color(\n    map.get($theme, menu-list-item-with-trailing-icon-trailing-icon-color)\n  );\n  @include _menu-list-item-with-leading-icon-leading-icon-size(\n    map.get($theme, menu-list-item-with-trailing-icon-trailing-icon-size)\n  );\n  @include bottom-line-color(\n    (\n      default: map.get($theme, text-field-active-indicator-color),\n      hover: map.get($theme, text-field-hover-active-indicator-color),\n      focus: map.get($theme, text-field-focus-active-indicator-color),\n      disabled: map.get($theme, text-field-disabled-active-indicator-color),\n    )\n  );\n  @include dropdown-icon-size(map.get($theme, text-field-trailing-icon-size));\n  @include select-icon-theme.size(\n    map.get($theme, text-field-leading-icon-size)\n  );\n  @include _text-field-error-active-indicator-color(\n    (\n      default: map.get($theme, text-field-error-active-indicator-color),\n      hover: map.get($theme, text-field-error-hover-active-indicator-color),\n      focus: map.get($theme, text-field-error-focus-active-indicator-color),\n    )\n  );\n  @include _text-field-active-indicator-height(\n    (\n      default: map.get($theme, text-field-active-indicator-height),\n      focus: map.get($theme, text-field-focus-active-indicator-height),\n    )\n  );\n  // TODO(b/259951357): Cleanup branch after fix and tokens upgrade.\n  @if map.has-key($theme, text-field-caret-color) or\n    map.has-key($theme, text-field-error-caret-color)\n  {\n    @include _text-field-trailing-icon-color(\n      (\n        default: map.get($theme, text-field-caret-color),\n        hover: map.get($theme, text-field-hover-caret-color),\n        focus: map.get($theme, text-field-focus-caret-color),\n      )\n    );\n    @include _text-field-error-trailing-icon-color(\n      (\n        default: map.get($theme, text-field-error-caret-color),\n        hover: map.get($theme, text-field-error-hover-caret-color),\n        focus: map.get($theme, text-field-error-focus-caret-color),\n      )\n    );\n  } @else {\n    @include _text-field-trailing-icon-color(\n      (\n        default: map.get($theme, text-field-trailing-icon-color),\n        hover: map.get($theme, text-field-hover-trailing-icon-color),\n        focus: map.get($theme, text-field-focus-trailing-icon-color),\n        disabled: map.get($theme, text-field-disabled-trailing-icon-color),\n      )\n    );\n    @include _text-field-error-trailing-icon-color(\n      (\n        default: map.get($theme, text-field-error-trailing-icon-color),\n        hover: map.get($theme, text-field-error-hover-trailing-icon-color),\n        focus: map.get($theme, text-field-error-focus-trailing-icon-color),\n      )\n    );\n  }\n  @include ink-color(\n    (\n      default: map.get($theme, text-field-input-text-color),\n      hover: map.get($theme, text-field-hover-input-text-color),\n      focus: map.get($theme, text-field-focus-input-text-color),\n      disabled: map.get($theme, text-field-disabled-input-text-color),\n    )\n  );\n  @include _error-input-text-color(\n    (\n      default: map.get($theme, text-field-error-input-text-color),\n      hover: map.get($theme, text-field-error-hover-input-text-color),\n      focus: map.get($theme, text-field-error-focus-input-text-color),\n    )\n  );\n  @include label-color(\n    (\n      default: map.get($theme, text-field-label-text-color),\n      hover: map.get($theme, text-field-hover-label-text-color),\n      focus: map.get($theme, text-field-focus-label-text-color),\n      disabled: map.get($theme, text-field-disabled-label-text-color),\n    )\n  );\n  @include label-floating-color(\n    (\n      default: map.get($theme, text-field-label-text-color),\n      hover: map.get($theme, text-field-hover-label-text-color),\n      focus: map.get($theme, text-field-focus-label-text-color),\n      disabled: map.get($theme, text-field-disabled-label-text-color),\n    )\n  );\n  @include _error-label-text-color(\n    (\n      default: map.get($theme, text-field-error-label-text-color),\n      hover: map.get($theme, text-field-error-hover-label-text-color),\n      focus: map.get($theme, text-field-error-focus-label-text-color),\n    )\n  );\n  @include _text-field-leading-icon-color(\n    (\n      default: map.get($theme, text-field-leading-icon-color),\n      hover: map.get($theme, text-field-hover-leading-icon-color),\n      focus: map.get($theme, text-field-focus-leading-icon-color),\n      disabled: map.get($theme, text-field-disabled-leading-icon-color),\n    )\n  );\n  @include _error-text-field-leading-icon-color(\n    (\n      default: map.get($theme, text-field-error-leading-icon-color),\n      hover: map.get($theme, text-field-error-hover-leading-icon-color),\n      focus: map.get($theme, text-field-error-focus-leading-icon-color),\n    )\n  );\n  @include select-helper-text-theme.helper-text-color(\n    (\n      default: map.get($theme, text-field-supporting-text-color),\n      disabled: map.get($theme, text-field-disabled-supporting-text-color),\n      hover: map.get($theme, text-field-hover-supporting-text-color),\n      focus: map.get($theme, text-field-focus-supporting-text-color),\n    )\n  );\n  @include select-helper-text-theme.helper-text-validation-color(\n    (\n      default: map.get($theme, text-field-error-supporting-text-color),\n      hover: map.get($theme, text-field-error-hover-supporting-text-color),\n      focus: map.get($theme, text-field-error-focus-supporting-text-color),\n    )\n  );\n  @include _text-field-input-text-typography(\n    (\n      font: map.get($theme, text-field-input-text-font),\n      line-height: map.get($theme, text-field-input-text-line-height),\n      size: map.get($theme, text-field-input-text-size),\n      tracking: map.get($theme, text-field-input-text-tracking),\n      weight: map.get($theme, text-field-input-text-weight),\n    )\n  );\n  @include _text-field-label-text-typography(\n    (\n      font: map.get($theme, text-field-label-text-font),\n      line-height: map.get($theme, text-field-label-text-line-height),\n      size: map.get($theme, text-field-label-text-size),\n      tracking: map.get($theme, text-field-label-text-tracking),\n      weight: map.get($theme, text-field-label-text-weight),\n    )\n  );\n  @include _text-field-label-text-populated-typography(\n    (\n      line-height: map.get($theme, text-field-label-text-populated-line-height),\n      size: map.get($theme, text-field-label-text-populated-size),\n    )\n  );\n  @include _text-field-supporting-text-typography(\n    (\n      font: map.get($theme, text-field-supporting-text-font),\n      line-height: map.get($theme, text-field-supporting-text-line-height),\n      size: map.get($theme, text-field-supporting-text-size),\n      tracking: map.get($theme, text-field-supporting-text-tracking),\n      weight: map.get($theme, text-field-supporting-text-weight),\n    )\n  );\n}\n\n@mixin _text-field-supporting-text-typography($typography-theme) {\n  & + .mdc-select-helper-text {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _text-field-input-text-typography($typography-theme) {\n  .mdc-select__selected-text {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _text-field-label-text-populated-typography($typography-theme) {\n  .mdc-floating-label--float-above,\n  // Used for CSS specificity to match with selector used in `outlined-height()`.\n  &.mdc-select--with-leading-icon .mdc-select__anchor .mdc-notched-outline .mdc-floating-label.mdc-floating-label--float-above {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _text-field-label-text-typography($typography-theme) {\n  .mdc-floating-label {\n    @include typography.theme-styles($typography-theme);\n  }\n\n  @if map.get($typography-theme, 'size') {\n    &.mdc-select--outlined .mdc-select__anchor {\n      @include notched-outline-mixins.floating-label-float-font-size(\n        $font-size: map.get($typography-theme, 'size')\n      );\n    }\n  }\n}\n\n@mixin _error-outline-color($color) {\n  &.mdc-select--invalid {\n    @include outline-color($color);\n  }\n}\n\n@mixin _error-text-field-leading-icon-color($color) {\n  &.mdc-select--invalid {\n    @include _text-field-leading-icon-color($color);\n  }\n}\n\n@mixin _text-field-leading-icon-color($color) {\n  @include _if-enabled {\n    @include _set-text-field-leading-icon-color(\n      state.get-default-state($color)\n    );\n\n    &:not(.mdc-select--focused):hover {\n      @include _set-text-field-leading-icon-color(\n        state.get-hover-state($color)\n      );\n    }\n\n    @include _if-focused {\n      @include _set-text-field-leading-icon-color(\n        state.get-focus-state($color)\n      );\n    }\n  }\n\n  @include _if-disabled {\n    @include _set-text-field-leading-icon-color(\n      state.get-disabled-state($color)\n    );\n  }\n}\n\n@mixin _set-text-field-leading-icon-color($color) {\n  .mdc-select__anchor .mdc-select__icon {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _error-label-text-color($color) {\n  &.mdc-select--invalid {\n    @include label-color($color);\n  }\n}\n\n@mixin _error-input-text-color($color) {\n  &.mdc-select--invalid {\n    @include ink-color($color);\n  }\n}\n\n@mixin _text-field-trailing-icon-color($color) {\n  @include dropdown-icon-color($color);\n}\n\n@mixin _text-field-error-trailing-icon-color($color) {\n  &.mdc-select--invalid {\n    @include dropdown-icon-color($color);\n  }\n}\n\n@mixin _text-field-error-active-indicator-color($color) {\n  &.mdc-select--invalid {\n    @include bottom-line-color($color);\n  }\n}\n\n@mixin _text-field-active-indicator-height($height) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.height(state.get-default-state($height));\n    @include line-ripple-mixins.active-height(state.get-focus-state($height));\n  }\n}\n\n@mixin _menu-list-item-with-leading-icon-leading-icon-color($color) {\n  &:not(.mdc-select--disabled) .mdc-select__option .mdc-select__icon {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _menu-list-item-with-leading-icon-leading-icon-size($size) {\n  &:not(.mdc-select--disabled) .mdc-select__option .mdc-select__icon {\n    @include theme.property(font-size, $size);\n  }\n}\n\n@mixin _menu-list-item-selected-container-color($color) {\n  .mdc-select__option {\n    @include list-evolution-mixins.list-item-selected-container-color($color);\n  }\n}\n\n@mixin _menu-list-item-label-text-typography($typography-theme) {\n  .mdc-select__option {\n    @include list-evolution-mixins.list-primary-text-typography(\n      $typography-theme\n    );\n  }\n}\n\n@mixin _menu-list-item-label-text-color($color) {\n  .mdc-select__option {\n    @include list-evolution-mixins.list-primary-text-ink-color($color);\n  }\n}\n\n@mixin _menu-list-item-container-height($height) {\n  .mdc-select__option {\n    @include list-evolution-mixins.list-item-height($height);\n  }\n}\n\n@mixin _menu-list-item-state-layer($ripple-theme) {\n  .mdc-list-item:not(.mdc-list-item--disabled) {\n    @include ripple-theme.theme-styles(\n      $ripple-theme,\n      $ripple-target: list-evolution-mixins.$ripple-target\n    );\n  }\n}\n\n@mixin _menu-divider-color($color) {\n  .mdc-select__list {\n    @include list-evolution-mixins.divider-color($color);\n  }\n}\n\n@mixin _menu-divider-height($height) {\n  .mdc-select__list {\n    @include list-evolution-mixins.divider-height($height);\n  }\n}\n\n@mixin _menu-container-color($color) {\n  .mdc-select__menu {\n    @include menu-surface-mixins.fill-color($color);\n  }\n}\n\n@mixin _menu-container-elevation($elevation) {\n  @if $elevation {\n    .mdc-select__menu {\n      @include elevation-theme.shadow(map.get($elevation, shadow));\n      @include elevation-theme.overlay-opacity(\n        map.get($elevation, overlay-opacity)\n      );\n    }\n  }\n}\n\n@mixin _menu-container-shape($shape) {\n  .mdc-select__menu {\n    @include menu-surface-mixins.shape-radius($shape);\n  }\n}\n\n@mixin _menu-container-surface-tint-layer-color($color) {\n  .mdc-select__menu {\n    @include elevation-theme.overlay-container-color($color);\n  }\n}\n\n@mixin menu-list-item-secondary-label-text-color($color) {\n  .mdc-select__list {\n    @include list-evolution-mixins.list-secondary-text-ink-color($color);\n  }\n}\n\n@mixin menu-list-item-secondary-label-text-typography($typography-theme) {\n  .mdc-select__list {\n    @include list-evolution-mixins.list-secondary-text-typography(\n      $typography-theme\n    );\n  }\n}\n\n/// Sets the min-width of the select.\n/// @param {Number} $min-width - The desired min-width.\n/// @deprecated using this mixin is no longer required, and clients may set\n///             the attribute directly\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    min-width: $min-width;\n  }\n}\n\n/// Sets the select behavior to change width dynamically based on content.\n/// @param {Number} $min-width - The min-width of the select, which should be\n///     large enough to allow the label (if exists) to display in full.\n@mixin variable-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__anchor {\n    @include feature-targeting.targets($feat-structure) {\n      width: 100%;\n      min-width: $min-width;\n    }\n  }\n}\n\n@mixin ink-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _ink-color(state.get-default-state($color-or-map), $query: $query);\n  }\n\n  @include _if-disabled {\n    @include _ink-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _container-fill-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n  }\n\n  @include _if-disabled {\n    @include _container-fill-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin dropdown-icon-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _dropdown-icon-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:not(.mdc-select--focused):hover {\n      @include _dropdown-icon-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include _if-focused {\n      @include _dropdown-icon-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  @include _if-disabled {\n    @include _dropdown-icon-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin label-floating-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _label-floating-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:not(.mdc-select--focused):hover {\n      @include _label-floating-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin bottom-line-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _bottom-line-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    // bottom line inactive/active are on different elements, does not need\n    // to check for :not() focused\n    &:hover {\n      @include _bottom-line-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include _focused-line-ripple-color(\n      state.get-focus-state($color-or-map),\n      $query: $query\n    );\n  }\n\n  @include _if-disabled {\n    @include _bottom-line-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin label-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _label-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    @include _if-focused {\n      @include _label-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    &:not(.mdc-select--focused):hover {\n      @include _label-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  @include _if-disabled {\n    @include _label-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin outline-color($color-or-map, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _outline-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:not(.mdc-select--focused) .mdc-select__anchor:hover {\n      @include _hover-outline-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include _if-focused {\n      @include _focused-outline-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  @include _if-disabled {\n    @include _outline-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n@mixin outline-width($width, $query: feature-targeting.all()) {\n  @include _if-enabled {\n    @include _outline-width(state.get-default-state($width), $query: $query);\n\n    &:not(.mdc-select--focused) .mdc-select__anchor:hover {\n      @include _outline-width(state.get-hover-state($width), $query: $query);\n    }\n\n    @include _if-focused {\n      .mdc-notched-outline {\n        @include _outline-width(state.get-focus-state($width), $query: $query);\n      }\n    }\n  }\n}\n\n@mixin _outline-width($width, $query: feature-targeting.all()) {\n  @if $width {\n    @include notched-outline-mixins.stroke-width($width, $query: $query);\n  }\n}\n\n///\n/// Sets the dropdown icon to the specified size.\n///\n@mixin dropdown-icon-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__dropdown-icon {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(width, $size);\n      @include theme.property(height, $size);\n    }\n  }\n}\n\n@mixin filled-shape-radius(\n  $radius,\n  $density-scale: $density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  $masked-radius: if(\n    (meta.type-of($radius) == 'list') and (list.length($radius) > 2),\n    shape-functions.mask-radius($radius, 1 1 1 1),\n    shape-functions.mask-radius($radius, 1 1 0 0)\n  );\n\n  $fallback: if(\n    custom-properties.is-custom-prop($radius),\n    custom-properties.get-fallback($radius),\n    null\n  );\n\n  @if meta.type-of($fallback) == 'list' {\n    $fallback: css.unpack-value($fallback);\n    $first: list.nth($masked-radius, 1);\n    $second: list.nth($masked-radius, 2);\n    $third: list.nth($masked-radius, 3);\n    $fourth: list.nth($masked-radius, 4);\n    $masked-radius: (\n      if(\n        custom-properties.is-custom-prop($first),\n        custom-properties.set-fallback($first, list.nth($fallback, 1)),\n        $first\n      ),\n      if(\n        custom-properties.is-custom-prop($second),\n        custom-properties.set-fallback($second, list.nth($fallback, 2)),\n        $second\n      ),\n      if(\n        custom-properties.is-custom-prop($third),\n        custom-properties.set-fallback($third, list.nth($fallback, 3)),\n        $third\n      ),\n      if(\n        custom-properties.is-custom-prop($fourth),\n        custom-properties.set-fallback($fourth, list.nth($fallback, 4)),\n        $fourth\n      )\n    );\n  }\n\n  .mdc-select__anchor {\n    @include shape-mixins.radius(\n      $masked-radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n}\n\n@mixin outline-shape-radius(\n  $radius,\n  $density-scale: $density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all(),\n  $height: null\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if not $height {\n    $height: density-functions.prop-value(\n      $density-config: $density-config,\n      $density-scale: $density-scale,\n      $property-name: height,\n    );\n  }\n\n  .mdc-notched-outline {\n    @include notched-outline-mixins.shape-radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $height\n  );\n  $unpacked-radius: shape-functions.unpack-radius($resolved-radius);\n  $top-left-radius: list.nth($unpacked-radius, 1);\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n\n  @if (\n    $top-left-is-custom-prop or\n      $top-left-radius-px >\n      notched-outline-variables.$leading-width\n  ) {\n    .mdc-select__anchor {\n      @include _apply-outline-shape-padding(\n        padding-left,\n        $top-left-radius,\n        $add-label-padding: true,\n        $query: $query\n      );\n\n      @include rtl.rtl {\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          padding-left: 0;\n        }\n        @include _apply-outline-shape-padding(\n          padding-right,\n          $top-left-radius,\n          $add-label-padding: true,\n          $query: $query\n        );\n      }\n    }\n\n    + .mdc-select-helper-text {\n      @include _apply-outline-shape-padding(\n        margin-left,\n        $top-left-radius,\n        $add-label-padding: true,\n        $query: $query\n      );\n\n      @include rtl.rtl {\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          margin-left: 0;\n        }\n        @include _apply-outline-shape-padding(\n          margin-right,\n          $top-left-radius,\n          $add-label-padding: true,\n          $query: $query\n        );\n      }\n    }\n\n    // Unlike textfield, select does not need to re-apply leading icon padding.\n    // This is because select only has one potential leading class, not two\n    // extra classes like textfield (leading + trailing). Textfield's two extra\n    // classes can cause specificity conflicts, requiring everything to be\n    // re-applied.\n  }\n}\n\n///\n/// Sets density scale for filled select variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled selects at which to allow floating labels.\n///\n@mixin filled-density(\n  $density-scale,\n  $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include filled-height(\n    $height,\n    $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n    $query: $query\n  );\n  @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for filled select variant with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled selects at which to allow floating labels.\n///\n@mixin filled-with-leading-icon-density(\n  $density-scale,\n  $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include filled-with-leading-icon-height(\n    $height,\n    $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n    $query: $query\n  );\n  @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select (Excluding outlined select with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-height($height, $query: $query);\n  @include _list-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-with-leading-icon-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-with-leading-icon-height($height, $query: $query);\n  @include _list-density($density-scale, $query: $query);\n}\n\n@mixin _list-density($density-scale, $query) {\n  @include list-mixins.deprecated-single-line-density(\n    $density-scale,\n    $query: $query\n  );\n  .mdc-select__one-line-option {\n    @include list-evolution-mixins.one-line-item-density(\n      $density-scale,\n      $exclude-variants: true,\n      $query: $query\n    );\n  }\n  .mdc-select__two-line-option {\n    @include list-evolution-mixins.two-line-item-density(\n      $density-scale,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets height of default select variant.\n///\n/// @param {Number} $new-height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n///     that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-height(\n  $new-height,\n  $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n  $filled-baseline-top: $filled-baseline-top,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__anchor {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $new-height);\n    }\n\n    // Filled variant is aligned to baseline...\n    @include typography-mixins.baseline(\n      $top: $filled-baseline-top,\n      $display: flex,\n      $query: $query\n    );\n    // ...unless it is too small to display a label\n    // TODO(b/283457421): Account for dynamic height\n    @if _is-less-than($new-height, $minimum-height-for-filled-label) {\n      @include center-aligned($query: $query);\n\n      @include feature-targeting.targets($feat-structure) {\n        .mdc-floating-label {\n          display: none;\n        }\n      }\n    }\n  }\n\n  // No-label variants are always centered\n  &.mdc-select--no-label .mdc-select__anchor {\n    @include center-aligned($query: $query);\n  }\n\n  // TODO(b/283457421): Account for dynamic height\n  @if _is-less-than($new-height, $height) {\n    @include dropdown-icon-size(\n      select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    &.mdc-select--filled {\n      @include truncate-floating-label-max-width(\n        $leading-icon-size: 0,\n        $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n    }\n  }\n}\n\n///\n/// Sets height of filled select variant with leading icon.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n///     that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-with-leading-icon-height(\n  $new-height,\n  $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n  $filled-baseline-top: $filled-baseline-top,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include filled-height(\n    $new-height,\n    $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n    $filled-baseline-top: $filled-baseline-top,\n    $query: $query\n  );\n\n  // TODO(b/283457421): Account for dynamic height\n  @if _is-less-than($new-height, $height) {\n    @include select-icon-theme.size(\n      select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    &.mdc-select--filled {\n      @include truncate-floating-label-max-width(\n        $leading-icon-size: select-icon-theme.$dense-icon-size,\n        $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n    }\n\n    .mdc-deprecated-list-item__graphic {\n      width: select-icon-theme.$dense-icon-size;\n      height: select-icon-theme.$dense-icon-size;\n    }\n\n    @include list-evolution-mixins.item-start-size(\n      $width: select-icon-theme.$dense-icon-size + 12px,\n      $height: select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    .mdc-select__anchor {\n      @include leading-icon-floating-label-position(\n        select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n    }\n  }\n}\n\n///\n/// Sets height of outlined select variant (Excluding outlined select with leading icon).\n///\n/// @param {Number} $new-height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @param {Number} $label-font-size - Defaults to 1rem.\n///\n@mixin outlined-height(\n  $new-height,\n  $keyframe-suffix: null,\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $positionY: get-outlined-label-position-y($new-height);\n\n  @if $keyframe-suffix == null {\n    $modifier: $new-height;\n    @if custom-properties.is-custom-prop($modifier) {\n      $modifier: custom-properties.get-fallback($modifier);\n    }\n    $keyframe-suffix: select-outlined-#{$modifier};\n  }\n\n  .mdc-select__anchor {\n    // Floating label position\n    @include notched-outline-mixins.floating-label-float-position-absolute(\n      $positionY,\n      $font-size: $label-font-size,\n      $query: $query\n    );\n\n    // Floating label animation\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n    @at-root {\n      @include floating-label-mixins.shake-keyframes(\n        $keyframe-suffix,\n        $positionY,\n        $query: $query\n      );\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $new-height);\n    }\n  }\n\n  // TODO(b/283457421): Account for dynamic height\n  @if _is-less-than($new-height, $height) {\n    @include dropdown-icon-size(\n      select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    &.mdc-select--outlined {\n      @include truncate-notched-outline-max-width(\n        $leading-icon-size: 0,\n        $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n    }\n  }\n}\n\n///\n/// Sets height of outlined select with leading icon variant.\n///\n/// @param {Number} $new-height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @param {Number} $label-font-size - Font size for floating label. Defaults to 1rem.\n///\n@mixin outlined-with-leading-icon-height(\n  $new-height,\n  $keyframe-suffix: null,\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__anchor {\n    // TODO(b/283457421): Account for dynamic height\n    @if _is-less-than($new-height, $height) {\n      @include dropdown-icon-size(\n        select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n      @include outlined-with-leading-icon-floating-label-position-animation(\n        $new-height,\n        select-icon-theme.$dense-icon-size,\n        $keyframe-suffix,\n        $label-font-size,\n        $query: $query\n      );\n    } @else {\n      @include outlined-with-leading-icon-floating-label-position-animation(\n        $new-height,\n        select-icon-theme.$icon-size,\n        $keyframe-suffix,\n        $label-font-size,\n        $query: $query\n      );\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $new-height);\n    }\n  }\n\n  // TODO(b/283457421): Account for dynamic height\n  @if _is-less-than($new-height, $height) {\n    .mdc-deprecated-list-item__graphic {\n      width: select-icon-theme.$dense-icon-size;\n      height: select-icon-theme.$dense-icon-size;\n    }\n\n    @include list-evolution-mixins.item-start-size(\n      $width: select-icon-theme.$dense-icon-size + 12px,\n      $height: select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    @include select-icon-theme.size(\n      select-icon-theme.$dense-icon-size,\n      $query: $query\n    );\n\n    &.mdc-select--outlined {\n      @include truncate-notched-outline-max-width(\n        $leading-icon-size: select-icon-theme.$dense-icon-size,\n        $dropdown-icon-size: select-icon-theme.$dense-icon-size,\n        $query: $query\n      );\n    }\n  }\n}\n\n// $add-label-padding is copied from textfield's mixin, even though select\n// always sets it to true. This is to try and keep things aligned between select\n// and textfield for when these styles are refactored into shared styles.\n@mixin _apply-outline-shape-padding(\n  $property,\n  $padding,\n  $add-label-padding: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $padding-is-custom-prop: custom-properties.is-custom-prop($padding);\n  $padding-px: $padding;\n  @if ($padding-is-custom-prop) {\n    $padding-px: custom-properties.get-fallback($padding);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    // The shape should only change the padding if the radius becomes greater\n    // than the default padding. That means we need to add more padding.\n    @if ($padding-px > notched-outline-variables.$leading-width) {\n      // Set a px value if it's greater. This is either the only value (if\n      // we're given an exact value), or an IE11 fallback if we're given a\n      // custom property and the fallback value is greater than the padding.\n      $value: $padding-px;\n      @if ($add-label-padding) {\n        // If this is for the top-left leading, add the notched outline padding\n        // to keep it aligned with the label\n        $value: $padding-px + notched-outline-variables.$padding;\n      }\n\n      @include rtl.ignore-next-line();\n      #{$property}: $value;\n      @include gss.annotate(\n        (\n          alternate: $padding-is-custom-prop,\n        )\n      );\n    }\n    @if ($padding-is-custom-prop) {\n      // If it's a custom property, always add it since the value may change\n      // to be greater than the padding at runtime, even if the fallback is\n      // not currently greater than the default padding.\n      $value: custom-properties.create-var($padding);\n      @if ($add-label-padding) {\n        $value: calc(#{$value} + #{notched-outline-variables.$padding});\n      }\n\n      // Interpolation is a workaround for sass/sass#3259.\n      @supports (top: max(#{0%})) {\n        // A max() function makes this runtime dynamic. The padding will be\n        // whichever is greater: the default horizontal padding, or the\n        // calculated custom property plus extra padding.\n        @include rtl.ignore-next-line();\n        #{$property}: max(#{$anchor-padding-left}, #{$value});\n      }\n    }\n  }\n}\n\n// Removes filled baseline alignment\n@mixin center-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__selected-text {\n    @include typography-mixins.zero-width-prefix($query: $query);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    // In order for a flexbox container to participate in baseline alignment,\n    // it follows these rules to determine where its baseline is:\n    // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n    //\n    // In order to avoid leading icons \"controlling\" the baseline (since they\n    // are the first child), flexbox will generate a baseline from any child\n    // flex items that participate in baseline alignment.\n    //\n    // Icons are set to \"align-self: center\", while all other children are\n    // aligned to baseline. The next problem is deciding which child is\n    // used to determine the baseline.\n    //\n    // According to spec, the item with the largest distance between its\n    // baseline and the edge of the cross axis is placed flush with that edge,\n    // making it the baseline of the container.\n    // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n    //\n    // For the filled variant, the pseudo ::before strut is the \"largest\"\n    // child since the input has a height of 28px and the strut is 40px. We\n    // can emulate center alignment and force the baseline to use the input\n    // text by making the input the full height of the container and removing\n    // the baseline strut.\n    //\n    // IE11 does not respect this, and makes the leading icon (if present)\n    // the baseline.\n    .mdc-select__selected-text-container {\n      height: 100%;\n      display: inline-flex;\n      align-items: center;\n    }\n\n    &::before {\n      display: none;\n    }\n  }\n}\n\n///\n/// Sets the position of the floating label for a select with leading icon.\n/// @param {number} $icon-size - The size of the leading icon.\n///\n@mixin leading-icon-floating-label-position(\n  $icon-size: select-icon-theme.$icon-size,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $icon-total-width: $icon-size + 2 * select-icon-theme.$icon-horizontal-margin;\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $icon-total-width);\n    }\n  }\n}\n\n///\n/// Sets the floating label position and animations for a given height for an\n/// outlined select with leaing icon.\n/// @param {number} $icon-size - The size of the leading icon.\n/// @param {string} $keyframe-suffix - The suffix for the newly generated keyframes.\n/// @param {number} $font-size - The size of the label font. Defaults to 1rem.\n///\n@mixin outlined-with-leading-icon-floating-label-position-animation(\n  $height,\n  $icon-size,\n  $keyframe-suffix: select-outlined-leading-icon-#{$height},\n  $font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $icon-total-width: $icon-size + 2 * select-icon-theme.$icon-horizontal-margin;\n  $resting-position-x: $icon-total-width -\n    select-icon-theme.$icon-horizontal-margin;\n  $float-position-y: get-outlined-label-position-y($height);\n  $float-position-x: $icon-size + select-icon-theme.$icon-horizontal-margin -\n    notched-outline-variables.$notch-gutter-size;\n\n  // Resting label position\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $resting-position-x);\n    }\n  }\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    $float-position-y,\n    $float-position-x,\n    $font-size: $font-size,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    $keyframe-suffix,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix,\n      $float-position-y,\n      $float-position-x,\n      $query: $query\n    );\n  }\n\n  $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n  @include rtl.rtl {\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n  }\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix-rtl,\n      $float-position-y,\n      -($float-position-x),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Truncates the max-width of the floating label according to sizes of the\n/// leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin truncate-floating-label-max-width(\n  $leading-icon-size,\n  $dropdown-icon-size,\n  $query: feature-targeting.all()\n) {\n  $truncation: select-icon-theme.$icon-horizontal-margin * 2 +\n    $dropdown-icon-size;\n\n  @if $leading-icon-size > 0 {\n    $truncation: $truncation +\n      select-icon-theme.$icon-horizontal-margin *\n      2 +\n      $leading-icon-size;\n  } @else {\n    $truncation: $truncation + $outline-label-offset;\n  }\n\n  .mdc-floating-label {\n    @include floating-label-mixins.max-width(\n      calc(100% - #{$truncation}),\n      $query: $query\n    );\n  }\n\n  .mdc-floating-label--float-above {\n    $scale: floating-label-variables.$float-scale;\n    @include floating-label-mixins.max-width(\n      calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Truncates the max-width of the notched outline according to the sizes of\n/// the leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin truncate-notched-outline-max-width(\n  $leading-icon-size,\n  $dropdown-icon-size,\n  $query: feature-targeting.all()\n) {\n  $truncation: select-icon-theme.$icon-horizontal-margin * 2 +\n    $dropdown-icon-size + notched-outline-variables.$leading-width;\n\n  @if $leading-icon-size > 0 {\n    $truncation: $truncation +\n      select-icon-theme.$icon-horizontal-margin +\n      $leading-icon-size;\n  }\n  .mdc-select__anchor {\n    @include notched-outline-mixins.notch-max-width(\n      calc(100% - #{$truncation}),\n      $query: $query\n    );\n  }\n}\n\n/// Selector for focused state\n/// @access private\n@mixin _if-focused {\n  &.mdc-select--focused {\n    @content;\n  }\n}\n\n/// Selector for enabled state\n/// @access private\n@mixin _if-enabled {\n  &:not(.mdc-select--disabled) {\n    @content;\n  }\n}\n\n/// Selector for disabled state\n/// @access private\n@mixin _if-disabled {\n  &.mdc-select--disabled {\n    @content;\n  }\n}\n\n@mixin _ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    .mdc-select__selected-text {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin _container-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    .mdc-select__anchor {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n@mixin _bottom-line-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-line-ripple {\n      @include line-ripple-mixins.inactive-color($color, $query: $query);\n    }\n  }\n}\n\n@mixin _focused-line-ripple-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-line-ripple {\n      @include line-ripple-mixins.active-color($color, $query: $query);\n    }\n  }\n}\n\n@mixin _outline-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n@mixin _hover-outline-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-notched-outline {\n      @include notched-outline-mixins.color($color, $query: $query);\n    }\n  }\n}\n\n@mixin _focused-outline-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-notched-outline {\n      @include notched-outline-mixins.color($color, $query: $query);\n    }\n  }\n}\n\n@mixin _label-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-floating-label {\n      @include floating-label-mixins.ink-color($color, $query: $query);\n    }\n  }\n}\n\n@mixin _label-floating-color($color, $query: feature-targeting.all()) {\n  @if $color {\n    .mdc-floating-label--float-above {\n      @include floating-label-mixins.ink-color($color, $query: $query);\n    }\n  }\n}\n\n///\n/// Sets the dropdown icon to the specified color.\n/// @access private\n///\n@mixin _dropdown-icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      .mdc-select__dropdown-icon {\n        @include theme.property(fill, $color);\n      }\n    }\n  }\n}\n\n///\n/// Compare the two inputs even if they're custom-prop objects.\n/// @access private\n///\n@function _is-less-than($subject, $object) {\n  $fallback-subject: if(\n    custom-properties.is-custom-prop($subject),\n    custom-properties.get-fallback($subject),\n    $subject\n  );\n\n  $fallback-object: if(\n    custom-properties.is-custom-prop($object),\n    custom-properties.get-fallback($object),\n    $object\n  );\n\n  @return $fallback-subject < $fallback-object;\n}\n"
  },
  {
    "path": "packages/mdc-select/_select.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:math';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/evolution-mixins' as list-evolution-mixins;\n@use '@material/touch-target/touch-target';\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/rtl/rtl';\n@use '@material/typography/mixins' as typography-mixins;\n@use './select-helper-text-theme';\n@use './select-icon-theme';\n@use './select-theme';\n@use './select-filled';\n@use './select-outlined';\n@use './select-ripple';\n@use './select-helper-text';\n@use './select-icon';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include _static-styles-base($query);\n  @include select-filled.static-styles($query);\n  @include select-outlined.static-styles($query);\n}\n\n@mixin _static-styles-base($query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select {\n    // Floating label private mixin\n    @include _floating-label($query: $query);\n\n    @include _option-side-padding(16px, $query: $query);\n    @include _option-graphic-trailing-margin(12px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      position: relative; // Menu is absolutely positioned relative to this.\n      &[hidden] {\n        display: none;\n      }\n    }\n\n    &__dropdown-icon {\n      @include _dropdown-icon-base($query: $query);\n      @include _dropdown-icon-inactive($query: $query);\n\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-flex;\n        position: relative;\n        align-self: center;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        pointer-events: none;\n      }\n\n      .mdc-select--activated & {\n        @include _dropdown-icon-active($query: $query);\n      }\n    }\n  }\n\n  .mdc-select__anchor {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: 0;\n      flex: 1 1 auto;\n      position: relative;\n      box-sizing: border-box;\n      overflow: hidden;\n      outline: none;\n      cursor: pointer;\n    }\n  }\n\n  .mdc-select__touch {\n    @include touch-target.touch-target($query: $query, $height: 48px);\n  }\n\n  @include _text($query: $query);\n\n  .mdc-select--disabled {\n    @include _disabled($query: $query);\n  }\n\n  .mdc-select--with-leading-icon {\n    @include _option-side-padding(12px, $query: $query);\n  }\n\n  @include _list($query: $query);\n\n  @include select-filled.core-styles($query: $query);\n  @include select-outlined.core-styles($query: $query);\n  @include select-ripple.core-styles($query: $query);\n  @include select-helper-text.helper-text-core-styles($query: $query);\n  @include select-icon.icon-core-styles($query: $query);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include _static-styles-base($query);\n\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select {\n    @include select-theme.ink-color(\n      (\n        default: select-theme.$ink-color,\n        disabled: select-theme.$disabled-ink-color,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.label-color(\n      (\n        default: select-theme.$label-color,\n        focus: select-theme.$focused-label-color,\n        disabled: select-theme.$disabled-label-color,\n      ),\n      $query: $query\n    );\n\n    @include select-theme.dropdown-icon-color(\n      (\n        default: select-theme.$dropdown-icon-color,\n        focus: primary,\n        disabled: select-theme.$disabled-dropdown-icon-color,\n      ),\n      $query: $query\n    );\n\n    @include select-helper-text-theme.helper-text-color(\n      (\n        default: select-helper-text-theme.$helper-text-color,\n        disabled: select-helper-text-theme.$disabled-helper-text-color,\n      ),\n      $query: $query\n    );\n\n    @include select-icon-theme.icon-color(\n      (\n        default: select-icon-theme.$icon-color,\n        disabled: select-icon-theme.$disabled-icon-color,\n      ),\n      $query: $query\n    );\n\n    // High-contrast mode support\n    @include dom-mixins.forced-colors-mode() {\n      $gray-text: (\n        disabled: GrayText,\n      );\n      @include select-theme.ink-color($gray-text, $query: $query);\n      @include select-theme.dropdown-icon-color($gray-text, $query: $query);\n      @include select-theme.label-color($gray-text, $query: $query);\n      @include select-theme.bottom-line-color($gray-text, $query: $query);\n      @include select-theme.outline-color($gray-text, $query: $query);\n      @include select-icon-theme.icon-color($gray-text, $query: $query);\n      @include select-helper-text-theme.helper-text-color(\n        $gray-text,\n        $query: $query\n      );\n    }\n\n    @include _padding-horizontal(\n      $left: select-theme.$anchor-padding-left,\n      $left-with-leading-icon:\n        select-theme.$anchor-padding-left-with-leading-icon,\n      $right: select-theme.$anchor-padding-right,\n      $query: $query\n    );\n    @include select-icon-theme.size(\n      select-icon-theme.$icon-size,\n      $query: $query\n    );\n    @include select-theme.dropdown-icon-size(\n      select-icon-theme.$icon-size,\n      $query: $query\n    );\n\n    &__dropdown-icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          margin,\n          select-icon-theme.$icon-horizontal-margin,\n          select-icon-theme.$icon-horizontal-margin\n        );\n      }\n    }\n  }\n\n  .mdc-select__anchor {\n    @include floating-label-mixins.float-position(\n      select-theme.$label-position-y,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      width: select-theme.$default-width;\n    }\n  }\n\n  .mdc-select--invalid {\n    @include select-theme.label-color(\n      (\n        default: select-theme.$error-color,\n        focus: select-theme.$error-color,\n      ),\n      $query: $query\n    );\n    @include select-helper-text-theme.helper-text-validation-color(\n      select-theme.$error-color,\n      $query: $query\n    );\n    @include select-theme.dropdown-icon-color(\n      (\n        default: select-theme.$error-color,\n        focus: select-theme.$error-color,\n      ),\n      $query: $query\n    );\n  }\n\n  @include _text-container-height($query: $query);\n}\n\n@mixin _list($query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include dom-mixins.forced-colors-mode() {\n    .mdc-select__menu::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n  }\n\n  .mdc-select__menu .mdc-deprecated-list,\n  .mdc-select__menu .mdc-list {\n    @include select-icon-theme.icon-horizontal-margins(0, 0, $query: $query);\n    @include list-mixins.deprecated-item-selected-text-color(\n      on-surface,\n      $query: $query\n    );\n  }\n\n  .mdc-select__menu .mdc-list-item__start {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  .mdc-select__option {\n    @include list-evolution-mixins.item-spacing(16px, $query: $query);\n  }\n\n  .mdc-select__one-line-option {\n    @include list-evolution-mixins.one-line-item-height(48px, $query: $query);\n  }\n\n  .mdc-select__two-line-option {\n    @include list-evolution-mixins.two-line-item-height(64px, $query: $query);\n\n    &.mdc-list-item--with-two-lines {\n      .mdc-list-item__start {\n        @include feature-targeting.targets($feat-structure) {\n          margin-top: 20px;\n        }\n      }\n\n      .mdc-list-item__primary-text {\n        @include typography-mixins.text-baseline(\n          $top: 28px,\n          $bottom: 20px,\n          $query: $query\n        );\n      }\n\n      &.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n        @include typography-mixins.text-baseline($top: 36px, $query: $query);\n      }\n    }\n  }\n\n  .mdc-select__option-with-leading-content {\n    @include list-evolution-mixins.item-start-spacing(12px, 0, $query: $query);\n    @include list-evolution-mixins.item-start-size(36px, 24px, $query: $query);\n    @include list-evolution-mixins.item-spacing(0, 12px, $query: $query);\n  }\n\n  .mdc-select__option-with-meta {\n    @include list-evolution-mixins.item-end-spacing(12px, $query: $query);\n  }\n}\n\n///\n/// Sets base dropdown icon styles.\n/// @access private\n///\n@mixin _dropdown-icon-base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__dropdown-icon-active,\n  .mdc-select__dropdown-icon-inactive {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n\n  .mdc-select__dropdown-icon-graphic {\n    $svg-natural-width: 10px;\n    $svg-natural-height: 5px;\n\n    @include feature-targeting.targets($feat-structure) {\n      width: math.div($svg-natural-width, select-icon-theme.$icon-size) * 100%;\n      height: math.div($svg-natural-height, select-icon-theme.$icon-size) * 100%;\n    }\n  }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to inactive state.\n/// @access private\n///\n@mixin _dropdown-icon-inactive($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-select__dropdown-icon-inactive {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity select-theme.$icon-inactive-fade-in-duration linear\n        select-theme.$icon-inactive-fade-out-duration;\n    }\n  }\n\n  .mdc-select__dropdown-icon-active {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity select-theme.$icon-inactive-fade-out-duration linear;\n    }\n  }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to activated state.\n/// @access private\n///\n@mixin _dropdown-icon-active($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-select__dropdown-icon-inactive {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity select-theme.$icon-active-fade-out-duration linear;\n    }\n  }\n\n  .mdc-select__dropdown-icon-active {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: opacity select-theme.$icon-active-fade-in-duration linear\n        select-theme.$icon-active-fade-out-duration;\n    }\n  }\n}\n\n///\n/// Sets the side padding for option text.\n/// @access private\n///\n@mixin _option-side-padding($side-padding, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__menu .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, $side-padding, $side-padding);\n    }\n  }\n}\n\n///\n/// Sets the traliing margin for an option's leading graphic.\n/// @access private\n///\n@mixin _option-graphic-trailing-margin(\n  $margin-right,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__menu .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(margin, right, $margin-right);\n    }\n  }\n}\n\n@mixin _floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n  }\n}\n\n@mixin _text-container-height($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__selected-text-container {\n    @include feature-targeting.targets($feat-structure) {\n      height: select-theme.$selected-text-height;\n    }\n  }\n}\n\n@mixin _text($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-select__selected-text-container {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      appearance: none;\n      pointer-events: none;\n      box-sizing: border-box;\n      width: auto;\n      min-width: 0;\n      flex-grow: 1;\n      border: none;\n      outline: none;\n      padding: 0;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      background-color: transparent;\n      color: inherit; // Override default user agent stylesheet\n    }\n  }\n\n  .mdc-select__selected-text {\n    @include typography-mixins.typography(subtitle1, $query: $query);\n    @include typography-mixins.overflow-ellipsis($query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: block;\n      width: 100%;\n      @include rtl.ignore-next-line();\n      text-align: left;\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n  }\n}\n\n@mixin _disabled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n/// Adds horizontal padding to the selected text\n///\n/// @param {Number} $left - left side padding\n/// @param {Number} $left-with-leading-icon - left-side padding when a leading\n///     icon is present\n/// @param {Number} $right - right-side padding; note that a trailing icon is\n///     always present.\n@mixin _padding-horizontal(\n  $left,\n  $left-with-leading-icon,\n  $right,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-select__anchor {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, $left, $right);\n    }\n  }\n\n  &.mdc-select--with-leading-icon .mdc-select__anchor {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, $left-with-leading-icon, $right);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {Corner} from '@material/menu-surface/constants';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSelectAdapter {\n  /**\n   * Adds class to select anchor element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the select anchor element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns true if the select anchor element contains the given class name.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Activates the bottom line, showing a focused state.\n   */\n  activateBottomLine(): void;\n\n  /**\n   * Deactivates the bottom line.\n   */\n  deactivateBottomLine(): void;\n\n  /**\n   * Returns true if label exists, false if it doesn't.\n   */\n  hasLabel(): boolean;\n\n  /**\n   * Floats label determined based off of the shouldFloat argument.\n   */\n  floatLabel(shouldFloat: boolean): void;\n\n  /**\n   * Returns width of label in pixels, if the label exists.\n   */\n  getLabelWidth(): number;\n\n  /**\n   * Styles the label as required, if the label exists.\n   */\n  setLabelRequired(isRequired: boolean): void;\n\n  /**\n   * Returns true if outline element exists, false if it doesn't.\n   */\n  hasOutline(): boolean;\n\n  /**\n   * Only implement if outline element exists.\n   */\n  notchOutline(labelWidth: number): void;\n\n  /**\n   * Closes notch in outline element, if the outline exists.\n   */\n  closeOutline(): void;\n\n  /**\n   * Sets the line ripple transform origin center.\n   */\n  setRippleCenter(normalizedX: number): void;\n\n  /**\n   * Emits a change event when an element is selected.\n   */\n  notifyChange(value: string): void;\n\n  /**\n   * Sets the text content of the selectedText element to the given string.\n   */\n  setSelectedText(text: string): void;\n\n  /**\n   * Returns whether the select anchor is focused.\n   */\n  isSelectAnchorFocused(): boolean;\n\n  /**\n   * Gets the given attribute on the select anchor element.\n   */\n  getSelectAnchorAttr(attr: string): string|null;\n\n  /**\n   * Sets the given attribute on the select anchor element.\n   */\n  setSelectAnchorAttr(attr: string, value: string): void;\n\n  /**\n   * Removes the given attribute on the select anchor element.\n   */\n  removeSelectAnchorAttr(attr: string): void;\n\n  // Menu-related methods ======================================================\n  /**\n   * Adds class to the menu element.\n   */\n  addMenuClass(className: string): void;\n\n  /**\n   * Removes a class from the menu element.\n   */\n  removeMenuClass(className: string): void;\n\n  /**\n   * Opens the menu.\n   */\n  openMenu(): void;\n\n  /**\n   * Closes the menu.\n   */\n  closeMenu(): void;\n\n  /**\n   * Returns the select anchor element.\n   */\n  getAnchorElement(): Element|null;\n\n  /**\n   * Sets the menu anchor element.\n   */\n  setMenuAnchorElement(anchorEl: Element): void;\n\n  /**\n   * Sets the menu anchor corner.\n   */\n  setMenuAnchorCorner(anchorCorner: Corner): void;\n\n  /**\n   * Sets whether the menu should wrap focus.\n   */\n  setMenuWrapFocus(wrapFocus: boolean): void;\n\n  /**\n   * Focuses the menu item element at the given index.\n   */\n  focusMenuItemAtIndex(index: number): void;\n\n  /**\n   * Returns the number of menu items.\n   */\n  getMenuItemCount(): number;\n\n  /**\n   * Returns an array representing the VALUE_ATTR attributes of each menu item.\n   */\n  getMenuItemValues(): string[];\n\n  /**\n   * Gets the text content of the menu item element at the given index.\n   */\n  getMenuItemTextAtIndex(index: number): string;\n\n  /**\n   * Returns the selected index.\n   */\n  getSelectedIndex(): number;\n\n  /**\n   * Sets the selected index in the menu.\n   */\n  setSelectedIndex(index: number): void;\n\n  /**\n   * Returns whether typeahead is in progress in the menu.\n   */\n  isTypeaheadInProgress(): boolean;\n\n  /**\n   * Adds a character to the list typeahead buffer and returns index of the\n   * next item in the list matching the buffer.\n   */\n  typeaheadMatchItem(nextChar: string, startingIndex: number): number;\n}\n"
  },
  {
    "path": "packages/mdc-select/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener, SpecificEventListener} from '@material/base/types';\nimport {MDCFloatingLabel, MDCFloatingLabelFactory} from '@material/floating-label/component';\nimport {MDCLineRipple, MDCLineRippleFactory} from '@material/line-ripple/component';\nimport * as menuSurfaceConstants from '@material/menu-surface/constants';\nimport {MDCMenu, MDCMenuFactory} from '@material/menu/component';\nimport * as menuConstants from '@material/menu/constants';\nimport {MDCMenuItemEvent} from '@material/menu/types';\nimport {MDCNotchedOutline, MDCNotchedOutlineFactory} from '@material/notched-outline/component';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\n\nimport {MDCSelectAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\nimport {MDCSelectFoundation} from './foundation';\nimport {MDCSelectHelperText, MDCSelectHelperTextFactory} from './helper-text/component';\nimport {MDCSelectIcon, MDCSelectIconFactory} from './icon/component';\nimport {MDCSelectEventDetail, MDCSelectFoundationMap} from './types';\n\n/** MDC Select */\nexport class MDCSelect extends MDCComponent<MDCSelectFoundation> {\n  static override attachTo(root: HTMLElement): MDCSelect {\n    return new MDCSelect(root);\n  }\n\n  private ripple!: MDCRipple|null;\n\n  private menu!: MDCMenu;  // assigned in menuSetup()\n\n  private selectAnchor!: HTMLElement;           // assigned in initialize()\n  private selectedText!: HTMLElement;           // assigned in initialize()\n  private hiddenInput!: HTMLInputElement|null;  // assigned in initialize()\n\n  private menuElement!: HTMLElement;              // assigned in menuSetup()\n  private menuItemValues!: string[];              // assigned in menuSetup()\n  private leadingIcon?: MDCSelectIcon;            // assigned in initialize()\n  private helperText!: MDCSelectHelperText|null;  // assigned in initialize()\n  private lineRipple!: MDCLineRipple|null;        // assigned in initialize()\n  private label!: MDCFloatingLabel|null;          // assigned in initialize()\n  private outline!: MDCNotchedOutline|null;       // assigned in initialize()\n\n  // Event handlers\n  private handleFocus!: SpecificEventListener<'focus'>;\n  private handleBlur!: SpecificEventListener<'blur'>;\n  private handleClick!: SpecificEventListener<'click'>;\n  private handleKeydown!: SpecificEventListener<'keydown'>;\n  private handleMenuOpened!: EventListener;\n  private handleMenuClosed!: EventListener;\n  private handleMenuClosing!: EventListener;\n  private handleMenuItemAction!: CustomEventListener<MDCMenuItemEvent>;\n\n  override initialize(\n      labelFactory: MDCFloatingLabelFactory = (el) => new MDCFloatingLabel(el),\n      lineRippleFactory: MDCLineRippleFactory = (el) => new MDCLineRipple(el),\n      outlineFactory:\n          MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),\n      menuFactory: MDCMenuFactory = (el) => new MDCMenu(el),\n      iconFactory: MDCSelectIconFactory = (el) => new MDCSelectIcon(el),\n      helperTextFactory:\n          MDCSelectHelperTextFactory = (el) => new MDCSelectHelperText(el),\n  ) {\n    this.selectAnchor =\n        this.root.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!;\n    this.selectedText =\n        this.root.querySelector<HTMLElement>(strings.SELECTED_TEXT_SELECTOR)!;\n    this.hiddenInput = this.root.querySelector<HTMLInputElement>(\n        strings.HIDDEN_INPUT_SELECTOR)!;\n\n    if (!this.selectedText) {\n      throw new Error(\n          'MDCSelect: Missing required element: The following selector must be present: ' +\n              `'${strings.SELECTED_TEXT_SELECTOR}'`,\n      );\n    }\n\n    if (this.selectAnchor.hasAttribute(strings.ARIA_CONTROLS)) {\n      const helperTextElement = document.getElementById(\n          this.selectAnchor.getAttribute(strings.ARIA_CONTROLS)!);\n      if (helperTextElement) {\n        this.helperText = helperTextFactory(helperTextElement);\n      }\n    }\n\n    this.menuSetup(menuFactory);\n\n    const labelElement =\n        this.root.querySelector<HTMLElement>(strings.LABEL_SELECTOR);\n    this.label = labelElement ? labelFactory(labelElement) : null;\n\n    const lineRippleElement =\n        this.root.querySelector<HTMLElement>(strings.LINE_RIPPLE_SELECTOR);\n    this.lineRipple =\n        lineRippleElement ? lineRippleFactory(lineRippleElement) : null;\n\n    const outlineElement =\n        this.root.querySelector<HTMLElement>(strings.OUTLINE_SELECTOR);\n    this.outline = outlineElement ? outlineFactory(outlineElement) : null;\n\n    const leadingIcon =\n        this.root.querySelector<HTMLElement>(strings.LEADING_ICON_SELECTOR);\n    if (leadingIcon) {\n      this.leadingIcon = iconFactory(leadingIcon);\n    }\n\n    if (!this.root.classList.contains(cssClasses.OUTLINED)) {\n      this.ripple = this.createRipple();\n    }\n  }\n\n  /**\n   * Initializes the select's event listeners and internal state based\n   * on the environment's state.\n   */\n  override initialSyncWithDOM() {\n    this.handleFocus = () => {\n      this.foundation.handleFocus();\n    };\n    this.handleBlur = () => {\n      this.foundation.handleBlur();\n    };\n    this.handleClick = (event) => {\n      this.selectAnchor.focus();\n      this.foundation.handleClick(this.getNormalizedXCoordinate(event));\n    };\n    this.handleKeydown = (event) => {\n      this.foundation.handleKeydown(event);\n    };\n    this.handleMenuItemAction = (event) => {\n      this.foundation.handleMenuItemAction(event.detail.index);\n    };\n    this.handleMenuOpened = () => {\n      this.foundation.handleMenuOpened();\n    };\n    this.handleMenuClosed = () => {\n      this.foundation.handleMenuClosed();\n    };\n    this.handleMenuClosing = () => {\n      this.foundation.handleMenuClosing();\n    };\n\n    this.selectAnchor.addEventListener('focus', this.handleFocus);\n    this.selectAnchor.addEventListener('blur', this.handleBlur);\n\n    this.selectAnchor.addEventListener(\n        'click', this.handleClick as EventListener);\n\n    this.selectAnchor.addEventListener('keydown', this.handleKeydown);\n    this.menu.listen(\n        menuSurfaceConstants.strings.CLOSED_EVENT, this.handleMenuClosed);\n    this.menu.listen(\n        menuSurfaceConstants.strings.CLOSING_EVENT, this.handleMenuClosing);\n    this.menu.listen(\n        menuSurfaceConstants.strings.OPENED_EVENT, this.handleMenuOpened);\n    this.menu.listen(\n        menuConstants.strings.SELECTED_EVENT, this.handleMenuItemAction);\n\n    if (this.hiddenInput) {\n      if (this.hiddenInput.value) {\n        // If the hidden input already has a value, use it to restore the\n        // select's value. This can happen e.g. if the user goes back or (in\n        // some browsers) refreshes the page.\n        this.foundation.setValue(\n            this.hiddenInput.value, /** skipNotify */ true);\n        this.foundation.layout();\n        return;\n      }\n\n      this.hiddenInput.value = this.value;\n    }\n  }\n\n  override destroy() {\n    this.selectAnchor.removeEventListener('focus', this.handleFocus);\n    this.selectAnchor.removeEventListener('blur', this.handleBlur);\n    this.selectAnchor.removeEventListener('keydown', this.handleKeydown);\n    this.selectAnchor.removeEventListener(\n        'click', this.handleClick as EventListener);\n\n    this.menu.unlisten(\n        menuSurfaceConstants.strings.CLOSED_EVENT, this.handleMenuClosed);\n    this.menu.unlisten(\n        menuSurfaceConstants.strings.OPENED_EVENT, this.handleMenuOpened);\n    this.menu.unlisten(\n        menuConstants.strings.SELECTED_EVENT, this.handleMenuItemAction);\n    this.menu.destroy();\n\n    if (this.ripple) {\n      this.ripple.destroy();\n    }\n    if (this.outline) {\n      this.outline.destroy();\n    }\n    if (this.leadingIcon) {\n      this.leadingIcon.destroy();\n    }\n    if (this.helperText) {\n      this.helperText.destroy();\n    }\n\n    super.destroy();\n  }\n\n  get value(): string {\n    return this.foundation.getValue();\n  }\n\n  set value(value: string) {\n    this.foundation.setValue(value);\n  }\n\n  setValue(value: string, skipNotify = false) {\n    this.foundation.setValue(value, skipNotify);\n  }\n\n  get selectedIndex(): number {\n    return this.foundation.getSelectedIndex();\n  }\n\n  set selectedIndex(selectedIndex: number) {\n    this.foundation.setSelectedIndex(selectedIndex, /* closeMenu */ true);\n  }\n\n  setSelectedIndex(selectedIndex: number, skipNotify = false) {\n    this.foundation.setSelectedIndex(\n        selectedIndex, /* closeMenu */ true, skipNotify);\n  }\n\n  get disabled(): boolean {\n    return this.foundation.getDisabled();\n  }\n\n  set disabled(disabled: boolean) {\n    this.foundation.setDisabled(disabled);\n    if (this.hiddenInput) {\n      this.hiddenInput.disabled = disabled;\n    }\n  }\n\n  set leadingIconAriaLabel(label: string) {\n    this.foundation.setLeadingIconAriaLabel(label);\n  }\n\n  /**\n   * Sets the text content of the leading icon.\n   */\n  set leadingIconContent(content: string) {\n    this.foundation.setLeadingIconContent(content);\n  }\n\n  /**\n   * Sets the text content of the helper text.\n   */\n  set helperTextContent(content: string) {\n    this.foundation.setHelperTextContent(content);\n  }\n\n  /**\n   * Enables or disables the default validation scheme where a required select\n   * must be non-empty. Set to false for custom validation.\n   * @param useDefaultValidation Set this to false to ignore default\n   *     validation scheme.\n   */\n  set useDefaultValidation(useDefaultValidation: boolean) {\n    this.foundation.setUseDefaultValidation(useDefaultValidation);\n  }\n\n  /**\n   * Sets the current invalid state of the select.\n   */\n  set valid(isValid: boolean) {\n    this.foundation.setValid(isValid);\n  }\n\n  /**\n   * Checks if the select is in a valid state.\n   */\n  get valid(): boolean {\n    return this.foundation.isValid();\n  }\n\n  /**\n   * Sets the control to the required state.\n   */\n  set required(isRequired: boolean) {\n    this.foundation.setRequired(isRequired);\n  }\n\n  /**\n   * Returns whether the select is required.\n   */\n  get required(): boolean {\n    return this.foundation.getRequired();\n  }\n\n  /**\n   * Re-calculates if the notched outline should be notched and if the label\n   * should float.\n   */\n  layout() {\n    this.foundation.layout();\n  }\n\n  /**\n   * Synchronizes the list of options with the state of the foundation. Call\n   * this whenever menu options are dynamically updated.\n   */\n  layoutOptions() {\n    this.foundation.layoutOptions();\n    this.menu.layout();\n    // Update cached menuItemValues for adapter.\n    this.menuItemValues =\n        this.menu.items.map((el) => el.getAttribute(strings.VALUE_ATTR) || '');\n\n    if (this.hiddenInput) {\n      this.hiddenInput.value = this.value;\n    }\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCSelectAdapter = {\n      ...this.getSelectAdapterMethods(),\n      ...this.getCommonAdapterMethods(),\n      ...this.getOutlineAdapterMethods(),\n      ...this.getLabelAdapterMethods(),\n    };\n    return new MDCSelectFoundation(adapter, this.getFoundationMap());\n  }\n\n  /**\n   * Handles setup for the menu.\n   */\n  private menuSetup(menuFactory: MDCMenuFactory) {\n    this.menuElement =\n        this.root.querySelector<HTMLElement>(strings.MENU_SELECTOR)!;\n    this.menu = menuFactory(this.menuElement);\n    this.menu.hasTypeahead = true;\n    this.menu.singleSelection = true;\n    this.menuItemValues =\n        this.menu.items.map((el) => el.getAttribute(strings.VALUE_ATTR) || '');\n  }\n\n  private createRipple(): MDCRipple {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter({root: this.selectAnchor}),\n      registerInteractionHandler: (eventType, handler) => {\n        this.selectAnchor.addEventListener(eventType, handler);\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.selectAnchor.removeEventListener(eventType, handler);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCRipple(this.selectAnchor, new MDCRippleFoundation(adapter));\n  }\n\n  private getSelectAdapterMethods() {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      getMenuItemAttr: (menuItem: Element, attr: string) =>\n          menuItem.getAttribute(attr),\n      setSelectedText: (text: string) => {\n        this.selectedText.textContent = text;\n\n        let index = this.menu.selectedIndex;\n        if (index === -1) return;\n        index = index instanceof Array ? index[0] : index;\n        const selectedItem = this.menu.items[index];\n        if (!selectedItem) return;\n        this.selectedText.setAttribute(\n            'aria-label', selectedItem.getAttribute('aria-label') || '');\n      },\n      isSelectAnchorFocused: () => document.activeElement === this.selectAnchor,\n      getSelectAnchorAttr: (attr: string) =>\n          this.selectAnchor.getAttribute(attr),\n      setSelectAnchorAttr: (attr: string, value: string) => {\n        this.safeSetAttribute(this.selectAnchor, attr, value);\n      },\n      removeSelectAnchorAttr: (attr: string) => {\n        this.selectAnchor.removeAttribute(attr);\n      },\n      addMenuClass: (className: string) => {\n        this.menuElement.classList.add(className);\n      },\n      removeMenuClass: (className: string) => {\n        this.menuElement.classList.remove(className);\n      },\n      openMenu: () => {\n        this.menu.open = true;\n      },\n      closeMenu: () => {\n        this.menu.open = false;\n      },\n      getAnchorElement: () =>\n          this.root.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!,\n      setMenuAnchorElement: (anchorEl: HTMLElement) => {\n        this.menu.setAnchorElement(anchorEl);\n      },\n      setMenuAnchorCorner: (anchorCorner: menuSurfaceConstants.Corner) => {\n        this.menu.setAnchorCorner(anchorCorner);\n      },\n      setMenuWrapFocus: (wrapFocus: boolean) => {\n        this.menu.wrapFocus = wrapFocus;\n      },\n      getSelectedIndex: () => {\n        const index = this.menu.selectedIndex;\n        return index instanceof Array ? index[0] : index;\n      },\n      setSelectedIndex: (index: number) => {\n        this.menu.selectedIndex = index;\n      },\n      focusMenuItemAtIndex: (index: number) => {\n        this.menu.items[index]?.focus();\n      },\n      getMenuItemCount: () => this.menu.items.length,\n      // Cache menu item values. layoutOptions() updates this cache.\n      getMenuItemValues: () => this.menuItemValues,\n      getMenuItemTextAtIndex: (index: number) =>\n          this.menu.getPrimaryTextAtIndex(index),\n      isTypeaheadInProgress: () => this.menu.typeaheadInProgress,\n      typeaheadMatchItem: (nextChar: string, startingIndex: number) =>\n          this.menu.typeaheadMatchItem(nextChar, startingIndex),\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private getCommonAdapterMethods() {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: (className: string) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className: string) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className: string) => this.root.classList.contains(className),\n      setRippleCenter: (normalizedX: number) => {\n        this.lineRipple && this.lineRipple.setRippleCenter(normalizedX);\n      },\n      activateBottomLine: () => {\n        this.lineRipple && this.lineRipple.activate();\n      },\n      deactivateBottomLine: () => {\n        this.lineRipple && this.lineRipple.deactivate();\n      },\n      notifyChange: (value: string) => {\n        if (this.hiddenInput) {\n          this.hiddenInput.value = value;\n        }\n\n        const index = this.selectedIndex;\n        this.emit<MDCSelectEventDetail>(\n            strings.CHANGE_EVENT, {value, index}, true /* shouldBubble  */);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private getOutlineAdapterMethods() {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      hasOutline: () => Boolean(this.outline),\n      notchOutline: (labelWidth: number) => {\n        this.outline && this.outline.notch(labelWidth);\n      },\n      closeOutline: () => {\n        this.outline && this.outline.closeNotch();\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private getLabelAdapterMethods() {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      hasLabel: () => !!this.label,\n      floatLabel: (shouldFloat: boolean) => {\n        this.label && this.label.float(shouldFloat);\n      },\n      getLabelWidth: () => this.label ? this.label.getWidth() : 0,\n      setLabelRequired: (isRequired: boolean) => {\n        this.label && this.label.setRequired(isRequired);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  /**\n   * Calculates where the line ripple should start based on the x coordinate\n   * within the component.\n   */\n  private getNormalizedXCoordinate(event: MouseEvent|TouchEvent): number {\n    const targetClientRect = (event.target as Element).getBoundingClientRect();\n    const xCoordinate =\n        this.isTouchEvent(event) ? event.touches[0].clientX : event.clientX;\n    return xCoordinate - targetClientRect.left;\n  }\n\n  private isTouchEvent(event: MouseEvent|TouchEvent): event is TouchEvent {\n    return Boolean((event as TouchEvent).touches);\n  }\n\n  /**\n   * Returns a map of all subcomponents to subfoundations.\n   */\n  private getFoundationMap(): Partial<MDCSelectFoundationMap> {\n    return {\n      helperText: this.helperText ? this.helperText.foundationForSelect :\n                                    undefined,\n      leadingIcon: this.leadingIcon ? this.leadingIcon.foundationForSelect :\n                                      undefined,\n    };\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ACTIVATED: 'mdc-select--activated',\n  DISABLED: 'mdc-select--disabled',\n  FOCUSED: 'mdc-select--focused',\n  INVALID: 'mdc-select--invalid',\n  MENU_INVALID: 'mdc-select__menu--invalid',\n  OUTLINED: 'mdc-select--outlined',\n  REQUIRED: 'mdc-select--required',\n  ROOT: 'mdc-select',\n  WITH_LEADING_ICON: 'mdc-select--with-leading-icon',\n};\n\nconst strings = {\n  ARIA_CONTROLS: 'aria-controls',\n  ARIA_DESCRIBEDBY: 'aria-describedby',\n  ARIA_SELECTED_ATTR: 'aria-selected',\n  CHANGE_EVENT: 'MDCSelect:change',\n  HIDDEN_INPUT_SELECTOR: 'input[type=\"hidden\"]',\n  LABEL_SELECTOR: '.mdc-floating-label',\n  LEADING_ICON_SELECTOR: '.mdc-select__icon',\n  LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',\n  MENU_SELECTOR: '.mdc-select__menu',\n  OUTLINE_SELECTOR: '.mdc-notched-outline',\n  SELECTED_TEXT_SELECTOR: '.mdc-select__selected-text',\n  SELECT_ANCHOR_SELECTOR: '.mdc-select__anchor',\n  VALUE_ATTR: 'data-value',\n};\n\nconst numbers = {\n  LABEL_SCALE: 0.75,\n  UNSET_INDEX: -1,\n  CLICK_DEBOUNCE_TIMEOUT_MS: 330,\n};\n\nexport {cssClasses, strings, numbers};\n"
  },
  {
    "path": "packages/mdc-select/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {KEY, normalizeKey} from '@material/dom/keyboard';\nimport {Corner} from '@material/menu-surface/constants';\n\nimport {MDCSelectAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\nimport {MDCSelectHelperTextFoundation} from './helper-text/foundation';\nimport {MDCSelectIconFoundation} from './icon/foundation';\nimport {MDCSelectFoundationMap} from './types';\n\n/** MDC Select Foundation */\nexport class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  /**\n   * See {@link MDCSelectAdapter} for typing information on parameters and\n   * return types.\n   */\n  static override get defaultAdapter(): MDCSelectAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      activateBottomLine: () => undefined,\n      deactivateBottomLine: () => undefined,\n      getSelectedIndex: () => -1,\n      setSelectedIndex: () => undefined,\n      hasLabel: () => false,\n      floatLabel: () => undefined,\n      getLabelWidth: () => 0,\n      setLabelRequired: () => undefined,\n      hasOutline: () => false,\n      notchOutline: () => undefined,\n      closeOutline: () => undefined,\n      setRippleCenter: () => undefined,\n      notifyChange: () => undefined,\n      setSelectedText: () => undefined,\n      isSelectAnchorFocused: () => false,\n      getSelectAnchorAttr: () => '',\n      setSelectAnchorAttr: () => undefined,\n      removeSelectAnchorAttr: () => undefined,\n      addMenuClass: () => undefined,\n      removeMenuClass: () => undefined,\n      openMenu: () => undefined,\n      closeMenu: () => undefined,\n      getAnchorElement: () => null,\n      setMenuAnchorElement: () => undefined,\n      setMenuAnchorCorner: () => undefined,\n      setMenuWrapFocus: () => undefined,\n      focusMenuItemAtIndex: () => undefined,\n      getMenuItemCount: () => 0,\n      getMenuItemValues: () => [],\n      getMenuItemTextAtIndex: () => '',\n      isTypeaheadInProgress: () => false,\n      typeaheadMatchItem: () => -1,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private readonly leadingIcon: MDCSelectIconFoundation|undefined;\n  private readonly helperText: MDCSelectHelperTextFoundation|undefined;\n  // Client provided `aria-describedby` ids. Does not include helpTextId.\n  private readonly ariaDescribedbyIds: string[];\n\n  // Disabled state\n  private disabled = false;\n  // isMenuOpen is used to track the state of the menu by listening to the\n  // MDCMenuSurface:closed event For reference, menu.open will return false if\n  // the menu is still closing, but isMenuOpen returns false only after the menu\n  // has closed\n  private isMenuOpen = false;\n  // By default, select is invalid if it is required but no value is selected.\n  private useDefaultValidation = true;\n  private customValidity = true;\n  private lastSelectedIndex = numbers.UNSET_INDEX;\n\n  private clickDebounceTimeout = 0;\n  private recentlyClicked = false;\n\n  /* istanbul ignore next: optional argument is not a branch statement */\n  /**\n   * @param adapter\n   * @param foundationMap Map from subcomponent names to their subfoundations.\n   */\n  constructor(\n      adapter?: Partial<MDCSelectAdapter>,\n      foundationMap: Partial<MDCSelectFoundationMap> = {}) {\n    super({...MDCSelectFoundation.defaultAdapter, ...adapter});\n\n    this.leadingIcon = foundationMap.leadingIcon;\n    this.helperText = foundationMap.helperText;\n    this.ariaDescribedbyIds =\n        this.adapter.getSelectAnchorAttr(strings.ARIA_DESCRIBEDBY)\n            ?.split(' ')\n            ?.filter(id => id !== this.helperText?.getId() && id !== '') ||\n        [];\n  }\n\n  /** Returns the index of the currently selected menu item, or -1 if none. */\n  getSelectedIndex(): number {\n    return this.adapter.getSelectedIndex();\n  }\n\n  setSelectedIndex(index: number, closeMenu = false, skipNotify = false) {\n    if (index >= this.adapter.getMenuItemCount()) {\n      return;\n    }\n\n    this.adapter.setSelectedIndex(index);\n\n    if (index === numbers.UNSET_INDEX) {\n      this.adapter.setSelectedText('');\n    } else {\n      this.adapter.setSelectedText(\n          this.adapter.getMenuItemTextAtIndex(index).trim());\n    }\n\n    if (closeMenu) {\n      this.adapter.closeMenu();\n    }\n\n    if (!skipNotify && this.lastSelectedIndex !== index) {\n      this.handleChange();\n    }\n    this.lastSelectedIndex = index;\n  }\n\n  setValue(value: string, skipNotify = false) {\n    const index = this.adapter.getMenuItemValues().indexOf(value);\n    this.setSelectedIndex(index, /** closeMenu */ false, skipNotify);\n  }\n\n  getValue() {\n    const index = this.adapter.getSelectedIndex();\n    const menuItemValues = this.adapter.getMenuItemValues();\n    return index !== numbers.UNSET_INDEX ? menuItemValues[index] : '';\n  }\n\n  getDisabled() {\n    return this.disabled;\n  }\n\n  setDisabled(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    if (this.disabled) {\n      this.adapter.addClass(cssClasses.DISABLED);\n      this.adapter.closeMenu();\n    } else {\n      this.adapter.removeClass(cssClasses.DISABLED);\n    }\n\n    if (this.leadingIcon) {\n      this.leadingIcon.setDisabled(this.disabled);\n    }\n\n    if (this.disabled) {\n      // Prevent click events from focusing select. Simply pointer-events: none\n      // is not enough since screenreader clicks may bypass this.\n      this.adapter.removeSelectAnchorAttr('tabindex');\n    } else {\n      this.adapter.setSelectAnchorAttr('tabindex', '0');\n    }\n\n    this.adapter.setSelectAnchorAttr('aria-disabled', this.disabled.toString());\n  }\n\n  /** Opens the menu. */\n  openMenu() {\n    this.adapter.addClass(cssClasses.ACTIVATED);\n    this.adapter.openMenu();\n    this.isMenuOpen = true;\n    this.adapter.setSelectAnchorAttr('aria-expanded', 'true');\n  }\n\n  /**\n   * @param content Sets the content of the helper text.\n   */\n  setHelperTextContent(content: string) {\n    if (this.helperText) {\n      this.helperText.setContent(content);\n    }\n  }\n\n  /**\n   * Re-calculates if the notched outline should be notched and if the label\n   * should float.\n   */\n  layout() {\n    if (this.adapter.hasLabel()) {\n      const optionHasValue = this.getValue().length > 0;\n      const isFocused = this.adapter.hasClass(cssClasses.FOCUSED);\n      const shouldFloatAndNotch = optionHasValue || isFocused;\n      const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);\n\n      this.notchOutline(shouldFloatAndNotch);\n      this.adapter.floatLabel(shouldFloatAndNotch);\n      this.adapter.setLabelRequired(isRequired);\n    }\n  }\n\n  /**\n   * Synchronizes the list of options with the state of the foundation. Call\n   * this whenever menu options are dynamically updated.\n   */\n  layoutOptions() {\n    const menuItemValues = this.adapter.getMenuItemValues();\n    const selectedIndex = menuItemValues.indexOf(this.getValue());\n    this.setSelectedIndex(\n        selectedIndex, /** closeMenu */ false, /** skipNotify */ true);\n  }\n\n  handleMenuOpened() {\n    if (this.adapter.getMenuItemValues().length === 0) {\n      return;\n    }\n\n    // Menu should open to the last selected element, should open to first menu\n    // item otherwise.\n    const selectedIndex = this.getSelectedIndex();\n    const focusItemIndex = selectedIndex >= 0 ? selectedIndex : 0;\n    this.adapter.focusMenuItemAtIndex(focusItemIndex);\n  }\n\n  handleMenuClosing() {\n    this.adapter.setSelectAnchorAttr('aria-expanded', 'false');\n  }\n\n  handleMenuClosed() {\n    this.adapter.removeClass(cssClasses.ACTIVATED);\n    this.isMenuOpen = false;\n\n    // Unfocus the select if menu is closed without a selection\n    if (!this.adapter.isSelectAnchorFocused()) {\n      this.blur();\n    }\n  }\n\n  /**\n   * Handles value changes, via change event or programmatic updates.\n   */\n  handleChange() {\n    this.layout();\n    this.adapter.notifyChange(this.getValue());\n\n    const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);\n    if (isRequired && this.useDefaultValidation) {\n      this.setValid(this.isValid());\n    }\n  }\n\n  handleMenuItemAction(index: number) {\n    this.setSelectedIndex(index, /** closeMenu */ true);\n  }\n\n  /**\n   * Handles focus events from select element.\n   */\n  handleFocus() {\n    this.adapter.addClass(cssClasses.FOCUSED);\n    this.layout();\n\n    this.adapter.activateBottomLine();\n  }\n\n  /**\n   * Handles blur events from select element.\n   */\n  handleBlur() {\n    if (this.isMenuOpen) {\n      return;\n    }\n    this.blur();\n  }\n\n  handleClick(normalizedX: number) {\n    if (this.disabled || this.recentlyClicked) {\n      return;\n    }\n\n    this.setClickDebounceTimeout();\n\n    if (this.isMenuOpen) {\n      this.adapter.closeMenu();\n      return;\n    }\n\n    this.adapter.setRippleCenter(normalizedX);\n\n    this.openMenu();\n  }\n\n  /**\n   * Handles keydown events on select element. Depending on the type of\n   * character typed, does typeahead matching or opens menu.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isMenuOpen || !this.adapter.hasClass(cssClasses.FOCUSED)) {\n      return;\n    }\n\n    const isEnter = normalizeKey(event) === KEY.ENTER;\n    const isSpace = normalizeKey(event) === KEY.SPACEBAR;\n    const arrowUp = normalizeKey(event) === KEY.ARROW_UP;\n    const arrowDown = normalizeKey(event) === KEY.ARROW_DOWN;\n    const isModifier = event.ctrlKey || event.metaKey;\n    // Typeahead\n    if (!isModifier &&\n        (!isSpace && event.key && event.key.length === 1 ||\n         isSpace && this.adapter.isTypeaheadInProgress())) {\n      const key = isSpace ? ' ' : event.key;\n      const typeaheadNextIndex =\n          this.adapter.typeaheadMatchItem(key, this.getSelectedIndex());\n      if (typeaheadNextIndex >= 0) {\n        this.setSelectedIndex(typeaheadNextIndex);\n      }\n      event.preventDefault();\n      return;\n    }\n\n    if (!isEnter && !isSpace && !arrowUp && !arrowDown) {\n      return;\n    }\n\n    this.openMenu();\n    event.preventDefault();\n  }\n\n  /**\n   * Opens/closes the notched outline.\n   */\n  notchOutline(openNotch: boolean) {\n    if (!this.adapter.hasOutline()) {\n      return;\n    }\n    const isFocused = this.adapter.hasClass(cssClasses.FOCUSED);\n\n    if (openNotch) {\n      const labelScale = numbers.LABEL_SCALE;\n      const labelWidth = this.adapter.getLabelWidth() * labelScale;\n      this.adapter.notchOutline(labelWidth);\n    } else if (!isFocused) {\n      this.adapter.closeOutline();\n    }\n  }\n\n  /**\n   * Sets the aria label of the leading icon.\n   */\n  setLeadingIconAriaLabel(label: string) {\n    if (this.leadingIcon) {\n      this.leadingIcon.setAriaLabel(label);\n    }\n  }\n\n  /**\n   * Sets the text content of the leading icon.\n   */\n  setLeadingIconContent(content: string) {\n    if (this.leadingIcon) {\n      this.leadingIcon.setContent(content);\n    }\n  }\n\n  getUseDefaultValidation(): boolean {\n    return this.useDefaultValidation;\n  }\n\n  setUseDefaultValidation(useDefaultValidation: boolean) {\n    this.useDefaultValidation = useDefaultValidation;\n  }\n\n  setValid(isValid: boolean) {\n    if (!this.useDefaultValidation) {\n      this.customValidity = isValid;\n    }\n\n    this.adapter.setSelectAnchorAttr('aria-invalid', (!isValid).toString());\n    if (isValid) {\n      this.adapter.removeClass(cssClasses.INVALID);\n      this.adapter.removeMenuClass(cssClasses.MENU_INVALID);\n    } else {\n      this.adapter.addClass(cssClasses.INVALID);\n      this.adapter.addMenuClass(cssClasses.MENU_INVALID);\n    }\n\n    this.syncHelperTextValidity(isValid);\n  }\n\n  isValid() {\n    if (this.useDefaultValidation &&\n        this.adapter.hasClass(cssClasses.REQUIRED) &&\n        !this.adapter.hasClass(cssClasses.DISABLED)) {\n      // See notes for required attribute under\n      // https://www.w3.org/TR/html52/sec-forms.html#the-select-element TL;DR:\n      // Invalid if no index is selected, or if the first index is selected and\n      // has an empty value.\n      return this.getSelectedIndex() !== numbers.UNSET_INDEX &&\n          (this.getSelectedIndex() !== 0 || Boolean(this.getValue()));\n    }\n    return this.customValidity;\n  }\n\n  setRequired(isRequired: boolean) {\n    if (isRequired) {\n      this.adapter.addClass(cssClasses.REQUIRED);\n    } else {\n      this.adapter.removeClass(cssClasses.REQUIRED);\n    }\n    this.adapter.setSelectAnchorAttr('aria-required', isRequired.toString());\n    this.adapter.setLabelRequired(isRequired);\n  }\n\n  getRequired() {\n    return this.adapter.getSelectAnchorAttr('aria-required') === 'true';\n  }\n\n  override init() {\n    const anchorEl = this.adapter.getAnchorElement();\n    if (anchorEl) {\n      this.adapter.setMenuAnchorElement(anchorEl);\n      this.adapter.setMenuAnchorCorner(Corner.BOTTOM_START);\n    }\n    this.adapter.setMenuWrapFocus(false);\n\n    this.setDisabled(this.adapter.hasClass(cssClasses.DISABLED));\n    this.syncHelperTextValidity(!this.adapter.hasClass(cssClasses.INVALID));\n    this.layout();\n    this.layoutOptions();\n  }\n\n  /**\n   * Unfocuses the select component.\n   */\n  private blur() {\n    this.adapter.removeClass(cssClasses.FOCUSED);\n    this.layout();\n    this.adapter.deactivateBottomLine();\n\n    const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);\n    if (isRequired && this.useDefaultValidation) {\n      this.setValid(this.isValid());\n    }\n  }\n\n  private syncHelperTextValidity(isValid: boolean) {\n    if (!this.helperText) {\n      return;\n    }\n\n    this.helperText.setValidity(isValid);\n\n    const helperTextVisible = this.helperText.isVisible();\n    const helperTextId = this.helperText.getId();\n\n    if (helperTextVisible && helperTextId) {\n      this.adapter.setSelectAnchorAttr(\n          strings.ARIA_DESCRIBEDBY,\n          [...this.ariaDescribedbyIds, helperTextId].join(' '));\n    } else {\n      // Remove helptext from list of describedby ids. Needed because\n      // screenreaders will read labels pointed to by `aria-describedby` even if\n      // they are `aria-hidden`.\n      if (this.ariaDescribedbyIds.length > 0) {\n        this.adapter.setSelectAnchorAttr(\n            strings.ARIA_DESCRIBEDBY, this.ariaDescribedbyIds.join(' '));\n      } else {  // helper text is the only describedby element\n        this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);\n      }\n    }\n  }\n\n  private setClickDebounceTimeout() {\n    clearTimeout(this.clickDebounceTimeout);\n    this.clickDebounceTimeout = setTimeout(() => {\n      this.recentlyClicked = false;\n    }, numbers.CLICK_DEBOUNCE_TIMEOUT_MS);\n    this.recentlyClicked = true;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSelectFoundation;\n"
  },
  {
    "path": "packages/mdc-select/helper-text/README.md",
    "content": "<!--docs:\ntitle: \"Select helper text\"\nlayout: detail\nsection: components\nexcerpt: \"The helper text provides supplemental information and/or validation messages to users\"\niconId: menu\npath: /catalog/input-controls/select-menus/helper-text/\n-->\n\n# Select helper text\n\nHelper text gives context about a select, such as how the selection will be used. It should be visible either persistently or only on invalid state.\n\n## Basic usage\n\n### HTML structure\n\n```html\n<p class=\"mdc-select-helper-text\" aria-hidden=\"true\">\n```\n\n> NOTE: Make sure there are no white-space characters before helper text content.\n\n### JavaScript instantiation\n\n```js\nimport {MDCSelectHelperText} from '@material/select/helper-text';\nconst helperText = new MDCSelectHelperText(document.querySelector('.mdc-select-helper-text'));\n```\n\n#### Accessibility\n\nNote that in every example where the helper text is dependent on the state of the `select` element, we\nassign an id to the `mdc-select-helper-text` element and set that id to the value of the\n`aria-controls` and `aria-describedby` attributes on the element with the `mdc-select__selected-text` class.\nWe recommend doing this as well as it will help indicate to assistive devices that\nthe display of the helper text is dependent on the interaction with the MDCSelect component.\n\n```html\n<div class=\"mdc-select mdc-select--filled\">\n  <div class=\"mdc-select__anchor\"\n       role=\"button\"\n       aria-haspopup=\"listbox\"\n       aria-labelledby=\"demo-label demo-selected-text\"\n       aria-controls=\"my-helper-text\"\n       aria-describedby=\"my-helper-text\">\n   <!-- rest of main component -->\n</div>\n<p id=\"my-helper-text\" class=\"mdc-select-helper-text\">Helper text</p>\n```\n\nWhen using our JS component, if the browser sees that the input element has an `aria-controls`\nattribute, it will look for an element with the id specified and treat it as the Select's helper\ntext element, taking care of adding/removing `aria-hidden` and other accessibility attributes. Adding\nand removing classes and attributes to the helper text element can also be done using the\nMDCSelectHelperText API, which is described below.\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-select-helper-text` | Mandatory. By default non-validation helper text is always visible.\n`mdc-select-helper-text--validation-msg` | Indicates the helper text is a validation message. By default validation message is hidden unless the select is invalid.\n`mdc-select-helper-text--validation-msg-persistent` | When the helper text is serving as a validation message, make it permanently visible regardless of the select's validity.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`helper-text-color($color)` | Customizes the color of the helper text following a select.\n`disabled-helper-text-color($color)` | Customizes the color of the helper text following a select when disabled.\n`helper-text-validation-color($color)` | Customizes the color of the helper text validation message when the select is invalid.\n`hover-helper-text-validation-color($color)` | Customizes the color of the helper text validation message when the select is invalid and hovered.\n\n## `MDCSelectHelperText` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`foundation` | `MDCSelectHelperTextFoundation` | Returns the helper text's foundation. This allows the parent `MDCSelect` component to access the public methods on the `MDCSelectHelperTextFoundation` class.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Helper Text for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### `MDCSelectHelperTextAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the helper text element.\n`removeClass(className: string) => void` | Removes a class from the helper text element.\n`hasClass(className: string) => boolean` | Returns true if classname exists for the helper text element.\n`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the helper text element.\n`removeAttr(attr: string) => void` | Removes an attribute on the helper text element.\n`setContent(attr: string) => void` | Sets the text content for the helper text element.\n\n### `MDCSelectHelperTextFoundation`\n\nMethod Signature | Description\n--- | ---\n`getId() => string|null` | Gets the ID of the helper text.\n`isVisible() => boolean` | Returns whether the helper text is visible.\n`setContent(content: string) => void` | Sets the content of the helper text.\n`setValidation(isValidation: boolean) => void` | Sets the helper text as a validation message. By default, validation messages are hidden when the select is valid and visible when the select is invalid.\n`setValidationMsgPersistent(isPersistent: boolean) => void` | This keeps the validation message visible even if the select is valid, though it will be displayed in the normal (grey) color.\n`setValidity(inputIsValid: boolean) => void` | Sets the validity of the helper text based on the input validity.\n"
  },
  {
    "path": "packages/mdc-select/helper-text/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward '../select-helper-text-theme';\n"
  },
  {
    "path": "packages/mdc-select/helper-text/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-select-*;\n"
  },
  {
    "path": "packages/mdc-select/helper-text/_mixins.scss",
    "content": "//  Copyright 2018 Google Inc.\n//\n//  Permission is hereby granted, free of charge, to any person obtaining a copy\n//  of this software and associated documentation files (the \"Software\"), to deal\n//  in the Software without restriction, including without limitation the rights\n//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n//  copies of the Software, and to permit persons to whom the Software is\n//  furnished to do so, subject to the following conditions:/\n//\n//  The above copyright notice and this permission notice shall be included in\n//  all copies or substantial portions of the Software./\n//\n//  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n//  THE SOFTWARE.\n//\n\n@forward '../select-helper-text-theme' show helper-text-color, disabled-helper-text-color, helper-text-validation-color, hover-helper-text-validation-color;\n@forward '../select-helper-text' show helper-text-core-styles;\n"
  },
  {
    "path": "packages/mdc-select/helper-text/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSelectHelperTextAdapter {\n  /**\n   * Adds a class to the helper text element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the helper text element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns whether or not the helper text element contains the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Sets an attribute with a given value on the helper text element.\n   */\n  setAttr(attr: string, value: string): void;\n\n  /**\n   * Removes an attribute from the helper text element.\n   */\n  removeAttr(attr: string): void;\n\n  /**\n   * Gets an attribute from the helper text element.\n   */\n  getAttr(attr: string): string|null;\n\n  /**\n   * Sets the text content for the helper text element.\n   */\n  setContent(content: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-select/helper-text/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCSelectHelperTextAdapter} from './adapter';\nimport {MDCSelectHelperTextFoundation} from './foundation';\n\n/** MDC Select Helper Text Factory */\nexport type MDCSelectHelperTextFactory =\n    (el: HTMLElement, foundation?: MDCSelectHelperTextFoundation) =>\n        MDCSelectHelperText;\n\n/** MDC Select Helper Text */\nexport class MDCSelectHelperText extends\n    MDCComponent<MDCSelectHelperTextFoundation> {\n  static override attachTo(root: HTMLElement): MDCSelectHelperText {\n    return new MDCSelectHelperText(root);\n  }\n\n  // Provided for access by MDCSelect component\n  get foundationForSelect(): MDCSelectHelperTextFoundation {\n    return this.foundation;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCSelectHelperTextAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      getAttr: (attr) => this.root.getAttribute(attr),\n      setAttr: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n      removeAttr: (attr) => {\n        this.root.removeAttribute(attr);\n      },\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCSelectHelperTextFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/helper-text/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  ARIA_HIDDEN: 'aria-hidden',\n  ROLE: 'role',\n};\n\nconst cssClasses = {\n  HELPER_TEXT_VALIDATION_MSG: 'mdc-select-helper-text--validation-msg',\n  HELPER_TEXT_VALIDATION_MSG_PERSISTENT:\n      'mdc-select-helper-text--validation-msg-persistent',\n};\n\nexport {strings, cssClasses};\n"
  },
  {
    "path": "packages/mdc-select/helper-text/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCSelectHelperTextAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Select Helper Text Foundation */\nexport class MDCSelectHelperTextFoundation extends\n    MDCFoundation<MDCSelectHelperTextAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  /**\n   * See {@link MDCSelectHelperTextAdapter} for typing information on parameters\n   * and return types.\n   */\n  static override get defaultAdapter(): MDCSelectHelperTextAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      setAttr: () => undefined,\n      getAttr: () => null,\n      removeAttr: () => undefined,\n      setContent: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter?: Partial<MDCSelectHelperTextAdapter>) {\n    super({...MDCSelectHelperTextFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * @return The ID of the helper text, or null if none is set.\n   */\n  getId(): string|null {\n    return this.adapter.getAttr('id');\n  }\n\n  /**\n   * @return Whether the helper text is currently visible.\n   */\n  isVisible(): boolean {\n    return this.adapter.getAttr(strings.ARIA_HIDDEN) !== 'true';\n  }\n\n  /**\n   * Sets the content of the helper text field.\n   */\n  setContent(content: string) {\n    this.adapter.setContent(content);\n  }\n\n  /**\n   * Sets the helper text to act as a validation message.\n   * By default, validation messages are hidden when the select is valid and\n   * visible when the select is invalid.\n   *\n   * @param isValidation True to make the helper text act as an error validation\n   *     message.\n   */\n  setValidation(isValidation: boolean) {\n    if (isValidation) {\n      this.adapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    } else {\n      this.adapter.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    }\n  }\n\n  /**\n   * Sets the persistency of the validation helper text.\n   * This keeps the validation message visible even if the select is valid,\n   * though it will be displayed in the normal (grey) color.\n   */\n  setValidationMsgPersistent(isPersistent: boolean) {\n    if (isPersistent) {\n      this.adapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n    } else {\n      this.adapter.removeClass(\n          cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n    }\n  }\n\n  /**\n   * @return Whether the helper text acts as a validation message.\n   * By default, validation messages are hidden when the select is valid and\n   * visible when the select is invalid.\n   */\n  getIsValidation() {\n    return this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n  }\n\n  /**\n   * @return Whether the validation helper text persists even if the input is\n   * valid. If it is, it will be displayed in the normal (grey) color.\n   */\n  getIsValidationMsgPersistent() {\n    return this.adapter.hasClass(\n        cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n  }\n\n  /**\n   * When acting as a validation message, shows/hides the helper text and\n   * triggers alerts as necessary based on the select's validity.\n   */\n  setValidity(selectIsValid: boolean) {\n    const isValidationMsg =\n        this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n\n    if (!isValidationMsg) {\n      // Non-validating helper-text is always displayed and does not participate\n      // in validation logic.\n      return;\n    }\n\n    const isPersistentValidationMsg =\n        this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n\n    // Validating helper text is displayed if select is invalid, unless it is\n    // set as persistent, in which case it always displays.\n    const msgShouldDisplay = !selectIsValid || isPersistentValidationMsg;\n    if (msgShouldDisplay) {\n      this.showToScreenReader();\n\n      // In addition to displaying, also trigger an alert if the select\n      // has become invalid.\n      if (!selectIsValid) {\n        this.adapter.setAttr(strings.ROLE, 'alert');\n      } else {\n        this.adapter.removeAttr(strings.ROLE);\n      }\n      return;\n    }\n\n    // Hide everything.\n    this.adapter.removeAttr(strings.ROLE);\n    this.hide();\n  }\n\n  /**\n   * Makes the helper text visible to screen readers.\n   */\n  private showToScreenReader() {\n    this.adapter.removeAttr(strings.ARIA_HIDDEN);\n  }\n\n  /**\n   * Hides the help text from screen readers.\n   */\n  private hide() {\n    this.adapter.setAttr(strings.ARIA_HIDDEN, 'true');\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSelectHelperTextFoundation;\n"
  },
  {
    "path": "packages/mdc-select/helper-text/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {cssClasses as helperTextCssClasses, strings as helperTextStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-select/helper-text/mdc-select-helper-text.scss",
    "content": "//  Copyright 2018 Google Inc.\n//\n//  Permission is hereby granted, free of charge, to any person obtaining a copy\n//  of this software and associated documentation files (the \"Software\"), to deal\n//  in the Software without restriction, including without limitation the rights\n//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n//  copies of the Software, and to permit persons to whom the Software is\n//  furnished to do so, subject to the following conditions:/\n//\n//  The above copyright notice and this permission notice shall be included in\n//  all copies or substantial portions of the Software./\n//\n//  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n//  THE SOFTWARE.\n//\n\n@forward '../styles';\n"
  },
  {
    "path": "packages/mdc-select/helper-text/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../../testing/dom/index';\nimport {MDCSelectHelperText} from '../index';\n\nconst getFixture = () => createFixture(html`\n  <p class=\"mdc-select-helper-text\"></p>\n`);\n\ndescribe('MDCSelectHelperText', () => {\n  it('attachTo returns an MDCSelectHelperText instance', () => {\n    expect(\n        MDCSelectHelperText.attachTo(getFixture()) instanceof\n        MDCSelectHelperText)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCSelectHelperText(root);\n    const adapter = component.getDefaultFoundation()['adapter'];\n    return {root, adapter};\n  }\n\n  it('#adapter.addClass adds a class to the element', () => {\n    const {root, adapter} = setupTest();\n    adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the element', () => {\n    const {root, adapter} = setupTest();\n    root.classList.add('foo');\n    adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.hasClass returns whether or not the element contains a certain class',\n     () => {\n       const {root, adapter} = setupTest();\n       root.classList.add('foo');\n       expect(adapter.hasClass('foo')).toBeTruthy();\n       root.classList.remove('foo');\n       expect(adapter.hasClass('foo')).toBeFalsy();\n     });\n\n  it('#adapter.get/setAttr retrieves/adds a given attribute to the element',\n     () => {\n       const {adapter} = setupTest();\n       adapter.setAttr('aria-label', 'foo');\n       expect(adapter.getAttr('aria-label')).toEqual('foo');\n     });\n\n  it('#adapter.removeAttr removes a given attribute from the element', () => {\n    const {root, adapter} = setupTest();\n    root.setAttribute('aria-label', 'foo');\n    adapter.removeAttr('aria-label');\n    expect(root.hasAttribute('aria-label')).toBeFalsy();\n  });\n\n  it('#adapter.setContent sets the text content of the element', () => {\n    const {root, adapter} = setupTest();\n    adapter.setContent('foo');\n    expect(root.textContent).toEqual('foo');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-select/helper-text/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCSelectHelperTextFoundation} from '../foundation';\n\nconst {cssClasses, strings} = MDCSelectHelperTextFoundation;\n\ndescribe('MDCSelectHelperTextFoundation', () => {\n  it('exports cssClasses', () => {\n    expect(MDCSelectHelperTextFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports strings', () => {\n    expect(MDCSelectHelperTextFoundation.strings).toEqual(strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSelectHelperTextFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'getAttr',\n      'setAttr',\n      'removeAttr',\n      'setContent',\n    ]);\n  });\n\n  const setupTest =\n      () => {\n        const {foundation, mockAdapter} =\n            setUpFoundationTest(MDCSelectHelperTextFoundation);\n        return {foundation, mockAdapter};\n      }\n\n  it('#setContent sets the content of the helper text element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setContent('foo');\n    expect(mockAdapter.setContent).toHaveBeenCalledWith('foo');\n  });\n\n  it('#setValidationMsgPersistent toggles the persistent validation class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setValidationMsgPersistent(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n       foundation.setValidationMsgPersistent(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(\n               cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);\n     });\n\n  it('#getIsValidationMsgPersistent returns true if the persistent validation ' +\n         'class is set',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(true);\n       expect(foundation.getIsValidationMsgPersistent()).toBeTrue();\n     });\n\n  it('#getIsValidationMsgPersistent returns false if the persistent validation ' +\n         'class is not set',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(false);\n       expect(foundation.getIsValidationMsgPersistent()).toBeFalse();\n     });\n\n  it('#setValidation toggles the validation class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setValidation(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    foundation.setValidation(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n  });\n\n  it('#getIsValidation returns true if the validation class is set', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(true);\n    expect(foundation.getIsValidation()).toBeTrue();\n  });\n\n  it('#getIsValidation returns false if the validation class is not set',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(false);\n       expect(foundation.getIsValidation()).toBeFalse();\n     });\n\n  it('#setValidity adds role=\"alert\" to helper text if input is invalid and' +\n         'helper text is being used as a validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = false;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('role', 'alert');\n     });\n\n  it('#setValidity removes role=\"alert\" if input is valid', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const inputIsValid = true;\n    mockAdapter.hasClass\n        .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n        .and.returnValue(false);\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(true);\n    foundation.setValidity(inputIsValid);\n    expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');\n  });\n\n  it('#setValidity removes role=\"alert\" if input is valid and validation' +\n         ' msg is persistent',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');\n     });\n\n  it('#setValidity does not change helper text visibility if it is' +\n         ' not validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(false);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).not.toHaveBeenCalled();\n     });\n\n  it('#setValidity does not set aria-hidden=\"true\" on helper text by default',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(false);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).not.toHaveBeenCalled();\n     });\n\n  it('#setValidity does not set aria-hidden on helper text when it is persistent validation',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(false);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n\n  it('#setValidity does not set aria-hidden if input is invalid and helper text is validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = false;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n\n  it('#setValidity sets aria-hidden=true if input is valid and helper text is validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass\n           .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n\n  it('#isVisible returns true if aria-hidden is false or unset', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttr.withArgs(strings.ARIA_HIDDEN).and.returnValue('false');\n    expect(foundation.isVisible()).toBeTrue();\n\n    mockAdapter.getAttr.withArgs(strings.ARIA_HIDDEN).and.returnValue(null);\n    expect(foundation.isVisible()).toBeTrue();\n  });\n\n  it('#isVisible returns false if aria-hidden is true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttr.withArgs(strings.ARIA_HIDDEN).and.returnValue('true');\n    expect(foundation.isVisible()).toBeFalse();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-select/icon/README.md",
    "content": "<!--docs:\ntitle: \"Select icon\"\nlayout: detail\nsection: components\nexcerpt: \"Icons describe the type of input a select requires\"\niconId: text_field\npath: /catalog/input-controls/select-menus/icon/\n-->\n\n# Select icon\n\nIcons describe the type of input a select requires. They can also be interaction targets.\n\n## Basic usage\n\n### HTML structure\n\n```html\n<i class=\"material-icons mdc-select__icon\" tabindex=\"0\" role=\"button\">event</i>\n```\n\n#### Icon set\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### JavaScript instantiation\n\n```js\nimport {MDCSelectIcon} from '@material/select/icon';\n\nconst icon = new MDCSelectIcon(document.querySelector('.mdc-select__icon'));\n```\n\n## Variants\n\nLeading icons can be applied to default or `mdc-select--outlined` Selects. To add a leading icon, add the class `mdc-select--with-leading-icon` to the root element, add an `i` element with your preferred icon as a child of the `mdc-select__anchor` element, and give it a class of `mdc-select__icon`.\n\n> **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex=\"0\"` and `role=\"button\"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.\n\n### Leading icon\n\n> **NOTE:** when using leading icons in select anchor, also include an empty `<span class=\"mdc-deprecated-list-item__graphic\"></span>` in each list item.\n\nIn filled select:\n\n```html\n<div class=\"mdc-select mdc-select--filled mdc-select--with-leading-icon\">\n  <div class=\"mdc-select__anchor\">\n    <span class=\"mdc-select__ripple\"></span>\n    <span class=\"mdc-floating-label\">Pick a Food Group</span>\n    <i class=\"material-icons mdc-select__icon\" tabindex=\"0\" role=\"button\">event</i>\n    ...\n  </div>\n  <div class=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\">\n    <ul class=\"mdc-deprecated-list\" role=\"listbox\">\n      <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" aria-selected=\"true\" role=\"option\" data-value=\"grains\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__graphic\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Bread, Cereal, Rice, and Pasta</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" role=\"option\" data-value=\"vegetables\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__graphic\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Vegetables</span>\n      </li>\n      <li class=\"mdc-deprecated-list-item\" role=\"option\" data-value=\"fruit\">\n        <span class=\"mdc-deprecated-list-item__ripple\"></span>\n        <span class=\"mdc-deprecated-list-item__graphic\"></span>\n        <span class=\"mdc-deprecated-list-item__text\">Fruit</span>\n      </li>\n    </ul>\n</div>\n```\n\nIn outlined select:\n\n```html\n<div class=\"mdc-select mdc-select--outlined mdc-select--with-leading-icon\">\n  <div class=\"mdc-select__anchor\">\n    <span class=\"mdc-notched-outline\">\n      ...\n    </span>\n    <i class=\"material-icons mdc-select__icon\" tabindex=\"0\" role=\"button\">event</i>\n    ...\n  </div>\n  <!-- The rest of the select markup, see above. -->\n</div>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-select__icon` | Mandatory.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`size($size)` | Customizes the size (both width and height) of the icon.\n`icon-color($color)` | Customizes the color for the leading icon.\n`disabled-icon-color($color)` | Customizes the color for the leading icon when disabled.\n\n## `MDCSelectIcon` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`foundation` | `MDCSelectIconFoundation` | Returns the icon's foundation. This allows the parent `MDCSelect` component to access the public methods on the `MDCSelectIconFoundation` class.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Select Icon for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### `MDCSelectIconAdapter`\n\nMethod Signature | Description\n--- | ---\n`getAttr(attr: string) => string` | Gets the value of an attribute on the icon element.\n`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the icon element.\n`removeAttr(attr: string) => void` | Removes an attribute from the icon element.\n`setContent(content: string) => void` | Sets the text content of the icon element.\n`registerInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(eventType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n`notifyIconAction() => void` | Emits a custom event \"MDCSelect:icon\" denoting a user has clicked the icon, which bubbles to the top-level select element.\n\n### `MDCSelectIconFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the icon's disabled state.\n`setAriaLabel(label: string) => void` | Updates the icon's aria-label.\n`setContent(content: string) => void` | Updates the icon's text content.\n`handleInteraction(event: Event) => void` | Handles a select interaction event.\n"
  },
  {
    "path": "packages/mdc-select/icon/_index.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward \"../select-icon-theme\";\n"
  },
  {
    "path": "packages/mdc-select/icon/_mixins.import.scss",
    "content": "@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-select-*;\n"
  },
  {
    "path": "packages/mdc-select/icon/_mixins.scss",
    "content": "//  Copyright 2018 Google Inc.\n//\n//  Permission is hereby granted, free of charge, to any person obtaining a copy\n//  of this software and associated documentation files (the \"Software\"), to deal\n//  in the Software without restriction, including without limitation the rights\n//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n//  copies of the Software, and to permit persons to whom the Software is\n//  furnished to do so, subject to the following conditions:/\n//\n//  The above copyright notice and this permission notice shall be included in\n//  all copies or substantial portions of the Software./\n//\n//  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n//  THE SOFTWARE.\n//\n\n@forward \"../select-icon-theme\" show size, icon-color, disabled-icon-color, icon-horizontal-margins;\n@forward \"../select-icon\" show icon-core-styles;\n"
  },
  {
    "path": "packages/mdc-select/icon/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-select-* hide mdc-select-icon-color, mdc-select-icon-, mdc-select-icon-color-, mdc-select-icon-horizontal-position-;\n"
  },
  {
    "path": "packages/mdc-select/icon/_variables.scss",
    "content": "//  Copyright 2018 Google Inc.\n//\n//  Permission is hereby granted, free of charge, to any person obtaining a copy\n//  of this software and associated documentation files (the \"Software\"), to deal\n//  in the Software without restriction, including without limitation the rights\n//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n//  copies of the Software, and to permit persons to whom the Software is\n//  furnished to do so, subject to the following conditions:/\n//\n//  The above copyright notice and this permission notice shall be included in\n//  all copies or substantial portions of the Software./\n//\n//  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n//  THE SOFTWARE.\n//\n\n@forward \"../select-icon-theme\" show $icon-size, $dense-icon-size, $icon-horizontal-margin, $icon-color, $disabled-icon-color;\n"
  },
  {
    "path": "packages/mdc-select/icon/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSelectIconAdapter {\n  /**\n   * Gets the value of an attribute on the icon element.\n   */\n  getAttr(attr: string): string|null;\n\n  /**\n   * Sets an attribute on the icon element.\n   */\n  setAttr(attr: string, value: string): void;\n\n  /**\n   * Removes an attribute from the icon element.\n   */\n  removeAttr(attr: string): void;\n\n  /**\n   * Sets the text content of the icon element.\n   */\n  setContent(content: string): void;\n\n  /**\n   * Registers an event listener on the icon element for a given event.\n   */\n  registerInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the icon element for a given event.\n   */\n  deregisterInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Emits a custom event \"MDCSelect:icon\" denoting a user has clicked the icon.\n   */\n  notifyIconAction(): void;\n}\n"
  },
  {
    "path": "packages/mdc-select/icon/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCSelectIconAdapter} from './adapter';\nimport {MDCSelectIconFoundation} from './foundation';\n\n/** MDC Select Icon Factory */\nexport type MDCSelectIconFactory =\n    (el: HTMLElement, foundation?: MDCSelectIconFoundation) => MDCSelectIcon;\n\n/** MDC Select Icon */\nexport class MDCSelectIcon extends MDCComponent<MDCSelectIconFoundation> {\n  static override attachTo(root: HTMLElement): MDCSelectIcon {\n    return new MDCSelectIcon(root);\n  }\n\n  // Provided for access by MDCSelect component\n  get foundationForSelect(): MDCSelectIconFoundation {\n    return this.foundation;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCSelectIconAdapter = {\n      getAttr: (attr) => this.root.getAttribute(attr),\n      setAttr: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n      removeAttr: (attr) => {\n        this.root.removeAttribute(attr);\n      },\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n      registerInteractionHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n      notifyIconAction: () => {\n        this.emit(\n            MDCSelectIconFoundation.strings.ICON_EVENT, {} /* eventData */,\n            true /* shouldBubble */);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCSelectIconFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/icon/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  ICON_EVENT: 'MDCSelect:icon',\n  ICON_ROLE: 'button',\n};\n\nexport {strings};\n"
  },
  {
    "path": "packages/mdc-select/icon/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCSelectIconAdapter} from './adapter';\nimport {strings} from './constants';\n\ntype InteractionEventType = 'click'|'keydown';\n\nconst INTERACTION_EVENTS: InteractionEventType[] = ['click', 'keydown'];\n\n/** MDC Select Icon Foundation */\nexport class MDCSelectIconFoundation extends\n    MDCFoundation<MDCSelectIconAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  /**\n   * See {@link MDCSelectIconAdapter} for typing information on parameters and\n   * return types.\n   */\n  static override get defaultAdapter(): MDCSelectIconAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      getAttr: () => null,\n      setAttr: () => undefined,\n      removeAttr: () => undefined,\n      setContent: () => undefined,\n      registerInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      notifyIconAction: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private savedTabIndex: string|null = null;\n\n  // assigned in initialSyncWithDOM()\n  private readonly interactionHandler!:\n      SpecificEventListener<InteractionEventType>;\n\n  constructor(adapter?: Partial<MDCSelectIconAdapter>) {\n    super({...MDCSelectIconFoundation.defaultAdapter, ...adapter});\n\n    this.interactionHandler = (event) => {\n      this.handleInteraction(event);\n    };\n  }\n\n  override init() {\n    this.savedTabIndex = this.adapter.getAttr('tabindex');\n\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.registerInteractionHandler(eventType, this.interactionHandler);\n    }\n  }\n\n  override destroy() {\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.deregisterInteractionHandler(\n          eventType, this.interactionHandler);\n    }\n  }\n\n  setDisabled(disabled: boolean) {\n    if (!this.savedTabIndex) {\n      return;\n    }\n\n    if (disabled) {\n      this.adapter.setAttr('tabindex', '-1');\n      this.adapter.removeAttr('role');\n    } else {\n      this.adapter.setAttr('tabindex', this.savedTabIndex);\n      this.adapter.setAttr('role', strings.ICON_ROLE);\n    }\n  }\n\n  setAriaLabel(label: string) {\n    this.adapter.setAttr('aria-label', label);\n  }\n\n  setContent(content: string) {\n    this.adapter.setContent(content);\n  }\n\n  handleInteraction(event: MouseEvent|KeyboardEvent) {\n    const isEnterKey = (event as KeyboardEvent).key === 'Enter' ||\n        (event as KeyboardEvent).keyCode === 13;\n    if (event.type === 'click' || isEnterKey) {\n      this.adapter.notifyIconAction();\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSelectIconFoundation;\n"
  },
  {
    "path": "packages/mdc-select/icon/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {strings as iconStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-select/icon/mdc-select-icon.scss",
    "content": "//  Copyright 2018 Google Inc.\n//\n//  Permission is hereby granted, free of charge, to any person obtaining a copy\n//  of this software and associated documentation files (the \"Software\"), to deal\n//  in the Software without restriction, including without limitation the rights\n//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n//  copies of the Software, and to permit persons to whom the Software is\n//  furnished to do so, subject to the following conditions:/\n//\n//  The above copyright notice and this permission notice shall be included in\n//  all copies or substantial portions of the Software./\n//\n//  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n//  THE SOFTWARE.\n//\n\n@forward \"../styles\";\n"
  },
  {
    "path": "packages/mdc-select/icon/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {emitEvent} from '../../../../testing/dom/events';\nimport {createFixture, html} from '../../../../testing/dom/index';\nimport {MDCSelectIcon, MDCSelectIconFoundation} from '../index';\n\nconst getFixture = () => createFixture(html`\n  <div class=\"mdc-select__icon\"></div>\n`);\n\ndescribe('MDCSelectIcon', () => {\n  it('attachTo returns an MDCSelectIcon instance', () => {\n    expect(MDCSelectIcon.attachTo(getFixture()) instanceof MDCSelectIcon)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCSelectIcon(root);\n    return {root, component};\n  }\n\n  it('#adapter.getAttr returns the value of a given attribute on the element',\n     () => {\n       const {root, component} = setupTest();\n       const expectedAttr = 'tabindex';\n       const expectedValue = '0';\n       root.setAttribute(expectedAttr, expectedValue);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getAttr(expectedAttr))\n           .toEqual(expectedValue);\n     });\n\n  it('#adapter.setAttr adds a given attribute to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.setAttr('aria-label', 'foo');\n    expect(root.getAttribute('aria-label')).toEqual('foo');\n  });\n\n  it('#adapter.removeAttr removes a given attribute from the element', () => {\n    const {root, component} = setupTest();\n    root.setAttribute('role', 'button');\n    (component.getDefaultFoundation() as any).adapter.removeAttr('role');\n    expect(root.hasAttribute('role')).toBe(false);\n  });\n\n  it('#adapter.setContent sets the text content of the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.setContent('foo');\n    expect(root.textContent).toEqual('foo');\n  });\n\n  it('#adapter.registerInteractionHandler adds event listener for a given event to the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('keydown handler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerInteractionHandler('keydown', handler);\n       emitEvent(root, 'keydown');\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.deregisterInteractionHandler removes event listener for a given event from the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('keydown handler');\n\n       root.addEventListener('keydown', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterInteractionHandler('keydown', handler);\n       emitEvent(root, 'keydown');\n\n       expect(handler).not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.notifyIconAction emits ' +\n         `${MDCSelectIconFoundation.strings.ICON_EVENT}`,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('handler');\n\n       component.listen(MDCSelectIconFoundation.strings.ICON_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyIconAction();\n\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n});\n"
  },
  {
    "path": "packages/mdc-select/icon/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {strings} from '../constants';\nimport {MDCSelectIconFoundation} from '../foundation';\n\ndescribe('MDCSelectIconFoundation', () => {\n  it('exports strings', () => {\n    expect(MDCSelectIconFoundation.strings).toEqual(strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSelectIconFoundation, [\n      'getAttr',\n      'setAttr',\n      'removeAttr',\n      'setContent',\n      'registerInteractionHandler',\n      'deregisterInteractionHandler',\n      'notifyIconAction',\n    ]);\n  });\n\n  const setupTest =\n      () => {\n        const {foundation, mockAdapter} =\n            setUpFoundationTest(MDCSelectIconFoundation);\n        return {foundation, mockAdapter};\n      }\n\n  it('#init adds event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n  });\n\n  it('#destroy removes event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n  });\n\n  it('#setDisabled sets icon tabindex to -1 and removes role when set to true if icon initially had a tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue('1');\n       foundation.init();\n\n       foundation.setDisabled(true);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('tabindex', '-1');\n       expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');\n     });\n\n  it('#setDisabled does not change icon tabindex or role when set to true if icon initially had no tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue(null);\n       foundation.init();\n\n       foundation.setDisabled(true);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('tabindex', jasmine.any(String));\n       expect(mockAdapter.removeAttr).not.toHaveBeenCalledWith('role');\n     });\n\n  it('#setDisabled restores icon tabindex and role when set to false if icon initially had a tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const expectedTabIndex = '1';\n       mockAdapter.getAttr.withArgs('tabindex')\n           .and.returnValue(expectedTabIndex);\n       foundation.init();\n\n       foundation.setDisabled(false);\n       expect(mockAdapter.setAttr)\n           .toHaveBeenCalledWith('tabindex', expectedTabIndex);\n       expect(mockAdapter.setAttr)\n           .toHaveBeenCalledWith('role', strings.ICON_ROLE);\n     });\n\n  it('#setDisabled does not change icon tabindex or role when set to false if icon initially had no tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue(null);\n       foundation.init();\n\n       foundation.setDisabled(false);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('tabindex', jasmine.any(String));\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('role', jasmine.any(String));\n     });\n\n  it('#setAriaLabel updates the aria-label', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const ariaLabel = 'Test label';\n    foundation.init();\n\n    foundation.setAriaLabel(ariaLabel);\n    expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-label', ariaLabel);\n  });\n\n  it('#setContent updates the text content', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const content = 'test';\n    foundation.init();\n\n    foundation.setContent(content);\n    expect(mockAdapter.setContent).toHaveBeenCalledWith(content);\n  });\n\n  it('on click notifies custom icon event', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const event = {\n      target: {},\n      type: 'click',\n    };\n    let click;\n\n    mockAdapter.registerInteractionHandler\n        .withArgs('click', jasmine.any(Function))\n        .and.callFake((_eventType: string, handler: Function) => {\n          click = handler;\n        });\n\n    foundation.init();\n    (click as unknown as Function)(event);\n    expect(mockAdapter.notifyIconAction).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-select/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\nexport * from './helper-text/index';\nexport * from './icon/index';\n"
  },
  {
    "path": "packages/mdc-select/mdc-select.import.scss",
    "content": "@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/floating-label/variables\" as mdc-floating-label-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/notched-outline/variables\" as mdc-notched-outline-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"icon\" as mdc-select-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/floating-label/mixins\" as mdc-floating-label-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/line-ripple/mixins\" as mdc-line-ripple-*;\n@forward \"@material/notched-outline/mixins\" as mdc-notched-outline-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"mixins\" as mdc-select-*;\n@forward \"helper-text\" as mdc-select-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/line-ripple/functions\" as mdc-line-ripple-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"mdc-select\";\n"
  },
  {
    "path": "packages/mdc-select/mdc-select.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-select/package.json",
    "content": "{\n  \"name\": \"@material/select\",\n  \"description\": \"The Material Components web select (text field drop-down) component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"select\",\n    \"multi select\"\n  ],\n  \"main\": \"dist/mdc.select.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-select\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/floating-label\": \"^14.0.0\",\n    \"@material/line-ripple\": \"^14.0.0\",\n    \"@material/list\": \"^14.0.0\",\n    \"@material/menu\": \"^14.0.0\",\n    \"@material/menu-surface\": \"^14.0.0\",\n    \"@material/notched-outline\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/touch-target\": \"14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-select/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './select';\n@use '@material/floating-label/mdc-floating-label'; // COPYBARA_COMMENT_THIS_LINE\n@use '@material/ripple/common'; // COPYBARA_COMMENT_THIS_LINE\n@use '@material/line-ripple/mdc-line-ripple'; // COPYBARA_COMMENT_THIS_LINE\n@use '@material/notched-outline/mdc-notched-outline'; // COPYBARA_COMMENT_THIS_LINE\n\n@include select.core-styles;\n"
  },
  {
    "path": "packages/mdc-select/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCMenu, MDCMenuFoundation} from '../../mdc-menu/index';\nimport {Corner} from '../../mdc-menu-surface/constants';\nimport {MDCMenuSurfaceFoundation} from '../../mdc-menu-surface/index';\nimport {MDCNotchedOutline} from '../../mdc-notched-outline/index';\nimport {MDCRipple, MDCRippleFoundation} from '../../mdc-ripple/index';\nimport {supportsCssVariables} from '../../mdc-ripple/util';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createFixture, html} from '../../../testing/dom/index';\nimport {checkNumTimesSpyCalledWithArgs, createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, strings} from '../constants';\nimport {MDCSelectFoundation} from '../foundation';\nimport {MDCSelectIcon} from '../icon';\nimport {MDCSelect} from '../index';\n\nconst LABEL_WIDTH = 100;\n\nclass FakeLabel {\n  float: jasmine.Spy = jasmine.createSpy('label.float');\n  getWidth: jasmine.Spy = jasmine.createSpy('label.getWidth');\n  setRequired: jasmine.Spy = jasmine.createSpy('label.setRequired');\n\n  constructor() {\n    this.getWidth.and.returnValue(LABEL_WIDTH);\n  }\n}\n\nclass FakeBottomLine {\n  activate: jasmine.Spy = jasmine.createSpy('bottomLine.activate');\n  deactivate: jasmine.Spy = jasmine.createSpy('bottomLine.deactivate');\n  setRippleCenter: jasmine.Spy =\n      jasmine.createSpy('bottomLine.setRippleCenter');\n}\n\nclass FakeOutline {\n  destroy: jasmine.Spy = jasmine.createSpy('.destroy');\n  notch: jasmine.Spy = jasmine.createSpy('.notch');\n  closeNotch: jasmine.Spy = jasmine.createSpy('.closeNotch');\n}\n\nclass FakeMenu {\n  destroy: jasmine.Spy = jasmine.createSpy('.destroy');\n  items: HTMLElement[] = [];\n  selectedIndex: number = -1;\n  hoistMenuToBody: jasmine.Spy = jasmine.createSpy('.hoistMenuToBody');\n  setAnchorElement: jasmine.Spy = jasmine.createSpy('.setAnchorElement');\n  setAnchorCorner: jasmine.Spy = jasmine.createSpy('.setAnchorCorner');\n  typeaheadMatchItem: jasmine.Spy = jasmine.createSpy('.typeaheadMatchItem');\n  listen: jasmine.Spy = jasmine.createSpy('.listen');\n  unlisten: jasmine.Spy = jasmine.createSpy('.listen');\n  layout: jasmine.Spy = jasmine.createSpy('.layout');\n\n  open: boolean = false;\n  wrapFocus: boolean = false;\n  typeaheadInProgress: boolean = false;\n}\n\nclass FakeIcon {\n  destroy: jasmine.Spy = jasmine.createSpy('.destroy');\n}\n\nclass FakeHelperText {\n  destroy: jasmine.Spy = jasmine.createSpy('.destroy');\n}\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-select mdc-select--with-leading-icon\">\n      <input type=\"hidden\" name=\"test-input\">\n      <div class=\"mdc-select__anchor\">\n        <span class=\"mdc-select__ripple\"></span>\n        <i class=\"mdc-select__icon material-icons\">code</i>\n        <span class=\"mdc-select__selected-text\"></span>\n        <span class=\"mdc-select__dropdown-icon\">\n          <svg\n              width=\"10px\"\n              height=\"5px\"\n              viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n                class=\"mdc-select__dropdown-icon-inactive\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 10 12 15 17 10\">\n            </polygon>\n            <polygon\n                class=\"mdc-select__dropdown-icon-active\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 15 12 10 17 15\">\n            </polygon>\n          </svg>\n        </span>\n        <span class=\"mdc-floating-label\">Pick a Food Group</span>\n        <span class=\"mdc-line-ripple\"></span>\n      </div>\n\n      <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item\" data-value=\"\" aria-label=\"Empty\"></li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"orange\" aria-label=\"Orange\">\n            <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"apple\" aria-label=\"Apple\">\n            <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  `);\n}\n\nfunction getOutlineFixture() {\n  return createFixture(html`\n    <div class=\"mdc-select mdc-select--outlined mdc-select--with-leading-icon\">\n      <input type=\"hidden\" name=\"test-input\">\n      <div class=\"mdc-select__anchor\">\n        <i class=\"mdc-select__icon material-icons\">code</i>\n        <span class=\"mdc-select__selected-text\"></span>\n        <span class=\"mdc-select__dropdown-icon\">\n          <svg\n              width=\"10px\"\n              height=\"5px\"\n              viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n                class=\"mdc-select__dropdown-icon-inactive\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 10 12 15 17 10\">\n            </polygon>\n            <polygon\n                class=\"mdc-select__dropdown-icon-active\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 15 12 10 17 15\">\n            </polygon>\n          </svg>\n        </span>\n        <span class=\"mdc-notched-outline\">\n          <span class=\"mdc-notched-outline__leading\"></span>\n          <span class=\"mdc-notched-outline__notch\">\n            <span class=\"mdc-floating-label\">Pick a Food Group</span>\n          </span>\n          <span class=\"mdc-notched-outline__trailing\"></span>\n        </span>\n      </div>\n\n      <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item\" data-value=\"\"></li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n            <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n            <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  `);\n}\n\nfunction getHelperTextFixture(root = getFixture()) {\n  const containerDiv = document.createElement('div');\n  root.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!.setAttribute(\n      'aria-controls', 'test-helper-text');\n  containerDiv.appendChild(root);\n  containerDiv.appendChild(createFixture(\n      html`<p class=\"mdc-select-helper-text\" id=\"test-helper-text\">Hello World</p>`));\n  return containerDiv;\n}\n\nfunction setupTest(\n    hasOutline = false, hasLabel = true, hasMockFoundation = false,\n    hasMockMenu = true, hasHelperText = false) {\n  // Clean up: Remove all menu elements from DOM first.\n  const menuEls = document.querySelectorAll<HTMLElement>(strings.MENU_SELECTOR);\n  [].forEach.call(\n      menuEls, (el: HTMLElement) => el.parentElement!.removeChild(el));\n\n  const bottomLine = new FakeBottomLine();\n  const label = new FakeLabel();\n  const fixture = hasOutline ? getOutlineFixture() : getFixture();\n  const anchor =\n      fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!;\n  const container = hasHelperText ? getHelperTextFixture(fixture) : null;\n  const selectedText =\n      fixture.querySelector<HTMLElement>(strings.SELECTED_TEXT_SELECTOR)!;\n  const labelEl = fixture.querySelector<HTMLElement>(strings.LABEL_SELECTOR)!;\n  const bottomLineEl =\n      fixture.querySelector<HTMLElement>(strings.LINE_RIPPLE_SELECTOR)!;\n  const menuSurface =\n      fixture.querySelector<HTMLElement>(strings.MENU_SELECTOR)!;\n  const mockFoundation = createMockFoundation(MDCSelectFoundation);\n  const mockMenu = new FakeMenu();\n\n  const outline = new FakeOutline();\n  const icon = new FakeIcon();\n  const helperText = new FakeHelperText();\n\n  if (!hasLabel) {\n    labelEl.parentElement!.removeChild(labelEl);\n  }\n\n  if (container) {\n    document.body.appendChild(container);\n  }\n\n  const component = new MDCSelect(\n      fixture, hasMockFoundation ? mockFoundation : undefined, () => label,\n      () => bottomLine, () => outline,\n      hasMockMenu ? () => mockMenu : (el: HTMLElement) => new MDCMenu(el),\n      () => icon, () => helperText);\n\n  return {\n    fixture,\n    anchor,\n    selectedText,\n    label,\n    labelEl,\n    bottomLine,\n    bottomLineEl,\n    component,\n    outline,\n    menuSurface,\n    mockFoundation,\n    mockMenu,\n    icon,\n    helperText,\n    container\n  };\n}\n\nfunction setupWithMockFoundation() {\n  return setupTest(false, true, true);\n}\n\ndescribe('MDCSelect', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo returns a component instance', () => {\n    expect(MDCSelect.attachTo(getFixture()) instanceof MDCSelect).toBeTruthy();\n  });\n\n  it('#get/setSelectedIndex', () => {\n    const hasMockFoundation = false;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, menuSurface} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    expect(component.selectedIndex).toEqual(0);\n    component.selectedIndex = 1;\n    expect(component.selectedIndex).toEqual(1);\n    menuSurface.parentElement!.removeChild(menuSurface);\n  });\n\n  it('#get/setSelectedIndex 2x removes previously selected element', () => {\n    const hasMockFoundation = false;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, menuSurface} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    expect(component.selectedIndex).toEqual(0);\n    component.selectedIndex = 1;\n    component.selectedIndex = 2;\n    expect(component.selectedIndex).toEqual(2);\n    expect(menuSurface\n               .querySelectorAll<HTMLElement>(\n                   '.mdc-deprecated-list-item--selected')\n               .length)\n        .toEqual(1);\n    menuSurface.parentElement!.removeChild(menuSurface);\n  });\n\n  it('#get/set disabled', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.disabled = true;\n    checkNumTimesSpyCalledWithArgs(mockFoundation.setDisabled, [true], 1);\n    expect((component as any).hiddenInput.disabled).toBeTrue();\n    component.disabled = false;\n    checkNumTimesSpyCalledWithArgs(mockFoundation.setDisabled, [false], 1);\n    expect((component as any).hiddenInput.disabled).toBeFalse();\n  });\n\n  it('#get/set required true', () => {\n    const {fixture, component, anchor} = setupTest();\n    expect(component.required).toBe(false);\n\n    component.required = true;\n    expect(component.required).toBe(true);\n    expect(fixture).toHaveClass(cssClasses.REQUIRED);\n    expect(anchor.getAttribute('aria-required')).toBe('true');\n  });\n\n  it('#get/set required false', () => {\n    const {fixture, component, anchor} = setupTest();\n    expect(component.required).toBe(false);\n\n    component.required = false;\n    expect(component.required).toBe(false);\n    expect(fixture).not.toHaveClass(cssClasses.REQUIRED);\n    expect(anchor.getAttribute('aria-required')).toBe('false');\n  });\n\n  it('#get value', () => {\n    const hasMockFoundation = false;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, menuSurface} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    expect(component.value).toEqual('');\n    component.selectedIndex = 2;\n    expect(component.value).toEqual('apple');\n    component.selectedIndex = 1;\n    expect(component.value).toEqual('orange');\n    menuSurface.parentElement!.removeChild(menuSurface);\n  });\n\n  it('#set value calls foundation.setValue', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.value = 'orange';\n    expect(mockFoundation.setValue).toHaveBeenCalledWith('orange');\n    expect(mockFoundation.setValue).toHaveBeenCalledTimes(1);\n  });\n\n  it('#setValue calls foundation.setValue with params', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.setValue('orange', /** skipNotify */ true);\n    expect(mockFoundation.setValue).toHaveBeenCalledWith('orange', true);\n  });\n\n  it('#layout calls foundation.layout', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.layout();\n    expect(mockFoundation.layout).toHaveBeenCalled();\n  });\n\n  it('#layoutOptions calls foundation.layoutOptions and menu.layout', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.layoutOptions();\n    expect(mockFoundation.layoutOptions).toHaveBeenCalled();\n    expect(mockMenu.layout).toHaveBeenCalled();\n  });\n\n  it('#layoutOptions refreshes menu options cache', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component['menuItemValues'] = [];\n    component.layoutOptions();\n    expect(component['menuItemValues']).toEqual(['', 'orange', 'apple']);\n  });\n\n  it('#set useDefaultValidation forwards to foundation', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n\n    component.useDefaultValidation = false;\n    expect(mockFoundation.setUseDefaultValidation).toHaveBeenCalled();\n  });\n\n  it('#get valid forwards to foundation', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n\n    component.valid;\n    expect(mockFoundation.isValid).toHaveBeenCalled();\n  });\n\n  it('#set valid forwards to foundation', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n\n    component.valid = false;\n    expect(mockFoundation.setValid).toHaveBeenCalledWith(false);\n    component.valid = true;\n    expect(mockFoundation.setValid).toHaveBeenCalledWith(true);\n  });\n\n  it('#get selectedIndex calls foundation.getSelectedIndex', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.selectedIndex;\n    expect(mockFoundation.getSelectedIndex).toHaveBeenCalledTimes(1);\n  });\n\n  it('#set selectedIndex calls foundation.setSelectedIndex', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.selectedIndex = 1;\n    expect(mockFoundation.setSelectedIndex)\n        .toHaveBeenCalledWith(1, /** closeMenu */ true);\n  });\n\n  it('#setSelectedIndex calls foundation.setSelectedIndex with params', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.setSelectedIndex(1, true);\n    expect(mockFoundation.setSelectedIndex)\n        .toHaveBeenCalledWith(1, /** closeMenu */ true, /** skipNotify */ true);\n  });\n\n  it('#set disabled calls foundation.setDisabled', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.disabled = true;\n    expect(mockFoundation.setDisabled).toHaveBeenCalledWith(true);\n  });\n\n  it('#set leadingIconAriaLabel calls foundation.setLeadingIconAriaLabel',\n     () => {\n       const hasMockFoundation = true;\n       const hasMockMenu = true;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {component, mockFoundation} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       component.leadingIconAriaLabel = 'true';\n       expect(mockFoundation.setLeadingIconAriaLabel)\n           .toHaveBeenCalledWith('true');\n     });\n\n  it('#set leadingIconContent calls foundation.setLeadingIconAriaLabel', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    component.leadingIconContent = 'hello_world';\n    expect(mockFoundation.setLeadingIconContent)\n        .toHaveBeenCalledWith('hello_world');\n    expect(mockFoundation.setLeadingIconContent).toHaveBeenCalledTimes(1);\n  });\n\n  it('#set helperTextContent calls foundation.setHelperTextContent', () => {\n    const {component} = setupTest();\n    (component as any).foundation.setHelperTextContent = jasmine.createSpy('');\n    component.helperTextContent = 'hello_world';\n    expect((component as any).foundation.setHelperTextContent)\n        .toHaveBeenCalledWith('hello_world');\n    expect((component as any).foundation.setHelperTextContent)\n        .toHaveBeenCalledTimes(1);\n  });\n\n  it('#initialSyncWithDOM sets the selected index and hidden input value' +\n         ' if an option has the selected class',\n     () => {\n       const fixture = createFixture(html`\n        <div class=\"mdc-select\">\n          <input type=\"hidden\" name=\"test-input\">\n          <div class=\"mdc-select__anchor\">\n            <span class=\"mdc-select__ripple\"></span>\n            <i class=\"mdc-select__icon material-icons\">code</i>\n            <span class=\"mdc-select__selected-text\"></span>\n            <span class=\"mdc-select__dropdown-icon\">\n              <svg\n                  width=\"10px\"\n                  height=\"5px\"\n                  viewBox=\"7 10 10 5\" focusable=\"false\">\n                <polygon\n                    class=\"mdc-select__dropdown-icon-inactive\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 10 12 15 17 10\">\n                </polygon>\n                <polygon\n                    class=\"mdc-select__dropdown-icon-active\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 15 12 10 17 15\">\n                </polygon>\n              </svg>\n            </span>\n            <span class=\"mdc-floating-label\">Pick a Food Group</span>\n            <span class=\"mdc-line-ripple\"></span>\n          </div>\n\n          <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n            <ul class=\"mdc-deprecated-list\">\n              <li class=\"mdc-deprecated-list-item\" data-value=\"\"></li>\n              <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"orange\">\n                <span class=\"mdc-deprecated-list-tem__text\">Orange</span>\n              </li>\n              <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n                <span class=\"mdc-deprecated-list-tem__text\">Apple</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      `);\n       const component = new MDCSelect(fixture, /* foundation */ undefined);\n       expect(component.selectedIndex).toEqual(1);\n       expect((component as any).hiddenInput.value).toEqual('orange');\n     });\n\n  it('#initialSyncWithDOM sets value if hidden input has value', () => {\n    const fixture = createFixture(html`\n      <div class=\"mdc-select mdc-select--with-leading-icon\">\n        <input type=\"hidden\" name=\"test-input\" value=\"orange\">\n        <div class=\"mdc-select__anchor\">\n          <span class=\"mdc-select__ripple\"></span>\n          <i class=\"mdc-select__icon material-icons\">code</i>\n          <span class=\"mdc-select__selected-text\"></span>\n          <span class=\"mdc-select__dropdown-icon\">\n            <svg\n                width=\"10px\"\n                height=\"5px\"\n                viewBox=\"7 10 10 5\" focusable=\"false\">\n              <polygon\n                  class=\"mdc-select__dropdown-icon-inactive\"\n                  stroke=\"none\"\n                  fill-rule=\"evenodd\"\n                  points=\"7 10 12 15 17 10\">\n              </polygon>\n              <polygon\n                  class=\"mdc-select__dropdown-icon-active\"\n                  stroke=\"none\"\n                  fill-rule=\"evenodd\"\n                  points=\"7 15 12 10 17 15\">\n              </polygon>\n            </svg>\n          </span>\n          <span class=\"mdc-floating-label\">Pick a Food Group</span>\n          <span class=\"mdc-line-ripple\"></span>\n        </div>\n\n        <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n          <ul class=\"mdc-deprecated-list\">\n            <li class=\"mdc-deprecated-list-item\" data-value=\"\"></li>\n            <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n              <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n            </li>\n            <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n              <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n            </li>\n          </ul>\n        </div>\n      </div>`);\n\n    const component = new MDCSelect(fixture, /* foundation */ undefined);\n    expect(component.selectedIndex).toEqual(1);\n  });\n\n  it('#initialSyncWithDOM sets the selected index if empty option has the selected class',\n     () => {\n       const fixture = createFixture(html`\n        <div class=\"mdc-select\">\n          <div class=\"mdc-select__anchor\">\n            <span class=\"mdc-select__ripple\"></span>\n            <i class=\"mdc-select__icon material-icons\">code</i>\n            <span class=\"mdc-select__selected-text\"></span>\n            <span class=\"mdc-select__dropdown-icon\">\n              <svg\n                  width=\"10px\"\n                  height=\"5px\"\n                  viewBox=\"7 10 10 5\" focusable=\"false\">\n                <polygon\n                    class=\"mdc-select__dropdown-icon-inactive\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 10 12 15 17 10\">\n                </polygon>\n                <polygon\n                    class=\"mdc-select__dropdown-icon-active\"\n                    stroke=\"none\"\n                    fill-rule=\"evenodd\"\n                    points=\"7 15 12 10 17 15\">\n                </polygon>\n              </svg>\n            </span>\n            <span class=\"mdc-floating-label\">Pick a Food Group</span>\n            <span class=\"mdc-line-ripple\"></span>\n          </div>\n\n          <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n            <ul class=\"mdc-deprecated-list\">\n              <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"\"></li>\n              <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n                Orange\n              </li>\n              <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n                Apple\n              </li>\n            </ul>\n          </div>\n        </div>\n      `);\n       const component = new MDCSelect(fixture, /* foundation */ undefined);\n       expect(component.selectedIndex).toEqual(0);\n     });\n\n  it('#initialSyncWithDOM disables the select if the disabled class is found',\n     () => {\n       const fixture = createFixture(html`\n    <div class=\"mdc-select mdc-select--disabled\">\n      <div class=\"mdc-select__anchor\">\n        <span class=\"mdc-select__ripple\"></span>\n        <i class=\"mdc-select__icon material-icons\">code</i>\n        <span class=\"mdc-select__selected-text\"></span>\n        <span class=\"mdc-select__dropdown-icon\">\n          <svg\n              width=\"10px\"\n              height=\"5px\"\n              viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n                class=\"mdc-select__dropdown-icon-inactive\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 10 12 15 17 10\">\n            </polygon>\n            <polygon\n                class=\"mdc-select__dropdown-icon-active\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 15 12 10 17 15\">\n            </polygon>\n          </svg>\n        </span>\n        <span class=\"mdc-floating-label\">Pick a Food Group</span>\n        <span class=\"mdc-line-ripple\"></span>\n      </div>\n\n      <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"\"></li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n            <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n            <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  `);\n       const component = new MDCSelect(fixture);\n       expect(component.disabled).toBe(true);\n     });\n\n  it('instantiates ripple', () => {\n    if (!supportsCssVariables(window, true)) {\n      return;\n    }\n\n    const fixture = getFixture();\n\n    const component = MDCSelect.attachTo(fixture);\n    jasmine.clock().tick(1);\n\n    expect((component as any).ripple).toEqual(jasmine.any(MDCRipple));\n    const anchor =\n        fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!;\n    expect(anchor).toHaveClass(MDCRippleFoundation.cssClasses.ROOT);\n  });\n\n  it(`#constructor instantiates an outline on the ${\n         strings.OUTLINE_SELECTOR} element if present`,\n     () => {\n       const root = getOutlineFixture();\n       const component = new MDCSelect(root);\n       expect((component as any).outline)\n           .toEqual(jasmine.any(MDCNotchedOutline));\n     });\n\n  it('handles ripple focus properly', () => {\n    if (!supportsCssVariables(window, true)) {\n      return;\n    }\n\n    const fixture = getFixture();\n\n    MDCSelect.attachTo(fixture);\n    jasmine.clock().tick(1);\n\n    const anchor =\n        fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!;\n\n    emitEvent(anchor, 'focus');\n    jasmine.clock().tick(1);\n\n    expect(anchor).toHaveClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);\n  });\n\n  it('#destroy removes the ripple', () => {\n    if (!supportsCssVariables(window, true)) {\n      return;\n    }\n\n    const fixture = getFixture();\n\n    const component = new MDCSelect(fixture);\n    jasmine.clock().tick(1);\n\n    const anchor =\n        fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR)!;\n\n    expect(anchor).toHaveClass(MDCRippleFoundation.cssClasses.ROOT);\n    component.destroy();\n    jasmine.clock().tick(1);\n    expect(anchor).not.toHaveClass(MDCRippleFoundation.cssClasses.ROOT);\n  });\n\n  it('#destroy cleans up the outline if present', () => {\n    const {component, outline} = setupTest();\n    (component as any).outline = outline;\n    component.destroy();\n    expect(outline.destroy).toHaveBeenCalled();\n  });\n\n  it(`does not instantiate ripple when ${cssClasses.OUTLINED} class is present`,\n     () => {\n       const hasOutline = true;\n       const {component} = setupTest(hasOutline);\n       expect((component as any).ripple).toBe(undefined);\n       expect(() => {\n         component.destroy();\n       }).not.toThrow();\n     });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {component, fixture} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(fixture).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {component, fixture} = setupTest();\n    fixture.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(fixture).not.toHaveClass('foo');\n  });\n\n  it('adapter#hasClass returns true if a class exists on the root element',\n     () => {\n       const {component, fixture} = setupTest();\n       fixture.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('adapter#floatLabel does not throw error if label does not exist', () => {\n    const fixture = createFixture(html`\n    <div class=\"mdc-select\">\n      <div class=\"mdc-select__anchor\">\n        <span class=\"mdc-select__ripple\"></span>\n        <i class=\"mdc-select__icon material-icons\">code</i>\n        <span class=\"mdc-select__selected-text\"></span>\n        <span class=\"mdc-select__dropdown-icon\">\n          <svg\n              width=\"10px\"\n              height=\"5px\"\n              viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n                class=\"mdc-select__dropdown-icon-inactive\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 10 12 15 17 10\">\n            </polygon>\n            <polygon\n                class=\"mdc-select__dropdown-icon-active\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 15 12 10 17 15\">\n            </polygon>\n          </svg>\n        </span>\n        <span class=\"mdc-line-ripple\"></span>\n      </div>\n\n      <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"\"></li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n            <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n            <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  `);\n    const component = new MDCSelect(fixture);\n    expect(\n        () =>\n            (component.getDefaultFoundation() as any).adapter.floatLabel('foo'))\n        .not.toThrow();\n  });\n\n  it('adapter#activateBottomLine and adapter.deactivateBottomLine ' +\n         'does not throw error if bottomLine does not exist',\n     () => {\n       const fixture = createFixture(html`\n    <div class=\"mdc-select\">\n      <div class=\"mdc-select__anchor\">\n        <span class=\"mdc-select__ripple\"></span>\n        <i class=\"mdc-select__icon material-icons\">code</i>\n        <span class=\"mdc-select__selected-text\"></span>\n        <span class=\"mdc-select__dropdown-icon\">\n          <svg\n              width=\"10px\"\n              height=\"5px\"\n              viewBox=\"7 10 10 5\" focusable=\"false\">\n            <polygon\n                class=\"mdc-select__dropdown-icon-inactive\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 10 12 15 17 10\">\n            </polygon>\n            <polygon\n                class=\"mdc-select__dropdown-icon-active\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                points=\"7 15 12 10 17 15\">\n            </polygon>\n          </svg>\n        </span>\n        <span class=\"mdc-floating-label\">Pick a Food Group</span>\n      </div>\n\n      <div class=\"mdc-select__menu mdc-menu mdc-menu-surface\">\n        <ul class=\"mdc-deprecated-list\">\n          <li class=\"mdc-deprecated-list-item mdc-deprecated-list-item--selected\" data-value=\"\"></li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"orange\">\n            <span class=\"mdc-deprecated-list-item__text\">Orange</span>\n          </li>\n          <li class=\"mdc-deprecated-list-item\" data-value=\"apple\">\n            <span class=\"mdc-deprecated-list-item__text\">Apple</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  `);\n       const component = new MDCSelect(fixture);\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.activateBottomLine())\n           .not.toThrow();\n       expect(\n           () => (component.getDefaultFoundation() as any)\n                     .adapter.deactivateBottomLine())\n           .not.toThrow();\n     });\n\n  it('adapter#floatLabel adds a class to the label', () => {\n    const {component, label} = setupTest();\n\n    (component.getDefaultFoundation() as any).adapter.floatLabel('foo');\n    expect(label.float).toHaveBeenCalledWith('foo');\n  });\n\n  it('adapter#activateBottomLine adds active class to the bottom line', () => {\n    const {component, bottomLine} = setupTest();\n\n    (component.getDefaultFoundation() as any).adapter.activateBottomLine();\n    expect(bottomLine.activate).toHaveBeenCalled();\n  });\n\n  it('adapter#deactivateBottomLine removes active class from the bottom line',\n     () => {\n       const {component, bottomLine} = setupTest();\n\n       (component.getDefaultFoundation() as any).adapter.deactivateBottomLine();\n       expect(bottomLine.deactivate).toHaveBeenCalled();\n     });\n\n  it('adapter#notchOutline proxies labelWidth to the outline', () => {\n    const hasOutline = true;\n    const {component, outline} = setupTest(hasOutline);\n\n    (component.getDefaultFoundation() as any).adapter.notchOutline(LABEL_WIDTH);\n    expect(outline.notch).toHaveBeenCalledWith(LABEL_WIDTH);\n    expect(outline.notch).toHaveBeenCalledTimes(1);\n  });\n\n  it('adapter#notchOutline does not proxy values to the outline if it does not exist',\n     () => {\n       const hasOutline = false;\n       const {component, outline} = setupTest(hasOutline);\n\n       (component.getDefaultFoundation() as any)\n           .adapter.notchOutline(LABEL_WIDTH);\n       expect(outline.notch).not.toHaveBeenCalledWith(LABEL_WIDTH);\n     });\n\n  it('adapter#notifyChange updates hidden input', () => {\n    const {component} = setupTest();\n    component['getDefaultFoundation']()['adapter'].notifyChange('foo');\n    expect((component as any).hiddenInput.value).toEqual('foo');\n  });\n\n  it('adapter#closeOutline closes the outline if there is an outline', () => {\n    const hasOutline = true;\n    const {component, outline} = setupTest(hasOutline);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    adapter.closeOutline();\n    expect(outline.closeNotch).toHaveBeenCalled();\n  });\n\n  it('adapter#closeOutline does nothing if there is no outline', () => {\n    const hasOutline = false;\n    const {component, outline} = setupTest(hasOutline);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    adapter.closeOutline();\n    expect(outline.closeNotch).not.toHaveBeenCalled();\n  });\n\n  it('adapter#getLabelWidth returns the width of the label', () => {\n    const {component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.getLabelWidth())\n        .toEqual(LABEL_WIDTH);\n  });\n\n  it('adapter#getLabelWidth returns 0 if the label does not exist', () => {\n    const hasOutline = true;\n    const hasLabel = false;\n    const {component} = setupTest(hasOutline, hasLabel);\n\n    expect((component.getDefaultFoundation() as any).adapter.getLabelWidth())\n        .toEqual(0);\n  });\n\n  it('adapter#focusMenuItemAtIndex', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, menuSurface, fixture} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const index = 1;\n    const menuItem = menuSurface.querySelectorAll<HTMLElement>(\n        '.mdc-deprecated-list-item')[index];\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    adapter.focusMenuItemAtIndex(index);\n    expect(document.activeElement).toEqual(menuItem);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setSelectedText sets the select text content correctly', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, selectedText} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    const textToSet = 'foo';\n    expect(selectedText.textContent).not.toEqual(textToSet);\n    adapter.setSelectedText(textToSet);\n    expect(selectedText.textContent).toEqual(textToSet);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setSelectedText, by product by setting selectedIndex,' +\n         ' sets the selected text aria-label correctly',\n     () => {\n       const hasMockFoundation = false;\n       const hasMockMenu = false;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {fixture, component, selectedText} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       document.body.appendChild(fixture);\n\n       component.selectedIndex = 2;\n       expect(selectedText.getAttribute('aria-label')).toEqual('Apple');\n       document.body.removeChild(fixture);\n     });\n\n  it('adapter#isSelectAnchorFocused', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, anchor} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    anchor.tabIndex = 0;\n    anchor.focus();\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    expect(adapter.isSelectAnchorFocused()).toBe(true);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#getSelectAnchorAttr gets the attribute content correctly', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, anchor} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    expect(anchor.hasAttribute('foo')).toBe(false);\n    anchor.setAttribute('foo', '1');\n    expect(adapter.getSelectAnchorAttr('foo')).toEqual('1');\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setSelectAnchorAttr sets the attribute content correctly', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, anchor} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    expect(anchor.hasAttribute('data-foo')).toBe(false);\n    adapter.setSelectAnchorAttr('data-foo', '1');\n    expect(anchor.getAttribute('data-foo')).toEqual('1');\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#openMenu causes the menu to open', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    adapter.openMenu();\n    expect(mockMenu.open).toBe(true);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#closeMenu causes the menu to close', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    adapter.openMenu();\n    adapter.closeMenu();\n    expect(mockMenu.open).toBe(false);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#getAnchorElement', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, anchor} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    expect(adapter.getAnchorElement()).toEqual(anchor);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setMenuAnchorElement', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu, anchor} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    adapter.setMenuAnchorElement(anchor);\n    expect(mockMenu.setAnchorElement).toHaveBeenCalledWith(anchor);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setMenuAnchorCorner', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    adapter.setMenuAnchorCorner(Corner.BOTTOM_START);\n    expect(mockMenu.setAnchorCorner).toHaveBeenCalledWith(Corner.BOTTOM_START);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#setMenuWrapFocus', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    adapter.setMenuWrapFocus(false);\n    expect(mockMenu.wrapFocus).toBe(false);\n    adapter.setMenuWrapFocus(true);\n    expect(mockMenu.wrapFocus).toBe(true);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#getMenuItemCount returns the correct number of menu items',\n     () => {\n       const hasMockFoundation = true;\n       const hasMockMenu = false;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {fixture, component} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       document.body.appendChild(fixture);\n\n       const adapter = (component.getDefaultFoundation() as any).adapter;\n       expect(adapter.getMenuItemCount()).toEqual(3);\n\n       document.body.removeChild(fixture);\n     });\n\n  it('adapter#getMenuItemValues returns the correct menu item values', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    expect(adapter.getMenuItemValues()).toEqual(['', 'orange', 'apple']);\n\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#getMenuItemAttr returns the menu item attribute', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {component, menuSurface} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n\n    const index = 1;\n    const menuItem = menuSurface.querySelectorAll<HTMLElement>(\n        '.mdc-deprecated-list-item')[index];\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    expect(adapter.getMenuItemAttr(menuItem, strings.VALUE_ATTR))\n        .toEqual('orange');\n  });\n\n  it('adapter#isTypeaheadInProgress queries menu state', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n\n    mockMenu.typeaheadInProgress = false;\n    expect(adapter.isTypeaheadInProgress()).toBe(false);\n    mockMenu.typeaheadInProgress = true;\n    expect(adapter.isTypeaheadInProgress()).toBe(true);\n    document.body.removeChild(fixture);\n  });\n\n  it('adapter#typeaheadMatchItem calls menu method', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, mockMenu} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    mockMenu.typeaheadMatchItem.and.returnValue(2);\n\n    expect(adapter.typeaheadMatchItem('a', 4)).toEqual(2);\n    expect(mockMenu.typeaheadMatchItem).toHaveBeenCalledWith('a', 4);\n    document.body.removeChild(fixture);\n  });\n\n  it('focus event triggers foundation.handleFocus()', () => {\n    const {anchor, mockFoundation} = setupWithMockFoundation();\n    emitEvent(anchor, 'focus');\n    expect(mockFoundation.handleFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('blur event triggers foundation.handleBlur()', () => {\n    const {anchor, mockFoundation} = setupWithMockFoundation();\n    emitEvent(anchor, 'blur');\n    expect(mockFoundation.handleBlur).toHaveBeenCalledTimes(1);\n  });\n\n  it('#destroy removes the focus handler', () => {\n    const {component, anchor, mockFoundation} = setupWithMockFoundation();\n    component.destroy();\n    emitEvent(anchor, 'focus');\n    expect(mockFoundation.handleFocus).not.toHaveBeenCalled();\n  });\n\n  it('#destroy removes the blur handler', () => {\n    const {component, anchor, mockFoundation} = setupWithMockFoundation();\n    component.destroy();\n    emitEvent(anchor, 'blur');\n    expect(mockFoundation.handleBlur).not.toHaveBeenCalled();\n  });\n\n  it('#destroy removes the click handler', () => {\n    const {component, anchor, mockFoundation} = setupWithMockFoundation();\n    component.destroy();\n    emitEvent(anchor, 'click');\n    expect(mockFoundation.handleClick).not.toHaveBeenCalled();\n  });\n\n  it('#destroy calls menu#destroy', () => {\n    const {component, mockMenu} = setupTest();\n    component.destroy();\n    expect(mockMenu.destroy).toHaveBeenCalledTimes(1);\n  });\n\n  it(`#destroy removes the listener for ${\n         MDCMenuFoundation.strings.SELECTED_EVENT} event`,\n     () => {\n       const hasMockFoundation = false;\n       const hasMockMenu = false;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {fixture, component, mockFoundation, menuSurface} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       document.body.appendChild(fixture);\n       component.destroy();\n\n       const eventType = MDCMenuFoundation.strings.SELECTED_EVENT;\n       const detail = {index: 1};\n       let event;\n       if (typeof CustomEvent === 'function') {\n         event = new CustomEvent(eventType, {\n           detail,\n           bubbles: false,\n         });\n       } else {\n         event = document.createEvent('CustomEvent');\n         event.initCustomEvent(eventType, false, false, detail);\n       }\n       menuSurface.dispatchEvent(event);\n       expect(mockFoundation.setSelectedIndex).not.toHaveBeenCalledWith(1);\n\n       document.body.removeChild(fixture);\n     });\n\n  it('#destroy removes the click listener', () => {\n    const {component, anchor} = setupTest();\n    (component as any).foundation.handleClick =\n        jasmine.createSpy('handleClick');\n    component.destroy();\n    emitEvent(anchor, 'click');\n    expect((component as any).foundation.handleClick).not.toHaveBeenCalled();\n  });\n\n  it('click on the anchor calls foundation.handleClick()', () => {\n    const {component, anchor} = setupTest();\n    (component as any).foundation.handleClick = jasmine.createSpy('');\n    emitEvent(anchor, 'click');\n    expect((component as any).foundation.handleClick).toHaveBeenCalled();\n  });\n\n  it('click on the anchor focuses on the anchor element', () => {\n    const {anchor} = setupTest();\n    anchor.focus = jasmine.createSpy('focus');\n    emitEvent(anchor, 'click');\n    expect(anchor.focus).toHaveBeenCalledTimes(1);\n  });\n\n  it('menu surface opened event causes the first element (if no element is selected) to be focused',\n     () => {\n       const hasMockFoundation = false;\n       const hasMockMenu = false;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {fixture, component, menuSurface} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       document.body.appendChild(fixture);\n       component.selectedIndex = -1;\n\n       emitEvent(\n           menuSurface, MDCMenuSurfaceFoundation.strings.OPENED_EVENT,\n           {bubbles: false, cancelable: true});\n\n       expect(document.activeElement)\n           .toEqual(menuSurface.querySelector<HTMLElement>(\n               '.mdc-deprecated-list-item'));\n       document.body.removeChild(fixture);\n     });\n\n  it('menu surface opened event handler calls Foundation#handleMenuOpened',\n     () => {\n       const hasMockFoundation = true;\n       const hasMockMenu = false;\n       const hasOutline = false;\n       const hasLabel = true;\n       const {fixture, mockFoundation, menuSurface} =\n           setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n       document.body.appendChild(fixture);\n\n       const event = document.createEvent('Event');\n       event.initEvent(\n           MDCMenuSurfaceFoundation.strings.OPENED_EVENT, false, true);\n       emitEvent(\n           menuSurface, MDCMenuSurfaceFoundation.strings.OPENED_EVENT,\n           {bubbles: false, cancelable: true});\n       expect(mockFoundation.handleMenuOpened).toHaveBeenCalledTimes(1);\n\n       document.body.removeChild(fixture);\n     });\n\n  it('menu surface opened event causes selected element to be focused', () => {\n    const hasMockFoundation = false;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, component, menuSurface} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    component.selectedIndex = 1;\n    emitEvent(\n        menuSurface, MDCMenuSurfaceFoundation.strings.OPENED_EVENT,\n        {bubbles: false, cancelable: true});\n\n    expect(document.activeElement)\n        .toEqual(menuSurface.querySelector<HTMLElement>(\n            '.mdc-deprecated-list-item--selected'));\n    expect(component.selectedIndex).toEqual(1);\n    document.body.removeChild(fixture);\n  });\n\n  it('keydown event is added to select anchor when initialized', () => {\n    const {fixture, mockFoundation} = setupWithMockFoundation();\n    document.body.appendChild(fixture);\n    emitEvent(\n        fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR) as\n            HTMLElement,\n        'keydown');\n    expect(mockFoundation.handleKeydown)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleKeydown).toHaveBeenCalledTimes(1);\n    document.body.removeChild(fixture);\n  });\n\n  it('keydown event is removed from select anchor when destroyed', () => {\n    const {fixture, mockFoundation, component} = setupWithMockFoundation();\n    document.body.appendChild(fixture);\n    component.destroy();\n    emitEvent(\n        fixture.querySelector<HTMLElement>(strings.SELECT_ANCHOR_SELECTOR) as\n            HTMLElement,\n        'keydown');\n    expect(mockFoundation.handleKeydown)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n    document.body.removeChild(fixture);\n  });\n\n  it('menu surface selected event causes the select to update', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, menuSurface, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const eventType = MDCMenuFoundation.strings.SELECTED_EVENT;\n    const detail = {index: 1};\n    let event;\n    if (typeof CustomEvent === 'function') {\n      event = new CustomEvent(eventType, {\n        detail,\n        bubbles: false,\n      });\n    } else {\n      event = document.createEvent('CustomEvent');\n      event.initCustomEvent(eventType, false, false, detail);\n    }\n    menuSurface.dispatchEvent(event);\n    expect(mockFoundation.handleMenuItemAction).toHaveBeenCalledWith(1);\n    expect(mockFoundation.handleMenuItemAction).toHaveBeenCalledTimes(1);\n\n    document.body.removeChild(fixture);\n  });\n\n  it('menu surface closed event sets aria-expanded to false', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = false;\n    const hasOutline = false;\n    const hasLabel = true;\n    const {fixture, menuSurface, mockFoundation} =\n        setupTest(hasOutline, hasLabel, hasMockFoundation, hasMockMenu);\n    document.body.appendChild(fixture);\n    const eventType = MDCMenuSurfaceFoundation.strings.CLOSING_EVENT;\n    let event;\n    if (typeof CustomEvent === 'function') {\n      event = new CustomEvent(eventType, {\n        bubbles: false,\n      });\n    } else {\n      event = document.createEvent('CustomEvent');\n      event.initCustomEvent(eventType, false, false, null);\n    }\n    menuSurface.dispatchEvent(event);\n    expect(mockFoundation.handleMenuClosing).toHaveBeenCalledTimes(1);\n\n    document.body.removeChild(fixture);\n  });\n\n  it('#constructor instantiates a leading icon if an icon element is present',\n     () => {\n       const root = getFixture();\n       const component = new MDCSelect(root);\n       expect((component as any).leadingIcon)\n           .toEqual(jasmine.any(MDCSelectIcon));\n       expect(root).toHaveClass(cssClasses.WITH_LEADING_ICON);\n     });\n\n  it('#constructor instantiates the helper text if present', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasLabel = true;\n    const hasOutline = false;\n    const hasHelperText = true;\n    const {container, component} = setupTest(\n        hasLabel, hasOutline, hasMockFoundation, hasMockMenu, hasHelperText);\n\n    expect((component as any).helperText).toEqual(jasmine.any(FakeHelperText));\n    document.body.removeChild(container as HTMLElement);\n  });\n\n  it('#constructor does not instantiate the helper text if the aria-controls id does not match an element',\n     () => {\n       const containerDiv = getHelperTextFixture();\n       containerDiv.querySelector<HTMLElement>('.mdc-select-helper-text')!.id =\n           'hello-world';\n       document.body.appendChild(containerDiv);\n\n       const component = new MDCSelect(\n           containerDiv.querySelector<HTMLElement>('.mdc-select') as\n           HTMLElement);\n       expect((component as any).helperText).toBe(undefined);\n       document.body.removeChild(containerDiv as HTMLElement);\n     });\n\n  it('#destroy destroys the helper text if it exists', () => {\n    const hasMockFoundation = true;\n    const hasMockMenu = true;\n    const hasLabel = true;\n    const hasOutline = false;\n    const hasHelperText = true;\n    const {container, helperText, component} = setupTest(\n        hasLabel, hasOutline, hasMockFoundation, hasMockMenu, hasHelperText);\n\n    component.destroy();\n    expect(helperText.destroy).toHaveBeenCalledTimes(1);\n    document.body.removeChild(container as HTMLElement);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-select/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as select;\n@use '../helper-text/mixins' as helper-text;\n@use '../icon/mixins' as icon;\n@use '@material/feature-targeting/functions' as feature;\n\n@mixin test($query) {\n  .test {\n    @include select.core-styles($query: $query);\n    @include select.ink-color(red, $query: $query);\n    @include select.container-fill-color(red, $query: $query);\n    @include select.bottom-line-color(red, $query: $query);\n    @include select.label-color(red, $query: $query);\n    @include select.outline-color(red, $query: $query);\n    @include select.filled-shape-radius(42px, $query: $query);\n    @include select.outline-shape-radius(42px, $query: $query);\n\n    @include helper-text.helper-text-core-styles($query: $query);\n    @include helper-text.helper-text-color(red, $query: $query);\n    @include helper-text.helper-text-validation-color(red, $query: $query);\n\n    @include icon.icon-core-styles($query: $query);\n    @include icon.icon-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature.any());\n"
  },
  {
    "path": "packages/mdc-select/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {checkNumTimesSpyCalledWithArgs, createMockAdapter, verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport {MDCSelectFoundation} from '../foundation';\n\nconst LABEL_WIDTH = 100;\n\ndescribe('MDCSelectFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports cssClasses', () => {\n    expect(MDCSelectFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCSelectFoundation.numbers).toEqual(numbers);\n  });\n\n  it('exports strings', () => {\n    expect(MDCSelectFoundation.strings).toEqual(strings);\n  });\n\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSelectFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'activateBottomLine',\n      'deactivateBottomLine',\n      'hasLabel',\n      'floatLabel',\n      'setLabelRequired',\n      'getLabelWidth',\n      'hasOutline',\n      'notchOutline',\n      'closeOutline',\n      'setRippleCenter',\n      'notifyChange',\n      'setSelectedText',\n      'isSelectAnchorFocused',\n      'getSelectAnchorAttr',\n      'setSelectAnchorAttr',\n      'removeSelectAnchorAttr',\n      'addMenuClass',\n      'removeMenuClass',\n      'openMenu',\n      'closeMenu',\n      'getAnchorElement',\n      'setMenuAnchorElement',\n      'setMenuAnchorCorner',\n      'setMenuWrapFocus',\n      'focusMenuItemAtIndex',\n      'getMenuItemCount',\n      'getMenuItemValues',\n      'getMenuItemTextAtIndex',\n      'isTypeaheadInProgress',\n      'typeaheadMatchItem',\n      'getSelectedIndex',\n      'setSelectedIndex',\n    ]);\n  });\n\n  function setupTest(\n      hasLeadingIcon = true, hasHelperText = false,\n      describedbyIds: string[] = []) {\n    const mockAdapter = createMockAdapter(MDCSelectFoundation);\n    const leadingIcon = jasmine.createSpyObj('leadingIcon', [\n      'setDisabled', 'setAriaLabel', 'setContent', 'registerInteractionHandler',\n      'deregisterInteractionHandler', 'handleInteraction'\n    ]);\n    const helperText = jasmine.createSpyObj('helperText', [\n      'getId',\n      'isVisible',\n      'setContent',\n      'setValidationMsgPersistent',\n      'setValidation',\n      'setValidity',\n    ]);\n    const foundationMap = {\n      leadingIcon: hasLeadingIcon ? leadingIcon : undefined,\n      helperText: hasHelperText ? helperText : undefined,\n    };\n\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.getMenuItemValues.and.returnValue(['foo', 'bar']);\n    mockAdapter.getMenuItemTextAtIndex.withArgs(0).and.returnValue('foo');\n    mockAdapter.getMenuItemTextAtIndex.withArgs(1).and.returnValue('bar');\n    mockAdapter.getMenuItemCount.and.returnValue(2);\n    mockAdapter.getSelectAnchorAttr.withArgs('aria-describedby')\n        .and.returnValue(describedbyIds.join(' '));\n\n    if (hasHelperText) {\n      helperText.getId.and.returnValue(\n          describedbyIds[describedbyIds.length - 1]);\n    }\n\n    const foundation = new MDCSelectFoundation(mockAdapter, foundationMap);\n    return {foundation, mockAdapter, leadingIcon, helperText};\n  }\n\n  it('#getDisabled() returns true if disabled', () => {\n    const {foundation} = setupTest();\n    foundation.setDisabled(true);\n    expect(foundation.getDisabled()).toEqual(true);\n  });\n\n  it('#getDisabled() returns false if not disabled', () => {\n    const {foundation} = setupTest();\n    foundation.setDisabled(false);\n    expect(foundation.getDisabled()).toEqual(false);\n  });\n\n  it('#setDisabled(true) calls adapter.addClass', () => {\n    const {mockAdapter, foundation} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('#setDisabled(false) calls adapter.removeClass', () => {\n    const {mockAdapter, foundation} = setupTest();\n    foundation.setDisabled(false);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('#setDisabled sets disabled on leading icon', () => {\n    const {foundation, leadingIcon} = setupTest();\n    foundation.setDisabled(true);\n    expect(leadingIcon.setDisabled).toHaveBeenCalledWith(true);\n  });\n\n  it('#setDisabled false adds tabindex 0', () => {\n    const {mockAdapter, foundation} = setupTest();\n    foundation.setDisabled(false);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('tabindex', '0');\n  });\n\n  it('#setDisabled true removes tabindex attr', () => {\n    const {mockAdapter, foundation} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.removeSelectAnchorAttr).toHaveBeenCalledWith('tabindex');\n  });\n\n  it('#notchOutline updates the width of the outline element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasOutline.and.returnValue(true);\n    mockAdapter.getLabelWidth.and.returnValue(LABEL_WIDTH);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline)\n        .toHaveBeenCalledWith(LABEL_WIDTH * numbers.LABEL_SCALE);\n  });\n\n  it('#notchOutline does nothing if no outline is present', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasOutline.and.returnValue(false);\n    mockAdapter.getLabelWidth.and.returnValue(LABEL_WIDTH);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#notchOutline width is set to 0 if no label is present', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasOutline.and.returnValue(true);\n    mockAdapter.getLabelWidth.and.returnValue(0);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline).toHaveBeenCalledWith(0);\n    expect(mockAdapter.notchOutline).toHaveBeenCalledTimes(1);\n  });\n\n  it('#notchOutline(false) closes the outline', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasOutline.and.returnValue(true);\n    mockAdapter.getLabelWidth.and.returnValue(LABEL_WIDTH);\n\n    foundation.notchOutline(false);\n    expect(mockAdapter.closeOutline).toHaveBeenCalled();\n  });\n\n  it('#notchOutline does not close the notch if the select is still focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasOutline.and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n       mockAdapter.getLabelWidth.and.returnValue(LABEL_WIDTH);\n\n       foundation.notchOutline(false);\n       expect(mockAdapter.closeOutline).not.toHaveBeenCalled();\n     });\n\n  it('#handleMenuOpened focuses last selected element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.getSelectedIndex.and.returnValue(2);\n    foundation.handleMenuOpened();\n    expect(mockAdapter.focusMenuItemAtIndex).toHaveBeenCalledWith(2);\n    expect(mockAdapter.focusMenuItemAtIndex).toHaveBeenCalledTimes(1);\n  });\n\n  it(`#handleMenuClosed removes ${cssClasses.ACTIVATED} class name`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleMenuClosed();\n    checkNumTimesSpyCalledWithArgs(\n        mockAdapter.removeClass, [cssClasses.ACTIVATED], 1);\n  });\n\n  it('#handleMenuClosed sets isMenuOpen to false', () => {\n    const {foundation} = setupTest();\n    foundation.handleMenuClosed();\n    expect((foundation as any).isMenuOpen).toBe(false);\n  });\n\n  it('#handleMenuClosing set aria-expanded attribute to false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleMenuClosing();\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-expanded', 'false');\n  });\n\n  it('#handleChange calls adapter.floatLabel(true) when there is a value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.floatLabel.calls.reset();\n       mockAdapter.getSelectedIndex.and.returnValue(1);\n\n       foundation.handleChange();\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleChange calls adapter.floatLabel(false) when there is no value and the select is not focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getSelectedIndex.and.returnValue(numbers.UNSET_INDEX);\n\n       foundation.handleChange();\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleChange does not call adapter.floatLabel(false) when there is no value if the select is focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getSelectedIndex.and.returnValue(numbers.UNSET_INDEX);\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n\n       foundation.handleChange();\n       expect(mockAdapter.floatLabel).not.toHaveBeenCalledWith(false);\n     });\n\n  it('#handleChange does not call adapter.floatLabel() when no label is present',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasLabel.and.returnValue(false);\n\n       foundation.handleChange();\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#handleChange calls foundation.notchOutline(true) when there is a value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getSelectedIndex.and.returnValue(1);\n       foundation.init();\n       foundation.notchOutline = jasmine.createSpy('');\n\n       foundation.handleChange();\n       expect(foundation.notchOutline).toHaveBeenCalledWith(true);\n       expect(foundation.notchOutline).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleChange calls foundation.notchOutline(false) when there is no value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.notchOutline = jasmine.createSpy('');\n       mockAdapter.getSelectedIndex.and.returnValue(numbers.UNSET_INDEX);\n\n       foundation.handleChange();\n       expect(foundation.notchOutline).toHaveBeenCalledWith(false);\n       expect(foundation.notchOutline).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleChange does not call foundation.notchOutline() when there is no label',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.notchOutline = jasmine.createSpy('');\n       mockAdapter.hasLabel.and.returnValue(false);\n\n       foundation.handleChange();\n       expect(foundation.notchOutline)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#handleChange calls adapter.notifyChange()', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.handleChange();\n    expect(mockAdapter.notifyChange).toHaveBeenCalledWith(jasmine.anything());\n    expect(mockAdapter.notifyChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleFocus calls foundation.layout()', () => {\n    const {foundation} = setupTest();\n    foundation.layout = jasmine.createSpy('layout');\n    foundation.handleFocus();\n    expect(foundation.layout).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleFocus calls adapter.activateBottomLine()', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleFocus();\n    expect(mockAdapter.activateBottomLine).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleFocus calls adapter.activateBottomLine() if isMenuOpen=true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       (foundation as any).isMenuOpen = true;\n       foundation.handleFocus();\n       expect(mockAdapter.activateBottomLine).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleBlur calls foundation.layout()', () => {\n    const {foundation} = setupTest();\n    (foundation as any).layout = jasmine.createSpy('');\n    foundation.handleBlur();\n    expect((foundation as any).layout).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleBlur calls adapter.deactivateBottomLine()', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleBlur();\n    expect(mockAdapter.deactivateBottomLine).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleBlur does not call deactivateBottomLine if isMenuOpen=true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       (foundation as any).isMenuOpen = true;\n       foundation.handleBlur();\n       expect(mockAdapter.deactivateBottomLine).not.toHaveBeenCalled();\n     });\n\n  it('#handleBlur calls helperText.setValidity(true) if menu is not open',\n     () => {\n       const hasIcon = true;\n       const hasHelperText = true;\n       const {foundation, mockAdapter, helperText} =\n           setupTest(hasIcon, hasHelperText);\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.getSelectedIndex.and.returnValue(0);\n       foundation.init();\n       foundation.handleBlur();\n       expect(helperText.setValidity).toHaveBeenCalledWith(true);\n       // once during init, once during blur\n       expect(helperText.setValidity).toHaveBeenCalledTimes(2);\n     });\n\n  it('#openMenu opens the menu', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.openMenu();\n    expect(mockAdapter.openMenu).toHaveBeenCalledTimes(1);\n  });\n\n  it('#openMenu sets aria-expanded', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.openMenu();\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-expanded', 'true');\n  });\n\n  it('#openMenu adds activated class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.openMenu();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ACTIVATED);\n  });\n\n  it('#handleClick closes menu if isMenuOpen=true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    (foundation as any).isMenuOpen = true;\n    foundation.handleClick(0);\n    expect(mockAdapter.closeMenu).toHaveBeenCalled();\n  });\n\n  it('#handleClick does nothing if disabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation['disabled'] = true;\n    foundation.handleClick(0);\n    expect(mockAdapter.setRippleCenter).not.toHaveBeenCalled();\n    expect(mockAdapter.addClass).not.toHaveBeenCalled();\n  });\n\n  it('#handleClick debounces clicks', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleClick(0);\n    foundation['isMenuOpen'] = false;\n    foundation.handleClick(0);\n    expect(mockAdapter.openMenu).toHaveBeenCalledTimes(1);\n\n    foundation['isMenuOpen'] = false;\n    jasmine.clock().tick(numbers.CLICK_DEBOUNCE_TIMEOUT_MS);\n    foundation.handleClick(0);\n    expect(mockAdapter.openMenu).toHaveBeenCalledTimes(2);\n  });\n\n  it('#handleClick sets the ripple center if isMenuOpen=false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    (foundation as any).isMenuOpen = false;\n    foundation.handleClick(0);\n    expect(mockAdapter.setRippleCenter).toHaveBeenCalledWith(0);\n    expect(mockAdapter.setRippleCenter).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleClick opens the menu if the select is focused and isMenuOpen=false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n       (foundation as any).isMenuOpen = false;\n       foundation.handleClick(0);\n       expect(mockAdapter.openMenu).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleClick sets the aria-expanded', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleClick(0);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-expanded', 'true');\n  });\n\n  it('#handleClick adds activated class if isMenuOpen=false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    (foundation as any).isMenuOpen = false;\n    foundation.handleClick(0);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ACTIVATED);\n  });\n\n  it('#handleKeydown calls adapter.openMenu if valid keys are pressed, menu is not open and select is focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const preventDefault = jasmine.createSpy('');\n       const event = {key: 'Enter', preventDefault} as any;\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n       foundation.handleKeydown(event);\n       event.key = 'Spacebar';\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.key = 'ArrowUp';\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.key = 'ArrowDown';\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.key = '';\n       event.keyCode = 13;  // Enter\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.keyCode = 32;  // Space\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.keyCode = 38;  // Up\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       event.keyCode = 40;  // Down\n       (foundation as any).isMenuOpen = false;\n       foundation.handleKeydown(event);\n       expect(mockAdapter.openMenu).toHaveBeenCalledTimes(8);\n\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.addClass, [cssClasses.ACTIVATED], 8);\n       checkNumTimesSpyCalledWithArgs(\n           mockAdapter.setSelectAnchorAttr, ['aria-expanded', 'true'], 8);\n       expect(preventDefault).toHaveBeenCalledTimes(8);\n     });\n\n  it('#handleKeydown does not call adapter.openMenu if Enter/Space key is pressed, and select is not focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const preventDefault = jasmine.createSpy('');\n       const event = {key: 'Enter', preventDefault} as any;\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(false);\n       foundation.handleKeydown(event);\n       event.key = 'Spacebar';\n       foundation.handleKeydown(event);\n       event.key = 'ArrowUp';\n       foundation.handleKeydown(event);\n       event.key = 'ArrowDown';\n       foundation.handleKeydown(event);\n       event.key = '';\n       event.keyCode = 13;  // Enter\n       foundation.handleKeydown(event);\n       event.keyCode = 32;  // Space\n       foundation.handleKeydown(event);\n       event.keyCode = 38;  // Up\n       foundation.handleKeydown(event);\n       event.keyCode = 40;  // Down\n       foundation.handleKeydown(event);\n       expect(mockAdapter.openMenu).not.toHaveBeenCalled();\n       expect(preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeydown does not call adapter.openMenu if menu is opened', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const preventDefault = jasmine.createSpy('');\n    const event = {key: 'Enter', preventDefault} as any;\n    (foundation as any).isMenuOpen = true;\n    foundation.handleKeydown(event);\n    event.key = 'Spacebar';\n    foundation.handleKeydown(event);\n    event.key = 'ArrowUp';\n    foundation.handleKeydown(event);\n    event.key = 'ArrowDown';\n    foundation.handleKeydown(event);\n    event.key = '';\n    event.keyCode = 13;  // Enter\n    foundation.handleKeydown(event);\n    event.keyCode = 32;  // Space\n    foundation.handleKeydown(event);\n    event.keyCode = 38;  // Up\n    foundation.handleKeydown(event);\n    event.keyCode = 40;  // Down\n    foundation.handleKeydown(event);\n    expect(mockAdapter.openMenu).not.toHaveBeenCalled();\n    expect(preventDefault).not.toHaveBeenCalled();\n  });\n\n  it('#handleKeydown with alphanumeric characters calls adapter.getTypeaheadNextIndex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const preventDefault = jasmine.createSpy('');\n       const event = {key: 'a', preventDefault} as any;\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n\n       foundation.handleKeydown(event);\n       event.key = 'Z';\n       foundation.handleKeydown(event);\n       event.key = '1';\n       foundation.handleKeydown(event);\n\n       expect(mockAdapter.typeaheadMatchItem).toHaveBeenCalledTimes(3);\n       expect(preventDefault).toHaveBeenCalledTimes(3);\n     });\n\n  it('#handleKeydown with modifier key + alpha character does not call adapter.getTypeaheadNextIndex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const preventDefault = jasmine.createSpy('');\n       const event =\n           {key: 'a', preventDefault, ctrlKey: true, metaKey: false} as any;\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n\n       foundation.handleKeydown(event);\n       event.key = 'Z';\n       event.metaKey = true;\n       event.ctrlKey = false;\n       foundation.handleKeydown(event);\n\n       expect(mockAdapter.typeaheadMatchItem).not.toHaveBeenCalled()\n       expect(preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeydown with spacebar character when typeahead is in progress ' +\n         'calls adapter.getTypeaheadNextIndex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const preventDefault = jasmine.createSpy('');\n       const event = {key: 'Spacebar', preventDefault} as any;\n       mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n       mockAdapter.isTypeaheadInProgress.and.returnValue(true);\n       foundation.handleKeydown(event);\n\n       expect(mockAdapter.typeaheadMatchItem).toHaveBeenCalledTimes(1);\n       expect(preventDefault).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleKeydown sets selected index based on typeahead results', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const preventDefault = jasmine.createSpy('');\n    const event = {key: 'a', preventDefault} as any;\n    spyOn(foundation, 'setSelectedIndex');\n\n    mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n    mockAdapter.typeaheadMatchItem.and.returnValue(2);\n\n    foundation.handleKeydown(event);\n\n    expect(foundation.setSelectedIndex).toHaveBeenCalledWith(2);\n  });\n\n  it('#layout notches outline and floats label if unfocused and value is nonempty',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.notchOutline = jasmine.createSpy('');\n       mockAdapter.getSelectedIndex.and.returnValue(1);\n\n       foundation.layout();\n       expect(foundation.notchOutline).toHaveBeenCalledWith(true);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n     });\n\n  it('#layout un-notches outline and un-floats label if unfocused and value is empty',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.notchOutline = jasmine.createSpy('');\n       foundation.layout();\n       expect(foundation.notchOutline).toHaveBeenCalledWith(false);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(false);\n     });\n\n  it('#layout notches outline and floats label if select is focused', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.notchOutline = jasmine.createSpy('');\n    mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);\n    foundation.layout();\n    expect(foundation.notchOutline).toHaveBeenCalledWith(true);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n  });\n\n  it('#layout does not notch outline nor floats label if label does not exist',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.notchOutline = jasmine.createSpy('');\n       mockAdapter.hasLabel.and.returnValue(false);\n       foundation.layout();\n       expect(foundation.notchOutline).not.toHaveBeenCalled();\n       expect(mockAdapter.floatLabel).not.toHaveBeenCalled();\n     });\n\n  it('#layout sets label as required if select is required', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n    foundation.layout();\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(true);\n  });\n\n  it('#layoutOptions refetches menu item values to cache', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.layoutOptions();\n    expect(mockAdapter.getMenuItemValues).toHaveBeenCalled();\n  });\n\n  it('#layoutOptions reinitializes selected nonempty value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.getMenuItemCount.and.returnValue(3);\n    mockAdapter.getMenuItemValues.and.returnValue(['zero', 'one', 'two']);\n    mockAdapter.getSelectedIndex.and.returnValue(2);\n\n    foundation.layoutOptions();\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(2);\n  });\n\n  it('#layoutOptions reinitializes selected empty value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.getMenuItemCount.and.returnValue(3);\n    mockAdapter.getMenuItemValues.and.returnValue(['', 'one', 'two']);\n    mockAdapter.getSelectedIndex.and.returnValue(0);\n\n    foundation.layoutOptions();\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(0);\n  });\n\n  it('#setLeadingIconAriaLabel sets the aria-label of the leading icon element',\n     () => {\n       const {foundation, leadingIcon} = setupTest();\n       foundation.setLeadingIconAriaLabel('foo');\n       expect(leadingIcon.setAriaLabel).toHaveBeenCalledWith('foo');\n       expect(leadingIcon.setAriaLabel).toHaveBeenCalledTimes(1);\n     });\n\n  it('#setLeadingIconContent sets the content of the leading icon element',\n     () => {\n       const {foundation, leadingIcon} = setupTest();\n       foundation.setLeadingIconContent('foo');\n       expect(leadingIcon.setContent).toHaveBeenCalledWith('foo');\n       expect(leadingIcon.setContent).toHaveBeenCalledTimes(1);\n     });\n\n  it('#setLeadingIconAriaLabel does nothing if the leading icon element is undefined',\n     () => {\n       const hasLeadingIcon = false;\n       const {foundation, leadingIcon} = setupTest(hasLeadingIcon);\n       expect(() => foundation.setLeadingIconAriaLabel).not.toThrow();\n       expect(leadingIcon.setAriaLabel).not.toHaveBeenCalledWith('foo');\n     });\n\n  it('#setLeadingIconContent does nothing if the leading icon element is undefined',\n     () => {\n       const hasLeadingIcon = false;\n       const {foundation, leadingIcon} = setupTest(hasLeadingIcon);\n       expect(() => foundation.setLeadingIconContent).not.toThrow();\n       expect(leadingIcon.setContent).not.toHaveBeenCalledWith('foo');\n     });\n\n  it('#setHelperTextContent sets the content of the helper text element',\n     () => {\n       const hasIcon = false;\n       const hasHelperText = true;\n       const {foundation, helperText} = setupTest(hasIcon, hasHelperText);\n       foundation.setHelperTextContent('foo');\n       expect(helperText.setContent).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setHelperTextContent does not throw an error if there is no helperText element',\n     () => {\n       const hasIcon = false;\n       const hasHelperText = false;\n       const {foundation} = setupTest(hasIcon, hasHelperText);\n       expect(() => foundation.setHelperTextContent).not.toThrow();\n     });\n\n  it('#setSelectedIndex', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.setSelectedIndex(1);\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(1);\n\n    foundation.setSelectedIndex(0);\n    // We intentionally call this twice, expecting notifyChange to be called\n    // only once for these two calls.\n    foundation.setSelectedIndex(0);\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(0);\n\n    foundation.setSelectedIndex(-1);\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(-1);\n\n    expect(mockAdapter.notifyChange).toHaveBeenCalledTimes(3);\n  });\n\n  it('#setValue', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.setValue('bar');\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(1);\n    expect(mockAdapter.notifyChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('#setValue with skipNotify true does not call notifyChange', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.setValue('bar', /** skipNotify */ true);\n    expect(mockAdapter.setSelectedIndex).toHaveBeenCalledWith(1);\n    expect(mockAdapter.notifyChange).not.toHaveBeenCalled();\n  });\n\n  it('#setValid true sets aria-describedby if validation helper text is shown',\n     () => {\n       const hasIcon = false;\n       const hasHelperText = true;\n       const helperTextId = 'foobarbazcool';\n       const {foundation, mockAdapter, helperText} =\n           setupTest(hasIcon, hasHelperText, [helperTextId]);\n\n       helperText.isVisible.and.returnValue(true);\n\n       foundation.setValid(false);\n       expect(mockAdapter.setSelectAnchorAttr)\n           .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY, helperTextId);\n     });\n\n  it('#setValid, with client ids, sets aria-describedby', () => {\n    const hasIcon = false;\n    const hasHelperText = true;\n    const helperTextId = 'foobarbazcool';\n    const clientDescribedbyIds = ['id1', 'id2', 'id3'];\n\n    const {foundation, mockAdapter, helperText} = setupTest(\n        hasIcon, hasHelperText, [...clientDescribedbyIds, helperTextId]);\n\n    helperText.isVisible.and.returnValue(true);\n\n    foundation.setValid(false);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith(\n            strings.ARIA_DESCRIBEDBY,\n            [...clientDescribedbyIds, helperTextId].join(' '));\n  });\n\n  it('#setValid, w/ client ids, remove helpertextId from aria-describedby',\n     () => {\n       const hasIcon = false;\n       const hasHelperText = true;\n       const helperTextId = 'foobarbazcool';\n       const clientDescribedbyIds = ['id1', 'id2', 'id3'];\n\n       const {foundation, mockAdapter, helperText} = setupTest(\n           hasIcon, hasHelperText, [...clientDescribedbyIds, helperTextId]);\n\n       helperText.isVisible.and.returnValue(false);\n\n       foundation.setValid(false);\n       expect(mockAdapter.setSelectAnchorAttr)\n           .toHaveBeenCalledWith(\n               strings.ARIA_DESCRIBEDBY, clientDescribedbyIds.join(' '));\n     });\n\n  it('#setValid, no client describedby ids, remove aria-describedby', () => {\n    const hasIcon = false;\n    const hasHelperText = true;\n    const helperTextId = 'foobarbazcool';\n\n    const {foundation, mockAdapter, helperText} =\n        setupTest(hasIcon, hasHelperText, [helperTextId]);\n\n    helperText.isVisible.and.returnValue(false);\n\n    foundation.setValid(false);\n    expect(mockAdapter.removeSelectAnchorAttr)\n        .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY);\n  });\n\n  it('#setValid true sets aria-invalid to false and removes invalid classes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setValid(true);\n       expect(mockAdapter.setSelectAnchorAttr)\n           .toHaveBeenCalledWith('aria-invalid', 'false');\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n       expect(mockAdapter.removeMenuClass)\n           .toHaveBeenCalledWith(cssClasses.MENU_INVALID);\n     });\n\n  it('#setValid false sets aria-invalid to true and adds invalid class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setValid(false);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-invalid', 'true');\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(mockAdapter.addMenuClass)\n        .toHaveBeenCalledWith(cssClasses.MENU_INVALID);\n  });\n\n  it('#setValid false removes aria-describedby if validation helper text is hidden',\n     () => {\n       const hasIcon = false;\n       const hasHelperText = true;\n       const helperTextId = 'foobarbazcool';\n\n       const {foundation, mockAdapter, helperText} =\n           setupTest(hasIcon, hasHelperText, [helperTextId]);\n\n       helperText.isVisible.and.returnValue(false);\n\n       foundation.setValid(true);\n       expect(mockAdapter.removeSelectAnchorAttr)\n           .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY);\n     });\n\n  it('#isValid returns false if using default validity check and no index is selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n           .and.returnValue(false);\n       mockAdapter.getSelectedIndex.and.returnValue(-1);\n       foundation.init();\n\n       expect(foundation.isValid()).toBe(false);\n     });\n\n  it('#isValid returns false if using default validity check and first index ' +\n         'with empty value is selected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n           .and.returnValue(false);\n       mockAdapter.getSelectedIndex.and.returnValue(0);\n       mockAdapter.getMenuItemValues.and.returnValue(['', '<--empty']);\n       foundation.init();\n\n       expect(foundation.isValid()).toBe(false);\n     });\n\n  it('#isValid returns true if using default validity check and an index is selected that has value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n           .and.returnValue(false);\n       mockAdapter.getSelectedIndex.and.returnValue(0);\n       foundation.init();\n\n       expect(foundation.isValid()).toBe(true);\n     });\n\n  it('#getUseDefaultValidation returns correct value', () => {\n    const {foundation} = setupTest();\n    foundation.setUseDefaultValidation(true);\n    expect(foundation.getUseDefaultValidation()).toBeTrue();\n    foundation.setUseDefaultValidation(false);\n    expect(foundation.getUseDefaultValidation()).toBeFalse();\n  });\n\n  it('#isValid returns false if using custom false validity', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(false);\n    mockAdapter.hasClass.withArgs(cssClasses.DISABLED).and.returnValue(false);\n\n    foundation.setUseDefaultValidation(false);\n    foundation.setValid(false);\n    mockAdapter.getSelectedIndex.and.returnValue(2);\n\n    expect(foundation.isValid()).toBe(false);\n  });\n\n  it('#isValid returns true if using custom true validity with unset index',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n           .and.returnValue(false);\n\n       foundation.setUseDefaultValidation(false);\n       foundation.setValid(true);\n       mockAdapter.getSelectedIndex.and.returnValue(-1);\n\n       expect(foundation.isValid()).toBe(true);\n     });\n\n  it('#isValid returns true if using custom true validity with first option ' +\n         'selected that has empty value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.withArgs(cssClasses.REQUIRED).and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n           .and.returnValue(false);\n\n       foundation.setUseDefaultValidation(false);\n       foundation.setValid(true);\n       mockAdapter.getSelectedIndex.and.returnValue(0);\n\n       expect(foundation.isValid()).toBe(true);\n     });\n\n  it('#setRequired adds/removes ${cssClasses.REQUIRED} class name', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setRequired(true);\n    checkNumTimesSpyCalledWithArgs(\n        mockAdapter.addClass, [cssClasses.REQUIRED], 1);\n    foundation.setRequired(false);\n    checkNumTimesSpyCalledWithArgs(\n        mockAdapter.removeClass, [cssClasses.REQUIRED], 1);\n  });\n\n  it('#setRequired sets aria-required through adapter', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setRequired(true);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-required', 'true');\n    foundation.setRequired(false);\n    expect(mockAdapter.setSelectAnchorAttr)\n        .toHaveBeenCalledWith('aria-required', 'false');\n  });\n\n  it('#setRequired sets label as required', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setRequired(true);\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(true);\n    mockAdapter.setLabelRequired.calls.reset();\n    foundation.setRequired(false);\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(false);\n  });\n\n  it('#getRequired returns true if aria-required is true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getSelectAnchorAttr.withArgs('aria-required')\n        .and.returnValue('true');\n    expect(foundation.getRequired()).toBe(true);\n  });\n\n  it('#getRequired returns false if aria-required is false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getSelectAnchorAttr.withArgs('aria-required')\n        .and.returnValue('false');\n    expect(foundation.getRequired()).toBe(false);\n  });\n\n  it('#init calls adapter methods', () => {\n    const {foundation, mockAdapter} = setupTest();\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'boolean' is not\n    //  assignable to parameter of type 'Element'.\n    mockAdapter.getAnchorElement.and.returnValue(true);\n    foundation.init();\n    expect(mockAdapter.setMenuWrapFocus).toHaveBeenCalledWith(false);\n    expect(mockAdapter.setMenuAnchorElement)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockAdapter.setMenuAnchorCorner)\n        .toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#init emits no change events when value is preselected', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getSelectedIndex.and.returnValue(1);\n    foundation.init();\n    expect(mockAdapter.notifyChange).not.toHaveBeenCalled();\n  });\n\n  it('#init computes whether to notch outline exactly once when value is preselected',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.notchOutline = jasmine.createSpy('notchOutline');\n       mockAdapter.getSelectedIndex.and.returnValue(1);\n       foundation.init();\n       expect(foundation.notchOutline).toHaveBeenCalledTimes(1);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-select/test/mdc-select.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-select.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-select/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCSelectHelperTextFoundation} from './helper-text/foundation';\nimport {MDCSelectIconFoundation} from './icon/foundation';\n\nexport interface MDCSelectFoundationMap {\n  leadingIcon: MDCSelectIconFoundation;\n  helperText: MDCSelectHelperTextFoundation;\n}\n\nexport interface MDCSelectEventDetail {\n  value: string;\n  index: number;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCSelectEvent extends Event {\n  readonly detail: MDCSelectEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-shape/README.md",
    "content": "<!--docs:\ntitle: \"Shape\"\nlayout: detail\nsection: components\nexcerpt: \"Shapes direct attention, identify components, communicate state, and express brand.\"\npath: /catalog/shape/\n-->\n\n# Shape\n\nShapes direct attention, identify components, communicate state, and express brand.\n\n> Currently shape system for web only supports rounded corners.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-shape\">Material Design guidelines: Shape</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/shape\n```\n\n## Basic Usage\n\n### Styles\n\n```scss\n@use \"@material/shape\";\n```\n\n## Style Customization\n\n### Sass Variables\n\nComponents are categorized as small, medium, and large in the Material shape system. Overriding the below Sass variables will change all components in their respective categories.\n\nVariable | Description\n--- | ---\n`$small-component-radius` | Rounded shape radius size for small components. Default value `4px`.\n`$medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.\n`$large-component-radius` | Rounded shape radius size for large components. Default value `0`.\n\nPlease refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.\n\n**Note: Only rounded shape designs are currently supported.**\n\n### CSS Custom Properties\n\nCSS Custom Property | Description\n--- | ---\n`--mdc-shape-small` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-medium` | Rounded shape radius size for small components. Default value `4px`.\n`--mdc-shape-large` | Rounded shape radius size for small components. Default value `0`.\n\n**Note: Do not use percentage values with custom properties, since they cannot be resolved by `shape.radius()` at runtime.**\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`radius($radius, $rtl-reflexive)` | Shape API used by all other components to apply radius to appropriate corners. `$radius` can be single value or list of up to 4 radius corner values. Set `$rtl-reflexive` to true to flip the radius in RTL case, `false` by default.\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`resolve-radius($radius, $component-height)` | Returns the resolved radius value of a shape category - `large`, `medium`, or `small`. If $radius is not a category, this function returns the value itself if valid. Valid values are numbers or percentages. `$component-height` should be provided if `$radius` may be a percentage.\n`flip-radius($radius)` | Flips the radius values in RTL context. `$radius` is list of 2-4 corner values.\n`mask-radius($radius, $masked-corners)` | Accepts radius number or list of 2-4 radius values and returns 4 value list with masked corners as mentioned in `$masked-corners`.\n`unpack-radius($radius)` | Unpacks shorthand values for border-radius (i.e. lists of 1-3 values). If a list of 4 values is given, it is returned as-is.\n\n### Additional Information\n\n#### Shapes for fixed height components\n\nStyles for applying shape to a fixed height component such as button looks like this:\n\n```scss\n@use \"@material/button\";\n\n@include shape.radius($radius, $component-height: button.$height);\n```\n\nWhere `button.$height` is the height of standard button and `$radius` is the size of the shape. `shape.radius()` will resolve any percentage unit value to an absolute radius value based on the component's height.\n\n#### Shapes for dynamic height components\n\nStyles for applying shapes to dynamic height component such as card looks like this:\n\n```scss\n@include shape.radius($radius);\n```\n\nWhere `$radius` is an absolute value only.\n\n#### Shapes for components on specific corners\n\nStyles for applying shapes for specific corners such as drawer looks like this:\n\n```scss\n@include shape.radius(0 $radius $radius 0, $rtl-reflexive: true);\n```\n\nWhere only top-right & bottom-right corners are customizable. `shape.radius()` will automatically flip radius values based on RTL context if `$rtl-reflexive` is set to true.\n\n#### Component theming\n\nThe styles for applying custom shape to a button component looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  @include button.shape-radius(50%);\n}\n```\n\nIn this example, the above style applies a 50% pill shape to the button. It could also be an absolute value (e.g., `8px`);\n\n> The Shape API is typically used indirectly through each respective component's mixin, which takes care of setting height and applying radius to applicable corners for all of its variants.\n"
  },
  {
    "path": "packages/mdc-shape/_functions.import.scss",
    "content": "@forward \"./index\" as mdc-shape-* hide mdc-shape-radius;\n"
  },
  {
    "path": "packages/mdc-shape/_functions.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_shape.scss' module instead.\n@forward './shape' show flip-radius, resolve-radius, mask-radius, unpack-radius,\n  _resolve-radius-percentage, resolve-theme;\n"
  },
  {
    "path": "packages/mdc-shape/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-shape/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"./index\" as mdc-shape-*;\n"
  },
  {
    "path": "packages/mdc-shape/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_shape.scss' module instead.\n@forward './shape' show radius;\n"
  },
  {
    "path": "packages/mdc-shape/_shape.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/custom-properties';\n@use '@material/theme/css';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n// Shape categories\n$small-component-radius: 4px !default;\n$medium-component-radius: 4px !default;\n$large-component-radius: 0 !default;\n\n@include keys.set-values(\n  (\n    small: $small-component-radius,\n    medium: $medium-component-radius,\n    large: $large-component-radius,\n  ),\n  $options: (custom-property-prefix: shape)\n);\n\n// @deprecated use shape.resolve-radius() to retrieve a value or\n// shape.get-shape-keys() and shape.is-shape-key() to manipulate keys.\n$category-keywords: (\n  small: keys.create-custom-property(small),\n  medium: keys.create-custom-property(medium),\n  large: keys.create-custom-property(large),\n) !default;\n\n@function is-shape-key($radius) {\n  @return map.has-key($category-keywords, $radius);\n}\n\n@function get-shape-keys() {\n  @return map.keys($category-keywords);\n}\n\n//\n// Flips the radius values based on RTL context.\n//\n// Examples:\n//\n// 1. mdc-shape-flip-radius((0, 4px, 4px, 0)) => 4px 0 0 4px\n// 2. mdc-shape-flip-radius((0, 8px)) => 8px 0\n//\n@function flip-radius($radius) {\n  @if meta.type-of($radius) == 'list' {\n    @if list.length($radius) > 4 {\n      @error \"Invalid radius: '#{$radius}' is more than 4 values\";\n    }\n  }\n\n  @if list.length($radius) == 4 {\n    @return list.nth($radius, 2) list.nth($radius, 1) list.nth($radius, 4)\n      list.nth($radius, 3);\n  } @else if list.length($radius) == 3 {\n    @return list.nth($radius, 2) list.nth($radius, 1) list.nth($radius, 2)\n      list.nth($radius, 3);\n  } @else if list.length($radius) == 2 {\n    @return list.nth($radius, 2) list.nth($radius, 1);\n  } @else {\n    @return $radius;\n  }\n}\n\n/// Returns the resolved radius value of a shape category - `large`, `medium`,\n/// or `small`. If $radius is not a category, this function returns the value\n/// itself if valid. Valid values are numbers or percentages.\n///\n/// If a percentage is provided, $component-height should be specified if the\n/// width of the component does not match the height.\n///\n/// $radius may be a single value or a list of 1 to 4 values.\n///\n/// @example - scss\n///   resolve-radius(small); // (varname: --mdc-shape-small, fallback: 4px)\n///   resolve-radius((varname: --custom-shape, fallback: small));\n///     // (\n///     //   varname: --custom-shape,\n///     //   fallback: (varname: --mdc-shape-small, fallback: 4px)\n///     // )\n///   resolve-radius(8px); // 8px\n///   resolve-radius(50%, $component-height: 36px); // 16px\n///\n///   $shape: (\n///     family: 'rounded',\n///     radius: (\n///       8px,\n///       8px,\n///       8px,\n///       8px,\n///     ),\n///   );\n///   resolve-radius($shape); // 8px\n///\n/// @param {String | Number | Map | List} $radius - the radius shape category or\n///     radius value to resolve. May be a number, custom property Map, shape\n///     Map, or a List of those values.\n/// @return {Number | Map | List} the resolved radius value. May be a number,\n///     a custom property Map, or a List if $radius was a List.\n@function resolve-radius($radius, $component-height: null) {\n  @if $radius == null {\n    @return null;\n  }\n\n  @if meta.type-of($radius) == 'list' {\n    // $radius is a List\n    @if list.length($radius) > 4 or list.length($radius) < 1 {\n      @error \"mdc-shape: Invalid radius: #{$radius}. Radius must be between 1 and 4 values.\";\n    }\n\n    $radii: ();\n    @each $corner in $radius {\n      $radii: list.append(\n        $radii,\n        resolve-radius($corner, $component-height: $component-height)\n      );\n    }\n\n    @return $radii;\n  }\n\n  @if is-shape-key($radius) {\n    // $radius is a shape key\n    @return resolve-radius(\n      keys.create-custom-property($radius),\n      $component-height: $component-height\n    );\n  } @else if custom-properties.is-custom-prop($radius) {\n    // $radius is a custom property Map\n    $fallback: resolve-radius(\n      custom-properties.get-fallback($radius, $shallow: true),\n      $component-height: $component-height\n    );\n    @return custom-properties.set-fallback($radius, $fallback, $shallow: true);\n  } @else if meta.type-of($radius) == 'map' {\n    // $radius is a shape Map\n    $family: map.get($radius, family);\n    @if custom-properties.is-custom-prop($family) {\n      // Shape Map may have been passed through keys.create-custom-properties()\n      $family: custom-properties.get-fallback($family);\n    }\n\n    @if $family != 'rounded' {\n      @error 'mdc-shape: Invalid shape family: \"#{$family}\". Only \"rounded\" is supported.';\n    }\n\n    @return resolve-radius(\n      map.get($radius, radius),\n      $component-height: $component-height\n    );\n  } @else {\n    // $radius is a value\n    @if meta.type-of($radius) != 'number' {\n      @error \"mdc-shape: Invalid radius: #{$radius}. Must be a number.\";\n    }\n\n    $radius-unit: math.unit($radius);\n    $component-height-type: meta.type-of($component-height);\n    @if $radius-unit == '%' and $component-height-type == 'number' {\n      $radius: _resolve-radius-percentage($radius, $component-height);\n    }\n\n    @return $radius;\n  }\n}\n\n//\n// Accepts radius number or list of 2-4 radius values and returns 4 value list with\n// masked corners as mentioned in `$masked-corners`\n//\n// Example:\n//\n// 1. mdc-shape-mask-radius(2px 3px, 1 1 0 0) => 2px 3px 0 0\n// 2. mdc-shape-mask-radius(8px, 0 0 1 1) => 0 0 8px 8px\n// 3. mdc-shape-mask-radius(4px 4px 4px 4px, 0 1 1 0) => 0 4px 4px 0\n//\n@function mask-radius($radius, $masked-corners) {\n  @if meta.type-of($radius) == 'list' {\n    @if list.length($radius) > 4 {\n      @error \"Invalid radius: '#{$radius}' is more than 4 values\";\n    }\n  }\n\n  @if list.length($masked-corners) != 4 {\n    @error \"Expected masked-corners of length 4 but got '#{list.length($masked-corners)}'.\";\n  }\n\n  $radius: unpack-radius($radius);\n\n  @return if(list.nth($masked-corners, 1) == 1, list.nth($radius, 1), 0)\n    if(list.nth($masked-corners, 2) == 1, list.nth($radius, 2), 0)\n    if(list.nth($masked-corners, 3) == 1, list.nth($radius, 3), 0)\n    if(list.nth($masked-corners, 4) == 1, list.nth($radius, 4), 0);\n}\n\n/// Unpacks shorthand values for border-radius (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// shape.unpack-radius(4px) => 4px 4px 4px 4px\n/// shape.unpack-radius(4px 2px) => 4px 2px 4px 2px\n/// shape.unpack-radius(4px 2px 2px) => 4px 2px 2px 2px\n/// shape.unpack-radius(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $radius - List of 1 to 4 radius numbers.\n/// @return {List} a List of 4 radius numbers.\n@function unpack-radius($radius) {\n  @return css.unpack-value($radius);\n}\n\n/// Resolve a percentage radius into a number.\n///\n/// @param {Number} $percentage - the radius percentage.\n/// @param {Number} $component-height - the height of the component.\n/// @return {Number} the resolved radius as a number.\n@function _resolve-radius-percentage($percentage, $component-height) {\n  // Converts the percentage to number without unit. Example: 50% => 50.\n  $percentage: math.div($percentage, $percentage * 0 + 1);\n  @return $component-height * math.div($percentage, 100);\n}\n\n@mixin radius(\n  $radius,\n  $rtl-reflexive: false,\n  $component-height: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    $has-multiple-corners: meta.type-of($radius) == 'list' and\n      list.length($radius) > 1;\n    // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical\n    $needs-flip: $rtl-reflexive and $has-multiple-corners;\n    $radius: resolve-radius($radius, $component-height: $component-height);\n    @if not $has-multiple-corners {\n      @include theme.property(border-radius, $radius);\n    } @else {\n      $gss: (\n        noflip: $needs-flip,\n      );\n      $radii: unpack-radius($radius);\n      @include theme.property(\n        border-top-left-radius,\n        list.nth($radii, 1),\n        $gss: $gss\n      );\n      @include theme.property(\n        border-top-right-radius,\n        list.nth($radii, 2),\n        $gss: $gss\n      );\n      @include theme.property(\n        border-bottom-right-radius,\n        list.nth($radii, 3),\n        $gss: $gss\n      );\n      @include theme.property(\n        border-bottom-left-radius,\n        list.nth($radii, 4),\n        $gss: $gss\n      );\n    }\n\n    @if ($needs-flip) {\n      @include rtl.rtl {\n        // If it needs to be flipped, it will always have multiple corners\n        $gss: (\n          noflip: true,\n        );\n        $radii: flip-radius(unpack-radius($radius));\n        @include theme.property(\n          border-top-left-radius,\n          list.nth($radii, 1),\n          $gss: $gss\n        );\n        @include theme.property(\n          border-top-right-radius,\n          list.nth($radii, 2),\n          $gss: $gss\n        );\n        @include theme.property(\n          border-bottom-right-radius,\n          list.nth($radii, 3),\n          $gss: $gss\n        );\n        @include theme.property(\n          border-bottom-left-radius,\n          list.nth($radii, 4),\n          $gss: $gss\n        );\n      }\n    }\n  }\n}\n\n/// Resolves one or more shape tokens and expands them into 4 separate logical\n/// tokens for each corner.\n///\n/// @example - scss\n///   $theme: (container-shape: (4px 4px 0 0));\n///   $theme: resolve-theme(\n///     $theme,\n///     map.get($resolvers, shape),\n///     container-shape,\n///   );\n///   // (\n///   //   container-shape-start-start: 4px,\n///   //   container-shape-start-end: 4px,\n///   //   container-shape-end-end: 0,\n///   //   container-shape-end-start: 0,\n///   // )\n///\n/// @param {Map} $theme - The theme to resolve tokens for.\n/// @param {Function} $resolver - The shape resolver to use.\n/// @param {String...} $shape-tokens - The shape tokens to resolve.\n/// @return {Map} The theme with resolved shape tokens.\n@function resolve-theme($theme, $resolver, $shape-tokens...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $token in $shape-tokens {\n    $shape-theme: meta.call($resolver, $shape: map.get($theme, $token));\n\n    // Add resolved values, but allow $theme to override the results if needed.\n    $theme: map.merge(\n      (\n        '#{$token}-start-start': map.get($shape-theme, start-start),\n        '#{$token}-start-end': map.get($shape-theme, start-end),\n        '#{$token}-end-end': map.get($shape-theme, end-end),\n        '#{$token}-end-start': map.get($shape-theme, end-start),\n      ),\n      $theme\n    );\n\n    $theme: map.remove($theme, $token);\n  }\n\n  @return $theme;\n}\n\n/// Resolves a shape value by expanding it into logical values for each corner.\n///\n/// @example - scss\n///\n/// resolver($shape: (4px 4px 0 0)) =>\n///  (\n///    start-start: 4px,\n///    start-end: 4px,\n///    end-end: 0,\n///    end-start: 0,\n///  )\n///\n/// resolver($shape: 4px) =>\n///  (\n///    start-start: 4px,\n///    start-end: 4px,\n///    end-end: 4px,\n///    end-start: 4px,\n///  )\n\n/// @param {Number|List} $shape - The shape token's value.\n/// @return {Map} A map with logical tokens for each corner's value.\n@function resolver($shape) {\n  @if meta.type-of($shape) != 'list' {\n    @return (\n      start-start: $shape,\n      start-end: $shape,\n      end-end: $shape,\n      end-start: $shape\n    );\n  }\n\n  @if list.length($shape) == 1 {\n    @return (\n      start-start: list.nth($shape, 1),\n      start-end: list.nth($shape, 1),\n      end-end: list.nth($shape, 1),\n      end-start: list.nth($shape, 1)\n    );\n  }\n\n  @if list.length($shape) == 2 {\n    @return (\n      start-start: list.nth($shape, 1),\n      start-end: list.nth($shape, 2),\n      end-end: list.nth($shape, 1),\n      end-start: list.nth($shape, 2)\n    );\n  }\n\n  @if list.length($shape) == 3 {\n    @return (\n      start-start: list.nth($shape, 1),\n      start-end: list.nth($shape, 2),\n      end-end: list.nth($shape, 3),\n      end-start: list.nth($shape, 2)\n    );\n  }\n\n  @return (\n    start-start: list.nth($shape, 1),\n    start-end: list.nth($shape, 2),\n    end-end: list.nth($shape, 3),\n    end-start: list.nth($shape, 4)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-shape/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-shape-* hide mdc-shape-radius, mdc-shape-flip-radius, mdc-shape-resolve-percentage-radius, mdc-shape-prop-value, mdc-shape-mask-radius, mdc-shape-unpack-radius-, mdc-shape-resolve-percentage-for-corner-, mdc-shape-validate-radius-value-;\n"
  },
  {
    "path": "packages/mdc-shape/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_shape.scss' module instead.\n@forward './shape' show $small-component-radius, $medium-component-radius, $large-component-radius, $category-keywords;\n"
  },
  {
    "path": "packages/mdc-shape/package.json",
    "content": "{\n  \"name\": \"@material/shape\",\n  \"description\": \"Shape utilities for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"shape\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-shape\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-shape/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as shape;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include shape.radius(1px 2px, true, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-shape/test/mdc-shape.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-shape.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-shape/test/shape.test.scss",
    "content": "@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:list';\n@use 'true' as test;\n\n@use '../shape';\n\n@include test.describe('shape') {\n  @include test.describe('resolver($shape)') {\n    @include test.it('should return null for all corners if given null') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: null,\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        null,\n        $description: 'start-start should be null'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        null,\n        $description: 'start-end should be null'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        null,\n        $description: 'end-end should be null'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        null,\n        $description: 'end-start should be null'\n      );\n    }\n\n    @include test.it('should expand radius number to all corners') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: 8px,\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        8px,\n        $description: 'start-start should be same as input'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        8px,\n        $description: 'start-end should be same as input'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        8px,\n        $description: 'end-end should be same as input'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        8px,\n        $description: 'end-start should be same as input'\n      );\n    }\n\n    @include test.it('should expand radius list with 1 to all corners') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: (\n          16px,\n        ),\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        16px,\n        $description: 'start-start should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        16px,\n        $description: 'start-end should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        16px,\n        $description: 'end-end should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        16px,\n        $description: 'end-start should be the first corner'\n      );\n    }\n\n    @include test.it('should expand radius list with 2 to correct corners') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: (\n          8px,\n          16px,\n        ),\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        8px,\n        $description: 'start-start should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        16px,\n        $description: 'start-end should be the second corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        8px,\n        $description: 'end-end should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        16px,\n        $description: 'end-start should be the second corner'\n      );\n    }\n\n    @include test.it('should expand radius list with 3 to correct corners') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: (\n          8px,\n          16px,\n          24px,\n        ),\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        8px,\n        $description: 'start-start should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        16px,\n        $description: 'start-end should be the second corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        24px,\n        $description: 'end-end should be the third corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        16px,\n        $description: 'end-start should be the second corner'\n      );\n    }\n\n    @include test.it('should expand radius list with 4 to correct corners') {\n      // Test Case.\n      $result: shape.resolver(\n        $shape: (\n          8px,\n          16px,\n          24px,\n          0,\n        ),\n      );\n\n      // Assertion.\n      $is-map: meta.type-of($result) == 'map';\n      @include test.assert-true(\n        $is-map,\n        $description: 'Should always return a Map'\n      );\n      @include test.assert-equal(\n        map.get($result, start-start),\n        8px,\n        $description: 'start-start should be the first corner'\n      );\n      @include test.assert-equal(\n        map.get($result, start-end),\n        16px,\n        $description: 'start-end should be the second corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-end),\n        24px,\n        $description: 'end-end should be the third corner'\n      );\n      @include test.assert-equal(\n        map.get($result, end-start),\n        0,\n        $description: 'end-start should be the fourth corner'\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-slider/README.md",
    "content": "<!--docs:\ntitle: \"Sliders\"\nlayout: detail\nsection: components\nexcerpt: \"Sliders allow users to make selections from a range of values.\"\niconId: slider\npath: /catalog/input-controls/sliders/\n-->\n\n# Slider\n\n[Sliders](https://material.io/components/sliders/) allow users to make\nselections from a range of values.\n\nThe MDC Slider implementation supports both single point sliders (one thumb)\nand range sliders (two thumbs). It is backed by the browser\n`<input type=\"range\">` element, is fully accessible, and is RTL-aware.\n\n**Contents**\n\n*   [Using sliders](#using-sliders)\n*   [Sliders](#sliders)\n*   [Other variants](#other-variants)\n*   [Additional information](#additional-information)\n*   [API](#api)\n\n## Using sliders\n\n### Installing sliders\n\n```\nnpm install @material/slider\n```\n\n### Styles\n\n```scss\n@use \"@material/slider/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\n```\n\n**Note**: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.\n\n### Making sliders accessible\n\nSliders are backed by an `<input>` element, meaning that they are fully\naccessible. Unlike the [ARIA-based slider](https://www.w3.org/TR/wai-aria-practices/#slider),\nMDC sliders are adjustable using touch-based assistive technologies such as\nTalkBack on Android.\n\nPer the spec, ensure that the following attributes are added to the\n`input` element(s):\n\n* `value`: Value representing the current value.\n* `min`: Value representing the minimum allowed value.\n* `max`: Value representing the maximum allowed value.\n* `aria-label` or `aria-labelledby`: Accessible label for the slider.\n\nIf the value is not user-friendly (e.g. a number to\nrepresent the day of the week), also set the following:\n\n* `aria-valuetext`: Set this input attribute to a string that makes the slider\nvalue understandable, e.g. 'Monday'.\n* Add a function to map the slider value to `aria-valuetext` via the\n`MDCSlider#setValueToAriaValueTextFn` method.\n\n## Sliders\n\nThere are two types of sliders:\n\n1.  [Continuous slider](#continuous-slider)\n1.  [Discrete slider](#discrete-slider)\n\n### Continuous slider\n\nContinuous sliders allow users to make meaningful selections that don’t require\na specific value.\n\nNote: The step size for value quantization is, by default, 1. To specify\na custom step size, provide a value for the `step` attribute on the `input`\nelement.\n\n<img src=\"images/continuous-slider.png\" alt=\"Continuous slider with a value of 50\">\n\n```html\n<div class=\"mdc-slider\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"volume\" aria-label=\"Continuous slider demo\">\n  </div>\n</div>\n```\n\n#### Continuous range slider\n\nNote: By default there's no minimum distance between the two thumbs. To specify\none, provide a value for the `data-min-range` attribute on the root element and\nadjust the `min` and `max` attributes on the input elements accordingly.\n\n<img src=\"images/continuous-range-slider.png\" alt=\"Continuous range slider with values of 30 and 70\">\n\n```html\n<div class=\"mdc-slider mdc-slider--range\" data-min-range=\"10\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"60\" value=\"30\" name=\"rangeStart\" aria-label=\"Continuous range slider demo\">\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"40\" max=\"100\" value=\"70\" name=\"rangeEnd\" aria-label=\"Continuous range slider demo\">\n  </div>\n</div>\n```\n\n### Discrete slider\n\nDiscrete sliders display a numeric value label upon pressing the thumb, which\nallows a user to select an exact value.\n\n<img src=\"images/discrete-slider.png\" alt=\"Discrete slider with a value of 50\">\n\nTo create a discrete slider, add the following:\n\n*   `mdc-slider--discrete` class on the root element.\n*   Value indicator element (`mdc-slider__value-indicator-container`), as shown\n    below.\n\n```html\n<div class=\"mdc-slider mdc-slider--discrete\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n      <div class=\"mdc-slider__value-indicator\">\n        <span class=\"mdc-slider__value-indicator-text\">\n          50\n        </span>\n      </div>\n    </div>\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"volume\" step=\"10\" aria-label=\"Discrete slider demo\">\n  </div>\n</div>\n```\n\n#### Discrete slider with tick marks\n\nDiscrete sliders can optionally display tick marks. Tick marks represent\npredetermined values to which the user can move the slider.\n\n<img src=\"images/discrete-slider-tick-marks.png\" alt=\"Discrete slider (with tick marks), with a value of 50\">\n\nTo add tick marks to a discrete slider, add the following:\n\n*   `mdc-slider--tick-marks` class on the root element\n*   `mdc-slider__tick-marks` element as a child of the `mdc-slider__track`\n    element\n*   `mdc-slider__tick-mark--active` and `mdc-slider__tick-mark--inactive`\n    elements as children of the `mdc-slider__tick-marks` element\n\n```html\n<div class=\"mdc-slider mdc-slider--discrete mdc-slider--tick-marks\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n    <div class=\"mdc-slider__tick-marks\">\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--active\"></div>\n      <div class=\"mdc-slider__tick-mark--inactive\"></div>\n      <div class=\"mdc-slider__tick-mark--inactive\"></div>\n      <div class=\"mdc-slider__tick-mark--inactive\"></div>\n      <div class=\"mdc-slider__tick-mark--inactive\"></div>\n      <div class=\"mdc-slider__tick-mark--inactive\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n      <div class=\"mdc-slider__value-indicator\">\n        <span class=\"mdc-slider__value-indicator-text\">\n          50\n        </span>\n      </div>\n    </div>\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"volume\" step=\"10\" aria-label=\"Discrete slider with tick marks demo\">\n  </div>\n</div>\n```\n\n#### Discrete range slider\n\n```html\n<div class=\"mdc-slider mdc-slider--range mdc-slider--discrete\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n      <div class=\"mdc-slider__value-indicator\">\n        <span class=\"mdc-slider__value-indicator-text\">\n          20\n        </span>\n      </div>\n    </div>\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"50\" value=\"20\" step=\"10\" name=\"rangeStart\" aria-label=\"Discrete range slider demo\">\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n      <div class=\"mdc-slider__value-indicator\">\n        <span class=\"mdc-slider__value-indicator-text\">\n          50\n        </span>\n      </div>\n    </div>\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"20\" max=\"100\" value=\"50\" step=\"10\" name=\"rangeEnd\" aria-label=\"Discrete range slider demo\">\n  </div>\n</div>\n```\n\n## Other variants\n\n### Disabled slider\n\nTo disable a slider, add the following:\n\n*   `mdc-slider--disabled` class on the root element\n*   `disabled` attribute on the input element\n\n```html\n<div class=\"mdc-slider mdc-slider--disabled\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" step=\"10\" disabled name=\"volume\" aria-label=\"Disabled slider demo\">\n  </div>\n</div>\n```\n\n## Additional information\n\n### Initialization with custom ranges and values\n\nWhen `MDCSlider` is initialized, it reads the input element's `min`,\n`max`, and `value` attributes if present, using them to set\nthe component's internal `min`, `max`, and `value` properties.\n\nUse these attributes to initialize the slider with a custom range and values,\nas shown below:\n\n```html\n<div class=\"mdc-slider\">\n  <!-- ... -->\n  <div class=\"mdc-slider__thumb\">\n    <!-- ... -->\n    <input class=\"mdc-slider__input\" aria-label=\"Slider demo\" min=\"0\" max=\"100\" value=\"75\">\n  </div>\n</div>\n```\n\n### Setting slider position before component initialization\n\nWhen `MDCSlider` is initialized, it updates the slider track and thumb\npositions based on the internal value(s). To set the correct track and thumb\npositions before component initialization, mark up the DOM as follows:\n\n- Calculate `rangePercentDecimal`, the active track range as a percentage of\n  the entire track, i.e. `(valueEnd - valueStart) / (max - min)`.\n  Set `transform:scaleX(<rangePercentDecimal>)` as an inline style on the\n  `mdc-slider__track--active_fill` element.\n- Calculate `thumbEndPercent`, the initial position of the end thumb as a\n  percentage of the entire track. Set `left:calc(<thumbEndPercent>% - 24px)`\n  as an inline style on the end thumb (`mdc-slider__thumb`) element\n  (or `right` for RTL layouts).\n- *[Range sliders only]* Calculate `thumbStartPercent`, the initial position\n  of the start thumb as a percentage of the entire track. Set\n  `left:calc(<thumbStartPercent>% - 24px)` as an inline style on the\n  start thumb (`mdc-slider__thumb`) element (or `right` for RTL layouts).\n- *[Range sliders only]* Using the previously calculated `thumbStartPercent`,\n  set `left:<thumbStartPercent>%` as an inline style on the\n  `mdc-slider__track--active_fill` element (or `right` for RTL layouts).\n\nAdditionally, the MDCSlider component should be initialized with\n`skipInitialUIUpdate` set to true.\n\n#### Range slider example\n\nThis is an example of a range slider with internal values of\n`[min, max] = [0, 100]` and `[start, end] = [30, 70]`, and a minimum range of\n10.\n\n```html\n<div class=\"mdc-slider mdc-slider--range\" data-min-range=\"10\">\n  <div class=\"mdc-slider__track\">\n    <div class=\"mdc-slider__track--inactive\"></div>\n    <div class=\"mdc-slider__track--active\">\n      <div class=\"mdc-slider__track--active_fill\"\n           style=\"transform:scaleX(.4); left:30%\"></div>\n    </div>\n  </div>\n  <div class=\"mdc-slider__thumb\" style=\"left:calc(30%-24px)\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"0\" max=\"60\" value=\"30\" name=\"rangeStart\" aria-label=\"Range slider demo\">\n  </div>\n  <div class=\"mdc-slider__thumb\" style=\"left:calc(70%-24px)\">\n    <div class=\"mdc-slider__thumb-knob\"></div>\n    <input class=\"mdc-slider__input\" type=\"range\" min=\"40\" max=\"100\" value=\"70\" name=\"rangeEnd\" aria-label=\"Range slider demo\">\n  </div>\n</div>\n```\n\n## API\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`track-active-color($color)` | Sets the color of the active track.\n`track-inactive-color($color, $opacity)` | Sets the color and opacity of the inactive track.\n`thumb-color($color)` | Sets the color of the thumb.\n`thumb-ripple-color($color)` | Sets the color of the thumb ripple.\n`tick-mark-active-color($color)` | Sets the color of tick marks on the active track.\n`tick-mark-inactive-color($color)` | Sets the color of tick marks on the inactive track.\n`value-indicator-color($color, $opaicty)` | Sets the color and opacity of the value indicator.\n`value-indicator-text-color($color, $opaicty)` | Sets the color of the value indicator text.\n\n### `MDCSlider` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCSlider:change` | `MDCSliderChangeEventDetail` | Emitted when a value has been changed and committed from a user event. Mirrors the native `change` event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n`MDCSlider:input` | `MDCSliderChangeEventDetail` | Emitted when a value has been changed from a user event. Mirrors the native `input` event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n\n### `MDCSlider` methods\n\nMethod Signature | Description\n--- | ---\n`getValueStart() => number` | Gets the value of the start thumb (only applicable for range sliders).\n`setValueStart(valueStart: number) => void` | Sets the value of the start thumb (only applicable for range sliders).\n`getValue() => number` | Gets the value of the thumb (for single point sliders), or the end thumb (for range sliders).\n`setValue(value: number) => void` | Sets the value of the thumb (for single point sliders), or the end thumb (for range sliders).\n`getDisabled() => boolean` | Gets the disabled state of the slider.\n`setDisabled(disabled: boolean) => void` | Sets the disabled state of the slider.\n`setValueToAriaValueTextFn((mapFn: ((value: number) => string) \\| null) => void` | Sets a function that maps the slider value to value of the `aria-valuetext` attribute on the thumb element. If not set, the `aria-valuetext` attribute is unchanged when the value changes.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework such as React or Angular, you can create a slider for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSliderAdapter](./adapter.ts) and [MDCSliderFoundation](./foundation.ts) for up-to-date code documentation of slider foundation API's.\n"
  },
  {
    "path": "packages/mdc-slider/_index.scss",
    "content": "@forward './slider-theme';\n"
  },
  {
    "path": "packages/mdc-slider/_slider-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/elevation/elevation-theme';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/keys';\n@use '@material/theme/map-ext';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use '@material/typography/typography';\n\n/// Default color for slider (track, thumb, ripple).\n$color: primary;\n$disabled-color: on-surface;\n$disabled-slider-opacity: 0.38;\n\n// Thumb variables.\n$value-indicator-color: #000;\n$value-indicator-opacity: 0.6;\n$value-indicator-text-color: on-primary;\n\n// Track variables.\n$track-inactive-opacity: 0.24;\n$tick-mark-active-color: on-primary;\n$tick-mark-inactive-color: primary;\n$tick-mark-opacity: 0.6;\n\n$_custom-property-prefix: 'slider';\n\n$light-theme: (\n  active-track-color: $color,\n  active-track-height: 6px,\n  active-track-shape: 9999px,\n  disabled-active-track-color: $disabled-color,\n  disabled-handle-color: $disabled-color,\n  disabled-handle-elevation: null,\n  disabled-inactive-track-color: $disabled-color,\n  focus-handle-color: $color,\n  handle-color: $color,\n  handle-elevation: 1,\n  handle-height: 20px,\n  handle-shadow-color: black,\n  handle-shape: 50%,\n  handle-width: 20px,\n  hover-handle-color: $color,\n  inactive-track-color: $color,\n  inactive-track-height: 4px,\n  inactive-track-shape: 9999px,\n  label-container-color:\n    color.mix(\n      $value-indicator-color,\n      theme-color.prop-value(on-primary),\n      $value-indicator-opacity * 100%\n    ),\n  label-container-elevation: null,\n  label-container-height: null,\n  label-label-text-color: $value-indicator-text-color,\n  label-label-text-font: typography.get-font(subtitle2),\n  label-label-text-size: typography.get-size(subtitle2),\n  label-label-text-line-height: typography.get-line-height(subtitle2),\n  label-label-text-tracking: typography.get-tracking(subtitle2),\n  label-label-text-weight: typography.get-weight(subtitle2),\n  pressed-handle-color: null,\n  track-elevation: null,\n  with-overlap-handle-outline-color: #fff,\n  with-overlap-handle-outline-width: 1px,\n  with-tick-marks-active-container-color: $tick-mark-active-color,\n  with-tick-marks-active-container-opacity: $tick-mark-opacity,\n  with-tick-marks-container-shape: 50%,\n  with-tick-marks-container-size: 2px,\n  with-tick-marks-disabled-container-color: $disabled-color,\n  with-tick-marks-inactive-container-color: $tick-mark-inactive-color,\n  with-tick-marks-inactive-container-opacity: $tick-mark-opacity,\n  focus-state-layer-opacity: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: _resolve-theme-elevation-keys($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties($theme, $_custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $query: feature-targeting.all(),\n  $resolvers: resolvers.$material\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties($theme, $_custom-property-prefix);\n\n  @include thumb-color(\n    $color-or-map: (\n      default: map.get($theme, 'handle-color'),\n      disabled: map.get($theme, 'disabled-handle-color'),\n    ),\n    $query: $query\n  );\n\n  @include thumb-ripple-color(\n    $color: map.get($theme, 'handle-color'),\n    $query: $query\n  );\n\n  @include track-active-color(\n    $color-or-map: (\n      default: map.get($theme, 'active-track-color'),\n      disabled: map.get($theme, 'disabled-active-track-color'),\n    ),\n    $query: $query\n  );\n\n  @include track-inactive-color(\n    $color-or-map: (\n      default: map.get($theme, 'inactive-track-color'),\n      disabled: map.get($theme, 'disabled-inactive-track-color'),\n    ),\n    $query: $query\n  );\n\n  @include tick-mark-active-color(\n    $color-or-map: (\n      default: map.get($theme, 'with-tick-marks-active-container-color'),\n      disabled: map.get($theme, 'with-tick-marks-active-container-color'),\n    ),\n    $opacity: map.get($theme, 'with-tick-marks-active-container-opacity'),\n    $query: $query\n  );\n\n  @include tick-mark-inactive-color(\n    $color-or-map: (\n      default: map.get($theme, 'with-tick-marks-inactive-container-color'),\n      disabled: map.get($theme, 'with-tick-marks-disabled-container-color'),\n    ),\n    $opacity: map.get($theme, 'with-tick-marks-inactive-container-opacity'),\n    $query: $query\n  );\n\n  @include value-indicator-color(\n    $color: map.get($theme, 'label-container-color'),\n    $opacity: 1,\n    $query: $query\n  );\n\n  @include value-indicator-text-color(\n    $color: map.get($theme, 'label-label-text-color'),\n    $query: $query\n  );\n\n  .mdc-slider__track {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'inactive-track-height'));\n    }\n  }\n\n  .mdc-slider__track--active {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'active-track-height'));\n      @include theme.property(\n        top,\n        // Using 'xactive' because string replace finds 'active' in 'inactive'\n        'calc((inactive-track-height - xactive-track-height) / 2)',\n        $replace: (\n          'inactive-track-height': map.get($theme, 'inactive-track-height'),\n          'xactive-track-height': map.get($theme, 'active-track-height')\n        )\n      );\n    }\n  }\n\n  .mdc-slider__track--active_fill {\n    @include feature-targeting.targets($feat-structure) {\n      // Use border rather than background-color to fill track, for HCM.\n      @include theme.property(\n        border-top-width,\n        map.get($theme, 'active-track-height')\n      );\n    }\n  }\n\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'inactive-track-height'));\n    }\n  }\n\n  .mdc-slider__tick-mark--active,\n  .mdc-slider__tick-mark--inactive {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        height,\n        map.get($theme, 'with-tick-marks-container-size')\n      );\n      @include theme.property(\n        width,\n        map.get($theme, 'with-tick-marks-container-size')\n      );\n    }\n  }\n\n  @include disabled-slider-opacity($disabled-slider-opacity, $query);\n  @include _value-indicator-typography($theme, $feat-typography);\n  @include _slider-shape($theme, $feat-structure);\n  @include _slider-elevation($theme, $resolvers, $query);\n  @include _thumb-activated-theme-color($theme, $query);\n  @include _thumb-overlap($theme, $query);\n  @include _thumb-state-layer($theme);\n}\n\n/// Customizes active track color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n///   @include track-active-color(blue);\n///   @include track-active-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin track-active-color($color-or-map, $query: feature-targeting.all()) {\n  @include _set-track-active-color(\n    state.get-default-state($color-or-map),\n    $query\n  );\n\n  $_disabled-color: state.get-disabled-state($color-or-map);\n  @if $_disabled-color {\n    &.mdc-slider--disabled {\n      @include _set-track-active-color($_disabled-color, $query);\n    }\n  }\n}\n\n@mixin _set-track-active-color($color, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__track--active_fill {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n/// Customizes inactive track color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n///   @include track-inactive-color(blue);\n///   @include track-inactive-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin track-inactive-color(\n  $color-or-map,\n  $opacity: $track-inactive-opacity,\n  $query: feature-targeting.all()\n) {\n  @include _set-track-inactive-color(\n    state.get-default-state($color-or-map),\n    $opacity,\n    $query\n  );\n\n  $_disabled-color: state.get-disabled-state($color-or-map);\n  @if $_disabled-color {\n    &.mdc-slider--disabled {\n      @include _set-track-inactive-color($_disabled-color, $opacity, $query);\n    }\n  }\n}\n\n@mixin _set-track-inactive-color($color, $opacity, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n\n      opacity: $opacity;\n    }\n  }\n}\n\n/// Customizes thumb color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n///   @include thumb-color(blue);\n///   @include thumb-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin thumb-color($color-or-map, $query: feature-targeting.all()) {\n  @include _set-thumb-color(state.get-default-state($color-or-map), $query);\n\n  $_disabled-color: state.get-disabled-state($color-or-map);\n  @if $_disabled-color {\n    &.mdc-slider--disabled {\n      @include _set-thumb-color($_disabled-color, $query);\n    }\n  }\n}\n\n@mixin _set-thumb-color($color, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-slider__thumb-knob {\n      @include theme.property(background-color, $color);\n      @include theme.property(border-color, $color);\n    }\n\n    .mdc-slider__thumb--top {\n      .mdc-slider__thumb-knob,\n      &.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n      &.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n        border-color: #fff;\n      }\n    }\n  }\n}\n\n///\n/// Customizes thumb ripple color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-variables.property-values`.\n///\n@mixin thumb-ripple-color($color, $query: feature-targeting.all()) {\n  .mdc-slider__thumb {\n    @include ripple-theme.states($color: $color, $query: $query);\n  }\n}\n\n/// Customizes thumb color when thumb is activated (hover, focused, or pressed\n/// state).\n///\n/// @param {Color} $color - The thumb's color\n@mixin thumb-activated-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__thumb:hover,\n  .mdc-slider__thumb--focused {\n    @include _set-thumb-color($color, $query);\n  }\n}\n\n/// Customizes color of active tick marks, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n///   @include tick-mark-active-color(blue);\n///   @include tick-mark-active-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin tick-mark-active-color(\n  $color-or-map,\n  $opacity: $tick-mark-opacity,\n  $query: feature-targeting.all()\n) {\n  @include _set-tick-mark-active-color(\n    state.get-default-state($color-or-map),\n    $opacity,\n    $query\n  );\n\n  $_disabled-color: state.get-disabled-state($color-or-map);\n  @if $_disabled-color {\n    &.mdc-slider--disabled {\n      @include _set-tick-mark-active-color($_disabled-color, $opacity, $query);\n    }\n  }\n\n  @media (forced-colors: active) {\n    @include _set-tick-mark-active-color(Canvas, 1, $query);\n  }\n}\n\n@mixin _set-tick-mark-active-color($color, $opacity, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__tick-mark--active {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n/// Customizes color of inactive tick marks, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n///   @include tick-mark-inactive-color(blue);\n///   @include tick-mark-inactive-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin tick-mark-inactive-color(\n  $color-or-map,\n  $opacity: $tick-mark-opacity,\n  $query: feature-targeting.all()\n) {\n  @include _set-tick-mark-inactive-color(\n    state.get-default-state($color-or-map),\n    $opacity,\n    $query\n  );\n\n  $_disabled-color: state.get-disabled-state($color-or-map);\n  @if $_disabled-color {\n    &.mdc-slider--disabled {\n      @include _set-tick-mark-inactive-color(\n        $_disabled-color,\n        $opacity,\n        $query\n      );\n    }\n  }\n\n  @media (forced-colors: active) {\n    @include _set-tick-mark-inactive-color(CanvasText, 1, $query);\n  }\n}\n\n@mixin _set-tick-mark-inactive-color($color, $opacity, $query) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__tick-mark--inactive {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n///\n/// Customizes color and opacity of the value indicator.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-variables.property-values`.\n/// @param {number} $opacity\n///\n@mixin value-indicator-color(\n  $color,\n  $opacity,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__value-indicator {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n\n      opacity: $opacity;\n    }\n  }\n\n  // Caret.\n  .mdc-slider__value-indicator::before {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-top-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes color of the value indicator text.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-variables.property-values`.\n///\n@mixin value-indicator-text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__value-indicator {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin disabled-slider-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-slider--disabled {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin _value-indicator-typography($theme, $query: feature-targeting.all()) {\n  $font: map.get($theme, 'label-label-text-font');\n  $size: map.get($theme, 'label-label-text-size');\n  $tracking: map.get($theme, 'label-label-text-tracking');\n  $weight: map.get($theme, 'label-label-text-weight');\n  $line-height: map.get($theme, 'label-label-text-line-height');\n\n  .mdc-slider__value-indicator-text {\n    @include feature-targeting.targets($query) {\n      @include theme.property(letter-spacing, $tracking);\n      @include theme.property(font-size, $size);\n      @include theme.property(font-family, $font);\n      @include theme.property(font-weight, $weight);\n      @include theme.property(line-height, $line-height);\n    }\n  }\n}\n\n@mixin _slider-shape($theme, $query: feature-targeting.all()) {\n  $active-track-radius: map.get($theme, 'active-track-shape');\n  $inactive-track-radius: map.get($theme, 'inactive-track-shape');\n  $thumb-radius: map.get($theme, 'handle-shape');\n  $thumb-width: map.get($theme, 'handle-width');\n  $thumb-height: map.get($theme, 'handle-height');\n  $with-tick-marks-radius: map.get($theme, 'with-tick-marks-container-shape');\n\n  .mdc-slider__track--active {\n    @include feature-targeting.targets($query) {\n      // Set border-radius on the outer `track--active` element, and apply\n      // transform: scale(...) to the inner `track--active_fill` element,\n      // such that the track grows/shrinks as needed, but the border-radius\n      // is not affected by the scaling.\n      @include theme.property(border-radius, $active-track-radius);\n    }\n  }\n\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $inactive-track-radius);\n    }\n  }\n\n  .mdc-slider__thumb-knob {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $thumb-radius);\n      @include theme.property(width, $thumb-width);\n      @include theme.property(height, $thumb-height);\n      @include theme.property(border-style, solid);\n      // Use border rather than background-color to fill thumb, for HCM.\n      @include theme.property(\n        border-width,\n        'calc(thumb-height / 2) calc(thumb-width / 2)',\n        $replace: (thumb-height: $thumb-height, thumb-width: $thumb-width)\n      );\n    }\n  }\n\n  .mdc-slider__tick-mark--active,\n  .mdc-slider__tick-mark--inactive {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $with-tick-marks-radius);\n    }\n  }\n}\n\n@mixin _slider-elevation($theme, $resolver, $query: feature-targeting.all()) {\n  $thumb-elevation: map.get($theme, 'handle-elevation');\n  $thumb-shadow-color: map.get($theme, 'handle-shadow-color');\n  $value-indicator-elevation: keys.resolve(\n    map.get($theme, 'label-container-elevation')\n  );\n  $track-elevation: keys.resolve(map.get($theme, 'track-elevation'));\n  $disabled-thumb-elevation: keys.resolve(\n    map.get($theme, 'disabled-handle-elevation')\n  );\n\n  .mdc-slider__thumb-knob {\n    @include elevation-theme.with-resolver(\n      map.get($resolver, elevation),\n      $query,\n      $elevation: $thumb-elevation,\n      $shadow-color: $thumb-shadow-color\n    );\n  }\n  .mdc-slider__value-indicator {\n    @include elevation-mixins.elevation(\n      $z-value: $value-indicator-elevation,\n      $query: $query\n    );\n  }\n  .mdc-slider__track {\n    @include elevation-mixins.elevation(\n      $z-value: $track-elevation,\n      $query: $query\n    );\n  }\n\n  &.mdc-slider--disabled .mdc-slider__thumb-knob {\n    @include elevation-mixins.elevation(\n      $z-value: $disabled-thumb-elevation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _thumb-activated-theme-color($theme, $query: feature-targeting.all()) {\n  $hover-color: map.get($theme, 'hover-handle-color');\n  $focus-color: map.get($theme, 'focus-handle-color');\n  $pressed-color: map.get($theme, 'pressed-handle-color');\n\n  .mdc-slider__thumb {\n    &:hover {\n      @include _set-thumb-color($hover-color, $query);\n    }\n\n    &--focused {\n      @include _set-thumb-color($focus-color, $query);\n    }\n\n    @include ripple-theme.pressed() {\n      @include _set-thumb-color($pressed-color, $query);\n    }\n  }\n}\n\n@mixin _thumb-overlap($theme, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $overlap-outline-color: map.get($theme, 'with-overlap-handle-outline-color');\n  $overlap-outline-width: map.get($theme, 'with-overlap-handle-outline-width');\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-slider__thumb--top {\n      .mdc-slider__thumb-knob,\n      &.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n      &.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n        @include theme.property(border-color, $overlap-outline-color);\n        @include theme.property(border-width, $overlap-outline-width);\n      }\n    }\n  }\n}\n\n@function _resolve-theme-elevation-keys($theme, $resolvers) {\n  $elevation-resolver: map.get($resolvers, elevation);\n  $elevation: map.get($theme, handle-elevation);\n  $shadow-color: map.get($theme, thumb-shadow-color);\n\n  @if $elevation-resolver == null or $elevation == null or $shadow-color == null\n  {\n    @return $theme;\n  }\n\n  $resolved-value: meta.call(\n    $resolver,\n    $elevation: $elevation,\n    $shadow-color: $shadow-color\n  );\n\n  @return map.set($theme, $key, $resolved-value);\n}\n\n@mixin _thumb-state-layer($theme) {\n  .mdc-slider__thumb {\n    @include ripple-theme.theme-styles(\n      (\n        focus-state-layer-opacity: map.get($theme, 'focus-state-layer-opacity'),\n        hover-state-layer-color: map.get($theme, 'hover-state-layer-color'),\n        hover-state-layer-opacity: map.get($theme, 'hover-state-layer-opacity'),\n        pressed-state-layer-opacity:\n          map.get($theme, 'pressed-state-layer-opacity'),\n      )\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/_slider.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/animation/animation';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './slider-theme';\n\n// Thumb variables.\n$_thumb-ripple-size: 48px;\n$_thumb-size: 20px;\n$_value-indicator-caret-width: 6px;\n\n// Track variables.\n$_track-active-height: 6px;\n$_track-inactive-height: 4px;\n\n/// Core styles for slider component.\n@mixin core-styles($query: feature-targeting.all()) {\n  @include ripple($query: $query);\n  @include without-ripple($query: $query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include static-styles($query: $query);\n\n  .mdc-slider {\n    @include slider-theme.theme-styles(\n      slider-theme.$light-theme,\n      $query: $query\n    );\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-slider__thumb {\n    @include ripple.surface($query: $query);\n    @include ripple.radius-unbounded($query: $query);\n    @include ripple-theme.states($color: slider-theme.$color, $query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-slider {\n    @include _track($query: $query);\n    @include _thumb($query: $query);\n    @include _tick-marks($query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n      height: $_thumb-ripple-size;\n      margin: 0 math.div($_thumb-ripple-size, 2);\n      position: relative;\n      touch-action: pan-y;\n    }\n\n    &--discrete {\n      .mdc-slider__thumb,\n      .mdc-slider__track--active_fill {\n        @include feature-targeting.targets($feat-animation) {\n          transition: transform 80ms ease;\n        }\n      }\n\n      @media (prefers-reduced-motion) {\n        .mdc-slider__thumb,\n        .mdc-slider__track--active_fill {\n          @include feature-targeting.targets($feat-animation) {\n            transition: none;\n          }\n        }\n      }\n    }\n  }\n\n  .mdc-slider--disabled {\n    @include _disabled($query: $query);\n  }\n\n  .mdc-slider__input {\n    $indent: 2px;\n    $size: $_thumb-ripple-size - 2 * $indent;\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n      left: $indent;\n      margin: 0;\n      height: $size;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      top: $indent;\n      width: $size;\n    }\n  }\n}\n\n@mixin _track($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-slider__track {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 100%;\n    }\n  }\n\n  .mdc-slider__track--active,\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    }\n  }\n\n  .mdc-slider__track--active {\n    @include feature-targeting.targets($feat-structure) {\n      overflow: hidden;\n    }\n  }\n\n  .mdc-slider__track--active_fill {\n    @include feature-targeting.targets($feat-structure) {\n      // Use border rather than background-color to fill track, for HCM.\n      border-top-style: solid;\n      box-sizing: border-box;\n      height: 100%;\n      width: 100%;\n      position: relative;\n      @include rtl.ignore-next-line();\n      -webkit-transform-origin: left;\n      @include rtl.ignore-next-line();\n      transform-origin: left;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        -webkit-transform-origin: right;\n        @include rtl.ignore-next-line();\n        transform-origin: right;\n      }\n    }\n  }\n\n  .mdc-slider__track--inactive {\n    &::before {\n      @include dom-mixins.transparent-border($query: $query); // For HCM.\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      left: 0;\n      top: 0;\n    }\n  }\n}\n\n@mixin _thumb($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _value-indicator($query: $query);\n\n  .mdc-slider__thumb {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      @include rtl.ignore-next-line();\n      left: math.div(-$_thumb-ripple-size, 2);\n      outline: none;\n      position: absolute;\n      user-select: none;\n      height: $_thumb-ripple-size;\n      width: $_thumb-ripple-size;\n    }\n\n    &--top {\n      @include feature-targeting.targets($feat-structure) {\n        z-index: 1;\n      }\n    }\n\n    &--top .mdc-slider__thumb-knob,\n    &--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n    &--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n      @include feature-targeting.targets($feat-structure) {\n        border-style: solid;\n        border-width: 1px;\n        box-sizing: content-box;\n      }\n    }\n  }\n\n  .mdc-slider__thumb-knob {\n    @include feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      @include rtl.ignore-next-line();\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      @include rtl.ignore-next-line();\n      transform: translate(-50%, -50%);\n    }\n  }\n}\n\n@mixin _tick-marks($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-slider__tick-marks {\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      box-sizing: border-box;\n      display: flex;\n      height: 100%;\n      justify-content: space-between;\n      padding: 0 1px;\n      position: absolute;\n      width: 100%;\n    }\n  }\n}\n\n@mixin _value-indicator($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-slider__value-indicator-container {\n    @include feature-targeting.targets($feat-structure) {\n      bottom: math.div($_thumb-ripple-size, 2) + math.div($_thumb-size, 2) +\n        $_value-indicator-caret-width + 4px;\n      @include css.declaration(\n        left,\n        var(--slider-value-indicator-container-left, 50%),\n        50%,\n        $gss: (noflip: true)\n      );\n      pointer-events: none;\n      position: absolute;\n      @include css.declaration(\n        right,\n        var(--slider-value-indicator-container-right),\n        $gss: (noflip: true)\n      );\n      @include css.declaration(\n        transform,\n        var(--slider-value-indicator-container-transform, translateX(-50%)),\n        translateX(-50%),\n        $gss: (noflip: true)\n      );\n    }\n  }\n\n  .mdc-slider__value-indicator {\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation.exit-permanent(transform, 100ms);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      align-items: center;\n      border-radius: 4px;\n      display: flex;\n      height: 32px;\n      padding: 0 12px;\n      transform: scale(0);\n      transform-origin: bottom;\n    }\n\n    // Caret: https://css-tricks.com/snippets/css/css-triangle/\n    &::before {\n      @include feature-targeting.targets($feat-structure) {\n        border-left: $_value-indicator-caret-width solid transparent;\n        border-right: $_value-indicator-caret-width solid transparent;\n        border-top: $_value-indicator-caret-width solid;\n        bottom: -$_value-indicator-caret-width + 1;\n        content: '';\n        height: 0;\n        @include css.declaration(\n          left,\n          var(--slider-value-indicator-caret-left, 50%),\n          50%,\n          $gss: (noflip: true)\n        );\n        position: absolute;\n        @include css.declaration(\n          right,\n          var(--slider-value-indicator-caret-right),\n          $gss: (noflip: true)\n        );\n        @include css.declaration(\n          transform,\n          var(--slider-value-indicator-caret-transform, translateX(-50%)),\n          translateX(-50%),\n          $gss: (noflip: true)\n        );\n        width: 0;\n      }\n    }\n\n    &::after {\n      @include dom-mixins.transparent-border($query: $query); // For HCM.\n    }\n  }\n\n  .mdc-slider__thumb--with-indicator {\n    .mdc-slider__value-indicator-container {\n      @include feature-targeting.targets($feat-structure) {\n        pointer-events: auto;\n      }\n    }\n\n    .mdc-slider__value-indicator {\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation.enter(transform, 100ms);\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n      }\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    .mdc-slider__value-indicator,\n    .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n      @include feature-targeting.targets($feat-animation) {\n        transition: none;\n      }\n    }\n  }\n}\n\n// Styles for slider in disabled state.\n@mixin _disabled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    cursor: auto;\n  }\n\n  .mdc-slider__thumb {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\nimport {Thumb, TickMark} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSliderAdapter {\n  /**\n   * @return Returns true if the slider root element has the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Adds the given class to the slider root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes the given class from the slider root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * @return Returns the given attribute value on the slider root element.\n   */\n  getAttribute(attribute: string): string|null;\n\n  /**\n   * Adds the class to the given thumb element.\n   */\n  addThumbClass(className: string, thumb: Thumb): void;\n\n  /**\n   * Removes the class from the given thumb element.\n   */\n  removeThumbClass(className: string, thumb: Thumb): void;\n\n  /**\n   * - If thumb is `Thumb.START`, returns the value property on the start input\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, returns the value property on the end input (or\n   *   only input for single point slider).\n   */\n  getInputValue(thumb: Thumb): string;\n\n  /**\n   * - If thumb is `Thumb.START`, sets the value property on the start input\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, sets the value property on the end input (or\n   *   only input for single point slider).\n   */\n  setInputValue(value: string, thumb: Thumb): void;\n\n  /**\n   * - If thumb is `Thumb.START`, returns the attribute value on the start input\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, returns the attribute value on the end input (or\n   *   only input for single point slider).\n   */\n  getInputAttribute(attribute: string, thumb: Thumb): string|null;\n\n  /**\n   * - If thumb is `Thumb.START`, sets the attribute on the start input\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, sets the attribute on the end input (or\n   *   only input for single point slider).\n   */\n  setInputAttribute(attribute: string, value: string, thumb: Thumb): void;\n\n  /**\n   * - If thumb is `Thumb.START`, removes the attribute on the start input\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, removes the attribute on the end input (or\n   *   only input for single point slider).\n   */\n  removeInputAttribute(attribute: string, thumb: Thumb): void;\n\n  /**\n   * - If thumb is `Thumb.START`, focuses start input (range slider variant).\n   * - If thumb is `Thumb.END`, focuses end input (or only input for single\n   *   point slider).\n   */\n  focusInput(thumb: Thumb): void;\n\n  /**\n   * @return Returns true if the given input is focused.\n   */\n  isInputFocused(thumb: Thumb): boolean;\n\n  /**\n   * @return Returns true if focus styles should be hidden for pointer events.\n   */\n  shouldHideFocusStylesForPointerEvents?(): boolean;\n\n  /**\n   * @return Returns the width of the given thumb knob.\n   */\n  getThumbKnobWidth(thumb: Thumb): number;\n\n  /**\n   * @return Returns the bounding client rect of the given thumb.\n   */\n  getThumbBoundingClientRect(thumb: Thumb): DOMRect;\n\n  /**\n   * @return Returns the bounding client rect for the slider root element.\n   */\n  getBoundingClientRect(): DOMRect;\n\n  /**\n   * @return Returns the width of the given value indicator container.\n   */\n  getValueIndicatorContainerWidth(thumb: Thumb): number;\n\n  /**\n   * @return Returns true if the root element is RTL, otherwise false\n   */\n  isRTL(): boolean;\n\n  /**\n   * Sets a style property of the thumb element to the passed value.\n   * - If thumb is `Thumb.START`, sets style on the start thumb (for\n   *   range slider variant).\n   * - If thumb is `Thumb.END`, sets style on the end thumb (or only thumb\n   *   for single point slider).\n   */\n  setThumbStyleProperty(propertyName: string, value: string, thumb: Thumb):\n      void;\n\n  /**\n   * Removes the given style property from the thumb element.\n   * - If thumb is `Thumb.START`, removes style from the start thumb (for\n   *   range slider variant).\n   * - If thumb is `Thumb.END`, removes style from the end thumb (or only thumb\n   *   for single point slider).\n   */\n  removeThumbStyleProperty(propertyName: string, thumb: Thumb): void;\n\n  /**\n   * Sets a style property of the active track element to the passed value.\n   */\n  setTrackActiveStyleProperty(propertyName: string, value: string): void;\n\n  /**\n   * Removes the given style property from the active track element.\n   */\n  removeTrackActiveStyleProperty(propertyName: string): void;\n\n  /**\n   * Sets value indicator text based on the given value.\n   * - If thumb is `Thumb.START`, updates value indicator on start thumb\n   *   (for range slider variant).\n   * - If thumb is `Thumb.END`, updates value indicator on end thumb (or\n   *   only thumb for single point slider).\n   */\n  setValueIndicatorText(value: number, thumb: Thumb): void;\n\n  /**\n   * Returns a function that maps the slider value to the value of the\n   * `aria-valuetext` attribute on the thumb element. If null, the\n   * `aria-valuetext` attribute is unchanged when the value changes.\n   */\n  getValueToAriaValueTextFn(): ((value: number, thumb: Thumb) => string)|null;\n\n  /**\n   * Updates tick marks container element with tick mark elements and their\n   * active/inactive classes, based on the given mappings:\n   * - TickMark.ACTIVE => `cssClasses.TICK_MARK_ACTIVE`\n   * - TickMark.INACTIVE => `cssClasses.TICK_MARK_INACTIVE`\n   */\n  updateTickMarks(tickMarks: TickMark[]): void;\n\n  /**\n   * Sets pointer capture on the slider root.\n   * https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture\n   */\n  setPointerCapture(pointerId: number): void;\n\n  /**\n   * Emits a `change` event from the slider root, indicating that the value\n   * has been changed and committed on the given thumb, from a user event.\n   * Mirrors the native `change` event:\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n   */\n  emitChangeEvent(value: number, thumb: Thumb): void;\n\n  /**\n   * Emits an `input` event from the slider root, indicating that the value\n   * has been changed on the given thumb, from a user event.\n   * Mirrors the native `input` event:\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event\n   */\n  emitInputEvent(value: number, thumb: Thumb): void;\n\n  /**\n   * Emits an event on drag start, containing the current value on the\n   * thumb being dragged.\n   */\n  emitDragStartEvent(value: number, thumb: Thumb): void;\n\n  /**\n   * Emits an event on drag end, containing the final value on the\n   * thumb that was dragged.\n   */\n  emitDragEndEvent(value: number, thumb: Thumb): void;\n\n  /**\n   * Registers an event listener on the root element.\n   */\n  registerEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the root element.\n   */\n  deregisterEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener on the given thumb element.\n   */\n  registerThumbEventHandler<K extends EventType>(\n      thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the given thumb element.\n   */\n  deregisterThumbEventHandler<K extends EventType>(\n      thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener on the given input element.\n   */\n  registerInputEventHandler<K extends EventType>(\n      thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the given input element.\n   */\n  deregisterInputEventHandler<K extends EventType>(\n      thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener on the body element.\n   */\n  registerBodyEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the body element.\n   */\n  deregisterBodyEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener on the window.\n   */\n  registerWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the window.\n   */\n  deregisterWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n"
  },
  {
    "path": "packages/mdc-slider/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {EventType, SpecificEventListener} from '@material/base/types';\nimport {applyPassive} from '@material/dom/events';\nimport {matches} from '@material/dom/ponyfill';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\n\nimport {MDCSliderAdapter} from './adapter';\nimport {cssClasses, events} from './constants';\nimport {MDCSliderFoundation} from './foundation';\nimport {MDCSliderChangeEventDetail, Thumb, TickMark} from './types';\n\n/** Vanilla implementation of slider component. */\nexport class MDCSlider extends MDCComponent<MDCSliderFoundation> {\n  static override attachTo(root: HTMLElement, options: {\n    skipInitialUIUpdate?: boolean\n  } = {}) {\n    return new MDCSlider(root, undefined, options);\n  }\n\n  private inputs!: HTMLInputElement[];  // Assigned in #initialize.\n  private thumbs!: HTMLElement[];       // Assigned in #initialize.\n  private trackActive!: HTMLElement;    // Assigned in #initialize.\n  private ripples!: MDCRipple[];        // Assigned in #initialize.\n\n  private skipInitialUIUpdate = false;\n  // Function that maps a slider value to the value of the `aria-valuetext`\n  // attribute on the thumb element.\n  private valueToAriaValueTextFn: ((value: number) => string)|null = null;\n\n  override getDefaultFoundation() {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same\n    // order as the adapter interface.\n    const adapter: MDCSliderAdapter = {\n      hasClass: (className) => this.root.classList.contains(className),\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      addThumbClass: (className, thumb: Thumb) => {\n        this.getThumbEl(thumb).classList.add(className);\n      },\n      removeThumbClass: (className, thumb: Thumb) => {\n        this.getThumbEl(thumb).classList.remove(className);\n      },\n      getAttribute: (attribute) => this.root.getAttribute(attribute),\n      getInputValue: (thumb: Thumb) => this.getInput(thumb).value,\n      setInputValue: (value: string, thumb: Thumb) => {\n        this.getInput(thumb).value = value;\n      },\n      getInputAttribute: (attribute, thumb: Thumb) =>\n          this.getInput(thumb).getAttribute(attribute),\n      setInputAttribute: (attribute, value, thumb: Thumb) => {\n        this.getInput(thumb).setAttribute(attribute, value);\n      },\n      removeInputAttribute: (attribute, thumb: Thumb) => {\n        this.getInput(thumb).removeAttribute(attribute);\n      },\n      focusInput: (thumb: Thumb) => {\n        this.getInput(thumb).focus();\n      },\n      isInputFocused: (thumb: Thumb) =>\n          this.getInput(thumb) === document.activeElement,\n      shouldHideFocusStylesForPointerEvents: () => false,\n      getThumbKnobWidth: (thumb: Thumb) => {\n        return this.getThumbEl(thumb)\n            .querySelector<HTMLElement>(`.${cssClasses.THUMB_KNOB}`)!\n            .getBoundingClientRect()\n            .width;\n      },\n      getThumbBoundingClientRect: (thumb: Thumb) =>\n          this.getThumbEl(thumb).getBoundingClientRect(),\n      getBoundingClientRect: () => this.root.getBoundingClientRect(),\n      getValueIndicatorContainerWidth: (thumb: Thumb) => {\n        return this.getThumbEl(thumb)\n            .querySelector<HTMLElement>(\n                `.${cssClasses.VALUE_INDICATOR_CONTAINER}`)!\n            .getBoundingClientRect()\n            .width;\n      },\n      isRTL: () => getComputedStyle(this.root).direction === 'rtl',\n      setThumbStyleProperty: (propertyName, value, thumb: Thumb) => {\n        this.getThumbEl(thumb).style.setProperty(propertyName, value);\n      },\n      removeThumbStyleProperty: (propertyName, thumb: Thumb) => {\n        this.getThumbEl(thumb).style.removeProperty(propertyName);\n      },\n      setTrackActiveStyleProperty: (propertyName, value) => {\n        this.trackActive.style.setProperty(propertyName, value);\n      },\n      removeTrackActiveStyleProperty: (propertyName) => {\n        this.trackActive.style.removeProperty(propertyName);\n      },\n      setValueIndicatorText: (value: number, thumb: Thumb) => {\n        const valueIndicatorEl =\n            this.getThumbEl(thumb).querySelector<HTMLElement>(\n                `.${cssClasses.VALUE_INDICATOR_TEXT}`);\n        valueIndicatorEl!.textContent = String(value);\n      },\n      getValueToAriaValueTextFn: () => this.valueToAriaValueTextFn,\n      updateTickMarks: (tickMarks: TickMark[]) => {\n        let tickMarksContainer = this.root.querySelector<HTMLElement>(\n            `.${cssClasses.TICK_MARKS_CONTAINER}`);\n        if (!tickMarksContainer) {\n          tickMarksContainer = document.createElement('div');\n          tickMarksContainer.classList.add(cssClasses.TICK_MARKS_CONTAINER);\n          const track =\n              this.root.querySelector<HTMLElement>(`.${cssClasses.TRACK}`);\n          track!.appendChild(tickMarksContainer);\n        }\n\n        if (tickMarks.length !== tickMarksContainer.children.length) {\n          while (tickMarksContainer.firstChild) {\n            tickMarksContainer.removeChild(tickMarksContainer.firstChild);\n          }\n          this.addTickMarks(tickMarksContainer, tickMarks);\n        } else {\n          this.updateTickMarks(tickMarksContainer, tickMarks);\n        }\n      },\n      setPointerCapture: (pointerId) => {\n        this.root.setPointerCapture(pointerId);\n      },\n      emitChangeEvent: (value, thumb: Thumb) => {\n        this.emit<MDCSliderChangeEventDetail>(events.CHANGE, {value, thumb});\n      },\n      emitInputEvent: (value, thumb: Thumb) => {\n        this.emit<MDCSliderChangeEventDetail>(events.INPUT, {value, thumb});\n      },\n      // tslint:disable-next-line:enforce-name-casing\n      emitDragStartEvent: (_, thumb: Thumb) => {\n        // Emitting event is not yet implemented. See issue:\n        // https://github.com/material-components/material-components-web/issues/6448\n\n        this.getRipple(thumb).activate();\n      },\n      // tslint:disable-next-line:enforce-name-casing\n      emitDragEndEvent: (_, thumb: Thumb) => {\n        // Emitting event is not yet implemented. See issue:\n        // https://github.com/material-components/material-components-web/issues/6448\n\n        this.getRipple(thumb).deactivate();\n      },\n      registerEventHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterEventHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n      registerThumbEventHandler: (thumb, eventType, handler) => {\n        this.getThumbEl(thumb).addEventListener(eventType, handler);\n      },\n      deregisterThumbEventHandler: (thumb, eventType, handler) => {\n        this.getThumbEl(thumb).removeEventListener(eventType, handler);\n      },\n      registerInputEventHandler: (thumb, eventType, handler) => {\n        this.getInput(thumb).addEventListener(eventType, handler);\n      },\n      deregisterInputEventHandler: (thumb, eventType, handler) => {\n        this.getInput(thumb).removeEventListener(eventType, handler);\n      },\n      registerBodyEventHandler: (eventType, handler) => {\n        document.body.addEventListener(eventType, handler);\n      },\n      deregisterBodyEventHandler: (eventType, handler) => {\n        document.body.removeEventListener(eventType, handler);\n      },\n      registerWindowEventHandler: (eventType, handler) => {\n        window.addEventListener(eventType, handler);\n      },\n      deregisterWindowEventHandler: (eventType, handler) => {\n        window.removeEventListener(eventType, handler);\n      },\n      // tslint:enable:object-literal-sort-keys\n    };\n    return new MDCSliderFoundation(adapter);\n  }\n\n  /**\n   * Initializes component, with the following options:\n   * - `skipInitialUIUpdate`: Whether to skip updating the UI when initially\n   *   syncing with the DOM. This should be enabled when the slider position\n   *   is set before component initialization.\n   */\n  override initialize({skipInitialUIUpdate}: {skipInitialUIUpdate?:\n                                                  boolean} = {}) {\n    this.inputs = Array.from(\n        this.root.querySelectorAll<HTMLInputElement>(`.${cssClasses.INPUT}`));\n    this.thumbs = Array.from(\n        this.root.querySelectorAll<HTMLElement>(`.${cssClasses.THUMB}`));\n    this.trackActive =\n        this.root.querySelector<HTMLElement>(`.${cssClasses.TRACK_ACTIVE}`)!;\n    this.ripples = this.createRipples();\n\n    if (skipInitialUIUpdate) {\n      this.skipInitialUIUpdate = true;\n    }\n  }\n\n  override initialSyncWithDOM() {\n    this.foundation.layout({skipUpdateUI: this.skipInitialUIUpdate});\n  }\n\n  /** Redraws UI based on DOM (e.g. element dimensions, RTL). */\n  layout() {\n    this.foundation.layout();\n  }\n\n  getValueStart(): number {\n    return this.foundation.getValueStart();\n  }\n\n  setValueStart(valueStart: number) {\n    this.foundation.setValueStart(valueStart);\n  }\n\n  getValue(): number {\n    return this.foundation.getValue();\n  }\n\n  setValue(value: number) {\n    this.foundation.setValue(value);\n  }\n\n  /** @return Slider disabled state. */\n  getDisabled(): boolean {\n    return this.foundation.getDisabled();\n  }\n\n  /** Sets slider disabled state. */\n  setDisabled(disabled: boolean) {\n    this.foundation.setDisabled(disabled);\n  }\n\n  /**\n   * Sets a function that maps the slider value to the value of the\n   * `aria-valuetext` attribute on the thumb element.\n   */\n  setValueToAriaValueTextFn(mapFn: ((value: number) => string)|null) {\n    this.valueToAriaValueTextFn = mapFn;\n  }\n\n  private getThumbEl(thumb: Thumb) {\n    return thumb === Thumb.END ? this.thumbs[this.thumbs.length - 1] :\n                                 this.thumbs[0];\n  }\n\n  private getInput(thumb: Thumb) {\n    return thumb === Thumb.END ? this.inputs[this.inputs.length - 1] :\n                                 this.inputs[0];\n  }\n\n  private getRipple(thumb: Thumb) {\n    return thumb === Thumb.END ? this.ripples[this.ripples.length - 1] :\n                                 this.ripples[0];\n  }\n\n  /** Adds tick mark elements to the given container. */\n  private addTickMarks(tickMarkContainer: HTMLElement, tickMarks: TickMark[]) {\n    const fragment = document.createDocumentFragment();\n    for (let i = 0; i < tickMarks.length; i++) {\n      const div = document.createElement('div');\n      const tickMarkClass = tickMarks[i] === TickMark.ACTIVE ?\n          cssClasses.TICK_MARK_ACTIVE :\n          cssClasses.TICK_MARK_INACTIVE;\n      div.classList.add(tickMarkClass);\n      fragment.appendChild(div);\n    }\n    tickMarkContainer.appendChild(fragment);\n  }\n\n  /** Updates tick mark elements' classes in the given container. */\n  private updateTickMarks(\n      tickMarkContainer: HTMLElement, tickMarks: TickMark[]) {\n    const tickMarkEls = Array.from(tickMarkContainer.children);\n    for (let i = 0; i < tickMarkEls.length; i++) {\n      if (tickMarks[i] === TickMark.ACTIVE) {\n        tickMarkEls[i].classList.add(cssClasses.TICK_MARK_ACTIVE);\n        tickMarkEls[i].classList.remove(cssClasses.TICK_MARK_INACTIVE);\n      } else {\n        tickMarkEls[i].classList.add(cssClasses.TICK_MARK_INACTIVE);\n        tickMarkEls[i].classList.remove(cssClasses.TICK_MARK_ACTIVE);\n      }\n    }\n  }\n\n  /** Initializes thumb ripples. */\n  private createRipples(): MDCRipple[] {\n    const ripples = [];\n    const rippleSurfaces = Array.from(\n        this.root.querySelectorAll<HTMLElement>(`.${cssClasses.THUMB}`));\n    for (let i = 0; i < rippleSurfaces.length; i++) {\n      const rippleSurface = rippleSurfaces[i];\n      // Use the corresponding input as the focus source for the ripple (i.e.\n      // when the input is focused, the ripple is in the focused state).\n      const input = this.inputs[i];\n\n      const adapter: MDCRippleAdapter = {\n        ...MDCRipple.createAdapter(this),\n        addClass: (className: string) => {\n          rippleSurface.classList.add(className);\n        },\n        computeBoundingRect: () => rippleSurface.getBoundingClientRect(),\n        deregisterInteractionHandler: <K extends EventType>(\n            eventType: K, handler: SpecificEventListener<K>) => {\n          input.removeEventListener(eventType, handler);\n        },\n        isSurfaceActive: () => matches(input, ':active'),\n        isUnbounded: () => true,\n        registerInteractionHandler: <K extends EventType>(\n            eventType: K, handler: SpecificEventListener<K>) => {\n          input.addEventListener(eventType, handler, applyPassive());\n        },\n        removeClass: (className: string) => {\n          rippleSurface.classList.remove(className);\n        },\n        updateCssVariable: (varName: string, value: string) => {\n          rippleSurface.style.setProperty(varName, value);\n        },\n      };\n\n      const ripple =\n          new MDCRipple(rippleSurface, new MDCRippleFoundation(adapter));\n      ripple.unbounded = true;\n      ripples.push(ripple);\n    }\n\n    return ripples;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/** Slider element classes. */\nexport const cssClasses = {\n  DISABLED: 'mdc-slider--disabled',\n  DISCRETE: 'mdc-slider--discrete',\n  INPUT: 'mdc-slider__input',\n  RANGE: 'mdc-slider--range',\n  THUMB: 'mdc-slider__thumb',\n  // Applied when thumb is in the focused state.\n  THUMB_FOCUSED: 'mdc-slider__thumb--focused',\n  THUMB_KNOB: 'mdc-slider__thumb-knob',\n  // Class added to the top thumb (for overlapping thumbs in range slider).\n  THUMB_TOP: 'mdc-slider__thumb--top',\n  THUMB_WITH_INDICATOR: 'mdc-slider__thumb--with-indicator',\n  TICK_MARKS: 'mdc-slider--tick-marks',\n  TICK_MARKS_CONTAINER: 'mdc-slider__tick-marks',\n  TICK_MARK_ACTIVE: 'mdc-slider__tick-mark--active',\n  TICK_MARK_INACTIVE: 'mdc-slider__tick-mark--inactive',\n  TRACK: 'mdc-slider__track',\n  // The active track fill element that will be scaled as the value changes.\n  TRACK_ACTIVE: 'mdc-slider__track--active_fill',\n  VALUE_INDICATOR_CONTAINER: 'mdc-slider__value-indicator-container',\n  VALUE_INDICATOR_TEXT: 'mdc-slider__value-indicator-text',\n};\n\n/** Slider numbers. */\nexport const numbers = {\n  // Default step size.\n  STEP_SIZE: 1,\n  // Default minimum difference between the start and end values.\n  MIN_RANGE: 0,\n  // Minimum absolute difference between clientX of move event / down event\n  // for which to update thumb, in the case of overlapping thumbs.\n  // This is needed to reduce chances of choosing the thumb based on\n  // pointer jitter.\n  THUMB_UPDATE_MIN_PX: 5,\n};\n\n/** Slider attributes. */\nexport const attributes = {\n  ARIA_VALUETEXT: 'aria-valuetext',\n  INPUT_DISABLED: 'disabled',\n  INPUT_MIN: 'min',\n  INPUT_MAX: 'max',\n  INPUT_VALUE: 'value',\n  INPUT_STEP: 'step',\n  DATA_MIN_RANGE: 'data-min-range',\n};\n\n/** Slider events. */\nexport const events = {\n  CHANGE: 'MDCSlider:change',\n  INPUT: 'MDCSlider:input',\n};\n\n/** Slider strings. */\nexport const strings = {\n  VAR_VALUE_INDICATOR_CARET_LEFT: '--slider-value-indicator-caret-left',\n  VAR_VALUE_INDICATOR_CARET_RIGHT: '--slider-value-indicator-caret-right',\n  VAR_VALUE_INDICATOR_CARET_TRANSFORM:\n      '--slider-value-indicator-caret-transform',\n  VAR_VALUE_INDICATOR_CONTAINER_LEFT: '--slider-value-indicator-container-left',\n  VAR_VALUE_INDICATOR_CONTAINER_RIGHT:\n      '--slider-value-indicator-container-right',\n  VAR_VALUE_INDICATOR_CONTAINER_TRANSFORM:\n      '--slider-value-indicator-container-transform',\n};\n"
  },
  {
    "path": "packages/mdc-slider/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {AnimationFrame} from '@material/animation/animationframe';\nimport {getCorrectPropertyName} from '@material/animation/util';\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCSliderAdapter} from './adapter';\nimport {attributes, cssClasses, numbers, strings} from './constants';\nimport {Thumb, TickMark} from './types';\n\nenum AnimationKeys {\n  SLIDER_UPDATE = 'slider_update'\n}\n\n// Accessing `window` without a `typeof` check will throw on Node environments.\nconst HAS_WINDOW = typeof window !== 'undefined';\n\n/**\n * Foundation class for slider. Responsibilities include:\n * - Updating slider values (internal state and DOM updates) based on client\n *   'x' position.\n * - Updating DOM after slider property updates (e.g. min, max).\n */\nexport class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {\n  static SUPPORTS_POINTER_EVENTS = HAS_WINDOW && Boolean(window.PointerEvent) &&\n      // #setPointerCapture is buggy on iOS, so we can't use pointer events\n      // until the following bug is fixed:\n      // https://bugs.webkit.org/show_bug.cgi?id=220196\n      !isIOS();\n\n  // Whether the initial styles (to position the thumb, before component\n  // initialization) have been removed.\n  private initialStylesRemoved = false;\n\n  private min!: number;  // Assigned in init()\n  private max!: number;  // Assigned in init()\n  // If `isRange`, this is the value of Thumb.START. Otherwise, defaults to min.\n  private valueStart!: number;  // Assigned in init()\n  // If `isRange`, this it the value of Thumb.END. Otherwise, it is the\n  // value of the single thumb.\n  private value!: number;  // Assigned in init()\n\n  private isDisabled = false;\n\n  private isDiscrete = false;\n  private step = numbers.STEP_SIZE;\n  private minRange = numbers.MIN_RANGE;\n  // Number of digits after the decimal point to round to, when computing\n  // values. This is based on the step size by default and is used to\n  // avoid floating point precision errors in JS.\n  private numDecimalPlaces!: number;  // Assigned in init()\n  private hasTickMarks = false;\n\n  // The following properties are only set for range sliders.\n  private isRange = false;\n  // Tracks the thumb being moved across a slider pointer interaction (down,\n  // move event).\n  private thumb: Thumb|null = null;\n  // `clientX` from the most recent down event. Used in subsequent move\n  // events to determine which thumb to move (in the case of\n  // overlapping thumbs).\n  private downEventClientX: number|null = null;\n  // `valueStart` before the most recent down event. Used in subsequent up\n  // events to determine whether to fire the `change` event.\n  private valueStartBeforeDownEvent!: number;  // Assigned in init()\n  // `value` before the most recent down event. Used in subsequent up\n  // events to determine whether to fire the `change` event.\n  private valueBeforeDownEvent!: number;  // Assigned in init()\n  // Width of the start thumb knob.\n  private startThumbKnobWidth = 0;\n  // Width of the end thumb knob.\n  private endThumbKnobWidth = 0;\n\n  private readonly animFrame: AnimationFrame;\n\n  // Assigned in #initialize.\n  private mousedownOrTouchstartListener!:\n      SpecificEventListener<'mousedown'|'touchstart'>;\n  // Assigned in #initialize.\n  private moveListener!:\n      SpecificEventListener<'pointermove'|'mousemove'|'touchmove'>;\n  private pointerdownListener!:\n      SpecificEventListener<'pointerdown'>;  // Assigned in #initialize.\n  private pointerupListener!:\n      SpecificEventListener<'pointerup'>;  // Assigned in #initialize.\n  private thumbMouseenterListener!:\n      SpecificEventListener<'mouseenter'>;  // Assigned in #initialize.\n  private thumbMouseleaveListener!:\n      SpecificEventListener<'mouseleave'>;  // Assigned in #initialize.\n  private inputStartChangeListener!:\n      SpecificEventListener<'change'>;  // Assigned in #initialize.\n  private inputEndChangeListener!:\n      SpecificEventListener<'change'>;  // Assigned in #initialize.\n  private inputStartFocusListener!:\n      SpecificEventListener<'focus'>;  // Assigned in #initialize.\n  private inputEndFocusListener!:\n      SpecificEventListener<'focus'>;  // Assigned in #initialize.\n  private inputStartBlurListener!:\n      SpecificEventListener<'blur'>;  // Assigned in #initialize.\n  private inputEndBlurListener!:\n      SpecificEventListener<'blur'>;  // Assigned in #initialize.\n  private resizeListener!:\n      SpecificEventListener<'resize'>;  // Assigned in #initialize.\n\n  constructor(adapter?: Partial<MDCSliderAdapter>) {\n    super({...MDCSliderFoundation.defaultAdapter, ...adapter});\n\n    this.animFrame = new AnimationFrame();\n  }\n\n  static override get defaultAdapter(): MDCSliderAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same\n    // order as the adapter interface.\n    return {\n      hasClass: () => false,\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      addThumbClass: () => undefined,\n      removeThumbClass: () => undefined,\n      getAttribute: () => null,\n      getInputValue: () => '',\n      setInputValue: () => undefined,\n      getInputAttribute: () => null,\n      setInputAttribute: () => null,\n      removeInputAttribute: () => null,\n      focusInput: () => undefined,\n      isInputFocused: () => false,\n      shouldHideFocusStylesForPointerEvents: () => false,\n      getThumbKnobWidth: () => 0,\n      getValueIndicatorContainerWidth: () => 0,\n      getThumbBoundingClientRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      getBoundingClientRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      isRTL: () => false,\n      setThumbStyleProperty: () => undefined,\n      removeThumbStyleProperty: () => undefined,\n      setTrackActiveStyleProperty: () => undefined,\n      removeTrackActiveStyleProperty: () => undefined,\n      setValueIndicatorText: () => undefined,\n      getValueToAriaValueTextFn: () => null,\n      updateTickMarks: () => undefined,\n      setPointerCapture: () => undefined,\n      emitChangeEvent: () => undefined,\n      emitInputEvent: () => undefined,\n      emitDragStartEvent: () => undefined,\n      emitDragEndEvent: () => undefined,\n      registerEventHandler: () => undefined,\n      deregisterEventHandler: () => undefined,\n      registerThumbEventHandler: () => undefined,\n      deregisterThumbEventHandler: () => undefined,\n      registerInputEventHandler: () => undefined,\n      deregisterInputEventHandler: () => undefined,\n      registerBodyEventHandler: () => undefined,\n      deregisterBodyEventHandler: () => undefined,\n      registerWindowEventHandler: () => undefined,\n      deregisterWindowEventHandler: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  override init() {\n    this.isDisabled = this.adapter.hasClass(cssClasses.DISABLED);\n    this.isDiscrete = this.adapter.hasClass(cssClasses.DISCRETE);\n    this.hasTickMarks = this.adapter.hasClass(cssClasses.TICK_MARKS);\n    this.isRange = this.adapter.hasClass(cssClasses.RANGE);\n\n    const min = this.convertAttributeValueToNumber(\n        this.adapter.getInputAttribute(\n            attributes.INPUT_MIN, this.isRange ? Thumb.START : Thumb.END),\n        attributes.INPUT_MIN);\n    const max = this.convertAttributeValueToNumber(\n        this.adapter.getInputAttribute(attributes.INPUT_MAX, Thumb.END),\n        attributes.INPUT_MAX);\n    const value = this.convertAttributeValueToNumber(\n        this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.END),\n        attributes.INPUT_VALUE);\n    const valueStart = this.isRange ?\n        this.convertAttributeValueToNumber(\n            this.adapter.getInputAttribute(attributes.INPUT_VALUE, Thumb.START),\n            attributes.INPUT_VALUE) :\n        min;\n    const stepAttr =\n        this.adapter.getInputAttribute(attributes.INPUT_STEP, Thumb.END);\n    const step = stepAttr ?\n        this.convertAttributeValueToNumber(stepAttr, attributes.INPUT_STEP) :\n        this.step;\n    const minRangeAttr = this.adapter.getAttribute(attributes.DATA_MIN_RANGE);\n    const minRange = minRangeAttr ?\n        this.convertAttributeValueToNumber(\n            minRangeAttr, attributes.DATA_MIN_RANGE) :\n        this.minRange;\n\n    this.validateProperties({min, max, value, valueStart, step, minRange});\n\n    this.min = min;\n    this.max = max;\n    this.value = value;\n    this.valueStart = valueStart;\n    this.step = step;\n    this.minRange = minRange;\n    this.numDecimalPlaces = getNumDecimalPlaces(this.step);\n\n    this.valueBeforeDownEvent = value;\n    this.valueStartBeforeDownEvent = valueStart;\n\n    this.mousedownOrTouchstartListener =\n        this.handleMousedownOrTouchstart.bind(this);\n    this.moveListener = this.handleMove.bind(this);\n    this.pointerdownListener = this.handlePointerdown.bind(this);\n    this.pointerupListener = this.handlePointerup.bind(this);\n    this.thumbMouseenterListener = this.handleThumbMouseenter.bind(this);\n    this.thumbMouseleaveListener = this.handleThumbMouseleave.bind(this);\n    this.inputStartChangeListener = () => {\n      this.handleInputChange(Thumb.START);\n    };\n    this.inputEndChangeListener = () => {\n      this.handleInputChange(Thumb.END);\n    };\n    this.inputStartFocusListener = () => {\n      this.handleInputFocus(Thumb.START);\n    };\n    this.inputEndFocusListener = () => {\n      this.handleInputFocus(Thumb.END);\n    };\n    this.inputStartBlurListener = () => {\n      this.handleInputBlur(Thumb.START);\n    };\n    this.inputEndBlurListener = () => {\n      this.handleInputBlur(Thumb.END);\n    };\n    this.resizeListener = this.handleResize.bind(this);\n    this.registerEventHandlers();\n  }\n\n  override destroy() {\n    this.deregisterEventHandlers();\n  }\n\n  setMin(value: number) {\n    this.min = value;\n    if (!this.isRange) {\n      this.valueStart = value;\n    }\n    this.updateUI();\n  }\n\n  setMax(value: number) {\n    this.max = value;\n    this.updateUI();\n  }\n\n  getMin() {\n    return this.min;\n  }\n\n  getMax() {\n    return this.max;\n  }\n\n  /**\n   * - For single point sliders, returns the thumb value.\n   * - For range (two-thumb) sliders, returns the end thumb's value.\n   */\n  getValue() {\n    return this.value;\n  }\n\n  /**\n   * - For single point sliders, sets the thumb value.\n   * - For range (two-thumb) sliders, sets the end thumb's value.\n   */\n  setValue(value: number) {\n    if (this.isRange && value < this.valueStart + this.minRange) {\n      throw new Error(\n          `end thumb value (${value}) must be >= start thumb ` +\n          `value (${this.valueStart}) + min range (${this.minRange})`);\n    }\n\n    this.updateValue(value, Thumb.END);\n  }\n\n  /**\n   * Only applicable for range sliders.\n   * @return The start thumb's value.\n   */\n  getValueStart() {\n    if (!this.isRange) {\n      throw new Error('`valueStart` is only applicable for range sliders.');\n    }\n\n    return this.valueStart;\n  }\n\n  /**\n   * Only applicable for range sliders. Sets the start thumb's value.\n   */\n  setValueStart(valueStart: number) {\n    if (!this.isRange) {\n      throw new Error('`valueStart` is only applicable for range sliders.');\n    }\n    if (this.isRange && valueStart > this.value - this.minRange) {\n      throw new Error(\n          `start thumb value (${valueStart}) must be <= end thumb ` +\n          `value (${this.value}) - min range (${this.minRange})`);\n    }\n\n    this.updateValue(valueStart, Thumb.START);\n  }\n\n  setStep(value: number) {\n    this.step = value;\n    this.numDecimalPlaces = getNumDecimalPlaces(value);\n\n    this.updateUI();\n  }\n\n  /**\n   * Only applicable for range sliders. Sets the minimum difference between the\n   * start and end values.\n   */\n  setMinRange(value: number) {\n    if (!this.isRange) {\n      throw new Error('`minRange` is only applicable for range sliders.');\n    }\n    if (value < 0) {\n      throw new Error(\n          '`minRange` must be non-negative. ' +\n          `Current value: ${value}`);\n    }\n    if (this.value - this.valueStart < value) {\n      throw new Error(\n          `start thumb value (${this.valueStart}) and end thumb value ` +\n          `(${this.value}) must differ by at least ${value}.`);\n    }\n    this.minRange = value;\n  }\n\n  setIsDiscrete(value: boolean) {\n    this.isDiscrete = value;\n    this.updateValueIndicatorUI();\n    this.updateTickMarksUI();\n  }\n\n  getStep() {\n    return this.step;\n  }\n\n  getMinRange() {\n    if (!this.isRange) {\n      throw new Error('`minRange` is only applicable for range sliders.');\n    }\n\n    return this.minRange;\n  }\n\n  setHasTickMarks(value: boolean) {\n    this.hasTickMarks = value;\n    this.updateTickMarksUI();\n  }\n\n  getDisabled() {\n    return this.isDisabled;\n  }\n\n  /**\n   * Sets disabled state, including updating styles and thumb tabindex.\n   */\n  setDisabled(disabled: boolean) {\n    this.isDisabled = disabled;\n\n    if (disabled) {\n      this.adapter.addClass(cssClasses.DISABLED);\n\n      if (this.isRange) {\n        this.adapter.setInputAttribute(\n            attributes.INPUT_DISABLED, '', Thumb.START);\n      }\n      this.adapter.setInputAttribute(attributes.INPUT_DISABLED, '', Thumb.END);\n    } else {\n      this.adapter.removeClass(cssClasses.DISABLED);\n\n      if (this.isRange) {\n        this.adapter.removeInputAttribute(\n            attributes.INPUT_DISABLED, Thumb.START);\n      }\n      this.adapter.removeInputAttribute(attributes.INPUT_DISABLED, Thumb.END);\n    }\n  }\n\n  /** @return Whether the slider is a range slider. */\n  getIsRange() {\n    return this.isRange;\n  }\n\n  /**\n   * - Updates UI based on internal state.\n   */\n  layout({skipUpdateUI}: {skipUpdateUI?: boolean} = {}) {\n    if (this.isRange) {\n      this.startThumbKnobWidth = this.adapter.getThumbKnobWidth(Thumb.START);\n      this.endThumbKnobWidth = this.adapter.getThumbKnobWidth(Thumb.END);\n    }\n\n    if (!skipUpdateUI) {\n      this.updateUI();\n    }\n  }\n\n  /** Handles resize events on the window. */\n  handleResize() {\n    this.layout();\n  }\n\n  /**\n   * Handles pointer down events on the slider root element.\n   */\n  handleDown(event: PointerEvent|MouseEvent|TouchEvent) {\n    if (this.isDisabled) return;\n\n    this.valueStartBeforeDownEvent = this.valueStart;\n    this.valueBeforeDownEvent = this.value;\n\n    const clientX = (event as MouseEvent).clientX != null ?\n        (event as MouseEvent).clientX :\n        (event as TouchEvent).targetTouches[0].clientX;\n    this.downEventClientX = clientX;\n    const value = this.mapClientXOnSliderScale(clientX);\n    this.thumb = this.getThumbFromDownEvent(clientX, value);\n    if (this.thumb === null) return;\n\n    this.handleDragStart(event, value, this.thumb);\n    this.updateValue(value, this.thumb, {emitInputEvent: true});\n  }\n\n  /**\n   * Handles pointer move events on the slider root element.\n   */\n  handleMove(event: PointerEvent|MouseEvent|TouchEvent) {\n    if (this.isDisabled) return;\n\n    // Prevent scrolling.\n    event.preventDefault();\n\n    const clientX = (event as MouseEvent).clientX != null ?\n        (event as MouseEvent).clientX :\n        (event as TouchEvent).targetTouches[0].clientX;\n    const dragAlreadyStarted = this.thumb != null;\n    this.thumb = this.getThumbFromMoveEvent(clientX);\n    if (this.thumb === null) return;\n\n    const value = this.mapClientXOnSliderScale(clientX);\n    if (!dragAlreadyStarted) {\n      this.handleDragStart(event, value, this.thumb);\n      this.adapter.emitDragStartEvent(value, this.thumb);\n    }\n    this.updateValue(value, this.thumb, {emitInputEvent: true});\n  }\n\n  /**\n   * Handles pointer up events on the slider root element.\n   */\n  handleUp() {\n    if (this.isDisabled || this.thumb === null) return;\n\n    // Remove the focused state and hide the value indicator(s) (if present)\n    // if focus state is meant to be hidden.\n    if (this.adapter.shouldHideFocusStylesForPointerEvents?.()) {\n      this.handleInputBlur(this.thumb);\n    }\n\n    const oldValue = this.thumb === Thumb.START ?\n        this.valueStartBeforeDownEvent :\n        this.valueBeforeDownEvent;\n    const newValue = this.thumb === Thumb.START ? this.valueStart : this.value;\n    if (oldValue !== newValue) {\n      this.adapter.emitChangeEvent(newValue, this.thumb);\n    }\n\n    this.adapter.emitDragEndEvent(newValue, this.thumb);\n    this.thumb = null;\n  }\n\n  /**\n   * For range, discrete slider, shows the value indicator on both thumbs.\n   */\n  handleThumbMouseenter() {\n    if (!this.isDiscrete || !this.isRange) return;\n\n    this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n    this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n  }\n\n  /**\n   * For range, discrete slider, hides the value indicator on both thumbs.\n   */\n  handleThumbMouseleave() {\n    if (!this.isDiscrete || !this.isRange) return;\n    if ((!this.adapter.shouldHideFocusStylesForPointerEvents?.() &&\n         (this.adapter.isInputFocused(Thumb.START) ||\n          this.adapter.isInputFocused(Thumb.END))) ||\n        this.thumb) {\n      // Leave value indicator shown if either input is focused or the thumb is\n      // being dragged.\n      return;\n    }\n\n    this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n    this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n  }\n\n  handleMousedownOrTouchstart(event: MouseEvent|TouchEvent) {\n    const moveEventType =\n        event.type === 'mousedown' ? 'mousemove' : 'touchmove';\n    // After a down event on the slider root, listen for move events on\n    // body (so the slider value is updated for events outside of the\n    // slider root).\n    this.adapter.registerBodyEventHandler(moveEventType, this.moveListener);\n\n    const upHandler = () => {\n      this.handleUp();\n\n      // Once the drag is finished (up event on body), remove the move\n      // handler.\n      this.adapter.deregisterBodyEventHandler(moveEventType, this.moveListener);\n\n      // Also stop listening for subsequent up events.\n      this.adapter.deregisterEventHandler('mouseup', upHandler);\n      this.adapter.deregisterEventHandler('touchend', upHandler);\n    };\n\n    this.adapter.registerBodyEventHandler('mouseup', upHandler);\n    this.adapter.registerBodyEventHandler('touchend', upHandler);\n\n    this.handleDown(event);\n  }\n\n  handlePointerdown(event: PointerEvent) {\n    const isPrimaryButton = event.button === 0;\n    if (!isPrimaryButton) return;\n\n    if (event.pointerId != null) {\n      this.adapter.setPointerCapture(event.pointerId);\n    }\n    this.adapter.registerEventHandler('pointermove', this.moveListener);\n\n    this.handleDown(event);\n  }\n\n  /**\n   * Handles input `change` event by setting internal slider value to match\n   * input's new value.\n   */\n  handleInputChange(thumb: Thumb) {\n    const value = Number(this.adapter.getInputValue(thumb));\n    if (thumb === Thumb.START) {\n      this.setValueStart(value);\n    } else {\n      this.setValue(value);\n    }\n\n    this.adapter.emitChangeEvent(\n        thumb === Thumb.START ? this.valueStart : this.value, thumb);\n    this.adapter.emitInputEvent(\n        thumb === Thumb.START ? this.valueStart : this.value, thumb);\n  }\n\n  /** Shows activated state and value indicator on thumb(s). */\n  handleInputFocus(thumb: Thumb) {\n    this.adapter.addThumbClass(cssClasses.THUMB_FOCUSED, thumb);\n    if (!this.isDiscrete) return;\n\n    this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, thumb);\n    if (this.isRange) {\n      const otherThumb = thumb === Thumb.START ? Thumb.END : Thumb.START;\n      this.adapter.addThumbClass(cssClasses.THUMB_WITH_INDICATOR, otherThumb);\n    }\n  }\n\n  /** Removes activated state and value indicator from thumb(s). */\n  handleInputBlur(thumb: Thumb) {\n    this.adapter.removeThumbClass(cssClasses.THUMB_FOCUSED, thumb);\n    if (!this.isDiscrete) return;\n\n    this.adapter.removeThumbClass(cssClasses.THUMB_WITH_INDICATOR, thumb);\n    if (this.isRange) {\n      const otherThumb = thumb === Thumb.START ? Thumb.END : Thumb.START;\n      this.adapter.removeThumbClass(\n          cssClasses.THUMB_WITH_INDICATOR, otherThumb);\n    }\n  }\n\n  /**\n   * Emits custom dragStart event, along with focusing the underlying input.\n   */\n  private handleDragStart(\n      event: PointerEvent|MouseEvent|TouchEvent, value: number, thumb: Thumb) {\n    this.adapter.emitDragStartEvent(value, thumb);\n\n    this.adapter.focusInput(thumb);\n\n    // Restore focused state and show the value indicator(s) (if present)\n    // in case they were previously hidden on dragEnd.\n    // This is needed if the input is already focused, in which case\n    // #focusInput above wouldn't actually trigger #handleInputFocus,\n    // which is why we need to invoke it manually here.\n    if (this.adapter.shouldHideFocusStylesForPointerEvents?.()) {\n      this.handleInputFocus(thumb);\n    }\n\n    // Prevent the input (that we just focused) from losing focus.\n    event.preventDefault();\n  }\n\n  /**\n   * @return The thumb to be moved based on initial down event.\n   */\n  private getThumbFromDownEvent(clientX: number, value: number): Thumb|null {\n    // For single point slider, thumb to be moved is always the END (only)\n    // thumb.\n    if (!this.isRange) return Thumb.END;\n\n    // Check if event press point is in the bounds of any thumb.\n    const thumbStartRect = this.adapter.getThumbBoundingClientRect(Thumb.START);\n    const thumbEndRect = this.adapter.getThumbBoundingClientRect(Thumb.END);\n    const inThumbStartBounds =\n        clientX >= thumbStartRect.left && clientX <= thumbStartRect.right;\n    const inThumbEndBounds =\n        clientX >= thumbEndRect.left && clientX <= thumbEndRect.right;\n\n    if (inThumbStartBounds && inThumbEndBounds) {\n      // Thumbs overlapping. Thumb to be moved cannot be determined yet.\n      return null;\n    }\n\n    // If press is in bounds for either thumb on down event, that's the thumb\n    // to be moved.\n    if (inThumbStartBounds) {\n      return Thumb.START;\n    }\n    if (inThumbEndBounds) {\n      return Thumb.END;\n    }\n\n    // For presses outside the range, return whichever thumb is closer.\n    if (value < this.valueStart) {\n      return Thumb.START;\n    }\n    if (value > this.value) {\n      return Thumb.END;\n    }\n\n    // For presses inside the range, return whichever thumb is closer.\n    return (value - this.valueStart <= this.value - value) ? Thumb.START :\n                                                             Thumb.END;\n  }\n\n  /**\n   * @return The thumb to be moved based on move event (based on drag\n   *     direction from original down event). Only applicable if thumbs\n   *     were overlapping in the down event.\n   */\n  private getThumbFromMoveEvent(clientX: number): Thumb|null {\n    // Thumb has already been chosen.\n    if (this.thumb !== null) return this.thumb;\n\n    if (this.downEventClientX === null) {\n      throw new Error('`downEventClientX` is null after move event.');\n    }\n\n    const moveDistanceUnderThreshold =\n        Math.abs(this.downEventClientX - clientX) < numbers.THUMB_UPDATE_MIN_PX;\n    if (moveDistanceUnderThreshold) return this.thumb;\n\n    const draggedThumbToLeft = clientX < this.downEventClientX;\n    if (draggedThumbToLeft) {\n      return this.adapter.isRTL() ? Thumb.END : Thumb.START;\n    } else {\n      return this.adapter.isRTL() ? Thumb.START : Thumb.END;\n    }\n  }\n\n  /**\n   * Updates UI based on internal state.\n   * @param thumb Thumb whose value is being updated. If undefined, UI is\n   *     updated for both thumbs based on current internal state.\n   */\n  private updateUI(thumb?: Thumb) {\n    if (thumb) {\n      this.updateThumbAndInputAttributes(thumb);\n    } else {\n      this.updateThumbAndInputAttributes(Thumb.START);\n      this.updateThumbAndInputAttributes(Thumb.END);\n    }\n    this.updateThumbAndTrackUI(thumb);\n    this.updateValueIndicatorUI(thumb);\n    this.updateTickMarksUI();\n  }\n\n  /**\n   * Updates thumb and input attributes based on current value.\n   * @param thumb Thumb whose aria attributes to update.\n   */\n  private updateThumbAndInputAttributes(thumb?: Thumb) {\n    if (!thumb) return;\n\n    const value =\n        this.isRange && thumb === Thumb.START ? this.valueStart : this.value;\n    const valueStr = String(value);\n    this.adapter.setInputAttribute(attributes.INPUT_VALUE, valueStr, thumb);\n    if (this.isRange && thumb === Thumb.START) {\n      this.adapter.setInputAttribute(\n          attributes.INPUT_MIN, String(value + this.minRange), Thumb.END);\n    } else if (this.isRange && thumb === Thumb.END) {\n      this.adapter.setInputAttribute(\n          attributes.INPUT_MAX, String(value - this.minRange), Thumb.START);\n    }\n\n    // Sync attribute with property.\n    if (this.adapter.getInputValue(thumb) !== valueStr) {\n      this.adapter.setInputValue(valueStr, thumb);\n    }\n\n    const valueToAriaValueTextFn = this.adapter.getValueToAriaValueTextFn();\n    if (valueToAriaValueTextFn) {\n      this.adapter.setInputAttribute(\n          attributes.ARIA_VALUETEXT, valueToAriaValueTextFn(value, thumb),\n          thumb);\n    }\n  }\n\n  /**\n   * Updates value indicator UI based on current value.\n   * @param thumb Thumb whose value indicator to update. If undefined, all\n   *     thumbs' value indicators are updated.\n   */\n  private updateValueIndicatorUI(thumb?: Thumb) {\n    if (!this.isDiscrete) return;\n\n    const value =\n        this.isRange && thumb === Thumb.START ? this.valueStart : this.value;\n    this.adapter.setValueIndicatorText(\n        value, thumb === Thumb.START ? Thumb.START : Thumb.END);\n\n    if (!thumb && this.isRange) {\n      this.adapter.setValueIndicatorText(this.valueStart, Thumb.START);\n    }\n  }\n\n  /**\n   * Updates tick marks UI within slider, based on current min, max, and step.\n   */\n  private updateTickMarksUI() {\n    if (!this.isDiscrete || !this.hasTickMarks) return;\n\n    const numTickMarksInactiveStart = (this.valueStart - this.min) / this.step;\n    const numTickMarksActive = (this.value - this.valueStart) / this.step + 1;\n    const numTickMarksInactiveEnd = (this.max - this.value) / this.step;\n    const tickMarksInactiveStart =\n        Array.from<TickMark>({length: numTickMarksInactiveStart})\n            .fill(TickMark.INACTIVE);\n    const tickMarksActive = Array.from<TickMark>({length: numTickMarksActive})\n                                .fill(TickMark.ACTIVE);\n    const tickMarksInactiveEnd =\n        Array.from<TickMark>({length: numTickMarksInactiveEnd})\n            .fill(TickMark.INACTIVE);\n\n    this.adapter.updateTickMarks(tickMarksInactiveStart.concat(tickMarksActive)\n                                     .concat(tickMarksInactiveEnd));\n  }\n\n  /** Maps clientX to a value on the slider scale. */\n  private mapClientXOnSliderScale(clientX: number): number {\n    const rect = this.adapter.getBoundingClientRect();\n    const xPos = clientX - rect.left;\n    let pctComplete = xPos / rect.width;\n    if (this.adapter.isRTL()) {\n      pctComplete = 1 - pctComplete;\n    }\n\n    // Fit the percentage complete between the range [min,max]\n    // by remapping from [0, 1] to [min, min+(max-min)].\n    const value = this.min + pctComplete * (this.max - this.min);\n    if (value === this.max || value === this.min) {\n      return value;\n    }\n    return Number(this.quantize(value).toFixed(this.numDecimalPlaces));\n  }\n\n  /** Calculates the quantized value based on step value. */\n  private quantize(value: number): number {\n    const numSteps = Math.round((value - this.min) / this.step);\n    return this.min + numSteps * this.step;\n  }\n\n  /**\n   * Updates slider value (internal state and UI) based on the given value.\n   */\n  private updateValue(value: number, thumb: Thumb, {\n    emitInputEvent,\n  }: {emitInputEvent?: boolean} = {}) {\n    value = this.clampValue(value, thumb);\n\n    if (this.isRange && thumb === Thumb.START) {\n      // Exit early if current value is the same as the new value.\n      if (this.valueStart === value) return;\n\n      this.valueStart = value;\n    } else {\n      // Exit early if current value is the same as the new value.\n      if (this.value === value) return;\n\n      this.value = value;\n    }\n\n    this.updateUI(thumb);\n\n    if (emitInputEvent) {\n      this.adapter.emitInputEvent(\n          thumb === Thumb.START ? this.valueStart : this.value, thumb);\n    }\n  }\n\n  /**\n   * Clamps the given value for the given thumb based on slider properties:\n   * - Restricts value within [min, max].\n   * - If range slider, clamp start value <= end value - min range, and\n   *   end value >= start value + min range.\n   */\n  private clampValue(value: number, thumb: Thumb): number {\n    // Clamp value to [min, max] range.\n    value = Math.min(Math.max(value, this.min), this.max);\n\n    const thumbStartMovedPastThumbEnd = this.isRange && thumb === Thumb.START &&\n        value > this.value - this.minRange;\n    if (thumbStartMovedPastThumbEnd) {\n      return this.value - this.minRange;\n    }\n    const thumbEndMovedPastThumbStart = this.isRange && thumb === Thumb.END &&\n        value < this.valueStart + this.minRange;\n    if (thumbEndMovedPastThumbStart) {\n      return this.valueStart + this.minRange;\n    }\n\n    return value;\n  }\n\n  /**\n   * Updates the active track and thumb style properties to reflect current\n   * value.\n   */\n  private updateThumbAndTrackUI(thumb?: Thumb) {\n    const {max, min} = this;\n    const rect = this.adapter.getBoundingClientRect();\n    const pctComplete = (this.value - this.valueStart) / (max - min);\n    const rangePx = pctComplete * rect.width;\n    const isRtl = this.adapter.isRTL();\n\n    const transformProp =\n        HAS_WINDOW ? getCorrectPropertyName(window, 'transform') : 'transform';\n    if (this.isRange) {\n      const thumbLeftPos = this.adapter.isRTL() ?\n          (max - this.value) / (max - min) * rect.width :\n          (this.valueStart - min) / (max - min) * rect.width;\n      const thumbRightPos = thumbLeftPos + rangePx;\n\n      this.animFrame.request(AnimationKeys.SLIDER_UPDATE, () => {\n        // Set active track styles, accounting for animation direction by\n        // setting `transform-origin`.\n        const trackAnimatesFromRight = (!isRtl && thumb === Thumb.START) ||\n            (isRtl && thumb !== Thumb.START);\n        if (trackAnimatesFromRight) {\n          this.adapter.setTrackActiveStyleProperty('transform-origin', 'right');\n          this.adapter.setTrackActiveStyleProperty('left', 'auto');\n          this.adapter.setTrackActiveStyleProperty(\n              'right', `${rect.width - thumbRightPos}px`);\n        } else {\n          this.adapter.setTrackActiveStyleProperty('transform-origin', 'left');\n          this.adapter.setTrackActiveStyleProperty('right', 'auto');\n          this.adapter.setTrackActiveStyleProperty('left', `${thumbLeftPos}px`);\n        }\n        this.adapter.setTrackActiveStyleProperty(\n            transformProp, `scaleX(${pctComplete})`);\n\n        // Set thumb styles.\n        const thumbStartPos = isRtl ? thumbRightPos : thumbLeftPos;\n        const thumbEndPos = this.adapter.isRTL() ? thumbLeftPos : thumbRightPos;\n        if (thumb === Thumb.START || !thumb || !this.initialStylesRemoved) {\n          this.adapter.setThumbStyleProperty(\n              transformProp, `translateX(${thumbStartPos}px)`, Thumb.START);\n          this.alignValueIndicator(Thumb.START, thumbStartPos);\n        }\n        if (thumb === Thumb.END || !thumb || !this.initialStylesRemoved) {\n          this.adapter.setThumbStyleProperty(\n              transformProp, `translateX(${thumbEndPos}px)`, Thumb.END);\n          this.alignValueIndicator(Thumb.END, thumbEndPos);\n        }\n\n        this.removeInitialStyles(isRtl);\n        this.updateOverlappingThumbsUI(thumbStartPos, thumbEndPos, thumb);\n      });\n    } else {\n      this.animFrame.request(AnimationKeys.SLIDER_UPDATE, () => {\n        const thumbStartPos = isRtl ? rect.width - rangePx : rangePx;\n        this.adapter.setThumbStyleProperty(\n            transformProp, `translateX(${thumbStartPos}px)`, Thumb.END);\n        this.alignValueIndicator(Thumb.END, thumbStartPos);\n        this.adapter.setTrackActiveStyleProperty(\n            transformProp, `scaleX(${pctComplete})`);\n\n        this.removeInitialStyles(isRtl);\n      });\n    }\n  }\n\n  /**\n   * Shifts the value indicator to either side if it would otherwise stick\n   * beyond the slider's length while keeping the caret above the knob.\n   */\n  private alignValueIndicator(thumb: Thumb, thumbPos: number) {\n    if (!this.isDiscrete) return;\n    const thumbHalfWidth =\n        this.adapter.getThumbBoundingClientRect(thumb).width / 2;\n    const containerWidth = this.adapter.getValueIndicatorContainerWidth(thumb);\n    const sliderWidth = this.adapter.getBoundingClientRect().width;\n    if (containerWidth / 2 > thumbPos + thumbHalfWidth) {\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_LEFT, `${thumbHalfWidth}px`, thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_RIGHT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_TRANSFORM, 'translateX(-50%)',\n          thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_LEFT, '0', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_RIGHT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_TRANSFORM, 'none', thumb);\n    } else if (containerWidth / 2 > sliderWidth - thumbPos + thumbHalfWidth) {\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_LEFT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_RIGHT, `${thumbHalfWidth}px`,\n          thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_TRANSFORM, 'translateX(50%)',\n          thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_LEFT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_RIGHT, '0', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_TRANSFORM, 'none', thumb);\n    } else {\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_LEFT, '50%', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_RIGHT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CARET_TRANSFORM, 'translateX(-50%)',\n          thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_LEFT, '50%', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_RIGHT, 'auto', thumb);\n      this.adapter.setThumbStyleProperty(\n          strings.VAR_VALUE_INDICATOR_CONTAINER_TRANSFORM, 'translateX(-50%)',\n          thumb);\n    }\n  }\n\n  /**\n   * Removes initial inline styles if not already removed. `left:<...>%`\n   * inline styles can be added to position the thumb correctly before JS\n   * initialization. However, they need to be removed before the JS starts\n   * positioning the thumb. This is because the JS uses\n   * `transform:translateX(<...>)px` (for performance reasons) to position\n   * the thumb (which is not possible for initial styles since we need the\n   * bounding rect measurements).\n   */\n  private removeInitialStyles(isRtl: boolean) {\n    if (this.initialStylesRemoved) return;\n\n    // Remove thumb position properties that were added for initial render.\n    const position = isRtl ? 'right' : 'left';\n    this.adapter.removeThumbStyleProperty(position, Thumb.END);\n    if (this.isRange) {\n      this.adapter.removeThumbStyleProperty(position, Thumb.START);\n    }\n\n    this.initialStylesRemoved = true;\n\n    this.resetTrackAndThumbAnimation();\n  }\n\n  /**\n   * Resets track/thumb animation to prevent animation when adding\n   * `transform` styles to thumb initially.\n   */\n  private resetTrackAndThumbAnimation() {\n    if (!this.isDiscrete) return;\n\n    // Set transition properties to default (no animation), so that the\n    // newly added `transform` styles do not animate thumb/track from\n    // their default positions.\n    const transitionProp = HAS_WINDOW ?\n        getCorrectPropertyName(window, 'transition') :\n        'transition';\n    const transitionDefault = 'none 0s ease 0s';\n    this.adapter.setThumbStyleProperty(\n        transitionProp, transitionDefault, Thumb.END);\n    if (this.isRange) {\n      this.adapter.setThumbStyleProperty(\n          transitionProp, transitionDefault, Thumb.START);\n    }\n    this.adapter.setTrackActiveStyleProperty(transitionProp, transitionDefault);\n\n    // In the next frame, remove the transition inline styles we just\n    // added, such that any animations added in the CSS can now take effect.\n    requestAnimationFrame(() => {\n      this.adapter.removeThumbStyleProperty(transitionProp, Thumb.END);\n      this.adapter.removeTrackActiveStyleProperty(transitionProp);\n      if (this.isRange) {\n        this.adapter.removeThumbStyleProperty(transitionProp, Thumb.START);\n      }\n    });\n  }\n\n  /**\n   * Adds THUMB_TOP class to active thumb if thumb knobs overlap; otherwise\n   * removes THUMB_TOP class from both thumbs.\n   * @param thumb Thumb that is active (being moved).\n   */\n  private updateOverlappingThumbsUI(\n      thumbStartPos: number, thumbEndPos: number, thumb?: Thumb) {\n    let thumbsOverlap = false;\n    if (this.adapter.isRTL()) {\n      const startThumbLeftEdge = thumbStartPos - this.startThumbKnobWidth / 2;\n      const endThumbRightEdge = thumbEndPos + this.endThumbKnobWidth / 2;\n      thumbsOverlap = endThumbRightEdge >= startThumbLeftEdge;\n    } else {\n      const startThumbRightEdge = thumbStartPos + this.startThumbKnobWidth / 2;\n      const endThumbLeftEdge = thumbEndPos - this.endThumbKnobWidth / 2;\n      thumbsOverlap = startThumbRightEdge >= endThumbLeftEdge;\n    }\n\n    if (thumbsOverlap) {\n      this.adapter.addThumbClass(\n          cssClasses.THUMB_TOP,\n          // If no thumb was dragged (in the case of initial layout), end\n          // thumb is on top by default.\n          thumb || Thumb.END);\n      this.adapter.removeThumbClass(\n          cssClasses.THUMB_TOP,\n          thumb === Thumb.START ? Thumb.END : Thumb.START);\n    } else {\n      this.adapter.removeThumbClass(cssClasses.THUMB_TOP, Thumb.START);\n      this.adapter.removeThumbClass(cssClasses.THUMB_TOP, Thumb.END);\n    }\n  }\n\n  /**\n   * Converts attribute value to a number, e.g. '100' => 100. Throws errors\n   * for invalid values.\n   * @param attributeValue Attribute value, e.g. 100.\n   * @param attributeName Attribute name, e.g. `aria-valuemax`.\n   */\n  private convertAttributeValueToNumber(\n      attributeValue: string|null, attributeName: string) {\n    if (attributeValue === null) {\n      throw new Error(\n          'MDCSliderFoundation: `' + attributeName + '` must be non-null.');\n    }\n\n    const value = Number(attributeValue);\n    if (isNaN(value)) {\n      throw new Error(\n          'MDCSliderFoundation: `' + attributeName + '` value is `' +\n          attributeValue + '`, but must be a number.');\n    }\n\n    return value;\n  }\n\n  /** Checks that the given properties are valid slider values. */\n  private validateProperties({min, max, value, valueStart, step, minRange}: {\n    min: number,\n    max: number,\n    value: number,\n    valueStart: number,\n    step: number,\n    minRange: number\n  }) {\n    if (min >= max) {\n      throw new Error(\n          `MDCSliderFoundation: min must be strictly less than max. ` +\n          `Current: [min: ${min}, max: ${max}]`);\n    }\n\n    if (step <= 0) {\n      throw new Error(\n          `MDCSliderFoundation: step must be a positive number. ` +\n          `Current step: ${step}`);\n    }\n\n    if (this.isRange) {\n      if (value < min || value > max || valueStart < min || valueStart > max) {\n        throw new Error(\n            `MDCSliderFoundation: values must be in [min, max] range. ` +\n            `Current values: [start value: ${valueStart}, end value: ` +\n            `${value}, min: ${min}, max: ${max}]`);\n      }\n\n      if (valueStart > value) {\n        throw new Error(\n            `MDCSliderFoundation: start value must be <= end value. ` +\n            `Current values: [start value: ${valueStart}, end value: ${\n                value}]`);\n      }\n\n      if (minRange < 0) {\n        throw new Error(\n            `MDCSliderFoundation: minimum range must be non-negative. ` +\n            `Current min range: ${minRange}`);\n      }\n\n      if (value - valueStart < minRange) {\n        throw new Error(\n            `MDCSliderFoundation: start value and end value must differ by at least ` +\n            `${minRange}. Current values: [start value: ${valueStart}, ` +\n            `end value: ${value}]`);\n      }\n\n      const numStepsValueStartFromMin = (valueStart - min) / step;\n      const numStepsValueFromMin = (value - min) / step;\n      if (!Number.isInteger(parseFloat(numStepsValueStartFromMin.toFixed(6))) ||\n          !Number.isInteger(parseFloat(numStepsValueFromMin.toFixed(6)))) {\n        throw new Error(\n            `MDCSliderFoundation: Slider values must be valid based on the ` +\n            `step value (${step}). Current values: [start value: ` +\n            `${valueStart}, end value: ${value}, min: ${min}]`);\n      }\n    } else {  // Single point slider.\n      if (value < min || value > max) {\n        throw new Error(\n            `MDCSliderFoundation: value must be in [min, max] range. ` +\n            `Current values: [value: ${value}, min: ${min}, max: ${max}]`);\n      }\n\n      const numStepsValueFromMin = (value - min) / step;\n      if (!Number.isInteger(parseFloat(numStepsValueFromMin.toFixed(6)))) {\n        throw new Error(\n            `MDCSliderFoundation: Slider value must be valid based on the ` +\n            `step value (${step}). Current value: ${value}`);\n      }\n    }\n  }\n\n  private registerEventHandlers() {\n    this.adapter.registerWindowEventHandler('resize', this.resizeListener);\n\n    if (MDCSliderFoundation.SUPPORTS_POINTER_EVENTS) {\n      // If supported, use pointer events API with #setPointerCapture.\n      this.adapter.registerEventHandler(\n          'pointerdown', this.pointerdownListener);\n      this.adapter.registerEventHandler('pointerup', this.pointerupListener);\n    } else {\n      // Otherwise, fall back to mousedown/touchstart events.\n      this.adapter.registerEventHandler(\n          'mousedown', this.mousedownOrTouchstartListener);\n      this.adapter.registerEventHandler(\n          'touchstart', this.mousedownOrTouchstartListener);\n    }\n\n    if (this.isRange) {\n      this.adapter.registerThumbEventHandler(\n          Thumb.START, 'mouseenter', this.thumbMouseenterListener);\n      this.adapter.registerThumbEventHandler(\n          Thumb.START, 'mouseleave', this.thumbMouseleaveListener);\n\n      this.adapter.registerInputEventHandler(\n          Thumb.START, 'change', this.inputStartChangeListener);\n      this.adapter.registerInputEventHandler(\n          Thumb.START, 'focus', this.inputStartFocusListener);\n      this.adapter.registerInputEventHandler(\n          Thumb.START, 'blur', this.inputStartBlurListener);\n    }\n\n    this.adapter.registerThumbEventHandler(\n        Thumb.END, 'mouseenter', this.thumbMouseenterListener);\n    this.adapter.registerThumbEventHandler(\n        Thumb.END, 'mouseleave', this.thumbMouseleaveListener);\n\n    this.adapter.registerInputEventHandler(\n        Thumb.END, 'change', this.inputEndChangeListener);\n    this.adapter.registerInputEventHandler(\n        Thumb.END, 'focus', this.inputEndFocusListener);\n    this.adapter.registerInputEventHandler(\n        Thumb.END, 'blur', this.inputEndBlurListener);\n  }\n\n  private deregisterEventHandlers() {\n    this.adapter.deregisterWindowEventHandler('resize', this.resizeListener);\n\n    if (MDCSliderFoundation.SUPPORTS_POINTER_EVENTS) {\n      this.adapter.deregisterEventHandler(\n          'pointerdown', this.pointerdownListener);\n      this.adapter.deregisterEventHandler('pointerup', this.pointerupListener);\n    } else {\n      this.adapter.deregisterEventHandler(\n          'mousedown', this.mousedownOrTouchstartListener);\n      this.adapter.deregisterEventHandler(\n          'touchstart', this.mousedownOrTouchstartListener);\n    }\n\n    if (this.isRange) {\n      this.adapter.deregisterThumbEventHandler(\n          Thumb.START, 'mouseenter', this.thumbMouseenterListener);\n      this.adapter.deregisterThumbEventHandler(\n          Thumb.START, 'mouseleave', this.thumbMouseleaveListener);\n\n      this.adapter.deregisterInputEventHandler(\n          Thumb.START, 'change', this.inputStartChangeListener);\n      this.adapter.deregisterInputEventHandler(\n          Thumb.START, 'focus', this.inputStartFocusListener);\n      this.adapter.deregisterInputEventHandler(\n          Thumb.START, 'blur', this.inputStartBlurListener);\n    }\n\n    this.adapter.deregisterThumbEventHandler(\n        Thumb.END, 'mouseenter', this.thumbMouseenterListener);\n    this.adapter.deregisterThumbEventHandler(\n        Thumb.END, 'mouseleave', this.thumbMouseleaveListener);\n\n    this.adapter.deregisterInputEventHandler(\n        Thumb.END, 'change', this.inputEndChangeListener);\n    this.adapter.deregisterInputEventHandler(\n        Thumb.END, 'focus', this.inputEndFocusListener);\n    this.adapter.deregisterInputEventHandler(\n        Thumb.END, 'blur', this.inputEndBlurListener);\n  }\n\n  private handlePointerup() {\n    this.handleUp();\n\n    this.adapter.deregisterEventHandler('pointermove', this.moveListener);\n  }\n}\n\nfunction isIOS() {\n  // Source:\n  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios\n  return [\n    'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone',\n    'iPod'\n  ].includes(navigator.platform)\n      // iPad on iOS 13 detection\n      || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);\n}\n\n/**\n * Given a number, returns the number of digits that appear after the\n * decimal point.\n * See\n * https://stackoverflow.com/questions/9539513/is-there-a-reliable-way-in-javascript-to-obtain-the-number-of-decimal-places-of\n */\nfunction getNumDecimalPlaces(n: number): number {\n  // Pull out the fraction and the exponent.\n  const match = /(?:\\.(\\d+))?(?:[eE]([+\\-]?\\d+))?$/.exec(String(n));\n  // NaN or Infinity or integer.\n  // We arbitrarily decide that Infinity is integral.\n  if (!match) return 0;\n\n  const fraction = match[1] || '';  // E.g. 1.234e-2 => 234\n  const exponent = match[2] || 0;   // E.g. 1.234e-2 => -2\n  // Count the number of digits in the fraction and subtract the\n  // exponent to simulate moving the decimal point left by exponent places.\n  // 1.234e+2 has 1 fraction digit and '234'.length -  2 == 1\n  // 1.234e-2 has 5 fraction digit and '234'.length - -2 == 5\n  return Math.max(\n      0,  // lower limit\n      (fraction === '0' ? 0 : fraction.length) - Number(exponent));\n}\n"
  },
  {
    "path": "packages/mdc-slider/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-slider/package.json",
    "content": "{\n  \"name\": \"@material/slider\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web slider component\",\n  \"main\": \"dist/mdc.slider.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-slider\"\n  },\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"slider\"\n  ],\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './slider';\n\n@include slider.core-styles;\n"
  },
  {
    "path": "packages/mdc-slider/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {createMouseEvent, emitEvent} from '../../../testing/dom/events';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {attributes, cssClasses, events, MDCSlider, MDCSliderFoundation, Thumb} from '../index';\n\ndescribe('MDCSlider', () => {\n  setUpMdcTestEnvironment();\n\n  let root: HTMLElement;\n  let component: MDCSlider;\n\n  beforeAll(() => {\n    // Mock #setPointerCapture as it throws errors on FF without a\n    // real pointerId.\n    spyOn(Element.prototype, 'setPointerCapture');\n  });\n\n  afterEach(() => {\n    if (root && document.body.contains(root)) {\n      document.body.removeChild(root);\n    }\n  });\n\n  createTestSuiteForSliderEvents('pointer');\n  createTestSuiteForSliderEvents('mouse');\n  createTestSuiteForSliderEvents('touch');\n\n  /**\n   * Creates test suite for any tests that should be tested across\n   * pointer, mouse, and touch events.\n   */\n  function createTestSuiteForSliderEvents(eventType: 'pointer'|'mouse'|\n                                          'touch') {\n    // Don't run tests with pointer events if the test browser does not\n    // support pointer events.\n    if (eventType === 'pointer' && !window.PointerEvent) return;\n    // Don't run tests with touch events if the test browser does not\n    // support touch events.\n    if (eventType === 'touch' && !('ontouchstart' in window)) {\n      return;\n    }\n\n    describe(`slider events for ${eventType} event types`, () => {\n      let thumb: HTMLElement;\n      let trackActive: HTMLElement;\n\n      beforeEach(() => {\n        if (eventType !== 'pointer') {\n          MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = false;\n        }\n\n        ({root, component, endThumb: thumb, trackActive} = setUpTest());\n      });\n\n      afterEach(() => {\n        // Reset to actual value.\n        MDCSliderFoundation.SUPPORTS_POINTER_EVENTS =\n            Boolean(window.PointerEvent);\n\n        document.body.removeChild(root);\n      });\n\n      it('down event sets the slider value based on x coordinate', () => {\n        const event = createEventFrom(eventType, 'down', {clientX: 50});\n        root.dispatchEvent(event);\n        jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n        expect(thumb.style.transform).toBe('translateX(50px)');\n        expect(trackActive.style.transform).toBe('scaleX(0.5)');\n      });\n\n      it('move event after down event sets the slider value based on x coordinate',\n         () => {\n           const downEvent = createEventFrom(eventType, 'down', {clientX: 0});\n           root.dispatchEvent(downEvent);\n           jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n           expect(thumb.style.transform).toBe('translateX(0px)');\n           expect(trackActive.style.transform).toBe('scaleX(0)');\n\n           const moveEvent = createEventFrom(eventType, 'move', {clientX: 50});\n           const el = eventType === 'pointer' ? root : document.body;\n           el.dispatchEvent(moveEvent);\n           jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n           expect(thumb.style.transform).toBe('translateX(50px)');\n           expect(trackActive.style.transform).toBe('scaleX(0.5)');\n         });\n\n      it('move event after up event doesn\\'t update slider value', () => {\n        const downEvent = createEventFrom(eventType, 'down', {clientX: 0});\n        root.dispatchEvent(downEvent);\n        jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n        expect(thumb.style.transform).toBe('translateX(0px)');\n        expect(trackActive.style.transform).toBe('scaleX(0)');\n\n        const upEvent = createEventFrom(eventType, 'up', {clientX: 0});\n        const upEl = eventType === 'pointer' ? root : document.body;\n        upEl.dispatchEvent(upEvent);\n\n        const moveEvent = createEventFrom(eventType, 'move', {clientX: 0});\n        const moveEl = eventType === 'pointer' ? root : document.body;\n        moveEl.dispatchEvent(moveEvent);\n        jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n        expect(thumb.style.transform).toBe('translateX(0px)');\n        expect(trackActive.style.transform).toBe('scaleX(0)');\n      });\n\n      it('Event listeners are destroyed when component is destroyed.', () => {\n        spyOn(root, 'removeEventListener').and.callThrough();\n        spyOn(thumb, 'removeEventListener').and.callThrough();\n\n        component.destroy();\n\n        if (eventType === 'pointer') {\n          expect(root.removeEventListener)\n              .toHaveBeenCalledWith(\n                  'pointerdown', jasmine.any(Function), undefined);\n          expect(root.removeEventListener)\n              .toHaveBeenCalledWith(\n                  'pointerup', jasmine.any(Function), undefined);\n        } else {\n          expect(root.removeEventListener)\n              .toHaveBeenCalledWith(\n                  'mousedown', jasmine.any(Function), undefined);\n          expect(root.removeEventListener)\n              .toHaveBeenCalledWith(\n                  'touchstart', jasmine.any(Function), undefined);\n        }\n\n        const thumbEvents = ['mouseenter', 'mouseleave'];\n        for (const event of thumbEvents) {\n          expect(thumb.removeEventListener)\n              .toHaveBeenCalledWith(event, jasmine.any(Function));\n        }\n      });\n    });\n  }\n\n  describe('range slider', () => {\n    let startThumb: HTMLElement;\n    let endThumb: HTMLElement;\n    const initialValueStart = 30;\n    const initialValueEnd = 70;\n\n    beforeEach(() => {\n      ({root, component, startThumb, endThumb} =\n           setUpTest({\n             isRange: true,\n             valueStart: initialValueStart,\n             value: initialValueEnd\n           }) as {\n             root: HTMLElement,\n             component: MDCSlider,\n             startThumb: HTMLElement,\n             endThumb: HTMLElement\n           });\n\n      spyOn(startThumb, 'getBoundingClientRect').and.returnValue({\n        left: initialValueStart - 3,\n        right: initialValueStart + 3,\n      } as DOMRect);\n      spyOn(endThumb, 'getBoundingClientRect').and.returnValue({\n        left: initialValueEnd - 3,\n        right: initialValueEnd + 3,\n      } as DOMRect);\n    });\n\n    it('press + move on start thumb updates start thumb value', () => {\n      const downEvent =\n          createEventFrom('pointer', 'down', {clientX: initialValueStart});\n      root.dispatchEvent(downEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n      expect(startThumb.style.transform)\n          .toBe(`translateX(${initialValueStart}px)`);\n\n      const moveEvent = createEventFrom('pointer', 'move', {clientX: 50});\n      root.dispatchEvent(moveEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n      expect(startThumb.style.transform).toBe('translateX(50px)');\n    });\n\n    it('press + move on end thumb updates end thumb value', () => {\n      const downEvent =\n          createEventFrom('pointer', 'down', {clientX: initialValueEnd});\n      root.dispatchEvent(downEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n      expect(endThumb.style.transform).toBe(`translateX(${initialValueEnd}px)`);\n\n      const moveEvent = createEventFrom('pointer', 'move', {clientX: 40});\n      root.dispatchEvent(moveEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n      expect(endThumb.style.transform).toBe('translateX(40px)');\n    });\n\n    it('down event between min and start thumb updates start thumb value',\n       () => {\n         const downEvent = createEventFrom(\n             'pointer', 'down', {clientX: initialValueStart - 10});\n         root.dispatchEvent(downEvent);\n         jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n         expect(startThumb.style.transform)\n             .toBe(`translateX(${initialValueStart - 10}px)`);\n         expect(endThumb.style.transform)\n             .toBe(`translateX(${initialValueEnd}px)`);\n       });\n\n    it('down event between end thumb and max updates end thumb value', () => {\n      const downEvent =\n          createEventFrom('pointer', 'down', {clientX: initialValueEnd + 10});\n      root.dispatchEvent(downEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n      expect(endThumb.style.transform)\n          .toBe(`translateX(${initialValueEnd + 10}px)`);\n      expect(startThumb.style.transform)\n          .toBe(`translateX(${initialValueStart}px)`);\n    });\n  });\n\n  describe('value indicator', () => {\n    it('single point slider: updates value indicator after value update',\n       () => {\n         let thumb;\n         ({root, endThumb: thumb} =\n              setUpTest({isDiscrete: true, hasTickMarks: true, step: 10}));\n         expect(thumb.textContent!.trim()).not.toBe('70');\n\n         const downEvent = createEventFrom('pointer', 'down', {clientX: 65.3});\n         root.dispatchEvent(downEvent);\n         expect(thumb.textContent!.trim()).toBe('70');\n       });\n\n    it('range slider: updates value indicator after value update', () => {\n      let startThumb, endThumb;\n      const valueStart = 10;\n      const value = 40;\n      ({root, startThumb, endThumb} = setUpTest(\n           {isDiscrete: true, isRange: true, valueStart, value, step: 10}));\n\n      spyOn(startThumb as HTMLElement, 'getBoundingClientRect')\n          .and.returnValue({\n            left: valueStart - 3,\n            right: valueStart + 3,\n          } as DOMRect);\n      spyOn(endThumb, 'getBoundingClientRect').and.returnValue({\n        left: value - 3,\n        right: value + 3,\n      } as DOMRect);\n\n      expect(startThumb!.textContent!.trim()).not.toBe('0');\n      expect(endThumb.textContent!.trim()).not.toBe('90');\n\n      // Update start thumb value.\n      const downEventStart = createEventFrom('pointer', 'down', {clientX: 3});\n      root.dispatchEvent(downEventStart);\n      expect(startThumb!.textContent!.trim()).toBe('0');\n\n      // Update end thumb value.\n      const downEventEnd = createEventFrom('pointer', 'down', {clientX: 92});\n      root.dispatchEvent(downEventEnd);\n      expect(endThumb.textContent!.trim()).toBe('90');\n    });\n  });\n\n  describe('tick marks', () => {\n    beforeEach(() => {\n      ({root} = setUpTest({isDiscrete: true, hasTickMarks: true, step: 10}));\n    });\n\n    it('adds tick mark elements on component initialization', () => {\n      const tickMarks =\n          root.querySelector<HTMLElement>(\n                  `.${cssClasses.TICK_MARKS_CONTAINER}`)!.children;\n      expect(tickMarks.length).toBe(11);\n      for (let i = 0; i < tickMarks.length; i++) {\n        const tickMarkClass = i === 0 ? cssClasses.TICK_MARK_ACTIVE :\n                                        cssClasses.TICK_MARK_INACTIVE;\n        expect(tickMarks[i]).toHaveClass(tickMarkClass);\n      }\n    });\n\n    it('updates tick mark classes after slider update', () => {\n      // Sanity check that tick mark classes are as we expect on component init.\n      let tickMarks = root.querySelector<HTMLElement>(\n                              `.${cssClasses.TICK_MARKS_CONTAINER}`)!.children;\n      expect(tickMarks.length).toBe(11);\n      for (let i = 0; i < tickMarks.length; i++) {\n        const tickMarkClass = i === 0 ? cssClasses.TICK_MARK_ACTIVE :\n                                        cssClasses.TICK_MARK_INACTIVE;\n        expect(tickMarks[i]).toHaveClass(tickMarkClass);\n      }\n\n      const downEvent = createEventFrom('pointer', 'down', {clientX: 55.3});\n      root.dispatchEvent(downEvent);\n      jasmine.clock().tick(1);  // Tick for RAF from slider UI updates.\n\n      tickMarks = root.querySelector<HTMLElement>(\n                          `.${cssClasses.TICK_MARKS_CONTAINER}`)!.children;\n      expect(tickMarks.length).toBe(11);\n      for (let i = 0; i < tickMarks.length; i++) {\n        // 55.3 rounds up to 60, since step value is 10.\n        const tickMarkClass = i <= 6 ? cssClasses.TICK_MARK_ACTIVE :\n                                       cssClasses.TICK_MARK_INACTIVE;\n        expect(tickMarks[i]).toHaveClass(tickMarkClass);\n      }\n    });\n  });\n\n  describe('a11y support', () => {\n    let endInput: HTMLInputElement;\n\n    it('updates aria-valuetext on value updates according to ' +\n           '`valueToAriaValueTextFn`',\n       () => {\n         let component: MDCSlider;\n         ({component, root, endInput} =\n              setUpTest({isDiscrete: true, value: 30, step: 10}));\n         component.setValueToAriaValueTextFn(\n             (value: number) => `${value} value`);\n         expect(endInput.getAttribute(attributes.ARIA_VALUETEXT)).toBe(null);\n\n         const downEvent = createEventFrom('pointer', 'down', {clientX: 90});\n         root.dispatchEvent(downEvent);\n         expect(endInput.getAttribute(attributes.ARIA_VALUETEXT))\n             .toBe('90 value');\n       });\n  });\n\n  describe('input synchronization: ', () => {\n    let startInput: HTMLInputElement|null, endInput: HTMLInputElement;\n\n    it('updates input value attribute and property on value update', () => {\n      ({component, startInput, endInput} = setUpTest({\n         isDiscrete: true,\n         valueStart: 10,\n         value: 50,\n         isRange: true,\n       }));\n\n      component.setValueStart(5);\n      expect(startInput!.value).toBe('5');\n      expect(startInput!.getAttribute(attributes.INPUT_VALUE)).toBe('5');\n      expect(endInput.getAttribute(attributes.INPUT_MIN)).toBe('5');\n\n      component.setValue(20);\n      expect(endInput.value).toBe('20');\n      expect(endInput.getAttribute(attributes.INPUT_VALUE)).toBe('20');\n      expect(startInput!.getAttribute(attributes.INPUT_MAX)).toBe('20');\n    });\n\n    it('focuses input on thumb down event', () => {\n      ({root, endInput} = setUpTest({value: 30}));\n      const downEvent = createEventFrom('pointer', 'down', {clientX: 90});\n      root.dispatchEvent(downEvent);\n\n      expect(document.activeElement).toBe(endInput);\n    });\n  });\n\n  describe('disabled state', () => {\n    let startInput: HTMLInputElement|null, endInput: HTMLInputElement;\n\n    it('updates disabled class when setting disabled state', () => {\n      ({root, component} = setUpTest());\n      expect(root).not.toHaveClass(cssClasses.DISABLED);\n\n      component.setDisabled(true);\n      expect(component.getDisabled()).toBe(true);\n      expect(root).toHaveClass(cssClasses.DISABLED);\n\n      component.setDisabled(false);\n      expect(component.getDisabled()).toBe(false);\n      expect(root).not.toHaveClass(cssClasses.DISABLED);\n    });\n\n    it('updates input attrs when setting disabled state', () => {\n      ({root, component, endInput} = setUpTest());\n\n      component.setDisabled(true);\n      expect(endInput.getAttribute(attributes.INPUT_DISABLED)).toBe('');\n\n      component.setDisabled(false);\n      expect(endInput.getAttribute(attributes.INPUT_DISABLED)).toBe(null);\n    });\n\n    it('range slider: updates inputs\\' attrs when setting disabled state',\n       () => {\n         ({root, component, startInput, endInput} = setUpTest({isRange: true}));\n\n         component.setDisabled(true);\n         expect(startInput!.getAttribute(attributes.INPUT_DISABLED)).toBe('');\n         expect(endInput.getAttribute(attributes.INPUT_DISABLED)).toBe('');\n\n         component.setDisabled(false);\n         expect(startInput!.getAttribute(attributes.INPUT_DISABLED)).toBe(null);\n         expect(endInput.getAttribute(attributes.INPUT_DISABLED)).toBe(null);\n       });\n  });\n\n  describe('change/input events', () => {\n    it('emits `change`/`input` events across an interaction', () => {\n      ({root, component} = setUpTest({value: 25, isDiscrete: true}));\n      spyOn(component, 'emit');\n\n      const downEvent = createEventFrom('pointer', 'down', {clientX: 28});\n      root.dispatchEvent(downEvent);\n      expect(component.emit)\n          .toHaveBeenCalledWith(events.INPUT, {value: 28, thumb: Thumb.END});\n      expect(component.emit)\n          .not.toHaveBeenCalledWith(events.CHANGE, jasmine.any(Object));\n\n      const moveEvent = createEventFrom('pointer', 'move', {clientX: 48});\n      root.dispatchEvent(moveEvent);\n      expect(component.emit)\n          .toHaveBeenCalledWith(events.INPUT, {value: 48, thumb: Thumb.END});\n      expect(component.emit)\n          .not.toHaveBeenCalledWith(events.CHANGE, jasmine.any(Object));\n\n      root.dispatchEvent(createEventFrom('pointer', 'up', {clientX: 48}));\n      expect(component.emit)\n          .toHaveBeenCalledWith(events.CHANGE, {value: 48, thumb: Thumb.END});\n    });\n  });\n\n  describe('#get/setValue, #get/setValueStart', () => {\n    it('single pointer slider: #getValue returns correct value', () => {\n      ({component} = setUpTest({value: 25}));\n      expect(component.getValue()).toBe(25);\n    });\n\n    it('range slider: #getValue/#getValueStart returns correct values', () => {\n      ({component} = setUpTest({valueStart: 3, value: 25, isRange: true}));\n      expect(component.getValueStart()).toBe(3);\n      expect(component.getValue()).toBe(25);\n    });\n\n    it('single pointer slider: #setValue moves thumb to correct position',\n       () => {\n         let endThumb;\n         ({root, component, endThumb} =\n              setUpTest({value: 25, isDiscrete: true}));\n         component.setValue(75);\n\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(endThumb.style.transform).toBe(`translateX(75px)`);\n         expect(document.activeElement).not.toBe(endThumb);\n       });\n\n    it('range slider: #setValueStart/#setValue move thumbs to correct positions',\n       () => {\n         let startThumb, endThumb;\n         ({root, component, startThumb, endThumb} = setUpTest(\n              {valueStart: 20, value: 53, isDiscrete: true, isRange: true}));\n\n         component.setValueStart(5);\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(startThumb!.style.transform).toBe(`translateX(5px)`);\n         expect(document.activeElement).not.toBe(startThumb);\n\n         component.setValue(75);\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(endThumb.style.transform).toBe(`translateX(75px)`);\n         expect(document.activeElement).not.toBe(endThumb);\n       });\n  });\n\n  describe('resize handling:', () => {\n    it('adjusts layout calculations on window resize', () => {\n      jasmine.getEnv().allowRespy(true);\n\n      let endThumb;\n      ({root, component, endThumb} = setUpTest({value: 24, isDiscrete: true}));\n\n      expect(component.getValue()).toBe(24);\n      expect(endThumb.style.transform).toBe('translateX(24px)');\n\n      // Mock out client rect to half the size of the original.\n      spyOn(root, 'getBoundingClientRect').and.returnValue({\n        left: 0,\n        right: 50,\n        width: 50,\n      } as DOMRect);\n      emitEvent(window, 'resize');\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n      // Value should be the same...\n      expect(component.getValue()).toBe(24);\n      // Thumb position should be different.\n      expect(endThumb.style.transform).toBe('translateX(12px)');\n\n      component.setValue(12);\n      jasmine.clock().tick(1);  // Tick for RAF.\n      // Subsequent updates should take into account new client rect.\n      expect(endThumb.style.transform).toBe('translateX(6px)');\n\n      jasmine.getEnv().allowRespy(false);\n    });\n  });\n\n  describe('setting slider position before component initialization', () => {\n    let root: HTMLElement, thumb: HTMLElement, trackActive: HTMLElement;\n\n    beforeEach(() => {\n      root = createFixture(html`\n        <div class=\"mdc-slider mdc-slider--discrete\">\n          <input class=\"mdc-slider__input\" type=\"hidden\" min=\"0\" max=\"100\"\n                        value=\"70\" step=\"10\">\n          <div class=\"mdc-slider__track\">\n            <div class=\"mdc-slider__track--active\">\n              <div class=\"mdc-slider__track--active_fill\"\n                   style=\"transform:scaleX(70%)\">\n              </div>\n            </div>\n            <div class=\"mdc-slider__track--inactive\"></div>\n          </div>\n          <div class=\"mdc-slider__thumb\" tabindex=\"0\" role=\"slider\" aria-valuemin=\"0\"\n               aria-valuemax=\"100\" aria-valuenow=\"70\" style=\"left:calc(70% - 24px)\">\n            <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n              <div class=\"mdc-slider__value-indicator\">\n                <span class=\"mdc-slider__value-indicator-text\">70</span>\n              </div>\n            </div>\n            <div class=\"mdc-slider__thumb-knob\"></div>\n          </div>\n        </div>`);\n\n      thumb = root.querySelector<HTMLElement>(`.${cssClasses.THUMB}`)!;\n      trackActive =\n          root.querySelector<HTMLElement>(`.${cssClasses.TRACK_ACTIVE}`)!;\n\n      spyOn(root, 'getBoundingClientRect').and.returnValue({\n        left: 0,\n        right: 100,\n        width: 100,\n      } as DOMRect);\n\n      document.body.appendChild(root);  // Removed in #afterEach.\n    });\n\n    it('does not update thumb styles in initial layout', () => {\n      MDCSlider.attachTo(root, {skipInitialUIUpdate: true});\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(thumb.style.left).toBe('calc(70% - 24px)');\n      expect(thumb.style.transform).toBe('');\n    });\n\n    it('removes thumb `left` styles on initial down event that changes value',\n       () => {\n         MDCSlider.attachTo(root, {skipInitialUIUpdate: true});\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(thumb.style.left).not.toBe('');\n         expect(thumb.style.transform).not.toBe('translateX(30px)');\n\n         root.dispatchEvent(createEventFrom('pointer', 'down', {clientX: 30}));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(thumb.style.left).toBe('');\n         expect(thumb.style.transform).toBe('translateX(30px)');\n       });\n\n    it('removes thumb/track animation on initial down event that changes value',\n       () => {\n         MDCSlider.attachTo(root, {skipInitialUIUpdate: true});\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         root.dispatchEvent(createEventFrom('pointer', 'down', {clientX: 30}));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(thumb.style.transition).toMatch(/none/);\n         expect(trackActive.style.transition).toMatch(/none/);\n\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(thumb.style.transition).toBe('');\n         expect(trackActive.style.transition).toBe('');\n       });\n  });\n});\n\nfunction setUpTest(\n    {isDiscrete, hasTickMarks, isRange, valueStart, value, step}: {\n      isDiscrete?: boolean,\n      isRange?: boolean,\n      hasTickMarks?: boolean,\n      valueStart?: number,\n      value?: number,\n      step?: number,\n    } = {}): {\n  root: HTMLElement,\n  component: MDCSlider,\n  startInput: HTMLInputElement|null,\n  endInput: HTMLInputElement,\n  startThumb: HTMLElement|null,\n  endThumb: HTMLElement,\n  trackActive: HTMLElement\n} {\n  const discreteClass = isDiscrete ? cssClasses.DISCRETE : '';\n  const rangeClass = isRange ? cssClasses.RANGE : '';\n  const tickMarksClass = hasTickMarks ? cssClasses.TICK_MARKS : '';\n\n  const input =\n      ({min, max, value, step}:\n           {min: number, max: number, value: number, step?: number}) => {\n        const stepAttr = step !== undefined ? `step=\"${step}\"` : '';\n        return `<input class=\"mdc-slider__input\" type=\"range\"\n      min=\"${min}\" max=\"${max}\" value=${value} ${stepAttr}>`;\n      };\n  const inputStart = isRange ?\n      input({min: 0, max: value || 0, value: valueStart || 0, step}) :\n      '';\n  const inputEnd = input(\n      {min: isRange ? valueStart || 0 : 0, max: 100, value: value || 0, step});\n\n  const valueIndicator = (valueNum: number) => html`\n      <div class=\"mdc-slider__value-indicator-container\" aria-hidden=\"true\">\n        <div class=\"mdc-slider__value-indicator\">\n          <span class=\"mdc-slider__value-indicator-text\">\n            ${valueNum}\n            </span>\n          </div>\n        </div>`;\n  const valueIndicatorStart = isDiscrete ? valueIndicator(valueStart || 0) : '';\n  const valueIndicatorEnd = isDiscrete ? valueIndicator(valueStart || 0) : '';\n  const startThumbHtml = isRange ? html`\n      <div class=\"mdc-slider__thumb\">\n        ${valueIndicatorStart}\n        <div class=\"mdc-slider__thumb-knob\"></div>\n      </div>` :\n                                   '';\n\n  const root = createFixture(html`\n    <div class=\"mdc-slider ${discreteClass} ${rangeClass} ${tickMarksClass}\">\n      ${inputStart}\n      ${inputEnd}\n      <div class=\"mdc-slider__track\">\n        <div class=\"mdc-slider__track--active\">\n          <div class=\"mdc-slider__track--active_fill\"></div>\n        </div>\n        <div class=\"mdc-slider__track--inactive\"></div>\n      </div>\n      ${startThumbHtml}\n      <div class=\"mdc-slider__thumb\">\n        ${valueIndicatorEnd}\n        <div class=\"mdc-slider__thumb-knob\"></div>\n      </div>\n    </div>`);\n  const inputs =\n      root.querySelectorAll<HTMLInputElement>(`.${cssClasses.INPUT}`);\n  const startInput = isRange ? inputs[0] : null;\n  const endInput = inputs[inputs.length - 1];\n  const thumbs = root.querySelectorAll<HTMLElement>(`.${cssClasses.THUMB}`);\n  const startThumb = isRange ? thumbs[0] as HTMLElement : null;\n  const endThumb = thumbs[thumbs.length - 1] as HTMLElement;\n  const trackActive =\n      root.querySelector<HTMLElement>(`.${cssClasses.TRACK_ACTIVE}`)!;\n\n  spyOn(root, 'getBoundingClientRect').and.returnValue({\n    left: 0,\n    right: 100,\n    width: 100,\n  } as DOMRect);\n\n  document.body.appendChild(root);  // Removed in #afterEach.\n  const component = MDCSlider.attachTo(root);\n  jasmine.clock().tick(1);  // Tick for RAF.\n\n  return {\n    root,\n    component,\n    startInput,\n    endInput,\n    startThumb,\n    endThumb,\n    trackActive\n  };\n}\n\n/**\n * Returns an event based on the event type and phase, e.g. given 'touch'\n * and 'up', returns a `touchend` event.\n */\nfunction createEventFrom(\n    eventType: 'pointer'|'mouse'|'touch', phase: 'down'|'move'|'up',\n    {clientX}: {clientX: number}): PointerEvent|MouseEvent|TouchEvent {\n  let event;\n  let type;\n  switch (eventType) {\n    case 'pointer':\n      type = 'pointerdown';\n      if (phase !== 'down') {\n        type = phase === 'move' ? 'pointermove' : 'pointerup';\n      }\n      event = new PointerEvent(type, {clientX, pointerId: 1});\n      break;\n    case 'mouse':\n      type = 'mousedown';\n      if (phase !== 'down') {\n        type = phase === 'move' ? 'mousemove' : 'mouseup';\n      }\n      event = createMouseEvent(type, {clientX});\n      break;\n    default:\n      type = 'touchstart';\n      if (phase !== 'down') {\n        type = phase === 'move' ? 'touchmove' : 'touchend';\n      }\n      event = new TouchEvent(type, {\n        touches: [{clientX}] as Touch[],\n      });\n  }\n  return event;\n}\n"
  },
  {
    "path": "packages/mdc-slider/test/feature-targeting-any.test.scss",
    "content": "@use '@material/feature-targeting/feature-targeting';\n@use '../slider';\n\n@mixin test($query) {\n  .test {\n    @include slider.core-styles($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-slider/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createMouseEvent} from '../../../testing/dom/events';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {attributes, cssClasses, numbers} from '../constants';\nimport {MDCSliderFoundation} from '../foundation';\nimport {Thumb, TickMark} from '../types';\n\ndescribe('MDCSliderFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  describe('#init sets values based on DOM', () => {\n    it('sets min, max, value based on aria attributes', () => {\n      const {foundation} =\n          setUpAndInit({min: 0, max: 100, value: 50.5, step: 0.5});\n      expect(foundation.getMin()).toBe(0);\n      expect(foundation.getMax()).toBe(100);\n      expect(foundation.getValue()).toBe(50.5);\n    });\n\n    it('range slider: sets min, max, value, valueStart based on aria attributes',\n       () => {\n         const {foundation} = setUpAndInit(\n             {min: -20, max: 20, valueStart: -10, value: -5, isRange: true});\n         expect(foundation.getMin()).toBe(-20);\n         expect(foundation.getMax()).toBe(20);\n         expect(foundation.getValue()).toBe(-5);\n         expect(foundation.getValueStart()).toBe(-10);\n       });\n\n    it('sets step based on step attribute', () => {\n      const {foundation} = setUpAndInit({value: 50, step: 5, isDiscrete: true});\n      foundation.init();\n\n      expect(foundation.getStep()).toBe(5);\n    });\n\n    it('range slider: sets min range based on data-min-range attribute', () => {\n      const {foundation} = setUpAndInit({minRange: 10, isRange: true});\n      foundation.init();\n\n      expect(foundation.getMinRange()).toBe(10);\n    });\n\n    it('min can be updated after initialization', () => {\n      const {foundation} = setUpAndInit({min: -20, max: 20, value: 0});\n      expect(foundation.getMin()).toBe(-20);\n      expect(foundation.getMax()).toBe(20);\n\n      foundation.setMin(10);\n      expect(foundation.getMin()).toBe(10);\n    });\n\n    it('max can be updated after initialization', () => {\n      const {foundation} = setUpAndInit({min: -20, max: 20, value: 0});\n      expect(foundation.getMin()).toBe(-20);\n      expect(foundation.getMax()).toBe(20);\n\n      foundation.setMax(30);\n      expect(foundation.getMax()).toBe(30);\n    });\n\n    it('min range can be updated after initialization', () => {\n      const {foundation} = setUpAndInit({isRange: true});\n      expect(foundation.getMinRange()).toBe(0);\n\n      foundation.setMinRange(10);\n      expect(foundation.getMinRange()).toBe(10);\n    });\n\n    it('hasTickMarks can be updated after initialization', () => {\n      const {foundation} =\n          setUpAndInit({min: 0, max: 100, value: 50, hasTickMarks: false}) as\n          unknown as {foundation: WithHasTickMarksAndDiscrete};\n      expect(foundation.hasTickMarks).toBe(false);\n\n      foundation.setHasTickMarks(true);\n      expect(foundation.hasTickMarks).toBe(true);\n    });\n\n    it('step can be updated after initialization', () => {\n      const {foundation} = setUpAndInit(\n          {min: 0, max: 100, value: 50, step: 10, isDiscrete: true});\n      expect(foundation.getStep()).toBe(10);\n\n      foundation.setStep(20);\n      expect(foundation.getStep()).toBe(20);\n    });\n\n    it('isDiscrete can be updated after initialization', () => {\n      const {foundation} =\n          setUpAndInit({min: 0, max: 100, value: 50, isDiscrete: false}) as\n          unknown as {foundation: WithHasTickMarksAndDiscrete};\n      expect(foundation.isDiscrete).toBe(false);\n\n      foundation.setIsDiscrete(true);\n      expect(foundation.isDiscrete).toBe(true);\n    });\n\n    it('throws error if attribute value is null', () => {\n      const {foundation, mockAdapter} = setUpTest();\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_MIN, Thumb.END)\n          .and.returnValue(null);\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_MAX, Thumb.END)\n          .and.returnValue('100');\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_VALUE, Thumb.END)\n          .and.returnValue('50.5');\n\n      expect(() => {\n        foundation.init();\n      }).toThrowError(/must be non-null/);\n    });\n\n    it('throws error if attribute value is NaN', () => {\n      const {foundation, mockAdapter} = setUpTest();\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_MIN, Thumb.END)\n          .and.returnValue('0');\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_MAX, Thumb.END)\n          .and.returnValue('foo');\n      mockAdapter.getInputAttribute.withArgs(attributes.INPUT_VALUE, Thumb.END)\n          .and.returnValue('50.5');\n\n      expect(() => {\n        foundation.init();\n      }).toThrowError(/must be a number/);\n    });\n\n    it('throws error if min > max', () => {\n      expect(() => setUpAndInit({value: 0.5, min: 1, max: 0}))\n          .toThrowError(/min must be strictly less than max/);\n    });\n\n    it('throws error if min == max', () => {\n      expect(() => setUpAndInit({value: 0, min: 0, max: 0}))\n          .toThrowError(/min must be strictly less than max/);\n    });\n\n    it('throws error if value < min', () => {\n      expect(() => setUpAndInit({value: 5, min: 10, max: 50}))\n          .toThrowError(/value must be in \\[min, max\\] range/);\n    });\n\n    it('throws error if value > max', () => {\n      expect(() => setUpAndInit({value: 55, min: 10, max: 50}))\n          .toThrowError(/value must be in \\[min, max\\] range/);\n    });\n\n    it('throws error if step <= 0', () => {\n      expect(() => setUpAndInit({value: 20, isDiscrete: true, step: -5}))\n          .toThrowError(/step must be a positive number/);\n    });\n\n    it('throws error if valueStart < min', () => {\n      expect(\n          () => setUpAndInit(\n              {value: 20, valueStart: 25, min: 22, max: 30, isRange: true}))\n          .toThrowError(/values must be in \\[min, max\\] range/);\n    });\n\n    it('throws error if valueStart > max', () => {\n      expect(\n          () => setUpAndInit(\n              {value: 10, valueStart: 25, min: 0, max: 23, isRange: true}))\n          .toThrowError(/values must be in \\[min, max\\] range/);\n    });\n\n    it('throws error if start value > end value', () => {\n      expect(() => setUpAndInit({value: 10, valueStart: 25, isRange: true}))\n          .toThrowError(/start value must be <= end value/);\n    });\n\n    it('range slider: throws error if start value is not divisible by step',\n       () => {\n         expect(() => setUpAndInit({valueStart: 2, step: 5, isRange: true}))\n             .toThrowError(/values must be valid based on the step value/);\n       });\n\n    it('throws error if value is not divisible by step', () => {\n      expect(() => setUpAndInit({value: 12, step: 5}))\n          .toThrowError(/value must be valid based on the step value/);\n    });\n\n    it('throws error if minRange < 0', () => {\n      expect(() => setUpAndInit({minRange: -1, isRange: true}))\n          .toThrowError(/minimum range must be non-negative/);\n    });\n\n    it('throws error if valueStart + minRange > value', () => {\n      expect(\n          () => setUpAndInit(\n              {valueStart: 20, value: 30, minRange: 20, isRange: true}))\n          .toThrowError(/start value and end value must differ by at least 20/);\n    });\n\n    it('does not throw error with valid value and step < 1', () => {\n      expect(() => setUpAndInit({value: 12, step: 0.2})).not.toThrow();\n    });\n\n    it('does not throw error due to floating point rounding - related to issue #7404',\n       () => {\n         expect(() => setUpAndInit({value: 33.3, min: 0, max: 100, step: 0.1}))\n             .not.toThrow();\n       });\n  });\n\n  describe('#layout', () => {\n    it('initial layout removes thumb styles, and subsequent layouts ' +\n           'do not',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({isRange: true});\n         expect(mockAdapter.removeThumbStyleProperty)\n             .toHaveBeenCalledWith('left', Thumb.END);\n         expect(mockAdapter.removeThumbStyleProperty)\n             .toHaveBeenCalledWith('left', Thumb.START);\n\n         mockAdapter.removeThumbStyleProperty.calls.reset();\n         foundation.layout();\n         jasmine.clock().tick(1);\n         expect(mockAdapter.removeThumbStyleProperty)\n             .not.toHaveBeenCalledWith('left', Thumb.END);\n         expect(mockAdapter.removeThumbStyleProperty)\n             .not.toHaveBeenCalledWith('left', Thumb.START);\n       });\n\n    it('initial layout resets thumb/track animations, and subsequent layouts ' +\n           'do not',\n       () => {\n         const {foundation, mockAdapter} =\n             setUpAndInit({isRange: true, isDiscrete: true});\n\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transition', 'none 0s ease 0s', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 'transition', 'none 0s ease 0s', Thumb.START);\n         expect(mockAdapter.setTrackActiveStyleProperty)\n             .toHaveBeenCalledWith('transition', 'none 0s ease 0s');\n         jasmine.clock().tick(1);  // Tick for RAF.\n         // Newly added inline styles should be removed in next frame.\n         expect(mockAdapter.removeThumbStyleProperty)\n             .toHaveBeenCalledWith('transition', Thumb.END);\n         expect(mockAdapter.removeThumbStyleProperty)\n             .toHaveBeenCalledWith('transition', Thumb.START);\n         expect(mockAdapter.removeTrackActiveStyleProperty)\n             .toHaveBeenCalledWith('transition');\n\n         mockAdapter.setThumbStyleProperty.calls.reset();\n         mockAdapter.setTrackActiveStyleProperty.calls.reset();\n\n         foundation.layout();\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(mockAdapter.setThumbStyleProperty)\n             .not.toHaveBeenCalledWith(\n                 'transition', 'none 0s ease 0s', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .not.toHaveBeenCalledWith(\n                 'transition', 'none 0s ease 0s', Thumb.START);\n         expect(mockAdapter.setTrackActiveStyleProperty)\n             .not.toHaveBeenCalledWith('transition', 'none 0s ease 0s');\n       });\n\n    it('initial layout does not reset thumb/track animations for continuous sliders',\n       () => {\n         const {mockAdapter} = setUpAndInit({isRange: true, isDiscrete: false});\n         expect(mockAdapter.setThumbStyleProperty)\n             .not.toHaveBeenCalledWith(\n                 'transition', 'none 0s ease 0s', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .not.toHaveBeenCalledWith(\n                 'transition', 'none 0s ease 0s', Thumb.START);\n         expect(mockAdapter.setTrackActiveStyleProperty)\n             .not.toHaveBeenCalledWith('transition', 'none 0s ease 0s');\n       });\n\n    it('RTL: initial layout removes thumb styles', () => {\n      const {mockAdapter} = setUpAndInit({isRange: true, isRTL: true});\n      expect(mockAdapter.removeThumbStyleProperty)\n          .toHaveBeenCalledWith('right', Thumb.END);\n      expect(mockAdapter.removeThumbStyleProperty)\n          .toHaveBeenCalledWith('right', Thumb.START);\n    });\n\n    it('`skipUpdateUI` skips updating the UI', () => {\n      const {foundation, mockAdapter} = setUpAndInit({isRange: true});\n      mockAdapter.setThumbStyleProperty.calls.reset();\n      mockAdapter.setTrackActiveStyleProperty.calls.reset();\n\n      foundation.layout({skipUpdateUI: true});\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n      expect(mockAdapter.setTrackActiveStyleProperty).not.toHaveBeenCalled();\n    });\n\n    it('#layout with no thumbs updates both thumbs\\' value indicators', () => {\n      const {foundation, mockAdapter} = setUpAndInit(\n          {isRange: true, isDiscrete: true, valueStart: 5, value: 10});\n\n      foundation.layout();\n      expect(mockAdapter.setValueIndicatorText)\n          .toHaveBeenCalledWith(10, Thumb.END);\n      expect(mockAdapter.setValueIndicatorText)\n          .toHaveBeenCalledWith(5, Thumb.START);\n    });\n\n    it('#layout with no thumbs updates both thumbs\\' input attributes', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        isRange: true,\n        isDiscrete: true,\n        valueStart: 5,\n        value: 10,\n        minRange: 1\n      });\n      mockAdapter.getValueToAriaValueTextFn.and.returnValue(\n          // TODO: Wait until b/208710526 is fixed, then remove this\n          // autogenerated error suppression.\n          //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(value:\n          //  string) => string' is not assignable to parameter of type '(value:\n          //  number, thumb: Thumb) => string'.\n          (value: string) => `${value} value`);\n\n      foundation.layout();\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_VALUE, '5', Thumb.START);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_VALUE, '10', Thumb.END);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_MAX, '9', Thumb.START);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_MIN, '6', Thumb.END);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(\n              attributes.ARIA_VALUETEXT, '5 value', Thumb.START);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(\n              attributes.ARIA_VALUETEXT, '10 value', Thumb.END);\n    });\n  });\n\n  describe('#destroy', () => {\n    it('Pointer events: Event listeners are deregistered when foundation is ' +\n           'destroyed.',\n       () => {\n         const supportsPointerEvents =\n             MDCSliderFoundation.SUPPORTS_POINTER_EVENTS;\n         MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = true;\n         const {foundation, mockAdapter} = setUpAndInit();\n\n         foundation.destroy();\n\n         expect(mockAdapter.deregisterEventHandler)\n             .toHaveBeenCalledWith('pointerdown', jasmine.any(Function));\n         expect(mockAdapter.deregisterEventHandler)\n             .toHaveBeenCalledWith('pointerup', jasmine.any(Function));\n\n         const thumbEvents = ['mouseenter', 'mouseleave'];\n         for (const event of thumbEvents) {\n           expect(mockAdapter.deregisterThumbEventHandler)\n               // TODO: Wait until b/208710526 is fixed, then remove this\n               // autogenerated error suppression.\n               //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n               //  'string' is not assignable to parameter of type\n               //  'Expected<keyof GlobalEventHandlersEventMap>'.\n               .toHaveBeenCalledWith(Thumb.END, event, jasmine.any(Function));\n         }\n\n         // Reset to original value.\n         MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = supportsPointerEvents;\n       });\n\n    it('Pointer events not supported: mousedown/touchstart listeners are ' +\n           'deregistered when foundation is destroyed.',\n       () => {\n         const supportsPointerEvents =\n             MDCSliderFoundation.SUPPORTS_POINTER_EVENTS;\n         MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = false;\n         const {foundation, mockAdapter} = setUpAndInit();\n\n         foundation.destroy();\n\n         expect(mockAdapter.deregisterEventHandler)\n             .toHaveBeenCalledWith('mousedown', jasmine.any(Function));\n         expect(mockAdapter.deregisterEventHandler)\n             .toHaveBeenCalledWith('touchstart', jasmine.any(Function));\n\n         // Reset to original value.\n         MDCSliderFoundation.SUPPORTS_POINTER_EVENTS = supportsPointerEvents;\n       });\n\n    it('Resize listener is deregistered when foundation is destroyed', () => {\n      const {foundation, mockAdapter} = setUpAndInit();\n\n      foundation.destroy();\n\n      expect(mockAdapter.deregisterWindowEventHandler)\n          .toHaveBeenCalledWith('resize', jasmine.any(Function));\n    });\n  });\n\n  describe('Focused thumb style', () => {\n    it('adds/removes focused style from thumb on input focus/blur', () => {\n      const {foundation, mockAdapter} = setUpAndInit();\n      foundation.handleInputFocus(Thumb.START);\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_FOCUSED, Thumb.START);\n\n      foundation.handleInputBlur(Thumb.START);\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_FOCUSED, Thumb.START);\n    });\n  });\n\n  describe('Value updates via user events', () => {\n    it('throws error if move event occurs with no preceding down event', () => {\n      const {foundation} = setUpAndInit();\n\n      expect(() => {\n        foundation.handleMove(createMouseEvent('mousemove', {\n          clientX: 80,\n        }));\n      }).toThrowError();\n    });\n\n    it('sets slider value to updated value', () => {\n      const left = 10;\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n        rect: {\n          left,\n          right: 110,\n          width: 100,\n        }\n      });\n\n      const value = 60;\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: left + value,\n      }));\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: left + value,\n      }));\n      expect(foundation.getValue()).toBe(value);\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              'transform', `translateX(${value}px)`, Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', `scaleX(${value / 100})`);\n    });\n\n    it('clips value to min value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        min: 10,\n        max: 100,\n        value: 50,\n        rect: {\n          left: 10,\n          right: 110,\n          width: 100,\n        }\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 9,\n      }));\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 9,\n      }));\n      expect(foundation.getValue()).toBe(10);\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(${0}px)`, Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', `scaleX(${0})`);\n    });\n\n    it('clips value to max value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 101,\n      }));\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 101,\n      }));\n      expect(foundation.getValue()).toBe(100);\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(${100}px)`, Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', `scaleX(${1})`);\n    });\n\n    it('quantizes value based on step', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n        isDiscrete: true,\n        step: 5,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 58,\n      }));\n      expect(foundation.getValue()).toBe(60);\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(${60}px)`, Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', `scaleX(${0.6})`);\n    });\n\n    it('quantizes value based on step and min', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        min: -25,\n        max: 75,\n        value: 5,\n        isDiscrete: true,\n        step: 10,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 10,\n      }));\n      expect(foundation.getValue()).toBe(-15);  // -25 + 10\n      jasmine.clock().tick(1);                  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(${10}px)`, Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', `scaleX(${0.1})`);\n    });\n\n    it('rounds values based on step decimal places', () => {\n      const {foundation} = setUpAndInit({\n        min: 0,\n        max: 1,\n        value: 0,\n        isDiscrete: true,\n        step: 0.1,\n      });\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 30,\n      }));\n      expect(foundation.getValue()).toBe(0.3);\n    });\n\n    it('rounds values (using scientific notation) based on step decimal places',\n       () => {\n         const {foundation} = setUpAndInit({\n           min: 0,\n           max: 1e-8,\n           value: 0,\n           isDiscrete: true,\n           step: 1e-9,\n         });\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 30,\n         }));\n         expect(foundation.getValue()).toBe(3e-9);\n       });\n\n    it('down event updates end value if value is inside the range and ' +\n           'closer to end thumb',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,\n           value: 50,\n           isRange: true,\n         });\n\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 40,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(10);\n         expect(foundation.getValue()).toBe(40);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', 'translateX(40px)', Thumb.END);\n       });\n\n    it('down event updates start value if value is inside the range and ' +\n           'closer to start thumb',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,\n           value: 50,\n           isRange: true,\n         });\n\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 25,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(25);\n         expect(foundation.getValue()).toBe(50);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 'transform', 'translateX(25px)', Thumb.START);\n       });\n\n    it('move event after down event (on end thumb) updates end thumb value ' +\n           'inside the range',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,\n           value: 50,\n           isRange: true,\n         });\n\n         // Down event on end thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 48,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         // Move end thumb towards middle of the range.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 25,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(10);\n         expect(foundation.getValue()).toBe(25);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', `translateX(25px)`, Thumb.END);\n       });\n\n    it('moves the start thumb if value < start value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 10,\n        value: 50,\n        isRange: true,\n      });\n\n      // Down event on start thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 5,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(foundation.getValueStart()).toBe(5);\n      expect(foundation.getValue()).toBe(50);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(5px)`, Thumb.START);\n    });\n\n    it('moves the end thumb if value > end value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 10,\n        value: 50,\n        isRange: true,\n      });\n\n      // Down event on end thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 70,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(foundation.getValueStart()).toBe(10);\n      expect(foundation.getValue()).toBe(70);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(70px)`, Thumb.END);\n    });\n\n    it('does not move the start thumb to be greater than the end thumb', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 45,\n        value: 53,\n        isRange: true,\n      });\n\n      // Down event on start thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 45,\n      }));\n      // Move event to a clientX greater than end thumb.\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 60,\n      }));\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(foundation.getValueStart()).toBe(53);\n      expect(foundation.getValue()).toBe(53);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', `translateX(53px)`, Thumb.START);\n    });\n\n    it('does not move the end thumb to be less than than the start thumb',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 45,\n           value: 80,\n           isRange: true,\n         });\n\n         // Down event on end thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 80,\n         }));\n         // Move event to a clientX less than start thumb.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 40,\n         }));\n\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(45);\n         expect(foundation.getValue()).toBe(45);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', `translateX(45px)`, Thumb.END);\n       });\n\n    it('does not move the start thumb to be closer to the end thumb than minRange',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 45,\n           value: 53,\n           minRange: 5,\n           isRange: true,\n         });\n\n         // Down event on start thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 45,\n         }));\n         // Move event to a clientX less than minRange from the end thumb.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 50,\n         }));\n\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(48);\n         expect(foundation.getValue()).toBe(53);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 'transform', `translateX(48px)`, Thumb.START);\n       });\n\n    it('does not move the end thumb to be closer to the start thumb than minRange',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 45,\n           value: 80,\n           minRange: 10,\n           isRange: true,\n         });\n\n         // Down event on end thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 80,\n         }));\n         // Move event to a clientX less than minRange from the start thumb.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 50,\n         }));\n\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValueStart()).toBe(45);\n         expect(foundation.getValue()).toBe(55);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', `translateX(55px)`, Thumb.END);\n       });\n\n    it('does not update UI if start value is updated to the same value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 40,\n        value: 80,\n        isRange: true,\n        isDiscrete: true,\n        step: 10,\n      });\n\n      // Reset UI update calls from initialization, so we can test\n      // that the next #handleDown invokes no calls.\n      mockAdapter.setThumbStyleProperty.calls.reset();\n\n      // Down event near start value.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 37,\n      }));\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(foundation.getValueStart()).toBe(40);\n      expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n    });\n\n    it('does not update UI if end value is updated to the same value', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 40,\n        value: 80,\n        isRange: true,\n        isDiscrete: true,\n        step: 10,\n      });\n\n      // Reset UI update calls from initialization, so we can test\n      // that the next #handleDown invokes no calls.\n      mockAdapter.setThumbStyleProperty.calls.reset();\n\n      // Down event near end value.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 84.5,\n      }));\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      expect(foundation.getValue()).toBe(80);\n      expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n    });\n\n    it('RTL, single point slider: updates track/thumb position with ' +\n           'reversed values',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           value: 50,\n           isRTL: true,\n         });\n\n         // Down event on end thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 10,  // In RTL, maps to value update of 90.\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValue()).toBe(90);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', `translateX(10px)`, Thumb.END);\n       });\n\n    it('RTL, range slider: updates track/thumb position with reversed values',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,\n           value: 50,\n           isRange: true,\n           isRTL: true,\n         });\n\n         // Down event on end thumb.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 25,  // In RTL, maps to value update of 75.\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n\n         expect(foundation.getValue()).toBe(75);\n         expect(mockAdapter.setTrackActiveStyleProperty)\n             .toHaveBeenCalledWith('transform-origin', 'right');\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith('transform', `translateX(25px)`, Thumb.END);\n       });\n  });\n\n  describe('#get/setValue', () => {\n    it('throws error if #get/setValueStart is invoked on single point slider',\n       () => {\n         const {foundation} = setUpAndInit();\n\n         expect(() => {\n           foundation.getValueStart();\n         }).toThrowError(/only applicable for range sliders/);\n         expect(() => {\n           foundation.setValueStart(10);\n         }).toThrowError(/only applicable for range sliders/);\n       });\n\n    it('throws error if #setValue/setValueStart is set to invalid number',\n       () => {\n         const {foundation} = setUpAndInit(\n             {isRange: true, valueStart: 10, value: 50, minRange: 10});\n\n         expect(() => {\n           foundation.setValueStart(51);\n         }).toThrowError(/must be <= end thumb value/);\n         expect(() => {\n           foundation.setValueStart(45);\n         })\n             .toThrowError(\n                 /must be <= end thumb value \\(50\\) - min range \\(10\\)/);\n         expect(() => {\n           foundation.setValue(9);\n         }).toThrowError(/must be >= start thumb value/);\n         expect(() => {\n           foundation.setValue(15);\n         })\n             .toThrowError(\n                 /must be >= start thumb value \\(10\\) \\+ min range \\(10\\)/);\n       });\n\n    it('single point slider: #setValue updates value and UI', () => {\n      const {foundation, mockAdapter} =\n          setUpAndInit({isDiscrete: true, value: 33});\n\n      foundation.setValue(64);\n      expect(foundation.getValue()).toBe(64);\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', 'translateX(64px)', Thumb.END);\n      expect(mockAdapter.setTrackActiveStyleProperty)\n          .toHaveBeenCalledWith('transform', 'scaleX(0.64)');\n    });\n\n    it('range: #setValue updates end thumb value and UI', () => {\n      const {foundation, mockAdapter} = setUpAndInit(\n          {isDiscrete: true, valueStart: 10, value: 40, isRange: true});\n\n      foundation.setValue(64);\n      expect(foundation.getValue()).toBe(64);\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', 'translateX(64px)', Thumb.END);\n    });\n\n    it('range: #setValueStart updates end thumb value and UI', () => {\n      const {foundation, mockAdapter} = setUpAndInit(\n          {isDiscrete: true, valueStart: 10, value: 40, isRange: true});\n\n      foundation.setValueStart(3);\n      expect(foundation.getValueStart()).toBe(3);\n\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith('transform', 'translateX(3px)', Thumb.START);\n    });\n  });\n\n  describe('#get/setMinRange', () => {\n    it('throws error if #get/setMinRange is invoked on single point slider',\n       () => {\n         const {foundation} = setUpAndInit();\n\n         expect(() => {\n           foundation.getMinRange();\n         }).toThrowError(/only applicable for range sliders/);\n         expect(() => {\n           foundation.setMinRange(10);\n         }).toThrowError(/only applicable for range sliders/);\n       });\n\n    it('throws error if #setMinRange is set to invalid number', () => {\n      const {foundation} = setUpAndInit(\n          {isRange: true, valueStart: 10, value: 50, minRange: 10});\n\n      expect(() => {\n        foundation.setMinRange(-10);\n      }).toThrowError(/must be non-negative/);\n      expect(() => {\n        foundation.setMinRange(45);\n      }).toThrowError(/must differ by at least 45/);\n    });\n  });\n\n  describe('input synchronization: ', () => {\n    it('updates input value attribute and property on value update', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        isDiscrete: true,\n        valueStart: 10,\n        value: 40,\n        minRange: 10,\n        isRange: true\n      });\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.START).and.returnValue(10);\n      foundation.setValueStart(3);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_VALUE, '3', Thumb.START);\n      expect(mockAdapter.setInputValue).toHaveBeenCalledWith('3', Thumb.START);\n      // The min attribute for end input should also be updated.\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_MIN, '13', Thumb.END);\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.END).and.returnValue(40);\n      foundation.setValue(30);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_VALUE, '30', Thumb.END);\n      expect(mockAdapter.setInputValue).toHaveBeenCalledWith('30', Thumb.END);\n      // The max attribute for start input should also be updated.\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_MAX, '20', Thumb.START);\n    });\n\n    it('updates values on input change', () => {\n      const {foundation, mockAdapter} =\n          setUpAndInit({valueStart: 10, value: 40, isRange: true});\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.START).and.returnValue(5);\n      foundation.handleInputChange(Thumb.START);\n      expect(foundation.getValueStart()).toBe(5);\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.END).and.returnValue(45);\n      foundation.handleInputChange(Thumb.END);\n      expect(foundation.getValue()).toBe(45);\n    });\n\n    it('focuses input on thumb down event', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      expect(mockAdapter.focusInput).toHaveBeenCalledWith(Thumb.END);\n    });\n  });\n\n  describe('value indicator', () => {\n    it('does not update value indicator for continuous slider', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      expect(mockAdapter.setValueIndicatorText).not.toHaveBeenCalled();\n    });\n\n    it('updates value indicator for single point slider', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n        isDiscrete: true,\n        step: 5,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      expect(mockAdapter.setValueIndicatorText)\n          .toHaveBeenCalledWith(20, Thumb.END);\n    });\n\n    it('updates value indicator for range slider', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 30,\n        value: 50,\n        isDiscrete: true,\n        step: 5,\n        isRange: true,\n      });\n\n      // Update start thumb value.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      expect(mockAdapter.setValueIndicatorText)\n          .toHaveBeenCalledWith(20, Thumb.START);\n\n      // Update end thumb value.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 75,\n      }));\n      expect(mockAdapter.setValueIndicatorText)\n          .toHaveBeenCalledWith(75, Thumb.END);\n    });\n\n    it('range slider: adds THUMB_WITH_INDICATOR class to both thumbs on ' +\n           'thumb mouseenter',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           isDiscrete: true,\n           isRange: true,\n         });\n\n         foundation.handleThumbMouseenter();\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n       });\n\n    it('range slider: removes THUMB_WITH_INDICATOR class from both thumbs ' +\n           'on thumb mouseleave',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           isDiscrete: true,\n           isRange: true,\n         });\n\n         mockAdapter.isInputFocused.withArgs(Thumb.START)\n             .and.returnValue(false);\n         mockAdapter.isInputFocused.withArgs(Thumb.END).and.returnValue(false);\n\n         foundation.handleThumbMouseleave();\n         expect(mockAdapter.removeThumbClass)\n             .toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.removeThumbClass)\n             .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n       });\n\n    it('range slider: does not remove THUMB_WITH_INDICATOR class on' +\n           'thumb mouseleave if an input is still focused',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           isDiscrete: true,\n           isRange: true,\n         });\n\n         mockAdapter.isInputFocused.withArgs(Thumb.END).and.returnValue(true);\n\n         foundation.handleThumbMouseleave();\n         expect(mockAdapter.removeThumbClass)\n             .not.toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.removeThumbClass)\n             .not.toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n       });\n  });\n\n  describe('value indicator alignment', () => {\n    it('does not align value indicator for continuous slider', () => {\n      const {mockAdapter} = setUpAndInit({\n        value: 50,\n      });\n\n      expect(mockAdapter.getValueIndicatorContainerWidth)\n          .not.toHaveBeenCalled();\n      expect(mockAdapter.setThumbStyleProperty)\n          .not.toHaveBeenCalledWith(\n              jasmine.stringMatching(/--slider-value-indicator.*/),\n              jasmine.any(String), jasmine.any(Number));\n    });\n\n    it('left aligns value indicator when close to the left edge', () => {\n      const {mockAdapter} = setUpAndInit({\n        value: 0,\n        isDiscrete: true,\n      });\n\n      expect(mockAdapter.getValueIndicatorContainerWidth)\n          .toHaveBeenCalledWith(Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-left', '5px', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-right', 'auto', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-transform', 'translateX(-50%)',\n              Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-left', '0', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-right', 'auto', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-transform', 'none',\n              Thumb.END);\n    });\n\n    it('right aligns value indicator when close to the right edge', () => {\n      const {mockAdapter} = setUpAndInit({\n        value: 100,\n        isDiscrete: true,\n      });\n\n      expect(mockAdapter.getValueIndicatorContainerWidth)\n          .toHaveBeenCalledWith(Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-left', 'auto', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-right', '5px', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-caret-transform', 'translateX(50%)',\n              Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-left', 'auto', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-right', '0', Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              '--slider-value-indicator-container-transform', 'none',\n              Thumb.END);\n    });\n\n    it('centers value indicator over the knob when far enough from both edges',\n       () => {\n         const {mockAdapter} = setUpAndInit({\n           value: 50,\n           isDiscrete: true,\n         });\n\n         expect(mockAdapter.getValueIndicatorContainerWidth)\n             .toHaveBeenCalledWith(Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-caret-left', '50%', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-caret-right', 'auto', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-caret-transform', 'translateX(-50%)',\n                 Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-container-left', '50%', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-container-right', 'auto', Thumb.END);\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 '--slider-value-indicator-container-transform',\n                 'translateX(-50%)', Thumb.END);\n       });\n\n    it('range slider: aligns both value indicators', () => {\n      const {mockAdapter} = setUpAndInit({\n        isRange: true,\n        isDiscrete: true,\n      });\n\n      expect(mockAdapter.getValueIndicatorContainerWidth)\n          .toHaveBeenCalledWith(Thumb.START);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              jasmine.stringMatching(/--slider-value-indicator.*/),\n              jasmine.any(String), Thumb.START);\n      expect(mockAdapter.getValueIndicatorContainerWidth)\n          .toHaveBeenCalledWith(Thumb.END);\n      expect(mockAdapter.setThumbStyleProperty)\n          .toHaveBeenCalledWith(\n              jasmine.stringMatching(/--slider-value-indicator.*/),\n              jasmine.any(String), Thumb.END);\n    });\n  });\n\n  describe('tick marks', () => {\n    it('single point slider: sets correct number of tick marks for value update',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           value: 50,\n           isDiscrete: true,\n           step: 10,\n           hasTickMarks: true,\n         });\n\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 0,\n         }));\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 0,\n         }));\n         expect(mockAdapter.updateTickMarks).toHaveBeenCalledWith([\n           TickMark.ACTIVE\n         ].concat(Array.from<TickMark>({length: 10}).fill(TickMark.INACTIVE)));\n\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 100,\n         }));\n         expect(mockAdapter.updateTickMarks)\n             .toHaveBeenCalledWith(\n                 Array.from<TickMark>({length: 11}).fill(TickMark.ACTIVE));\n\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 33.5,\n         }));\n         expect(mockAdapter.updateTickMarks)\n             .toHaveBeenCalledWith(Array.from<TickMark>({length: 4})\n                                       .fill(TickMark.ACTIVE)\n                                       .concat(Array.from<TickMark>({length: 7})\n                                                   .fill(TickMark.INACTIVE)));\n       });\n\n    it('range slider: sets correct number of tick marks for value update',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 20,\n           value: 40,\n           isDiscrete: true,\n           step: 10,\n           hasTickMarks: true,\n           isRange: true,\n         });\n         expect(mockAdapter.updateTickMarks).toHaveBeenCalledWith([\n           TickMark.INACTIVE,\n           TickMark.INACTIVE,\n           TickMark.ACTIVE,\n           TickMark.ACTIVE,\n           TickMark.ACTIVE,\n         ].concat(Array.from<TickMark>({length: 6}).fill(TickMark.INACTIVE)));\n\n         // Update start thumb value to 0.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 0,\n         }));\n         expect(mockAdapter.updateTickMarks)\n             .toHaveBeenCalledWith(Array.from<TickMark>({length: 5})\n                                       .fill(TickMark.ACTIVE)\n                                       .concat(Array.from<TickMark>({length: 6})\n                                                   .fill(TickMark.INACTIVE)));\n\n         // Update end thumb value to 100.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 100,\n         }));\n         expect(mockAdapter.updateTickMarks)\n             .toHaveBeenCalledWith(\n                 Array.from<TickMark>({length: 11}).fill(TickMark.ACTIVE));\n       });\n  });\n\n  describe('range slider: overlapping thumbs', () => {\n    it('when thumbs overlap, adds THUMB_TOP class to active thumb', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 12,\n        value: 58,\n        isRange: true,\n      });\n\n      // Down event on start thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 10,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.addThumbClass)\n          .not.toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.START);\n\n      // Move start thumb to overlap with end thumb.\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 56,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.START);\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.END);\n    });\n\n    it('when thumbs do not overlap, removes THUMB_TOP class', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 12,\n        value: 15,\n        isRange: true,\n      });\n\n      // Down event on end thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 15,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n\n      // Move end thumb to not overlap with start thumb.\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 80,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.START);\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.END);\n    });\n\n    it('RTL: when thumbs overlap, adds THUMB_TOP class to active thumb', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 10,  // Start thumb is at clientX == 90.\n        value: 60,       // End thumb is at clientX == 40.\n        isRange: true,\n        isRTL: true,\n      });\n\n      // Down event on start thumb.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 90,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.addThumbClass)\n          .not.toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.START);\n\n      // Move start thumb to overlap with end thumb.\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 40,\n      }));\n      jasmine.clock().tick(1);  // Tick for RAF.\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.START);\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_TOP, Thumb.END);\n    });\n\n    it('when thumbs overlap, thumb to be moved is based on drag direction',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,\n           value: 12,\n           isRange: true,\n         });\n         // Reset calls from initial layout.\n         mockAdapter.setThumbStyleProperty.calls.reset();\n\n         // Down event on overlapping thumbs.\n         const downEventClientX = 10;\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: downEventClientX,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n\n         // Move to left by less than THUMB_UPDATE_MIN_PX.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: downEventClientX - 3,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n\n         // Move to left by more than THUMB_UPDATE_MIN_PX.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: downEventClientX - 7,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 'transform', `translateX(${downEventClientX - 7}px)`,\n                 Thumb.START);\n         expect(foundation.getValueStart()).toBe(3);\n       });\n\n    it('RTL: when thumbs overlap, thumb to be moved is based on drag ' +\n           'direction, and reversed from LTR',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 10,  // clientX of 90.\n           value: 12,       // clientX of 88.\n           isRange: true,\n           isRTL: true,\n           isDiscrete: true,\n         });\n         // Reset calls from initial layout.\n         mockAdapter.setThumbStyleProperty.calls.reset();\n\n         // Down event on overlapping thumbs.\n         const downEventClientX = 88;\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: downEventClientX,\n         }));\n         jasmine.clock().tick(1);  // Tick for RAF.\n         expect(mockAdapter.setThumbStyleProperty).not.toHaveBeenCalled();\n\n         // Move to left by more than THUMB_UPDATE_MIN_PX.\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: downEventClientX - 6,\n         }));\n         jasmine.clock().tick(1);\n         // Dragging to left in RTL mode moves the end thumb.\n         expect(mockAdapter.setThumbStyleProperty)\n             .toHaveBeenCalledWith(\n                 'transform', `translateX(${downEventClientX - 6}px)`,\n                 Thumb.END);\n         expect(foundation.getValue()).toBe(18);\n       });\n  });\n\n  describe('a11y support', () => {\n    it('updates aria-valuetext on value update according to ' +\n           '`Adapter#getValueToAriaValueTextFn`',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           valueStart: 12,\n           value: 15,\n           isRange: true,\n         });\n         mockAdapter.getValueToAriaValueTextFn.and.returnValue(\n             // TODO: Wait until b/208710526 is fixed, then remove this\n             // autogenerated error suppression.\n             //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n             //  '(value: string) => string' is not assignable to parameter of\n             //  type '(value: number, thumb: Thumb) => string'.\n             (value: string) => `${value} value`);\n\n         foundation.setValueStart(11);\n         expect(mockAdapter.setInputAttribute)\n             .toHaveBeenCalledWith(\n                 attributes.ARIA_VALUETEXT, '11 value', Thumb.START);\n\n         foundation.setValue(16);\n         expect(mockAdapter.setInputAttribute)\n             .toHaveBeenCalledWith(\n                 attributes.ARIA_VALUETEXT, '16 value', Thumb.END);\n       });\n  });\n\n  describe('disabled state', () => {\n    it('updates class and input attributes according to disabled state', () => {\n      const {foundation, mockAdapter} = setUpAndInit();\n      expect(foundation.getDisabled()).toBe(false);\n\n      foundation.setDisabled(true);\n      expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n      expect(mockAdapter.setInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_DISABLED, '', Thumb.END);\n      expect(foundation.getDisabled()).toBe(true);\n\n      foundation.setDisabled(false);\n      expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n      expect(mockAdapter.removeInputAttribute)\n          .toHaveBeenCalledWith(attributes.INPUT_DISABLED, Thumb.END);\n      expect(foundation.getDisabled()).toBe(false);\n    });\n\n    it('range slider: updates inputs\\' attrs according to disabled state',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({isRange: true});\n\n         foundation.setDisabled(true);\n         expect(mockAdapter.setInputAttribute)\n             .toHaveBeenCalledWith(attributes.INPUT_DISABLED, '', Thumb.END);\n         expect(mockAdapter.setInputAttribute)\n             .toHaveBeenCalledWith(attributes.INPUT_DISABLED, '', Thumb.START);\n\n         foundation.setDisabled(false);\n         expect(mockAdapter.removeInputAttribute)\n             .toHaveBeenCalledWith(attributes.INPUT_DISABLED, Thumb.START);\n         expect(mockAdapter.removeInputAttribute)\n             .toHaveBeenCalledWith(attributes.INPUT_DISABLED, Thumb.END);\n       });\n\n    it('events do not update slider value when disabled', () => {\n      const {foundation} =\n          setUpAndInit({value: 40, isDiscrete: true, isDisabled: true});\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 35,\n      }));\n      expect(foundation.getValue()).toBe(40);\n\n      foundation.handleMove(createMouseEvent('mousedown', {\n        clientX: 30,\n      }));\n      expect(foundation.getValue()).toBe(40);\n    });\n  });\n\n  describe('hide focus setting', () => {\n    it('hides focus and value indicators after mouse interaction', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 0,\n        isDiscrete: true,\n        hideFocusStylesForPointerEvents: true,\n      });\n\n      // Mousedown on slider should focus the thumb and show the value\n      // indicator.\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_FOCUSED, Thumb.END);\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n\n      // Mouseup should remove focus from the thumb and hide the value indicator\n      // that were added on mousedown.\n      foundation.handleUp();\n\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_FOCUSED, Thumb.END);\n      expect(mockAdapter.removeThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n    });\n\n    it('keeps focus and value indicators on keyboard interaction', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 0,\n        isDiscrete: true,\n        hideFocusStylesForPointerEvents: true,\n      });\n\n      foundation.handleInputFocus(Thumb.END);\n\n      // Thumb should get visible focus and the value indicator should show up.\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_FOCUSED, Thumb.END);\n      expect(mockAdapter.addThumbClass)\n          .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n    });\n\n    it('range slider: hides value indicators on mouse leave even when focused',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           value: 100,\n           valueStart: 0,\n           isDiscrete: true,\n           isRange: true,\n           hideFocusStylesForPointerEvents: true,\n         });\n\n         mockAdapter.isInputFocused.withArgs(Thumb.START).and.returnValue(true);\n\n         foundation.handleThumbMouseenter();\n\n         // Mouseenter should still show the value indicators.\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n\n         foundation.handleThumbMouseleave();\n\n         // Mouseleave should hide value indicators even though one of the\n         // thumbs is focused.\n         expect(mockAdapter.removeThumbClass)\n             .toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.removeThumbClass)\n             .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n       });\n\n    it('range slider: keeps value indicators on mouse leave while dragging',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           value: 100,\n           valueStart: 0,\n           isDiscrete: true,\n           isRange: true,\n           hideFocusStylesForPointerEvents: true,\n         });\n\n         foundation.handleThumbMouseenter();\n\n         // Mouseenter should still show the value indicators.\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.addThumbClass)\n             .toHaveBeenCalledWith(cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n\n         // Mouseleave should keep them while the thumb is being dragged.\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 20,\n         }));\n         foundation.handleThumbMouseleave();\n\n         expect(mockAdapter.removeThumbClass)\n             .not.toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.START);\n         expect(mockAdapter.removeThumbClass)\n             .not.toHaveBeenCalledWith(\n                 cssClasses.THUMB_WITH_INDICATOR, Thumb.END);\n       });\n  });\n\n  describe('events: ', () => {\n    it('does not handle secondary pointer events', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        value: 50,\n      });\n      foundation.handlePointerdown(createMouseEvent('mouseEvent', {\n                                     button: 1,  // Non-primary\n                                     clientX: 20,\n                                   }) as PointerEvent);\n\n      expect(mockAdapter.emitInputEvent).not.toHaveBeenCalled();\n      expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n    });\n\n    it('single point slider: fires `input` and `change` events for value changes',\n       () => {\n         const {foundation, mockAdapter} = setUpAndInit({\n           value: 20,\n           isDiscrete: true,\n         });\n\n         foundation.handleDown(createMouseEvent('mousedown', {\n           clientX: 20,\n         }));\n         expect(mockAdapter.emitInputEvent).not.toHaveBeenCalled();\n         expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 40,\n         }));\n         expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(40, Thumb.END);\n         expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n\n         foundation.handleMove(createMouseEvent('mousemove', {\n           clientX: 55,\n         }));\n         expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(55, Thumb.END);\n         expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n\n         mockAdapter.emitInputEvent.calls.reset();\n         foundation.handleUp();\n         expect(mockAdapter.emitInputEvent).not.toHaveBeenCalled();\n         // `change` event should only be fired when value has been committed\n         // (on pointer up).\n         expect(mockAdapter.emitChangeEvent)\n             .toHaveBeenCalledWith(55, Thumb.END);\n       });\n\n    it('range slider: fires `input`/`change` events on start thumb', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 20,\n        value: 50,\n        isRange: true,\n        isDiscrete: true,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 14,\n      }));\n      expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(14, Thumb.START);\n      expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n\n      foundation.handleUp();\n      expect(mockAdapter.emitChangeEvent).toHaveBeenCalledWith(14, Thumb.START);\n    });\n\n    it('range slider: fires `input`/`change` events on end thumb', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 20,\n        value: 50,\n        isRange: true,\n        isDiscrete: true,\n      });\n\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 50,\n      }));\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 77,\n      }));\n      expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(77, Thumb.END);\n      expect(mockAdapter.emitChangeEvent).not.toHaveBeenCalled();\n\n      foundation.handleUp();\n      expect(mockAdapter.emitChangeEvent).toHaveBeenCalledWith(77, Thumb.END);\n    });\n\n    it('fires `change` and `input` events on input change', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 20,\n        value: 50,\n        isRange: true,\n        isDiscrete: true,\n      });\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.START).and.returnValue(5);\n      foundation.handleInputChange(Thumb.START);\n      expect(mockAdapter.emitChangeEvent).toHaveBeenCalledWith(5, Thumb.START);\n      expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(5, Thumb.START);\n\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      mockAdapter.getInputValue.withArgs(Thumb.END).and.returnValue(60);\n      foundation.handleInputChange(Thumb.END);\n      expect(mockAdapter.emitChangeEvent).toHaveBeenCalledWith(60, Thumb.END);\n      expect(mockAdapter.emitInputEvent).toHaveBeenCalledWith(60, Thumb.END);\n    });\n\n    it('fires `dragStart`/`dragEnd` events across drag interaction', () => {\n      const {foundation, mockAdapter} = setUpAndInit({\n        valueStart: 20,\n        value: 50,\n        isRange: true,\n        isDiscrete: true,\n      });\n      foundation.handleDown(createMouseEvent('mousedown', {\n        clientX: 20,\n      }));\n      // Move thumb to value 5...\n      foundation.handleMove(createMouseEvent('mousemove', {\n        clientX: 5,\n      }));\n      foundation.handleUp();\n\n      expect(mockAdapter.emitDragStartEvent)\n          .toHaveBeenCalledWith(20, Thumb.START);\n      expect(mockAdapter.emitDragStartEvent).toHaveBeenCalledTimes(1);\n      expect(mockAdapter.emitDragEndEvent).toHaveBeenCalledWith(5, Thumb.START);\n      expect(mockAdapter.emitDragEndEvent).toHaveBeenCalledTimes(1);\n    });\n  });\n});\n\nfunction setUpTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCSliderFoundation);\n  return {foundation, mockAdapter};\n}\n\n/*\n * Sets up foundation, mock adapter, and calls Foundation#init with the given\n * initialization options.\n * By default, sets up a continuous slider with the following properties:\n * - min: 0\n * - max: 100\n * - rect: {left: 0, right: 100, width: 100}\n */\nfunction setUpAndInit({\n  value,\n  valueStart,\n  min,\n  max,\n  minRange,\n  rect,\n  isDiscrete,\n  isDisabled,\n  step,\n  hasTickMarks,\n  isRange,\n  isRTL,\n  hideFocusStylesForPointerEvents,\n}: {\n  value?: number,\n  valueStart?: number,\n  min?: number,\n  max?: number,\n  minRange?: number,\n  rect?: Partial<ClientRect>,\n  isDiscrete?: boolean,\n  isDisabled?: boolean,\n  step?: number,\n  hasTickMarks?: boolean,\n  isRange?: boolean,\n  isRTL?: boolean,\n  hideFocusStylesForPointerEvents?: boolean,\n} = {}) {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCSliderFoundation);\n  mockAdapter.hasClass.withArgs(cssClasses.DISCRETE)\n      .and.returnValue(Boolean(isDiscrete));\n  mockAdapter.hasClass.withArgs(cssClasses.DISABLED)\n      .and.returnValue(Boolean(isDisabled));\n  mockAdapter.hasClass.withArgs(cssClasses.TICK_MARKS)\n      .and.returnValue(Boolean(hasTickMarks));\n  mockAdapter.hasClass.withArgs(cssClasses.RANGE)\n      .and.returnValue(Boolean(isRange));\n\n  mockAdapter.getInputAttribute\n      .withArgs(attributes.INPUT_MIN, isRange ? Thumb.START : Thumb.END)\n      .and.returnValue(\n          String(min !== undefined ? min : 0),\n      );\n  mockAdapter.getInputAttribute.withArgs(attributes.INPUT_MAX, Thumb.END)\n      .and.returnValue(String(max !== undefined ? max : 100));\n\n  mockAdapter.getAttribute.withArgs(attributes.DATA_MIN_RANGE)\n      .and.returnValue(minRange !== undefined ? String(minRange) : null);\n\n  valueStart = valueStart !== undefined ? valueStart : 20;\n  value = value !== undefined ? value : 50;\n  if (isRange) {\n    mockAdapter.getInputAttribute.withArgs(attributes.INPUT_VALUE, Thumb.START)\n        .and.returnValue(String(valueStart));\n    mockAdapter.getInputAttribute.withArgs(attributes.INPUT_VALUE, Thumb.END)\n        .and.returnValue(String(value));\n  } else {\n    mockAdapter.getInputAttribute.withArgs(attributes.INPUT_VALUE, Thumb.END)\n        .and.returnValue(String(value));\n  }\n\n  mockAdapter.getInputAttribute\n      .withArgs(attributes.INPUT_STEP, Thumb.END)\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'number' is\n      //  not assignable to parameter of type 'string'.\n      .and.returnValue(step || numbers.STEP_SIZE);\n\n  (mockAdapter.shouldHideFocusStylesForPointerEvents as jasmine.Spy)\n      .and.returnValue(hideFocusStylesForPointerEvents ?? false);\n\n  foundation.init();\n\n  if (isRTL) {\n    mockAdapter.isRTL.and.returnValue(true);\n  }\n  // TODO: Wait until b/208710526 is fixed, then remove this autogenerated error\n  // suppression.\n  //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n  //  'Partial<ClientRect>' is not assignable to parameter of type 'DOMRect'.\n  mockAdapter.getBoundingClientRect.and.returnValue(rect || {\n    left: 0,\n    right: 100,\n    width: 100,\n  });\n  if (isRTL) {\n    mockAdapter.getThumbBoundingClientRect.withArgs(Thumb.END).and.returnValue(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n        //  number; right: number; width: number; }' is not assignable to\n        //  parameter of type 'DOMRect'.\n        {left: 100 - value - 5, right: 100 - value + 5, width: 10});\n  } else {\n    mockAdapter.getThumbBoundingClientRect.withArgs(Thumb.END).and.returnValue(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n        //  number; right: number; width: number; }' is not assignable to\n        //  parameter of type 'DOMRect'.\n        {left: value - 5, right: value + 5, width: 10});\n  }\n  if (isRange) {\n    if (isRTL) {\n      mockAdapter.getThumbBoundingClientRect\n          .withArgs(Thumb.START)\n          // TODO: Wait until b/208710526 is fixed, then remove this\n          // autogenerated error suppression.\n          //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n          //  number; right: number; width: number; }' is not assignable to\n          //  parameter of type 'DOMRect'.\n          .and.returnValue({\n            left: 100 - valueStart - 5,\n            right: 100 - valueStart + 5,\n            width: 10\n          });\n    } else {\n      mockAdapter.getThumbBoundingClientRect.withArgs(Thumb.START)\n          .and.returnValue(\n              // TODO: Wait until b/208710526 is fixed, then remove this\n              // autogenerated error suppression.\n              //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{\n              //  left: number; right: number; width: number; }' is not\n              //  assignable to parameter of type 'DOMRect'.\n              {left: valueStart - 5, right: valueStart + 5, width: 10});\n    }\n    mockAdapter.getThumbKnobWidth.withArgs(Thumb.START).and.returnValue(10);\n    mockAdapter.getThumbKnobWidth.withArgs(Thumb.END).and.returnValue(10);\n  }\n  if (isDiscrete) {\n    mockAdapter.getValueIndicatorContainerWidth.withArgs(Thumb.END)\n        .and.returnValue(30);\n  }\n\n  foundation.layout();\n  jasmine.clock().tick(1);  // Tick for RAF from UI update.\n\n  return {foundation, mockAdapter};\n}\n\ninterface WithHasTickMarksAndDiscrete {\n  hasTickMarks: boolean;\n  setHasTickMarks(hasTickMarks: boolean): void;\n  isDiscrete: boolean;\n  setIsDiscrete(hasTickMarks: boolean): void;\n}\n"
  },
  {
    "path": "packages/mdc-slider/test/mdc-slider.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-slider.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-slider/test/slider-theme.test.scss",
    "content": "@use 'true' as test;\n@use '../slider-theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@include test.describe('slider-theme') {\n  @include test.describe('theme()') {\n    @include test.it('emits no styles without theme') {\n      $theme: ();\n\n      @include test.assert {\n        @include test.output {\n          @include slider-theme.theme($theme);\n        }\n\n        // stylelint-disable block-no-empty -- testing for empty\n        @include test.expect {\n        }\n        // stylelint-enable\n      }\n    }\n\n    @include test.it('emits custom properties with default theme') {\n      @include test.assert {\n        $theme: slider-theme.$light-theme;\n\n        @include test.output {\n          @include slider-theme.theme($theme);\n        }\n\n        // stylelint-disable color-hex-length --\n        // prettier-ignore\n        @include test.expect {\n          --mdc-slider-active-track-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-active-track-height: 6px;\n          --mdc-slider-active-track-shape: 9999px;\n          --mdc-slider-disabled-active-track-color: var(--mdc-theme-on-surface, #000);\n          --mdc-slider-disabled-handle-color: var(--mdc-theme-on-surface, #000);\n          --mdc-slider-disabled-inactive-track-color: var(--mdc-theme-on-surface, #000);\n          --mdc-slider-focus-handle-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-handle-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-handle-elevation: 1;\n          --mdc-slider-handle-height: 20px;\n          --mdc-slider-handle-shadow-color: black;\n          --mdc-slider-handle-shape: 50%;\n          --mdc-slider-handle-width: 20px;\n          --mdc-slider-hover-handle-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-inactive-track-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-inactive-track-height: 4px;\n          --mdc-slider-inactive-track-shape: 9999px;\n          --mdc-slider-label-container-color: #666666;\n          --mdc-slider-label-label-text-color: var(--mdc-theme-on-primary, #fff);\n          --mdc-slider-label-label-text-font: Roboto, sans-serif;\n          --mdc-slider-label-label-text-size: 0.875rem;\n          --mdc-slider-label-label-text-line-height: 1.375rem;\n          --mdc-slider-label-label-text-tracking: 0.0071428571em;\n          --mdc-slider-label-label-text-weight: 500;\n          --mdc-slider-with-overlap-handle-outline-color: #fff;\n          --mdc-slider-with-overlap-handle-outline-width: 1px;\n          --mdc-slider-with-tick-marks-active-container-color: var(--mdc-theme-on-primary, #fff);\n          --mdc-slider-with-tick-marks-active-container-opacity: 0.6;\n          --mdc-slider-with-tick-marks-container-shape: 50%;\n          --mdc-slider-with-tick-marks-container-size: 2px;\n          --mdc-slider-with-tick-marks-disabled-container-color: var(--mdc-theme-on-surface, #000);\n          --mdc-slider-with-tick-marks-inactive-container-color: var(--mdc-theme-primary, #6200ee);\n          --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6;\n        }\n        // stylelint-enable\n      }\n    }\n\n    @include test.it('emits custom properties with fully populated theme') {\n      @include test.assert {\n        $theme: (\n          active-track-color: blue,\n          active-track-height: 6px,\n          active-track-shape: 9999px,\n          disabled-active-track-color: grey,\n          disabled-handle-color: grey,\n          disabled-handle-elevation: 3,\n          disabled-inactive-track-color: grey,\n          focus-handle-color: blue,\n          handle-color: blue,\n          handle-elevation: 1,\n          handle-height: 20px,\n          handle-shadow-color: black,\n          handle-shape: 50%,\n          handle-width: 20px,\n          hover-handle-color: blue,\n          inactive-track-color: blue,\n          inactive-track-height: 4px,\n          inactive-track-shape: 9999px,\n          label-container-color: blue,\n          label-container-elevation: 2,\n          label-container-height: 20px,\n          label-label-text-color: blue,\n          label-label-text-font: 'Comic Sans',\n          label-label-text-size: 16px,\n          label-label-text-line-height: 1em,\n          label-label-text-tracking: 0.01em,\n          label-label-text-weight: 500,\n          pressed-handle-color: blue,\n          track-elevation: 5,\n          with-overlap-handle-outline-color: #fff,\n          with-overlap-handle-outline-width: 1px,\n          with-tick-marks-active-container-color: blue,\n          with-tick-marks-active-container-opacity: 0.5,\n          with-tick-marks-container-shape: 50%,\n          with-tick-marks-container-size: 2px,\n          with-tick-marks-disabled-container-color: grey,\n          with-tick-marks-inactive-container-color: grey,\n          with-tick-marks-inactive-container-opacity: 0.75,\n          focus-state-layer-opacity: 0.5,\n          hover-state-layer-color: blue,\n          hover-state-layer-opacity: 0.5,\n          pressed-state-layer-opacity: 0.5,\n        );\n\n        @include test.output {\n          @include slider-theme.theme($theme);\n        }\n\n        @include test.expect {\n          --mdc-slider-active-track-color: blue;\n          --mdc-slider-active-track-height: 6px;\n          --mdc-slider-active-track-shape: 9999px;\n          --mdc-slider-disabled-active-track-color: grey;\n          --mdc-slider-disabled-handle-color: grey;\n          --mdc-slider-disabled-handle-elevation: 3;\n          --mdc-slider-disabled-inactive-track-color: grey;\n          --mdc-slider-focus-handle-color: blue;\n          --mdc-slider-handle-color: blue;\n          --mdc-slider-handle-elevation: 1;\n          --mdc-slider-handle-height: 20px;\n          --mdc-slider-handle-shadow-color: black;\n          --mdc-slider-handle-shape: 50%;\n          --mdc-slider-handle-width: 20px;\n          --mdc-slider-hover-handle-color: blue;\n          --mdc-slider-inactive-track-color: blue;\n          --mdc-slider-inactive-track-height: 4px;\n          --mdc-slider-inactive-track-shape: 9999px;\n          --mdc-slider-label-container-color: blue;\n          --mdc-slider-label-container-elevation: 2;\n          --mdc-slider-label-container-height: 20px;\n          --mdc-slider-label-label-text-color: blue;\n          --mdc-slider-label-label-text-font: Comic Sans;\n          --mdc-slider-label-label-text-size: 16px;\n          --mdc-slider-label-label-text-line-height: 1em;\n          --mdc-slider-label-label-text-tracking: 0.01em;\n          --mdc-slider-label-label-text-weight: 500;\n          --mdc-slider-pressed-handle-color: blue;\n          --mdc-slider-track-elevation: 5;\n          --mdc-slider-with-overlap-handle-outline-color: #fff;\n          --mdc-slider-with-overlap-handle-outline-width: 1px;\n          --mdc-slider-with-tick-marks-active-container-color: blue;\n          --mdc-slider-with-tick-marks-active-container-opacity: 0.5;\n          --mdc-slider-with-tick-marks-container-shape: 50%;\n          --mdc-slider-with-tick-marks-container-size: 2px;\n          --mdc-slider-with-tick-marks-disabled-container-color: grey;\n          --mdc-slider-with-tick-marks-inactive-container-color: grey;\n          --mdc-slider-with-tick-marks-inactive-container-opacity: 0.75;\n          --mdc-slider-focus-state-layer-opacity: 0.5;\n          --mdc-slider-hover-state-layer-color: blue;\n          --mdc-slider-hover-state-layer-opacity: 0.5;\n          --mdc-slider-pressed-state-layer-opacity: 0.5;\n        }\n      }\n    }\n  }\n\n  @include test.describe('theme-styles()') {\n    @include test.it('emits custom properties') {\n      $theme: (\n        active-track-color: yellow,\n        handle-color: blue,\n        label-label-text-font: 'Comic Sans',\n      );\n\n      @include test.assert {\n        @include test.output {\n          @include slider-theme.theme-styles($theme);\n        }\n\n        // stylelint-disable selector-class-pattern -- testing 'mdc-*''\n        // spot checking here as theme-styles emits many styles even with an empty theme.\n        @include test.contains {\n          .mdc-slider__track--active_fill {\n            border-color: yellow;\n            border-color: var(--mdc-slider-active-track-color, yellow);\n          }\n\n          .mdc-slider__thumb-knob {\n            background-color: blue;\n            background-color: var(--mdc-slider-handle-color, blue);\n            border-color: blue;\n            border-color: var(--mdc-slider-handle-color, blue);\n          }\n\n          .mdc-slider__value-indicator-text {\n            font-family: Comic Sans;\n            font-family: var(--mdc-slider-label-label-text-font, 'Comic Sans');\n          }\n        }\n        // stylelint-enable\n      }\n    }\n\n    @include test.it('emits styles for track height using custom properties') {\n      @include test.assert {\n        @include test.output {\n          @include slider-theme.theme-styles(\n            (\n              'active-track-height': 42px,\n              'inactive-track-height': 7px,\n            )\n          );\n        }\n\n        // stylelint-disable selector-class-pattern -- testing 'mdc-*''\n        @include test.contains {\n          .mdc-slider__track--active {\n            top: calc(\n              (\n                  var(--mdc-slider-inactive-track-height, 7px) -\n                    var(--mdc-slider-active-track-height, 42px)\n                ) / 2\n            );\n          }\n\n          .mdc-slider__track--active_fill {\n            border-top-width: 42px;\n            border-top-width: var(--mdc-slider-active-track-height, 42px);\n          }\n        }\n        // stylelint-enable\n      }\n    }\n\n    @include test.it('emits no styles with feature targeting any') {\n      $theme: slider-theme.$light-theme;\n\n      @include test.assert {\n        @include test.output {\n          @include slider-theme.theme-styles($theme, feature-targeting.any());\n        }\n\n        // stylelint-disable block-no-empty -- testing for empty\n        @include test.expect {\n        }\n        // stylelint-enable\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-slider/types.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/** Tick mark enum, for discrete sliders. */\nexport enum TickMark {\n  ACTIVE,\n  INACTIVE,\n}\n\n/**\n * Thumb types: range slider has two thumbs (START, END) whereas single point\n * slider only has one thumb (END).\n */\nexport enum Thumb {\n  // Thumb at start of slider (e.g. in LTR mode, left thumb on range slider).\n  START = 1,\n  // Thumb at end of slider (e.g. in LTR mode, right thumb on range slider,\n  // or only thumb on single point slider).\n  END,\n}\n\n/** Interface for `detail` of slider custom change and input events. */\nexport interface MDCSliderChangeEventDetail {\n  // The new value after change.\n  value: number;\n\n  // The thumb for which the value has changed:\n  // - For single point slider, this will always be Thumb.END.\n  // - For range slider, either Thumb.START or Thumb.END.\n  thumb: Thumb;\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-snackbar/README.md",
    "content": "<!--docs:\ntitle: \"Snackbars\"\nlayout: detail\nsection: components\nexcerpt: \"Snackbars provide brief messages about app processes at the bottom of the screen.\"\niconId: toast\npath: /catalog/snackbars/\n-->\n\n# Snackbars\n\nSnackbars provide brief messages about app processes at the bottom of the screen.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-snackbar\">Material Design guidelines: Snackbars</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/snackbar\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/snackbar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<aside class=\"mdc-snackbar\">\n  <div class=\"mdc-snackbar__surface\" role=\"status\" aria-relevant=\"additions\">\n    <div class=\"mdc-snackbar__label\" aria-atomic=\"false\">\n      Can't send photo. Retry in 5 seconds.\n    </div>\n    <div class=\"mdc-snackbar__actions\" aria-atomic=\"true\">\n      <button type=\"button\" class=\"mdc-button mdc-snackbar__action\">\n        <div class=\"mdc-button__ripple\"></div>\n        <span class=\"mdc-button__label\">Retry</span>\n      </button>\n    </div>\n  </div>\n</aside>\n```\n\n### Styles\n\n```scss\n@use \"@material/snackbar/mdc-snackbar\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSnackbar} from '@material/snackbar';\nconst snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned _below_ the label instead of alongside it. This can be accomplished by adding the `mdc-snackbar--stacked` modifier class to the root element:\n\n```html\n<aside class=\"mdc-snackbar mdc-snackbar--stacked\">\n  ...\n</aside>\n```\n\nAlternatively, you can call the `layout-stacked` mixin from Sass:\n\n```scss\n@use \"@material/snackbar\";\n\n@media (max-width: snackbar.$mobile-breakpoint) {\n  .my-snackbar {\n    @include snackbar.layout-stacked;\n  }\n}\n```\n\n### Leading (tablet and desktop only)\n\nBy default, snackbars are centered horizontally within the viewport.\n\nOn larger screens, they can optionally be displayed on the _leading_ edge of the screen (the left side in LTR, or the right side in RTL) by adding the `mdc-snackbar--leading` modifier class to the root element:\n\n```html\n<aside class=\"mdc-snackbar mdc-snackbar--leading\">\n  ...\n</aside>\n```\n\nAlternatively, you can call the `position-leading` mixin from Sass:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n  .my-snackbar {\n    @include snackbar.position-leading;\n  }\n}\n```\n\n### Wide (tablet and desktop only)\n\nTo increase the margins between the snackbar and the viewport on larger screens, call the `viewport-margin` mixin inside a media query:\n\n```scss\n@media (min-width: snackbar.$mobile-breakpoint) {\n  .my-snackbar {\n    @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);\n  }\n}\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-snackbar` | Mandatory. Container for the snackbar elements.\n`mdc-snackbar__label` | Mandatory. Message text.\n`mdc-snackbar__actions` | Optional. Wraps the action button/icon elements, if present.\n`mdc-snackbar__action` | Optional. The action button.\n`mdc-snackbar__dismiss` | Optional. The dismiss (\"X\") icon.\n`mdc-snackbar--opening` | Optional. Applied automatically when the snackbar is in the process of animating open.\n`mdc-snackbar--open` | Optional. Indicates that the snackbar is open and visible.\n`mdc-snackbar--closing` | Optional. Applied automatically when the snackbar is in the process of animating closed.\n`mdc-snackbar--leading` | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`mdc-snackbar--stacked` | Optional. Positions the action button/icon below the label instead of alongside it.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the snackbar.\n`label-ink-color($color)` | Sets the color of the snackbar's label text.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to snackbar surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the snackbar.\n`elevation($z-index)` | Sets the elevation of the snackbar.\n`viewport-margin($margin)` | Sets the distance between the snackbar and the viewport.\n`z-index($z-index)` | Sets the `z-index` of the snackbar.\n`position-leading()` | Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.\n`layout-stacked()` | Positions the action button/icon below the label instead of alongside it.\n\n> **NOTE**: The `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements can be further customized with [`mdc-button`](../mdc-button) and [`mdc-icon-button`](../mdc-icon-button) mixins.\n\n## JavaScript API\n\n### `MDCSnackbar` Properties\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Gets whether the snackbar is currently open.\n`timeoutMs` | `number` | Gets/sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n`closeOnEscape` | `boolean` | Gets/sets whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key. Defaults to `true`.\n`labelText` | `string` | Gets/sets the `textContent` of the label element.\n`actionButtonText` | `string` | Gets/sets the `textContent` of the action button element.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label. See [Screen Readers](#screen-readers) below for more information.\n\n### `MDCSnackbar` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the snackbar.\n`close(reason: string=) => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation.\n`MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation.\n`MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n`MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or `undefined`).\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n#### `MDCSnackbarAdapter` Methods\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`announce() => void` | Announces the snackbar's label text to screen reader users.\n`notifyOpening() => void` | Broadcasts an event denoting that the snackbar has just started opening.\n`notifyOpened() => void` | Broadcasts an event denoting that the snackbar has finished opening.\n`notifyClosing(reason: string) => void` | Broadcasts an event denoting that the snackbar has just started closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n`notifyClosed(reason: string) => void` | Broadcasts an event denoting that the snackbar has finished closing. If a non-empty `reason` is passed, the event's `detail` object should include its value in the `reason` property.\n\n#### `MDCSnackbarFoundation` Methods\n\nMethod Signature | Description\n--- | ---\n`open()` | Opens the snackbar.\n`close(action: string)` | Closes the snackbar, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the snackbar is open.\n`getTimeoutMs() => number` | Returns the automatic dismiss timeout in milliseconds.\n`setTimeoutMs(timeoutMs: number)` | Sets the automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown.\n`getCloseOnEscape() => boolean` | Returns whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key.\n`setCloseOnEscape(closeOnEscape: boolean) => void` | Sets whether the snackbar closes when it is focused and the user presses the <kbd>ESC</kbd> key.\n`handleKeyDown(event: KeyEvent)` | Handles `keydown` events on or within the snackbar's root element.\n`handleActionButtonClick(event: MouseEvent)` | Handles `click` events on or within the action button.\n`handleActionIconClick(event: MouseEvent)` | Handles `click` events on or within the dismiss icon.\n\n#### Event Handlers\n\nWhen wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:\n\nEvent | Target | Foundation Handler | Register | Deregister\n--- | --- | --- | --- | ---\n`keydown` | `.mdc-snackbar` | `handleKeyDown` | During initialization | During destruction\n`click` | `.mdc-snackbar__action` | `handleActionButtonClick` | During initialization | During destruction\n`click` | `.mdc-snackbar__dismiss` | `handleActionIconClick` | During initialization | During destruction\n\n#### The Util API\n\nExternal frameworks and libraries can use the following utility methods from the `util` module when implementing their own component.\n\nMethod Signature | Description\n--- | ---\n`announce(ariaEl: Element, labelEl?: Element) => void` | Announces the label text to screen reader users.\n\n> Alternatively, frameworks can use [Closure Library's `goog.a11y.aria.Announcer#say()` method](https://github.com/google/closure-library/blob/bee9ced776b4700e8076a3466bd9d3f9ade2fb54/closure/goog/a11y/aria/announcer.js#L80).\n\n## Accessibility\n\n### Screen Readers\n\nSnackbars automatically announce their label text to screen reader users with a [\"polite\" notification](https://www.w3.org/TR/wai-aria-1.1/#aria-live) when `open()` is called.\n\nHowever, screen readers only announce [ARIA Live Regions](https://mdn.io/ARIA_Live_Regions) when the element's `textContent` _changes_, so MDC Snackbar provides a `util.announce()` method to temporarily clear and then restore the label element's `textContent`.\n\n> **NOTE**: Setting `labelText` while the snackbar is open will cause screen readers to announce the new label.\n\n`util.announce()` supports the latest versions of the following screen readers and browsers:\n\n* [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)\n* [NVDA](https://www.nvaccess.org/):\n    - Chrome\n    - Firefox\n    - IE 11\n* [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS):\n    - Chrome\n    - Firefox\n    - IE 11\n\nmacOS VoiceOver is _not_ supported at this time.\n\n### Dismiss Icon\n\nSnackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.\n\n### Dismiss Key\n\nPressing the <kbd>ESC</kbd> key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.\n\nTo disable this behavior, set `closeOnEscape` to `false`.\n\n### No JS Ripples\n\nThe `mdc-snackbar__action` and `mdc-snackbar__dismiss` elements should _**not**_ have JavaScript-enabled [`MDCRipple`](../mdc-ripple) behavior.\n\nWhen combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.\n"
  },
  {
    "path": "packages/mdc-snackbar/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-snackbar/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/touch-target\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/touch-target\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/button\" as mdc-button-*;\n@forward \"@material/icon-button\" as mdc-icon-button-*;\n@forward \"./index\" as mdc-snackbar-*;\n"
  },
  {
    "path": "packages/mdc-snackbar/_mixins.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './snackbar' or './snackbar-theme' instead.\n@forward './snackbar' show core-styles;\n@forward './snackbar-theme' show fill-color, label-ink-color, shape-radius, min-width, max-width, elevation, viewport-margin, z-index, position-leading, layout-stacked;\n"
  },
  {
    "path": "packages/mdc-snackbar/_snackbar-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/button/button-text-theme';\n@use '@material/elevation/elevation-theme';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use '@material/typography/typography';\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n\n$fill-color: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  80%\n) !default;\n$label-ink-color: rgba(\n  theme-color.prop-value(surface),\n  theme-color.text-emphasis(high)\n) !default;\n$action-ink-color: #bb86fc !default;\n$dismiss-ink-color: rgba(\n  theme-color.prop-value(surface),\n  theme-color.text-emphasis(high)\n) !default;\n\n$label-type-scale: body2 !default;\n$dismiss-icon-size: 18px !default;\n$dismiss-button-size: 36px !default;\n$min-width: 344px !default;\n$max-width: 672px !default;\n$mobile-breakpoint: 480px !default;\n$viewport-margin-narrow: 8px !default;\n$viewport-margin-wide: 24px !default;\n$padding: 8px !default;\n\n$elevation: 6 !default;\n$shape-radius: small !default; // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n$z-index: 8 !default; // One above mdc-dialog\n\n// These variables need to be kept in sync with the values in constants.js.\n$enter-duration: 150ms !default;\n$exit-duration: 75ms !default;\n\n$custom-property-prefix: 'snackbar';\n\n$light-theme: (\n  action-focus-label-text-color: null,\n  action-focus-state-layer-color: null,\n  action-focus-state-layer-opacity: 0.12,\n  action-hover-label-text-color: null,\n  action-hover-state-layer-color: null,\n  action-hover-state-layer-opacity: 0.04,\n  action-label-text-color: null,\n  action-label-text-font: null,\n  action-label-text-size: null,\n  action-label-text-tracking: null,\n  action-label-text-weight: null,\n  action-pressed-label-text-color: null,\n  action-pressed-state-layer-color: null,\n  action-pressed-state-layer-opacity: 0.1,\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  icon-color: null,\n  icon-focus-icon-color: null,\n  icon-focus-state-layer-color: null,\n  icon-focus-state-layer-opacity: 0.12,\n  icon-hover-icon-color: null,\n  icon-hover-state-layer-color: null,\n  icon-hover-state-layer-opacity: 0.04,\n  icon-pressed-icon-color: null,\n  icon-pressed-state-layer-color: null,\n  icon-pressed-state-layer-opacity: 0.1,\n  icon-size: 24px,\n  supporting-text-color: theme-color.$on-surface,\n  supporting-text-font: typography.get-font(body2),\n  supporting-text-line-height: typography.get-line-height(body2),\n  supporting-text-size: typography.get-size(body2),\n  supporting-text-tracking: typography.get-tracking(body2),\n  supporting-text-weight: typography.get-weight(body2),\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolver: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  .mdc-snackbar__action {\n    @include button-text-theme.theme-styles(\n      (\n        focus-label-text-color: map.get($theme, action-focus-label-text-color),\n        focus-state-layer-color: map.get($theme, action-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, action-focus-state-layer-opacity),\n        hover-label-text-color: map.get($theme, action-hover-label-text-color),\n        hover-state-layer-color: map.get($theme, action-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, action-hover-state-layer-opacity),\n        label-text-color: map.get($theme, action-label-text-color),\n        label-text-font: map.get($theme, action-label-text-font),\n        label-text-size: map.get($theme, action-label-text-size),\n        label-text-tracking: map.get($theme, action-label-text-tracking),\n        label-text-weight: map.get($theme, action-label-text-weight),\n        pressed-label-text-color:\n          map.get($theme, action-pressed-label-text-color),\n        pressed-state-layer-color:\n          map.get($theme, action-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, action-pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  .mdc-snackbar__dismiss {\n    @include icon-button-theme.theme-styles(\n      (\n        icon-size: map.get($theme, icon-size),\n        focus-icon-color: map.get($theme, icon-focus-icon-color),\n        focus-state-layer-color: map.get($theme, icon-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, icon-focus-state-layer-opacity),\n        hover-icon-color: map.get($theme, icon-hover-icon-color),\n        hover-state-layer-color: map.get($theme, icon-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, icon-hover-state-layer-opacity),\n        icon-color: map.get($theme, icon-color),\n        pressed-icon-color: map.get($theme, icon-pressed-icon-color),\n        pressed-state-layer-color:\n          map.get($theme, icon-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, icon-pressed-state-layer-opacity),\n      )\n    );\n  }\n\n  @include fill-color(map.get($theme, container-color));\n  @include shape-radius(map.get($theme, container-shape));\n  @include _container-elevation(\n    $resolver,\n    map.get($theme, container-elevation),\n    map.get($theme, container-shadow-color)\n  );\n  @include label-ink-color(map.get($theme, supporting-text-color));\n  @include _supporting-text-typography(\n    (\n      font: map.get($theme, supporting-text-font),\n      size: map.get($theme, supporting-text-size),\n      tracking: map.get($theme, supporting-text-tracking),\n      weight: map.get($theme, supporting-text-weight),\n      line-height: map.get($theme, supporting-text-line-height),\n    )\n  );\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  @return map.merge(\n    $theme,\n    _resolve-theme-elevation(\n      $theme,\n      map.get($resolvers, elevation),\n      container-elevation\n    )\n  );\n}\n\n@function _resolve-theme-elevation($theme, $resolver, $keys...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $key in $keys {\n    // Resolve the value for each state key.\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: map.get($theme, $key),\n      $shadow-color: map.get($theme, container-shadow-color)\n    );\n\n    // Update the theme with the resolved value.\n    $theme: map.set($theme, $key, $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-snackbar__surface {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin label-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-snackbar__label {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  .mdc-snackbar__surface {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n@mixin min-width(\n  $min-width,\n  $mobile-breakpoint: $mobile-breakpoint,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-snackbar__surface {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: $min-width;\n\n      // The first media query ensures that snackbars are always 100% width on mobile devices, as required by the spec.\n      // The second media query prevents snackbars from being wider than the viewport for large min-width values.\n      @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n        min-width: 100%;\n      }\n    }\n  }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-snackbar__surface {\n    @include feature-targeting.targets($feat-structure) {\n      max-width: $max-width;\n    }\n  }\n}\n\n@mixin elevation($z-index, $query: feature-targeting.all()) {\n  .mdc-snackbar__surface {\n    @include elevation-mixins.elevation($z-index, $query: $query);\n  }\n}\n\n@mixin viewport-margin($margin, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin: $margin;\n  }\n}\n\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    z-index: $z-index;\n  }\n}\n\n@mixin position-leading($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    justify-content: flex-start;\n  }\n}\n\n@mixin layout-stacked($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-snackbar__label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, 16px, 8px);\n      padding-bottom: 12px;\n    }\n  }\n\n  .mdc-snackbar__surface {\n    @include feature-targeting.targets($feat-structure) {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n\n  .mdc-snackbar__actions {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-end;\n      margin-bottom: $padding;\n    }\n  }\n}\n\n@mixin _container-elevation($resolver, $elevation, $shadow-color) {\n  $elevation-resolver: map.get($resolver, elevation);\n\n  @include elevation-theme.with-resolver(\n    $elevation-resolver,\n    $elevation: $elevation,\n    $shadow-color: $shadow-color\n  );\n}\n\n@mixin _supporting-text-typography($typography-map) {\n  $font: map.get($typography-map, font);\n  $size: map.get($typography-map, size);\n  $tracking: map.get($typography-map, tracking);\n  $weight: map.get($typography-map, weight);\n  $line-height: map.get($typography-map, line-height);\n\n  .mdc-snackbar__label {\n    @include theme.property(letter-spacing, $tracking);\n    @include theme.property(font-size, $size);\n    @include theme.property(font-family, $font);\n    @include theme.property(font-weight, $weight);\n    @include theme.property(line-height, $line-height);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/_snackbar.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/button/button-theme';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use './snackbar-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include snackbar-theme.fill-color(\n    snackbar-theme.$fill-color,\n    $query: $query\n  );\n  @include snackbar-theme.label-ink-color(\n    snackbar-theme.$label-ink-color,\n    $query: $query\n  );\n  @include snackbar-theme.min-width(snackbar-theme.$min-width, $query: $query);\n  @include snackbar-theme.max-width(snackbar-theme.$max-width, $query: $query);\n  @include snackbar-theme.elevation(snackbar-theme.$elevation, $query: $query);\n  @include snackbar-theme.shape-radius(\n    snackbar-theme.$shape-radius,\n    $query: $query\n  );\n  @include static-styles($query);\n\n  .mdc-snackbar {\n    @include snackbar-theme.z-index(snackbar-theme.$z-index, $query: $query);\n    @include snackbar-theme.viewport-margin(\n      snackbar-theme.$viewport-margin-narrow,\n      $query: $query\n    );\n  }\n\n  .mdc-snackbar--stacked {\n    @include snackbar-theme.layout-stacked($query: $query);\n  }\n\n  .mdc-snackbar--leading {\n    @include snackbar-theme.position-leading($query: $query);\n  }\n\n  .mdc-snackbar__label {\n    @include typography.typography(\n      snackbar-theme.$label-type-scale,\n      $query: $query\n    );\n  }\n\n  .mdc-snackbar__action {\n    @include button-theme.ink-color(\n      snackbar-theme.$action-ink-color,\n      $query: $query\n    );\n    @include ripple-theme.states(\n      snackbar-theme.$action-ink-color,\n      $ripple-target: button-theme.$ripple-target,\n      $query: $query\n    );\n  }\n\n  .mdc-snackbar__dismiss {\n    @include icon-button-theme.ink-color(\n      snackbar-theme.$dismiss-ink-color,\n      $query: $query\n    );\n  }\n\n  // Two selectors are needed to increase specificity above `.material-icons`.\n  .mdc-snackbar__dismiss.mdc-snackbar__dismiss {\n    @include icon-button-theme.size(\n      snackbar-theme.$dismiss-button-size,\n      $query: $query\n    );\n    @include feature-targeting.targets($feat-structure) {\n      font-size: snackbar-theme.$dismiss-icon-size;\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-snackbar {\n    @include feature-targeting.targets($feat-structure) {\n      display: none;\n      position: fixed;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n\n      // Ignore mouse events on the root layout element.\n      pointer-events: none;\n\n      // For some reason, iOS Safari displays a tap highlight on the entire snackbar element.\n      // Mobile Safari only supports `rgba` values for this property; named values like\n      // `transparent` are ignored. From Apple's docs:\n      // > This property obeys the alpha value, if specified.\n      // > If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color.\n      // > To disable tap highlighting, set the alpha value to 0 (invisible).\n      // > If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.\n      // See https://github.com/ben-eb/postcss-colormin/issues/1\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n  }\n\n  .mdc-snackbar--opening,\n  .mdc-snackbar--open,\n  .mdc-snackbar--closing {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n    }\n  }\n\n  .mdc-snackbar--open .mdc-snackbar__label,\n  .mdc-snackbar--open .mdc-snackbar__actions {\n    @include feature-targeting.targets($feat-structure) {\n      visibility: visible;\n    }\n  }\n\n  .mdc-snackbar__surface {\n    // 1px border around the snackbar surface for high contrast mode.\n    &::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, 0, snackbar-theme.$padding);\n\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      box-sizing: border-box;\n      transform: scale(0.8);\n      opacity: 0;\n    }\n\n    .mdc-snackbar--open & {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n        opacity: 1;\n        pointer-events: auto; // Allow mouse events on surface element while snackbar is open\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation-functions.enter(\n            opacity,\n            snackbar-theme.$enter-duration\n          ),\n          animation-functions.enter(transform, snackbar-theme.$enter-duration);\n      }\n    }\n\n    .mdc-snackbar--closing & {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n      }\n\n      @include feature-targeting.targets($feat-animation) {\n        transition: animation-functions.exit-permanent(\n          opacity,\n          snackbar-theme.$exit-duration\n        );\n      }\n    }\n  }\n\n  .mdc-snackbar__label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, 16px, snackbar-theme.$padding);\n\n      width: 100%;\n      flex-grow: 1;\n      box-sizing: border-box;\n      margin: 0;\n      visibility: hidden;\n\n      // 14px top/bottom padding needed to make the height 48px.\n      padding-top: 14px;\n      padding-bottom: 14px;\n    }\n  }\n\n  // Used to prevent visual jank when announcing label text to screen readers.\n  // See the `announce()` function in util.js for details.\n  .mdc-snackbar__label::before {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline;\n      content: attr(data-mdc-snackbar-label-text);\n    }\n  }\n\n  .mdc-snackbar__actions {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex-shrink: 0;\n      align-items: center;\n      box-sizing: border-box;\n      visibility: hidden;\n    }\n  }\n\n  .mdc-snackbar__action + .mdc-snackbar__dismiss {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, snackbar-theme.$padding, 0);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/_variables.import.scss",
    "content": "@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-snackbar-* hide mdc-snackbar-core-styles, mdc-snackbar-fill-color, mdc-snackbar-label-ink-color, mdc-snackbar-shape-radius, mdc-snackbar-min-width, mdc-snackbar-max-width, mdc-snackbar-elevation, mdc-snackbar-viewport-margin, mdc-snackbar-z-index, mdc-snackbar-position-leading, mdc-snackbar-layout-stacked;\n"
  },
  {
    "path": "packages/mdc-snackbar/_variables.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import './snackbar-theme' module instead.\n@forward './snackbar-theme' show $fill-color, $label-ink-color, $action-ink-color, $dismiss-ink-color, $label-type-scale, $dismiss-icon-size, $dismiss-button-size, $min-width, $max-width, $mobile-breakpoint, $viewport-margin-narrow, $viewport-margin-wide, $padding, $elevation, $shape-radius, $z-index, $enter-duration, $exit-duration;\n"
  },
  {
    "path": "packages/mdc-snackbar/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSnackbarAdapter {\n  addClass(className: string): void;\n  announce(): void;\n  notifyClosed(reason: string): void;\n  notifyClosing(reason: string): void;\n  notifyOpened(): void;\n  notifyOpening(): void;\n  removeClass(className: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {closest} from '@material/dom/ponyfill';\n\nimport {MDCSnackbarAdapter} from './adapter';\nimport {strings} from './constants';\nimport {MDCSnackbarFoundation} from './foundation';\nimport {MDCSnackbarAnnouncer, MDCSnackbarAnnouncerFactory, MDCSnackbarCloseEventDetail} from './types';\nimport * as util from './util';\n\nconst {\n  SURFACE_SELECTOR,\n  LABEL_SELECTOR,\n  ACTION_SELECTOR,\n  DISMISS_SELECTOR,\n  OPENING_EVENT,\n  OPENED_EVENT,\n  CLOSING_EVENT,\n  CLOSED_EVENT,\n} = strings;\n\n/** MDC Snackbar */\nexport class MDCSnackbar extends MDCComponent<MDCSnackbarFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCSnackbar(root);\n  }\n\n  private announce!: MDCSnackbarAnnouncer;  // assigned in initialize()\n\n  private actionEl!: HTMLElement;   // assigned in initialSyncWithDOM()\n  private labelEl!: HTMLElement;    // assigned in initialSyncWithDOM()\n  private surfaceEl!: HTMLElement;  // assigned in initialSyncWithDOM()\n\n  private handleKeyDown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n  private handleSurfaceClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n\n  override initialize(\n      announcerFactory: MDCSnackbarAnnouncerFactory = () => util.announce) {\n    this.announce = announcerFactory();\n  }\n\n  override initialSyncWithDOM() {\n    this.surfaceEl = this.root.querySelector<HTMLElement>(SURFACE_SELECTOR)!;\n    this.labelEl = this.root.querySelector<HTMLElement>(LABEL_SELECTOR)!;\n    this.actionEl = this.root.querySelector<HTMLElement>(ACTION_SELECTOR)!;\n\n    this.handleKeyDown = (event) => {\n      this.foundation.handleKeyDown(event);\n    };\n    this.handleSurfaceClick = (event) => {\n      const target = event.target as Element;\n      if (this.isActionButton(target)) {\n        this.foundation.handleActionButtonClick(event);\n      } else if (this.isActionIcon(target)) {\n        this.foundation.handleActionIconClick(event);\n      }\n    };\n\n    this.registerKeyDownHandler(this.handleKeyDown);\n    this.registerSurfaceClickHandler(this.handleSurfaceClick);\n  }\n\n  override destroy() {\n    super.destroy();\n    this.deregisterKeyDownHandler(this.handleKeyDown);\n    this.deregisterSurfaceClickHandler(this.handleSurfaceClick);\n  }\n\n  open() {\n    this.foundation.open();\n  }\n\n  /**\n   * @param reason Why the snackbar was closed. Value will be passed to\n   *     CLOSING_EVENT and CLOSED_EVENT via the `event.detail.reason` property.\n   *     Standard values are REASON_ACTION and REASON_DISMISS, but custom\n   *     client-specific values may also be used if desired.\n   */\n  close(reason = '') {\n    this.foundation.close(reason);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCSnackbarAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      announce: () => {\n        this.announce(this.labelEl);\n      },\n      notifyClosed: (reason) => {\n        this.emit<MDCSnackbarCloseEventDetail>(\n            CLOSED_EVENT, reason ? {reason} : {});\n      },\n      notifyClosing: (reason) => {\n        this.emit<MDCSnackbarCloseEventDetail>(\n            CLOSING_EVENT, reason ? {reason} : {});\n      },\n      notifyOpened: () => {\n        this.emit(OPENED_EVENT, {});\n      },\n      notifyOpening: () => {\n        this.emit(OPENING_EVENT, {});\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n    };\n    return new MDCSnackbarFoundation(adapter);\n  }\n\n  get timeoutMs(): number {\n    return this.foundation.getTimeoutMs();\n  }\n\n  set timeoutMs(timeoutMs: number) {\n    this.foundation.setTimeoutMs(timeoutMs);\n  }\n\n  get closeOnEscape(): boolean {\n    return this.foundation.getCloseOnEscape();\n  }\n\n  set closeOnEscape(closeOnEscape: boolean) {\n    this.foundation.setCloseOnEscape(closeOnEscape);\n  }\n\n  get isOpen(): boolean {\n    return this.foundation.isOpen();\n  }\n\n  get labelText(): string {\n    // This property only returns null if the node is a document, DOCTYPE,\n    // or notation. On Element nodes, it always returns a string.\n    return this.labelEl.textContent!;\n  }\n\n  set labelText(labelText: string) {\n    this.labelEl.textContent = labelText;\n  }\n\n  get actionButtonText(): string {\n    return this.actionEl.textContent!;\n  }\n\n  set actionButtonText(actionButtonText: string) {\n    this.actionEl.textContent = actionButtonText;\n  }\n\n  private registerKeyDownHandler(handler: SpecificEventListener<'keydown'>) {\n    this.listen('keydown', handler);\n  }\n\n  private deregisterKeyDownHandler(handler: SpecificEventListener<'keydown'>) {\n    this.unlisten('keydown', handler);\n  }\n\n  private registerSurfaceClickHandler(handler: SpecificEventListener<'click'>) {\n    this.surfaceEl.addEventListener('click', handler as EventListener);\n  }\n\n  private deregisterSurfaceClickHandler(handler:\n                                            SpecificEventListener<'click'>) {\n    this.surfaceEl.removeEventListener('click', handler as EventListener);\n  }\n\n  private isActionButton(target: Element): boolean {\n    return Boolean(closest(target, ACTION_SELECTOR));\n  }\n\n  private isActionIcon(target: Element): boolean {\n    return Boolean(closest(target, DISMISS_SELECTOR));\n  }\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  CLOSING: 'mdc-snackbar--closing',\n  OPEN: 'mdc-snackbar--open',\n  OPENING: 'mdc-snackbar--opening',\n};\n\nconst strings = {\n  ACTION_SELECTOR: '.mdc-snackbar__action',\n  CLOSED_EVENT: 'MDCSnackbar:closed',\n  CLOSING_EVENT: 'MDCSnackbar:closing',\n  DATA_LIVE_LABEL_TEXT: 'mdcSnackbarLabelText',\n  DISMISS_SELECTOR: '.mdc-snackbar__dismiss',\n  LABEL_SELECTOR: '.mdc-snackbar__label',\n  OPENED_EVENT: 'MDCSnackbar:opened',\n  OPENING_EVENT: 'MDCSnackbar:opening',\n  REASON_ACTION: 'action',\n  REASON_DISMISS: 'dismiss',\n  REASON_SECONDARY_ACTION: 'secondary-action',\n  SURFACE_SELECTOR: '.mdc-snackbar__surface',\n};\n\nconst numbers = {\n  DEFAULT_AUTO_DISMISS_TIMEOUT_MS: 5000,\n  INDETERMINATE: -1,\n  MAX_AUTO_DISMISS_TIMEOUT_MS: 10000,\n  MIN_AUTO_DISMISS_TIMEOUT_MS: 4000,\n\n  // These variables need to be kept in sync with the values in _variables.scss.\n  SNACKBAR_ANIMATION_CLOSE_TIME_MS: 75,\n  SNACKBAR_ANIMATION_OPEN_TIME_MS: 150,\n\n  /**\n   * Number of milliseconds to wait between temporarily clearing the label text\n   * in the DOM and subsequently restoring it. This is necessary to force IE 11\n   * to pick up the `aria-live` content change and announce it to the user.\n   */\n  ARIA_LIVE_DELAY_MS: 1000,\n};\n\nexport {cssClasses, strings, numbers};\n"
  },
  {
    "path": "packages/mdc-snackbar/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCSnackbarAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\n\nconst {OPENING, OPEN, CLOSING} = cssClasses;\nconst {REASON_ACTION, REASON_DISMISS, REASON_SECONDARY_ACTION} = strings;\n\n/** MDC Snackbar Foundation */\nexport class MDCSnackbarFoundation extends MDCFoundation<MDCSnackbarAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCSnackbarAdapter {\n    return {\n      addClass: () => undefined,\n      announce: () => undefined,\n      notifyClosed: () => undefined,\n      notifyClosing: () => undefined,\n      notifyOpened: () => undefined,\n      notifyOpening: () => undefined,\n      removeClass: () => undefined,\n    };\n  }\n\n  private opened = false;\n  private animationFrame = 0;\n  private animationTimer = 0;\n  private autoDismissTimer = 0;\n  private autoDismissTimeoutMs = numbers.DEFAULT_AUTO_DISMISS_TIMEOUT_MS;\n  private closeOnEscape = true;\n\n  constructor(adapter?: Partial<MDCSnackbarAdapter>) {\n    super({...MDCSnackbarFoundation.defaultAdapter, ...adapter});\n  }\n\n  override destroy() {\n    this.clearAutoDismissTimer();\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = 0;\n    clearTimeout(this.animationTimer);\n    this.animationTimer = 0;\n    this.adapter.removeClass(OPENING);\n    this.adapter.removeClass(OPEN);\n    this.adapter.removeClass(CLOSING);\n  }\n\n  open() {\n    this.clearAutoDismissTimer();\n    this.opened = true;\n    this.adapter.notifyOpening();\n    this.adapter.removeClass(CLOSING);\n    this.adapter.addClass(OPENING);\n    this.adapter.announce();\n\n    // Wait a frame once display is no longer \"none\", to establish basis for\n    // animation\n    this.runNextAnimationFrame(() => {\n      this.adapter.addClass(OPEN);\n\n      this.animationTimer = setTimeout(() => {\n        const timeoutMs = this.getTimeoutMs();\n        this.handleAnimationTimerEnd();\n        this.adapter.notifyOpened();\n        if (timeoutMs !== numbers.INDETERMINATE) {\n          this.autoDismissTimer = setTimeout(() => {\n            this.close(REASON_DISMISS);\n          }, timeoutMs);\n        }\n      }, numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n    });\n  }\n\n  /**\n   * @param reason Why the snackbar was closed. Value will be passed to\n   *     CLOSING_EVENT and CLOSED_EVENT via the `event.detail.reason` property.\n   *     Standard values are REASON_ACTION and REASON_DISMISS, but custom\n   *     client-specific values may also be used if desired.\n   */\n  close(reason = '') {\n    if (!this.opened) {\n      // Avoid redundant close calls (and events), e.g. repeated interactions as\n      // the snackbar is animating closed\n      return;\n    }\n\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = 0;\n    this.clearAutoDismissTimer();\n\n    this.opened = false;\n    this.adapter.notifyClosing(reason);\n    this.adapter.addClass(cssClasses.CLOSING);\n    this.adapter.removeClass(cssClasses.OPEN);\n    this.adapter.removeClass(cssClasses.OPENING);\n\n    clearTimeout(this.animationTimer);\n    this.animationTimer = setTimeout(() => {\n      this.handleAnimationTimerEnd();\n      this.adapter.notifyClosed(reason);\n    }, numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);\n  }\n\n  isOpen(): boolean {\n    return this.opened;\n  }\n\n  getTimeoutMs(): number {\n    return this.autoDismissTimeoutMs;\n  }\n\n  setTimeoutMs(timeoutMs: number) {\n    // Use shorter variable names to make the code more readable\n    const minValue = numbers.MIN_AUTO_DISMISS_TIMEOUT_MS;\n    const maxValue = numbers.MAX_AUTO_DISMISS_TIMEOUT_MS;\n    const indeterminateValue = numbers.INDETERMINATE;\n\n    if (timeoutMs === numbers.INDETERMINATE ||\n        (timeoutMs <= maxValue && timeoutMs >= minValue)) {\n      this.autoDismissTimeoutMs = timeoutMs;\n    } else {\n      throw new Error(`\n        timeoutMs must be an integer in the range ${minValue}–${maxValue}\n        (or ${indeterminateValue} to disable), but got '${timeoutMs}'`);\n    }\n  }\n\n  getCloseOnEscape(): boolean {\n    return this.closeOnEscape;\n  }\n\n  setCloseOnEscape(closeOnEscape: boolean) {\n    this.closeOnEscape = closeOnEscape;\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const isEscapeKey = event.key === 'Escape' || event.keyCode === 27;\n    if (isEscapeKey && this.getCloseOnEscape()) {\n      this.close(REASON_DISMISS);\n    }\n  }\n\n  handleActionButtonClick(_event: MouseEvent) {\n    this.close(REASON_ACTION);\n  }\n\n  handleActionIconClick(_event: MouseEvent) {\n    this.close(REASON_DISMISS);\n  }\n\n  handleSecondaryActionButtonClick(_event: MouseEvent) {\n    this.close(REASON_SECONDARY_ACTION);\n  }\n\n  private clearAutoDismissTimer() {\n    clearTimeout(this.autoDismissTimer);\n    this.autoDismissTimer = 0;\n  }\n\n  private handleAnimationTimerEnd() {\n    this.animationTimer = 0;\n    this.adapter.removeClass(cssClasses.OPENING);\n    this.adapter.removeClass(cssClasses.CLOSING);\n  }\n\n  /**\n   * Runs the given logic on the next animation frame, using setTimeout to\n   * factor in Firefox reflow behavior.\n   */\n  private runNextAnimationFrame(callback: () => void) {\n    cancelAnimationFrame(this.animationFrame);\n    this.animationFrame = requestAnimationFrame(() => {\n      this.animationFrame = 0;\n      clearTimeout(this.animationTimer);\n      this.animationTimer = setTimeout(callback, 0);\n    });\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSnackbarFoundation;\n"
  },
  {
    "path": "packages/mdc-snackbar/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-snackbar/mdc-snackbar.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/touch-target/variables\" as mdc-touch-target-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/button/variables\" as mdc-button-*;\n@forward \"@material/button/mixins\" as mdc-button-*;\n@forward \"@material/icon-button/variables\" as mdc-icon-button-*;\n@forward \"variables\" as mdc-snackbar-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/touch-target/mixins\" as mdc-* hide mdc-margin, mdc-wrapper;\n@forward \"@material/touch-target/mixins\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/icon-button/mixins\" as mdc-icon-button-*;\n@forward \"mixins\" as mdc-snackbar-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"mdc-snackbar\";\n"
  },
  {
    "path": "packages/mdc-snackbar/mdc-snackbar.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-snackbar/package.json",
    "content": "{\n  \"name\": \"@material/snackbar\",\n  \"description\": \"The Material Components for the web snackbar component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"snackbar\"\n  ],\n  \"main\": \"dist/mdc.snackbar.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-snackbar\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/button\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/icon-button\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/styles.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './snackbar';\n@include snackbar.core-styles;\n"
  },
  {
    "path": "packages/mdc-snackbar/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {numbers, strings} from '../constants';\nimport {MDCSnackbar, MDCSnackbarFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div>\n      <aside class=\"mdc-snackbar\">\n        <div class=\"mdc-snackbar__surface\" role=\"status\" aria-relevant=\"additions\">\n          <div class=\"mdc-snackbar__label\" aria-atomic=\"false\">\n            Can't send photo. Retry in 5 seconds.</div>\n          <div class=\"mdc-snackbar__actions\" aria-atomic=\"true\">\n            <button type=\"button\" class=\"mdc-button mdc-snackbar__action\">Retry</button>\n            <button class=\"mdc-icon-button mdc-snackbar__dismiss material-icons\" title=\"Dismiss\">close</button>\n          </div>\n        </div>\n      </aside>\n    </div>`);\n}\n\nfunction setupTest(fixture = getFixture()) {\n  const root = fixture;\n  const surface = fixture.querySelector<HTMLElement>(strings.SURFACE_SELECTOR)!;\n  const label = fixture.querySelector<HTMLElement>(strings.LABEL_SELECTOR)!;\n  const actions = fixture.querySelector<HTMLElement>('.mdc-snackbar__actions')!;\n  const actionButton =\n      fixture.querySelector<HTMLElement>(strings.ACTION_SELECTOR)!;\n  const actionIcon =\n      fixture.querySelector<HTMLElement>(strings.DISMISS_SELECTOR)!;\n  const announce = jasmine.createSpy('announce');\n  const component = new MDCSnackbar(root, undefined, () => announce);\n  return {\n    component,\n    announce,\n    root,\n    surface,\n    label,\n    actions,\n    actionButton,\n    actionIcon\n  };\n}\n\nfunction setupTestWithMocks(fixture = getFixture()) {\n  const root = fixture;\n  const surface = fixture.querySelector<HTMLElement>(strings.SURFACE_SELECTOR)!;\n  const label = fixture.querySelector<HTMLElement>(strings.LABEL_SELECTOR)!;\n  const actions = fixture.querySelector<HTMLElement>('.mdc-snackbar__actions')!;\n  const actionButton =\n      fixture.querySelector<HTMLElement>(strings.ACTION_SELECTOR)!;\n  const actionIcon =\n      fixture.querySelector<HTMLElement>(strings.DISMISS_SELECTOR)!;\n\n  const mockFoundation = createMockFoundation(MDCSnackbarFoundation);\n  const announce = jasmine.createSpy('announce');\n  const component = new MDCSnackbar(root, mockFoundation, () => announce);\n\n  return {\n    component,\n    mockFoundation,\n    announce,\n    root,\n    surface,\n    label,\n    actions,\n    actionButton,\n    actionIcon\n  };\n}\n\ndescribe('MDCSnackbar', () => {\n  it('attachTo returns a component instance', () => {\n    expect(MDCSnackbar.attachTo(getFixture()))\n        .toEqual(jasmine.any(MDCSnackbar));\n  });\n\n  it('#initialSyncWithDOM registers click handlers for action button and action icon',\n     () => {\n       const {component, mockFoundation, actionButton, actionIcon} =\n           setupTestWithMocks();\n       component.open();\n       emitEvent(actionButton, 'click', {bubbles: true});\n       expect(mockFoundation.handleActionButtonClick)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleActionButtonClick).toHaveBeenCalledTimes(1);\n       emitEvent(actionIcon, 'click', {bubbles: true});\n       expect(mockFoundation.handleActionIconClick)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleActionIconClick).toHaveBeenCalledTimes(1);\n       component.destroy();\n     });\n\n  it('#initialSyncWithDOM registers keydown handler on the root element',\n     () => {\n       const {component, mockFoundation, root} = setupTestWithMocks();\n       component.open();\n       emitEvent(root, 'keydown');\n       expect(mockFoundation.handleKeyDown)\n           .toHaveBeenCalledWith(jasmine.any(Event));\n       expect(mockFoundation.handleKeyDown).toHaveBeenCalledTimes(1);\n       component.destroy();\n     });\n\n  it('#destroy deregisters click handler on the root element', () => {\n    const {component, mockFoundation, actionButton, actionIcon} =\n        setupTestWithMocks();\n    component.open();\n    component.destroy();\n    emitEvent(actionButton, 'click', {bubbles: true});\n    expect(mockFoundation.handleActionButtonClick)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n    emitEvent(actionIcon, 'click', {bubbles: true});\n    expect(mockFoundation.handleActionIconClick)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n  });\n\n  it('#destroy deregisters keydown handler on the root element', () => {\n    const {component, mockFoundation, root} = setupTestWithMocks();\n    component.open();\n    component.destroy();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeyDown)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n  });\n\n  it('clicking on surface does nothing', () => {\n    const {component, mockFoundation, surface} = setupTestWithMocks();\n    component.open();\n    emitEvent(surface, 'click', {bubbles: true});\n    expect(mockFoundation.handleActionButtonClick)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n    expect(mockFoundation.handleActionIconClick)\n        .not.toHaveBeenCalledWith(jasmine.any(Event));\n    expect(mockFoundation.close).not.toHaveBeenCalledWith(jasmine.anything());\n    component.destroy();\n  });\n\n  it('#open announces to screen readers', () => {\n    const {component, announce, label} = setupTest();\n\n    component.open();\n    expect(announce).toHaveBeenCalledWith(label);\n    expect(announce).toHaveBeenCalledTimes(1);\n  });\n\n  it('#open forwards to MDCSnackbarFoundation#open', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.open();\n    expect(mockFoundation.open).toHaveBeenCalled();\n  });\n\n  it('#close forwards to MDCSnackbarFoundation#close', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n    const reason = 'reason';\n\n    component.open();\n    component.close(reason);\n    expect(mockFoundation.close).toHaveBeenCalledWith(reason);\n\n    component.close();\n    expect(mockFoundation.close).toHaveBeenCalledWith('');\n  });\n\n  it('get isOpen forwards to MDCSnackbarFoundation#isOpen', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.isOpen;\n    expect(mockFoundation.isOpen).toHaveBeenCalled();\n  });\n\n  it('get closeOnEscape forwards to MDCSnackbarFoundation#getCloseOnEscape',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.closeOnEscape;\n       expect(mockFoundation.getCloseOnEscape).toHaveBeenCalled();\n     });\n\n  it('set closeOnEscape forwards to MDCSnackbarFoundation#setCloseOnEscape',\n     () => {\n       const {component, mockFoundation} = setupTestWithMocks();\n\n       component.closeOnEscape = false;\n       expect(mockFoundation.setCloseOnEscape).toHaveBeenCalledWith(false);\n       component.closeOnEscape = true;\n       expect(mockFoundation.setCloseOnEscape).toHaveBeenCalledWith(false);\n     });\n\n  it('get timeoutMs forwards to MDCSnackbarFoundation#getTimeoutMs', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.timeoutMs;\n    expect(mockFoundation.getTimeoutMs).toHaveBeenCalled();\n  });\n\n  it('set timeoutMs forwards to MDCSnackbarFoundation#setTimeoutMs', () => {\n    const {component, mockFoundation} = setupTestWithMocks();\n\n    component.timeoutMs = numbers.MAX_AUTO_DISMISS_TIMEOUT_MS;\n    expect(mockFoundation.setTimeoutMs)\n        .toHaveBeenCalledWith(numbers.MAX_AUTO_DISMISS_TIMEOUT_MS);\n  });\n\n  it('get labelText returns label textContent', () => {\n    const {component, label} = setupTestWithMocks();\n\n    expect(component.labelText).toEqual(label.textContent!);\n  });\n\n  it('set labelText forwards to MDCSnackbarFoundation#setActionButtonText',\n     () => {\n       const {component} = setupTestWithMocks();\n\n       component.labelText = 'foo';\n       expect(component.labelText).toEqual('foo');\n     });\n\n  it('get actionButtonText returns button textContent', () => {\n    const {component, actionButton} = setupTestWithMocks();\n\n    expect(component.actionButtonText).toEqual(actionButton.textContent!);\n  });\n\n  it('set actionButtonText forwards to MDCSnackbarFoundation#setActionButtonText',\n     () => {\n       const {component} = setupTestWithMocks();\n\n       component.actionButtonText = 'foo';\n       expect(component.actionButtonText).toEqual('foo');\n     });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it(`adapter#notifyOpening emits ${strings.OPENING_EVENT}`, () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('notifyOpeningHandler');\n\n    component.listen(strings.OPENING_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpening();\n    component.unlisten(strings.OPENING_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it(`adapter#notifyOpened emits ${strings.OPENED_EVENT}`, () => {\n    const {component} = setupTest();\n\n    const handler = jasmine.createSpy('notifyOpenedHandler');\n\n    component.listen(strings.OPENED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyOpened();\n    component.unlisten(strings.OPENED_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it(`adapter#notifyClosing emits ${\n         strings\n             .CLOSING_EVENT} without action if passed action is empty string`,\n     () => {\n       const {component} = setupTest();\n\n       const handler = jasmine.createSpy('notifyClosingHandler');\n\n       component.listen(strings.CLOSING_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClosing('');\n       component.unlisten(strings.CLOSING_EVENT, handler);\n\n       expect(handler).toHaveBeenCalledWith(\n           jasmine.objectContaining({detail: {}}));\n     });\n\n  it(`adapter#notifyClosing emits ${strings.CLOSING_EVENT} with reason`, () => {\n    const {component} = setupTest();\n    const reason = 'reason';\n\n    const handler = jasmine.createSpy('notifyClosingHandler');\n\n    component.listen(strings.CLOSING_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyClosing(reason);\n    component.unlisten(strings.CLOSING_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {reason}}));\n  });\n\n  it(`adapter#notifyClosed emits ${\n         strings.CLOSED_EVENT} without reason if passed reason is empty string`,\n     () => {\n       const {component} = setupTest();\n\n       const handler = jasmine.createSpy('notifyClosedHandler');\n\n       component.listen(strings.CLOSED_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyClosed('');\n       component.unlisten(strings.CLOSED_EVENT, handler);\n\n       expect(handler).toHaveBeenCalledWith(\n           jasmine.objectContaining({detail: {}}));\n     });\n\n  it(`adapter#notifyClosed emits ${strings.CLOSED_EVENT} with reason`, () => {\n    const {component} = setupTest();\n    const reason = 'reason';\n\n    const handler = jasmine.createSpy('notifyClosedHandler');\n\n    component.listen(strings.CLOSED_EVENT, handler);\n    (component.getDefaultFoundation() as any).adapter.notifyClosed(reason);\n    component.unlisten(strings.CLOSED_EVENT, handler);\n\n    expect(handler).toHaveBeenCalledWith(\n        jasmine.objectContaining({detail: {reason}}));\n  });\n});\n"
  },
  {
    "path": "packages/mdc-snackbar/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as snackbar;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include snackbar.core-styles($query: $query);\n    @include snackbar.fill-color(red, $query: $query);\n    @include snackbar.label-ink-color(red, $query: $query);\n    @include snackbar.shape-radius(1337, $query: $query);\n    @include snackbar.min-width(1337, $query: $query);\n    @include snackbar.max-width(1337, $query: $query);\n    @include snackbar.elevation(13, $query: $query);\n    @include snackbar.viewport-margin(1337, $query: $query);\n    @include snackbar.z-index(1337, $query: $query);\n    @include snackbar.position-leading($query: $query);\n    @include snackbar.layout-stacked($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-snackbar/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport {MDCSnackbarFoundation} from '../foundation';\n\ndescribe('MDCSnackbarFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports cssClasses', () => {\n    expect(MDCSnackbarFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports strings', () => {\n    expect(MDCSnackbarFoundation.strings).toEqual(strings);\n  });\n\n  it('exports numbers', () => {\n    expect(MDCSnackbarFoundation.numbers).toEqual(numbers);\n  });\n\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCSnackbarFoundation, [\n      'addClass',\n      'removeClass',\n      'announce',\n      'notifyOpening',\n      'notifyOpened',\n      'notifyClosing',\n      'notifyClosed',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCSnackbarFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#destroy removes all animating and open classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.destroy();\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n  });\n\n  it('#destroy cancels all timers', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n    foundation.destroy();\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(2);\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n\n    jasmine.clock().tick(1);\n    expect(foundation.close).not.toHaveBeenCalledWith(strings.REASON_DISMISS);\n  });\n\n  it('#open announces text to screen readers', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    expect(mockAdapter.announce).toHaveBeenCalledTimes(1);\n  });\n\n  it('#open adds CSS classes after rAF', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(2);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#close removes CSS classes', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close();\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#close cancels rAF scheduled by open if still pending', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    foundation.close();\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(2);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n  });\n\n  it('#open adds the opening class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(101);\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.OPENING);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.OPENING);\n       jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.OPENING);\n     });\n\n  it('#close adds the closing class to start an animation, and removes it after the animation is done',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.open();\n       jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n       foundation.close();\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.CLOSING);\n       // Once in #open, twice in #close and twice in #handleAnimationTimerEnd_\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(5);\n     });\n\n  it('#open emits \"opening\" and \"opened\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(101);\n\n    expect(mockAdapter.notifyOpening).toHaveBeenCalledTimes(1);\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n    expect(mockAdapter.notifyOpened).toHaveBeenCalledTimes(1);\n  });\n\n  it('#close emits \"closing\" and \"closed\" events', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.open();\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n    foundation.close();\n\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledWith('');\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledTimes(1);\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledWith('');\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledTimes(1);\n\n    foundation.open();\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n\n    const reason = 'reason';\n    foundation.close(reason);\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledWith(reason);\n    expect(mockAdapter.notifyClosing).toHaveBeenCalledTimes(2);\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledWith(reason);\n    expect(mockAdapter.notifyClosed).toHaveBeenCalledTimes(2);\n  });\n\n  it('#close does nothing if the snackbar is already closed', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.close();\n    jasmine.clock().tick(1);\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_CLOSE_TIME_MS);\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(cssClasses.OPEN);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.OPENING);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.CLOSING);\n    expect(mockAdapter.notifyClosing).not.toHaveBeenCalledWith('');\n    expect(mockAdapter.notifyClosed).not.toHaveBeenCalledWith('');\n  });\n\n  it('#open automatically dismisses snackbar after timeout', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(2);\n\n    // Auto-dismiss timeout\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n    jasmine.clock().tick(foundation.getTimeoutMs());\n\n    expect(foundation.close).toHaveBeenCalledWith(strings.REASON_DISMISS);\n    expect(foundation.close).toHaveBeenCalledTimes(1);\n  });\n\n  it('#snackbar remains open for indefinite timeout', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n    foundation.setTimeoutMs(-1);\n\n    foundation.open();\n\n    // Note: #open uses a combination of rAF and setTimeout due to Firefox\n    // behavior, so we need to wait 2 ticks\n    jasmine.clock().tick(2);\n\n    // Wait for max timeout and ensure that close has not been called\n    jasmine.clock().tick(numbers.SNACKBAR_ANIMATION_OPEN_TIME_MS);\n    jasmine.clock().tick(numbers.MAX_AUTO_DISMISS_TIMEOUT_MS);\n\n    expect(foundation.close).not.toHaveBeenCalledWith(strings.REASON_DISMISS);\n  });\n\n  it('#isOpen returns false when the snackbar has never been opened', () => {\n    const {foundation} = setupTest();\n    expect(foundation.isOpen()).toBe(false);\n  });\n\n  it('#isOpen returns true when the snackbar is open', () => {\n    const {foundation} = setupTest();\n\n    foundation.open();\n\n    expect(foundation.isOpen()).toBe(true);\n  });\n\n  it('#isOpen returns false when the snackbar is closed after being open',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation.open();\n       foundation.close();\n\n       expect(foundation.isOpen()).toBe(false);\n     });\n\n  it('escape keydown closes snackbar when closeOnEscape is true (via key property)',\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleKeyDown({key: 'Escape'} as KeyboardEvent);\n\n       expect(foundation.close).toHaveBeenCalledWith(strings.REASON_DISMISS);\n     });\n\n  it('escape keydown closes snackbar when closeOnEscape is true (via keyCode property)',\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleKeyDown({keyCode: 27} as KeyboardEvent);\n\n       expect(foundation.close).toHaveBeenCalledWith(strings.REASON_DISMISS);\n     });\n\n  it('escape keydown does not close snackbar when closeOnEscape is false (via key property)',\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n       foundation.setCloseOnEscape(false);\n\n       foundation.open();\n       foundation.handleKeyDown({key: 'Escape'} as KeyboardEvent);\n\n       expect(foundation.close)\n           .not.toHaveBeenCalledWith(strings.REASON_DISMISS);\n     });\n\n  it('escape keydown does not close snackbar when closeOnEscape is false (via keyCode property)',\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n       foundation.setCloseOnEscape(false);\n\n       foundation.open();\n       foundation.handleKeyDown({keyCode: 27} as KeyboardEvent);\n\n       expect(foundation.close)\n           .not.toHaveBeenCalledWith(strings.REASON_DISMISS);\n     });\n\n  it('keydown does nothing when key other than escape is pressed', () => {\n    const {foundation} = setupTest();\n    foundation.close = jasmine.createSpy('close');\n\n    foundation.open();\n    foundation.handleKeyDown({key: 'Enter'} as KeyboardEvent);\n\n    expect(foundation.close).not.toHaveBeenCalledWith(strings.REASON_DISMISS);\n  });\n\n  it(`#handleActionButtonClick closes the snackbar with reason \"${\n         strings.REASON_ACTION}\"`,\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleActionButtonClick({} as MouseEvent);\n\n       expect(foundation.close).toHaveBeenCalledWith(strings.REASON_ACTION);\n     });\n\n  it(`#handleActionIconClick closes the snackbar with reason \"${\n         strings.REASON_DISMISS}\"`,\n     () => {\n       const {foundation} = setupTest();\n       foundation.close = jasmine.createSpy('close');\n\n       foundation.open();\n       foundation.handleActionIconClick({} as MouseEvent);\n\n       expect(foundation.close).toHaveBeenCalledWith(strings.REASON_DISMISS);\n     });\n\n  it('#setTimeoutMs throws an error for values outside the min/max range',\n     () => {\n       const {foundation} = setupTest();\n       expect(() => {\n         foundation.setTimeoutMs(numbers.MIN_AUTO_DISMISS_TIMEOUT_MS - 1);\n       }).toThrow();\n       expect(() => {\n         foundation.setTimeoutMs(numbers.MAX_AUTO_DISMISS_TIMEOUT_MS + 1);\n       }).toThrow();\n     });\n\n  it('#getTimeoutMs returns the default value', () => {\n    const {foundation} = setupTest();\n    expect(foundation.getTimeoutMs())\n        .toEqual(numbers.DEFAULT_AUTO_DISMISS_TIMEOUT_MS);\n  });\n\n  it('#getTimeoutMs returns the value set by setTimeoutMs', () => {\n    const {foundation} = setupTest();\n    const timeoutMs = numbers.MAX_AUTO_DISMISS_TIMEOUT_MS - 1;\n    foundation.setTimeoutMs(timeoutMs);\n    expect(foundation.getTimeoutMs()).toEqual(timeoutMs);\n  });\n\n  it('#getCloseOnEscape returns the value set by setCloseOnEscape', () => {\n    const {foundation} = setupTest();\n    foundation.setCloseOnEscape(false);\n    expect(foundation.getCloseOnEscape()).toEqual(false);\n    foundation.setCloseOnEscape(true);\n    expect(foundation.getCloseOnEscape()).toEqual(true);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-snackbar/test/mdc-snackbar.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-snackbar.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-snackbar/test/util.test.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {numbers, strings} from '../constants';\nimport * as util from '../util';\n\nconst {ARIA_LIVE_DELAY_MS} = numbers;\nconst {DATA_LIVE_LABEL_TEXT} = strings;\n\ndescribe('MDCSnackbar - util', () => {\n  setUpMdcTestEnvironment();\n\n  it('#announce temporarily disables ARIA attributes and then restores them',\n     () => {\n       const fixture = createFixture(html`\n        <div>\n          <div class=\"aria\" role=\"status\" aria-live=\"polite\">\n            <div class=\"label\"></div>\n          </div>\n        </div>`);\n\n       const ariaEl = fixture.querySelector<HTMLElement>('.aria')!;\n       const labelEl = fixture.querySelector<HTMLElement>('.label')!;\n\n       const labelText = 'Foo';\n       labelEl.textContent = labelText;\n\n       util.announce(ariaEl, labelEl);\n\n       // Trim to remove `&nbsp;` (see comment in util.ts)\n       expect(labelEl.textContent.trim()).toEqual('');\n       expect(ariaEl.getAttribute('aria-live')).toEqual('off');\n\n       jasmine.clock().tick(ARIA_LIVE_DELAY_MS);\n\n       expect(labelEl.textContent).toEqual(labelText);\n       expect(ariaEl.getAttribute('aria-live')).toEqual('polite');\n     });\n\n  it('#announce prevents flicker by displaying label text on ::before pseudo-element and then removing it',\n     () => {\n       const fixture = createFixture(`\n        <div>\n          <div class=\"aria\" role=\"status\" aria-live=\"polite\">\n            <div class=\"label\"></div>\n          </div>\n        </div>`);\n\n       const ariaEl = fixture.querySelector<HTMLElement>('.aria')!;\n       const labelEl = fixture.querySelector<HTMLElement>('.label')!;\n\n       const labelText = 'Foo';\n       labelEl.textContent = labelText;\n\n       util.announce(ariaEl, labelEl);\n\n       expect(labelEl.dataset[DATA_LIVE_LABEL_TEXT])\n           .toEqual(labelText);\n\n       jasmine.clock().tick(ARIA_LIVE_DELAY_MS);\n\n       expect(labelEl.dataset[DATA_LIVE_LABEL_TEXT]).toBeUndefined();\n     });\n\n  it('#announce second argument is optional', () => {\n    const fixture = createFixture(html`\n      <div>\n        <div class=\"aria label\" role=\"status\" aria-live=\"polite\"></div>\n      </div>`);\n\n    const ariaEl = fixture.querySelector<HTMLElement>('.aria')!;\n\n    const labelText = 'Foo';\n    ariaEl.textContent = labelText;\n\n    util.announce(ariaEl);\n\n    // Trim to remove `&nbsp;` (see comment in util.ts)\n    expect(ariaEl.textContent.trim()).toEqual('');\n    expect(ariaEl.dataset[DATA_LIVE_LABEL_TEXT]).toEqual(labelText);\n    expect(ariaEl.getAttribute('aria-live')).toEqual('off');\n\n    jasmine.clock().tick(ARIA_LIVE_DELAY_MS);\n\n    expect(ariaEl.textContent).toEqual(labelText);\n    expect(ariaEl.dataset[DATA_LIVE_LABEL_TEXT]).toBeUndefined();\n    expect(ariaEl.getAttribute('aria-live')).toEqual('polite');\n  });\n\n  it('#announce does nothing if textContent is empty', () => {\n    const fixture = createFixture(html`\n      <div>\n        <div class=\"aria\" role=\"status\" aria-live=\"polite\">\n          <div class=\"label\"></div>\n        </div>\n      </div>`);\n\n    const ariaEl = fixture.querySelector<HTMLElement>('.aria')!;\n    const labelEl = fixture.querySelector<HTMLElement>('.label')!;\n\n    util.announce(ariaEl, labelEl);\n\n    expect(labelEl.textContent!.trim()).toEqual('');\n    expect(labelEl.dataset[DATA_LIVE_LABEL_TEXT]).toBeUndefined();\n    expect(ariaEl.getAttribute('aria-live')).toEqual('polite');\n  });\n\n  it('#announce does nothing if aria-live was not present', () => {\n    const fixture = createFixture(html`\n      <div>\n        <div class=\"aria label\" role=\"status\">Foo</div>\n      </div>`);\n    const ariaEl = fixture.querySelector<HTMLElement>('.aria')!;\n\n    util.announce(ariaEl);\n\n    expect(ariaEl.getAttribute('aria-live')).toBeNull();\n    expect(ariaEl.dataset[DATA_LIVE_LABEL_TEXT]).toBeUndefined();\n\n    jasmine.clock().tick(ARIA_LIVE_DELAY_MS);\n\n    expect(ariaEl.getAttribute('aria-live')).toBeNull();\n    expect(ariaEl.dataset[DATA_LIVE_LABEL_TEXT]).toBeUndefined();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-snackbar/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport type MDCSnackbarAnnouncer =\n    (ariaEl: HTMLElement, labelEl?: HTMLElement) => void;\nexport type MDCSnackbarAnnouncerFactory = () => MDCSnackbarAnnouncer;\n\nexport interface MDCSnackbarCloseEventDetail {\n  reason?: string;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCSnackbarCloseEvent extends Event {\n  readonly detail: MDCSnackbarCloseEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-snackbar/util.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {numbers, strings} from './constants';\n\nconst {ARIA_LIVE_DELAY_MS} = numbers;\nconst {DATA_LIVE_LABEL_TEXT} = strings;\n\n/** Accounce helper for snackbar */\nexport function announce(ariaEl: HTMLElement, labelEl: HTMLElement = ariaEl) {\n  const priority = ariaEl.getAttribute('aria-live');\n\n  // Trim text to ignore `&nbsp;` (see below).\n  // textContent is only null if the node is a document, DOCTYPE, or notation.\n  const labelText = labelEl.textContent!.trim();\n  if (!labelText || !priority) {\n    return;\n  }\n\n  // Temporarily disable `aria-live` to prevent JAWS+Firefox from announcing the\n  // message twice.\n  ariaEl.setAttribute('aria-live', 'off');\n\n  // Temporarily clear `textContent` to force a DOM mutation event that will be\n  // detected by screen readers. `aria-live` elements are only announced when\n  // the element's `textContent` *changes*, so snackbars sent to the browser in\n  // the initial HTML response won't be read unless we clear the element's\n  // `textContent` first. Similarly, displaying the same snackbar message twice\n  // in a row doesn't trigger a DOM mutation event, so screen readers won't\n  // announce the second message unless we first clear `textContent`.\n  //\n  // We have to clear the label text two different ways to make it work in all\n  // browsers and screen readers:\n  //\n  //   1. `textContent = ''` is required for IE11 + JAWS\n  //   2. `innerHTML = '&nbsp;'` is required for Chrome + JAWS and NVDA\n  //\n  // All other browser/screen reader combinations support both methods.\n  //\n  // The wrapper `<span>` visually hides the space character so that it doesn't\n  // cause jank when added/removed. N.B.: Setting `position: absolute`,\n  // `opacity: 0`, or `height: 0` prevents Chrome from detecting the DOM change.\n  //\n  // This technique has been tested in:\n  //\n  //   * JAWS 2019:\n  //       - Chrome 70\n  //       - Firefox 60 (ESR)\n  //       - IE 11\n  //   * NVDA 2018:\n  //       - Chrome 70\n  //       - Firefox 60 (ESR)\n  //       - IE 11\n  //   * ChromeVox 53\n  labelEl.textContent = '';\n  // For the second case, assigning a string directly to innerHTML results in a\n  // Trusted Types violation. Work around that by using document.createElement.\n  const span = document.createElement('span');\n  span.setAttribute('style', 'display: inline-block; width: 0; height: 1px;');\n  span.textContent = '\\u00a0';  // Equivalent to &nbsp;\n  labelEl.appendChild(span);\n\n  // Prevent visual jank by temporarily displaying the label text in the\n  // ::before pseudo-element. CSS generated content is normally announced by\n  // screen readers (except in IE 11; see\n  // https://tink.uk/accessibility-support-for-css-generated-content/); however,\n  // `aria-live` is turned off, so this DOM update will be ignored by screen\n  // readers.\n  labelEl.dataset[DATA_LIVE_LABEL_TEXT] = labelText;\n\n  setTimeout(() => {\n    // Allow screen readers to announce changes to the DOM again.\n    ariaEl.setAttribute('aria-live', priority);\n\n    // Remove the message from the ::before pseudo-element.\n    delete labelEl.dataset[DATA_LIVE_LABEL_TEXT];\n\n    // Restore the original label text, which will be announced by screen\n    // readers.\n    labelEl.textContent = labelText;\n  }, ARIA_LIVE_DELAY_MS);\n}\n"
  },
  {
    "path": "packages/mdc-switch/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-switch/README.md",
    "content": "<!--docs:\ntitle: \"Switches\"\nlayout: detail\nsection: components\niconId: switch\npath: /catalog/input-controls/switches/\n-->\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n*   [Using switches](#using-switches)\n*   [Switches](#switches)\n*   [Other variants](#other-variants)\n*   [API](#api)\n*   [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n*   Toggle a single item on or off, on mobile and tablet\n*   Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n  const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n<button id=\"basic-switch\" class=\"mdc-switch mdc-switch--unselected\" type=\"button\" role=\"switch\" aria-checked=\"false\">\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__handle-track\">\n    <div class=\"mdc-switch__handle\">\n      <div class=\"mdc-switch__shadow\">\n        <div class=\"mdc-elevation-overlay\"></div>\n      </div>\n      <div class=\"mdc-switch__ripple\"></div>\n      <div class=\"mdc-switch__icons\">\n        <svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\">\n          <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n        </svg>\n        <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\">\n          <path d=\"M20 13H4v-2h16v2z\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <span class=\"mdc-switch__focus-ring-wrapper\">\n    <div class=\"mdc-switch__focus-ring\"></div>\n  </span>\n</button>\n<label for=\"basic-switch\">off/on</label>\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n<button id=\"disabled-switch\" class=\"mdc-switch mdc-switch--unselected\" type=\"button\" role=\"switch\" aria-checked=\"false\" disabled>\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__handle-track\">\n    <div class=\"mdc-switch__handle\">\n      <div class=\"mdc-switch__shadow\">\n        <div class=\"mdc-elevation-overlay\"></div>\n      </div>\n      <div class=\"mdc-switch__ripple\"></div>\n      <div class=\"mdc-switch__icons\">\n        <svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\">\n          <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n        </svg>\n        <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\">\n          <path d=\"M20 13H4v-2h16v2z\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <span class=\"mdc-switch__focus-ring-wrapper\">\n    <div class=\"mdc-switch__focus-ring\"></div>\n  </span>\n</button>\n<label for=\"disabled-switch\">off/on</label>\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n<button id=\"selected-switch\" class=\"mdc-switch mdc-switch--selected\" type=\"button\" role=\"switch\" aria-checked=\"true\">\n  <div class=\"mdc-switch__track\"></div>\n  <div class=\"mdc-switch__handle-track\">\n    <div class=\"mdc-switch__handle\">\n      <div class=\"mdc-switch__shadow\">\n        <div class=\"mdc-elevation-overlay\"></div>\n      </div>\n      <div class=\"mdc-switch__ripple\"></div>\n      <div class=\"mdc-switch__icons\">\n        <svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\">\n          <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n        </svg>\n        <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\">\n          <path d=\"M20 13H4v-2h16v2z\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <span class=\"mdc-switch__focus-ring-wrapper\">\n    <div class=\"mdc-switch__focus-ring\"></div>\n  </span>\n</button>\n<label for=\"selected-switch\">off/on</label>\n```\n\n## API\n\n### CSS classes\n\n| CSS Class                  | Description                                    |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch`               | Mandatory, for the parent element.             |\n| `mdc-switch--unselected`   | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected`     | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track`        | Mandatory, for the track element.              |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element.     |\n| `mdc-switch__handle`       | Mandatory, for the handle element.             |\n| `mdc-switch__shadow`       | Mandatory, for the shadow effect.              |\n| `mdc-elevation-overlay`    | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple`       | Mandatory, for the ripple effect.              |\n| `mdc-switch__icons`        | Mandatory, for the icons.                      |\n| `mdc-switch__icon`         | Mandatory, for the icon elements.              |\n| `mdc-switch__icon--on`     | Mandatory, for the on icon.                    |\n| `mdc-switch__icon--off`    | Mandatory, for the off icon.                   |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n  @include switch.theme((\n    selected-handle-color: color-palette.$teal-600,\n    selected-track-color: color-palette.$teal-300,\n  ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property   | Value Type | Description                                        |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean    | Indicates whether or not the switch is disabled.   |\n| `selected` | Boolean    | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\n"
  },
  {
    "path": "packages/mdc-switch/_index.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './switch-theme' show $light-theme, theme, theme-styles, density;\n"
  },
  {
    "path": "packages/mdc-switch/_switch-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/density/density';\n@use '@material/dom/dom';\n@use '@material/elevation/elevation-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/color-palette';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/shape/shape';\n@use './switch';\n\n$_density-config: (\n  size: (\n    minimum: 28px,\n    default: 48px,\n    maximum: 48px,\n  ),\n);\n$_hairline: color-palette.$grey-300;\n$_inverse-primary: color.scale(\n  theme-color.prop-value(primary),\n  $lightness: 75%\n);\n\n$_on-surface: color-palette.$grey-800;\n$_on-surface-variant: color-palette.$grey-700;\n$_on-surface-state-content: color-palette.$grey-900;\n$_primary-state-content: color.scale(\n  theme-color.prop-value(primary),\n  $blackness: 50%\n);\n\n/// TODO: Change to private when MWC has better access\n/// @access private\n$selectors: (\n  disabled: ':disabled',\n  focus: ':focus',\n  hover: ':hover',\n  pressed: ':active',\n  selected: '.mdc-switch--selected',\n  unselected: '.mdc-switch--unselected',\n);\n\n$light-theme: (\n  disabled-handle-elevation: 0,\n  disabled-handle-opacity: 0.38,\n  disabled-selected-handle-color: $_on-surface,\n  disabled-selected-icon-color: on-primary,\n  disabled-selected-icon-opacity: 0.38,\n  disabled-selected-track-color: $_on-surface,\n  disabled-track-opacity: 0.12,\n  disabled-unselected-handle-color: $_on-surface,\n  disabled-unselected-icon-color: on-primary,\n  disabled-unselected-icon-opacity: 0.38,\n  disabled-unselected-track-color: $_on-surface,\n  handle-elevation: 1,\n  handle-height: 20px,\n  handle-shadow-color: elevation-theme.$baseline-color,\n  handle-shape: 10px,\n  handle-surface-color: surface,\n  handle-width: 20px,\n  selected-focus-handle-color: $_primary-state-content,\n  selected-focus-state-layer-color: primary,\n  selected-focus-state-layer-opacity: 0.12,\n  selected-focus-track-color: $_inverse-primary,\n  selected-handle-color: primary,\n  selected-hover-handle-color: $_primary-state-content,\n  selected-hover-state-layer-color: primary,\n  selected-hover-state-layer-opacity: 0.04,\n  selected-hover-track-color: $_inverse-primary,\n  selected-icon-color: on-primary,\n  selected-icon-size: 18px,\n  selected-pressed-handle-color: $_primary-state-content,\n  selected-pressed-state-layer-color: primary,\n  selected-pressed-state-layer-opacity: 0.1,\n  selected-pressed-track-color: $_inverse-primary,\n  selected-track-color: $_inverse-primary,\n  state-layer-size: 48px,\n  track-height: 14px,\n  track-shape: 7px,\n  track-width: 36px,\n  unselected-focus-handle-color: $_on-surface-state-content,\n  unselected-focus-state-layer-color: $_on-surface,\n  unselected-focus-state-layer-opacity: 0.12,\n  unselected-focus-track-color: $_hairline,\n  unselected-handle-color: $_on-surface-variant,\n  unselected-hover-handle-color: $_on-surface-state-content,\n  unselected-hover-state-layer-color: $_on-surface,\n  unselected-hover-state-layer-opacity: 0.04,\n  unselected-hover-track-color: $_hairline,\n  unselected-icon-color: on-primary,\n  unselected-icon-size: 18px,\n  unselected-pressed-handle-color: $_on-surface-state-content,\n  unselected-pressed-state-layer-color: $_on-surface,\n  unselected-pressed-state-layer-opacity: 0.1,\n  unselected-pressed-track-color: $_hairline,\n  unselected-track-color: $_hairline,\n);\n\n$forced-colors-theme: (\n  disabled-handle-opacity: 1,\n  disabled-selected-icon-color: GrayText,\n  disabled-selected-icon-opacity: 1,\n  disabled-track-opacity: 1,\n  disabled-unselected-icon-color: GrayText,\n  disabled-unselected-icon-opacity: 1,\n  selected-icon-color: ButtonText,\n  unselected-icon-color: ButtonText,\n);\n\n@function density($density-scale) {\n  $size: density.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: size,\n  );\n\n  @return (state-layer-size: $size);\n}\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n\n  // TODO(b/185172301): replace with improved feature targeting\n  // IE11 Fallback\n  @if shadow-dom.$css-selector-fallback-declarations {\n    @include custom-properties.configure($emit-custom-properties: false) {\n      @include dom.ie11-support {\n        @include theme-styles($theme, $resolvers: $resolvers);\n      }\n    }\n  }\n\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties($theme, switch);\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  @return map.merge(\n    $theme,\n    _resolve-theme-handle-elevation(\n      $theme,\n      map.get($resolvers, elevation),\n      disabled-handle-elevation,\n      handle-elevation\n    )\n  );\n}\n\n@function _resolve-theme-handle-elevation($theme, $resolver, $keys...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $key in $keys {\n    // Resolve the value for each state key.\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: map.get($theme, $key),\n      $shadow-color: map.get($theme, handle-shadow-color)\n    );\n\n    // Update the theme with the resolved value.\n    $theme: map.set($theme, $key, $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  $theme: keys.create-theme-properties($theme, switch);\n\n  @include _selected-handle-color(\n    (\n      default: map.get($theme, selected-handle-color),\n      disabled: map.get($theme, disabled-selected-handle-color),\n      focus: map.get($theme, selected-focus-handle-color),\n      hover: map.get($theme, selected-hover-handle-color),\n      pressed: map.get($theme, selected-pressed-handle-color),\n    )\n  );\n\n  @include _unselected-handle-color(\n    (\n      default: map.get($theme, unselected-handle-color),\n      disabled: map.get($theme, disabled-unselected-handle-color),\n      focus: map.get($theme, unselected-focus-handle-color),\n      hover: map.get($theme, unselected-hover-handle-color),\n      pressed: map.get($theme, unselected-pressed-handle-color),\n    )\n  );\n\n  @include _handle-surface-color(map.get($theme, handle-surface-color));\n\n  @include _handle-elevation(\n    map.get($resolvers, elevation),\n    map.get($theme, handle-shadow-color),\n    (\n      default: map.get($theme, handle-elevation),\n      disabled: map.get($theme, disabled-handle-elevation),\n    )\n  );\n\n  @include _handle-height(map.get($theme, handle-height));\n  @include _handle-opacity(\n    (\n      disabled: map.get($theme, disabled-handle-opacity),\n    )\n  );\n\n  @include _handle-shape(map.get($theme, handle-shape));\n  @include _handle-width(map.get($theme, handle-width));\n\n  @include _selected-icon-color(\n    (\n      default: map.get($theme, selected-icon-color),\n      disabled: map.get($theme, disabled-selected-icon-color),\n    )\n  );\n\n  @include _unselected-icon-color(\n    (\n      default: map.get($theme, unselected-icon-color),\n      disabled: map.get($theme, disabled-unselected-icon-color),\n    )\n  );\n\n  @include _selected-icon-opacity(\n    (\n      disabled: map.get($theme, disabled-selected-icon-opacity),\n    )\n  );\n\n  @include _unselected-icon-opacity(\n    (\n      disabled: map.get($theme, disabled-unselected-icon-opacity),\n    )\n  );\n\n  @include _selected-icon-size(map.get($theme, selected-icon-size));\n  @include _unselected-icon-size(map.get($theme, unselected-icon-size));\n\n  @include _selected-ripple-color(\n    (\n      focus: map.get($theme, selected-focus-state-layer-color),\n      hover: map.get($theme, selected-hover-state-layer-color),\n      pressed: map.get($theme, selected-pressed-state-layer-color),\n    )\n  );\n\n  @include _unselected-ripple-color(\n    (\n      focus: map.get($theme, unselected-focus-state-layer-color),\n      hover: map.get($theme, unselected-hover-state-layer-color),\n      pressed: map.get($theme, unselected-pressed-state-layer-color),\n    )\n  );\n\n  @include _selected-ripple-opacity(\n    (\n      focus: map.get($theme, selected-focus-state-layer-opacity),\n      hover: map.get($theme, selected-hover-state-layer-opacity),\n      pressed: map.get($theme, selected-pressed-state-layer-opacity),\n    )\n  );\n\n  @include _unselected-ripple-opacity(\n    (\n      focus: map.get($theme, unselected-focus-state-layer-opacity),\n      hover: map.get($theme, unselected-hover-state-layer-opacity),\n      pressed: map.get($theme, unselected-pressed-state-layer-opacity),\n    )\n  );\n\n  @include _state-layer-size(map.get($theme, state-layer-size));\n  @include _track-height(map.get($theme, track-height));\n  @include _track-opacity(\n    (\n      disabled: map.get($theme, disabled-track-opacity),\n    )\n  );\n\n  @include _track-selected-color(\n    (\n      default: map.get($theme, selected-track-color),\n      disabled: map.get($theme, disabled-selected-track-color),\n      focus: map.get($theme, selected-focus-track-color),\n      hover: map.get($theme, selected-hover-track-color),\n      pressed: map.get($theme, selected-pressed-track-color),\n    )\n  );\n\n  @include _track-unselected-color(\n    (\n      default: map.get($theme, unselected-track-color),\n      disabled: map.get($theme, disabled-unselected-track-color),\n      focus: map.get($theme, unselected-focus-track-color),\n      hover: map.get($theme, unselected-hover-track-color),\n      pressed: map.get($theme, unselected-pressed-track-color),\n    )\n  );\n\n  @include _track-shape(map.get($theme, track-shape));\n  @include _track-width(map.get($theme, track-width));\n}\n\n@mixin _handle-color($colors) {\n  @include state.default($selectors) {\n    @include _set-handle-color(state.get-default-state($colors));\n  }\n\n  @include state.hover($selectors) {\n    @include _set-handle-color(state.get-hover-state($colors));\n  }\n\n  @include state.focus($selectors) {\n    @include _set-handle-color(state.get-focus-state($colors));\n  }\n\n  @include state.pressed($selectors) {\n    @include _set-handle-color(state.get-pressed-state($colors));\n  }\n\n  @include state.disabled($selectors) {\n    @include _set-handle-color(state.get-disabled-state($colors));\n  }\n}\n\n@mixin _set-handle-color($color) {\n  .mdc-switch__handle {\n    &::after {\n      @include theme.property(background, $color);\n    }\n  }\n}\n\n@mixin _selected-handle-color($colors) {\n  @include state.selected($selectors) {\n    @include _handle-color($colors);\n  }\n}\n\n@mixin _unselected-handle-color($colors) {\n  @include state.unselected($selectors) {\n    @include _handle-color($colors);\n  }\n}\n\n@mixin _handle-surface-color($color) {\n  .mdc-switch__handle {\n    // Sets the surface color for the handle. This is used so that when an\n    // opacity is applied to the \"main\" handle color, it will not bleed through\n    // and appear transparent on top of the track.\n    &::before {\n      @include theme.property(background, $color);\n    }\n  }\n}\n\n@mixin _handle-elevation($resolver, $shadow-color, $elevations) {\n  @include state.default($selectors) {\n    @include _set-handle-elevation(\n      $resolver,\n      $elevation: state.get-default-state($elevations),\n      $shadow-color: $shadow-color\n    );\n  }\n\n  @include state.disabled($selectors) {\n    @include _set-handle-elevation(\n      $resolver,\n      $elevation: state.get-disabled-state($elevations),\n      $shadow-color: $shadow-color\n    );\n  }\n}\n\n@mixin _set-handle-elevation($resolver, $args...) {\n  .mdc-switch__shadow {\n    @include elevation-theme.with-resolver($resolver, $args...);\n  }\n}\n\n@mixin _handle-height($height) {\n  .mdc-switch__focus-ring-wrapper,\n  .mdc-switch__handle {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin _handle-opacity($opacities) {\n  @include state.disabled($selectors) {\n    @include _set-handle-opacity(state.get-disabled-state($opacities));\n  }\n}\n\n@mixin _set-handle-opacity($opacity) {\n  .mdc-switch__handle {\n    // Only apply to the ::after pseudo element, which is the handle's \"main\"\n    // color. The ::before pseudo element is the surface color, which prevents\n    // the handle from bleeding through on the track.\n    &::after {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin _handle-shape($shape) {\n  .mdc-switch__handle {\n    @include shape.radius($shape);\n  }\n}\n\n@mixin _handle-width($width) {\n  .mdc-switch__handle {\n    @include theme.property(width, $width);\n  }\n\n  .mdc-switch__handle-track {\n    @include theme.property(\n      width,\n      'calc(100% - width)',\n      $replace: (width: $width)\n    );\n  }\n}\n\n@mixin _icon-color($colors) {\n  @include state.default($selectors) {\n    @include _set-icon-color(state.get-default-state($colors));\n  }\n\n  @include state.disabled($selectors) {\n    @include _set-icon-color(state.get-disabled-state($colors));\n  }\n}\n\n@mixin _set-icon-color($color) {\n  .mdc-switch__icon {\n    @include theme.property(fill, $color);\n  }\n}\n\n@mixin _selected-icon-color($colors) {\n  @include state.selected($selectors) {\n    @include _icon-color($colors);\n  }\n}\n\n@mixin _unselected-icon-color($colors) {\n  @include state.unselected($selectors) {\n    @include _icon-color($colors);\n  }\n}\n\n@mixin _icon-opacity($opacities) {\n  @include state.disabled($selectors) {\n    @include _set-icon-opacity(state.get-disabled-state($opacities));\n  }\n}\n\n@mixin _set-icon-opacity($opacity) {\n  .mdc-switch__icons {\n    @include theme.property(opacity, $opacity);\n  }\n}\n\n@mixin _selected-icon-opacity($opacities) {\n  @include state.selected($selectors) {\n    @include _icon-opacity($opacities);\n  }\n}\n\n@mixin _unselected-icon-opacity($opacities) {\n  @include state.unselected($selectors) {\n    @include _icon-opacity($opacities);\n  }\n}\n\n@mixin _icon-size($size) {\n  .mdc-switch__icon {\n    @include theme.property(width, $size);\n    @include theme.property(height, $size);\n  }\n}\n\n@mixin _selected-icon-size($size) {\n  @include state.selected($selectors) {\n    @include _icon-size($size);\n  }\n}\n\n@mixin _unselected-icon-size($size) {\n  @include state.unselected($selectors) {\n    @include _icon-size($size);\n  }\n}\n\n@mixin _ripple-color($colors) {\n  @include state.independent-elements(pressed) {\n    @include state.hover($selectors) {\n      @include ripple-theme.states-base-color(\n        state.get-hover-state($colors),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n\n    @include state.focus($selectors) {\n      @include ripple-theme.states-base-color(\n        state.get-focus-state($colors),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n\n    @include state.pressed($selectors) {\n      @include ripple-theme.states-base-color(\n        state.get-pressed-state($colors),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n  }\n}\n\n@mixin _selected-ripple-color($colors) {\n  @include state.selected($selectors) {\n    @include _ripple-color($colors);\n  }\n}\n\n@mixin _unselected-ripple-color($colors) {\n  @include state.unselected($selectors) {\n    @include _ripple-color($colors);\n  }\n}\n\n@mixin _ripple-opacity($opacities) {\n  @include state.independent-elements(pressed) {\n    @include state.hover($selectors) {\n      @include ripple-theme.states-hover-opacity(\n        state.get-hover-state($opacities),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n\n    @include state.focus($selectors) {\n      @include ripple-theme.states-focus-opacity(\n        state.get-focus-state($opacities),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n\n    @include state.pressed($selectors) {\n      @include ripple-theme.states-press-opacity(\n        state.get-pressed-state($opacities),\n        $ripple-target: switch.$ripple-target\n      );\n    }\n  }\n}\n\n@mixin _selected-ripple-opacity($opacities) {\n  @include state.selected($selectors) {\n    @include _ripple-opacity($opacities);\n  }\n}\n\n@mixin _unselected-ripple-opacity($opacities) {\n  @include state.unselected($selectors) {\n    @include _ripple-opacity($opacities);\n  }\n}\n\n@mixin _state-layer-size($size) {\n  .mdc-switch__ripple {\n    @include theme.property(height, $size);\n    @include theme.property(width, $size);\n  }\n}\n\n@mixin _track-height($height) {\n  .mdc-switch__track {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin _track-opacity($opacities) {\n  @include state.disabled($selectors) {\n    @include _set-track-opacity(state.get-disabled-state($opacities));\n  }\n}\n\n@mixin _set-track-opacity($opacity) {\n  .mdc-switch__track {\n    @include theme.property(opacity, $opacity);\n  }\n}\n\n@mixin _track-selected-color($colors) {\n  @include state.default($selectors) {\n    @include _set-track-selected-color(state.get-default-state($colors));\n  }\n\n  @include state.hover($selectors) {\n    @include _set-track-selected-color(state.get-hover-state($colors));\n  }\n\n  @include state.focus($selectors) {\n    @include _set-track-selected-color(state.get-focus-state($colors));\n  }\n\n  @include state.pressed($selectors) {\n    @include _set-track-selected-color(state.get-pressed-state($colors));\n  }\n\n  @include state.disabled($selectors) {\n    @include _set-track-selected-color(state.get-disabled-state($colors));\n  }\n}\n\n@mixin _set-track-selected-color($color) {\n  .mdc-switch__track::after {\n    @include theme.property(background, $color);\n  }\n}\n\n@mixin _track-unselected-color($colors) {\n  @include state.default($selectors) {\n    @include _set-track-unselected-color(state.get-default-state($colors));\n  }\n\n  @include state.hover($selectors) {\n    @include _set-track-unselected-color(state.get-hover-state($colors));\n  }\n\n  @include state.focus($selectors) {\n    @include _set-track-unselected-color(state.get-focus-state($colors));\n  }\n\n  @include state.pressed($selectors) {\n    @include _set-track-unselected-color(state.get-pressed-state($colors));\n  }\n\n  @include state.disabled($selectors) {\n    @include _set-track-unselected-color(state.get-disabled-state($colors));\n  }\n}\n\n@mixin _set-track-unselected-color($color) {\n  .mdc-switch__track::before {\n    @include theme.property(background, $color);\n  }\n}\n\n@mixin _track-shape($shape) {\n  .mdc-switch__track {\n    @include shape.radius($shape);\n  }\n}\n\n@mixin _track-width($width) {\n  @include theme.property(width, $width);\n}\n"
  },
  {
    "path": "packages/mdc-switch/_switch.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/animation';\n@use '@material/dom/dom';\n@use '@material/elevation/elevation';\n@use '@material/ripple/ripple-theme';\n@use '@material/ripple/ripple';\n@use '@material/focus-ring/focus-ring';\n@use '@material/rtl/rtl';\n@use '@material/theme/gss';\n\n$animation-duration: 75ms;\n$icon-exit-duration: 0.4 * $animation-duration;\n$icon-enter-duration: $animation-duration - $icon-exit-duration;\n$ripple-target: '.mdc-switch__ripple';\n\n@mixin static-styles() {\n  @include static-styles-without-ripple();\n\n  .mdc-switch {\n    @include ripple.common; // COPYBARA_COMMENT_THIS_LINE\n    @include ripple.surface($ripple-target: $ripple-target);\n    @include ripple.radius-unbounded($ripple-target: $ripple-target);\n\n    .mdc-switch__focus-ring-wrapper {\n      width: 100%;\n      position: absolute;\n      // IE11 hacks\n      top: 50%;\n      @include rtl.ignore-next-line();\n      left: 50%;\n      @include rtl.ignore-next-line();\n      transform: translate(-50%, -50%);\n      // end IE11 hacks\n    }\n\n    @include ripple-theme.focus {\n      .mdc-switch__focus-ring {\n        @include focus-ring.focus-ring();\n      }\n    }\n  }\n}\n\n@mixin static-styles-without-ripple() {\n  @include elevation.overlay-common; // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-switch {\n    @include root;\n\n    &:disabled {\n      @include disabled;\n    }\n  }\n\n  .mdc-switch__track {\n    @include track;\n    @include track-off;\n\n    .mdc-switch--selected & {\n      @include track-on;\n    }\n  }\n\n  .mdc-switch__handle-track {\n    @include handle-track;\n    @include handle-track-off;\n\n    .mdc-switch--selected & {\n      @include handle-track-on;\n    }\n  }\n\n  .mdc-switch__handle {\n    @include handle;\n  }\n\n  .mdc-switch__shadow {\n    @include shadow;\n  }\n\n  .mdc-elevation-overlay {\n    @include overlay;\n  }\n\n  .mdc-switch__ripple {\n    @include ripple;\n\n    .mdc-switch:disabled & {\n      @include ripple-disabled;\n    }\n  }\n\n  .mdc-switch__icons {\n    @include icons;\n  }\n\n  .mdc-switch__icon {\n    @include icon;\n    @include icon-hidden;\n  }\n\n  .mdc-switch--selected .mdc-switch__icon--on,\n  .mdc-switch--unselected .mdc-switch__icon--off {\n    @include icon-visible;\n  }\n}\n\n@mixin root() {\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0; // Stop from collapsing in flex containers\n  margin: 0;\n  outline: none;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n\n  &[hidden] {\n    display: none;\n  }\n}\n\n@mixin disabled() {\n  cursor: default;\n  pointer-events: none;\n}\n\n@mixin track() {\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n\n  &::before,\n  &::after {\n    border: 1px solid transparent; // high contrast mode\n    border-radius: inherit;\n    box-sizing: border-box;\n    content: '';\n    height: 100%;\n    @include gss.annotate($noflip: true);\n    left: 0;\n    position: absolute;\n    width: 100%;\n\n    // Added for Firefox 94 which broke transparent borders in Windows HCM.\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1740924.\n    @include dom.forced-colors-mode($exclude-ie11: true) {\n      border-color: currentColor;\n    }\n  }\n}\n\n@mixin track-on() {\n  &::before {\n    transition: animation.exit-temporary(transform, $animation-duration);\n    transform: translateX(100%);\n    @include rtl.rtl {\n      transform: translateX(-100%);\n    }\n  }\n\n  &::after {\n    transition: animation.enter(transform, $animation-duration);\n    transform: translateX(0);\n  }\n}\n\n@mixin track-off() {\n  &::before {\n    transition: animation.enter(transform, $animation-duration);\n    transform: translateX(0);\n  }\n\n  &::after {\n    transition: animation.exit-temporary(transform, $animation-duration);\n    transform: translateX(-100%);\n    @include rtl.rtl {\n      transform: translateX(100%);\n    }\n  }\n}\n\n@mixin handle-track() {\n  height: 100%;\n  // The handle track is used to move the handle across the width of the switch\n  // and may overflow the bounds of the component. It should not be used for\n  // pointer events.\n  pointer-events: none;\n  position: absolute;\n  top: 0; // Needed for IE11\n  transition: animation.standard(transform, $animation-duration);\n  // IE11 needs explicit left/right\n  @include rtl.reflexive(left, 0, right, auto);\n}\n\n@mixin handle-track-on() {\n  transform: translateX(100%);\n\n  @include rtl.rtl {\n    transform: translateX(-100%);\n  }\n}\n\n@mixin handle-track-off() {\n  transform: translateX(0);\n}\n\n@mixin handle() {\n  display: flex;\n  pointer-events: auto;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  // IE11 needs explicit left/right\n  @include rtl.reflexive(left, 0, right, auto);\n\n  &::before,\n  &::after {\n    border: 1px solid transparent; // high contrast mode\n    border-radius: inherit;\n    box-sizing: border-box;\n    content: '';\n    width: 100%;\n    height: 100%;\n    @include gss.annotate($noflip: true);\n    left: 0;\n    position: absolute;\n    top: 0; // IE11 fix\n    transition: animation.standard(background-color, $animation-duration),\n      animation.standard(border-color, $animation-duration);\n    // Move the handle background colors beneath the shadow overlay color,\n    // rather than move the overlay on top of the handle with a positive\n    // z-index, which would require moving all other content on top of the\n    // overlay with an even greater z-index.\n    z-index: -1;\n\n    // Added for Firefox 94 which broke transparent borders in Windows HCM.\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1740924.\n    @include dom.forced-colors-mode($exclude-ie11: true) {\n      border-color: currentColor;\n    }\n  }\n}\n\n@mixin shadow() {\n  border-radius: inherit;\n  bottom: 0;\n  @include gss.annotate($noflip: true);\n  left: 0;\n  position: absolute;\n  @include gss.annotate($noflip: true);\n  right: 0;\n  top: 0;\n}\n\n@mixin overlay() {\n  bottom: 0;\n  @include gss.annotate($noflip: true);\n  left: 0;\n  @include gss.annotate($noflip: true);\n  right: 0;\n  top: 0;\n}\n\n@mixin ripple() {\n  @include gss.annotate($noflip: true);\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  @include rtl.ignore-next-line();\n  transform: translate(-50%, -50%);\n  // Move ripple beneath shadow overlay and handle background colors (see\n  // handle() mixin for explanation).\n  z-index: -1;\n}\n\n@mixin ripple-disabled {\n  display: none;\n}\n\n@mixin icons() {\n  height: 100%;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n}\n\n@mixin icon() {\n  bottom: 0;\n  @include gss.annotate($noflip: true);\n  left: 0;\n  // IE11 needs top/right/bottom/left + margin instead of translate(-50%, -50%)\n  // because of SVG centering issues\n  margin: auto;\n  position: absolute;\n  @include gss.annotate($noflip: true);\n  right: 0;\n  top: 0;\n}\n\n@mixin icon-hidden() {\n  opacity: 0;\n  transition: animation.exit-permanent(opacity, $icon-exit-duration);\n}\n\n@mixin icon-visible() {\n  opacity: 1;\n  transition: animation.enter(\n    opacity,\n    $icon-enter-duration,\n    $delay: $icon-exit-duration\n  );\n}\n"
  },
  {
    "path": "packages/mdc-switch/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {CssClasses} from './constants';\n\n/**\n * The state of the switch.\n */\nexport interface MDCSwitchState {\n  /**\n   * Indicates whether or not the switch is disabled.\n   */\n  disabled: boolean;\n  /**\n   * Indicates whether or not the switch is processing and showing a loading\n   * indicator. A disabled switch cannot be processing.\n   */\n  processing: boolean;\n  /**\n   * If true, the switch is on. If false, the switch is off.\n   */\n  selected: boolean;\n}\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n *\n * This adapter is used to delegate state-only updates from the foundation\n * to the component. It does not delegate DOM or rendering logic, such as adding\n * or removing classes.\n */\nexport interface MDCSwitchAdapter {\n  /**\n   * The state of the component.\n   */\n  state: MDCSwitchState;\n}\n\n/**\n * Defines the shape of the adapter expected by the rendering foundation.\n *\n * This adapter is used to delegate state and rendering logic updates from the\n * rendering foundation to the component.\n */\nexport interface MDCSwitchRenderAdapter extends MDCSwitchAdapter {\n  /**\n   * Adds a class to the root element.\n   * @param className The class to add.\n   */\n  addClass(className: CssClasses): void;\n  /**\n   * Returns whether or not the root element has a class.\n   * @param className The class to check.\n   * @return true if the root element has the class, or false if not.\n   */\n  hasClass(className: CssClasses): boolean;\n  /**\n   * Checks if the root element is disabled.\n   * @return true if the root element is disabled, or false if not.\n   */\n  isDisabled(): boolean;\n  /**\n   * Removes a class from the root element.\n   * @param className The class to remove.\n   */\n  removeClass(className: CssClasses): void;\n  /**\n   * Sets the `aria-checked` attribute of the root element.\n   * @param ariaChecked The value of the attribute to set.\n   */\n  setAriaChecked(ariaChecked: string): void;\n  /**\n   * Disables or enables the root element.\n   * @param disabled True to disable the root element, or false to enable.\n   */\n  setDisabled(disabled: boolean): void;\n}\n"
  },
  {
    "path": "packages/mdc-switch/component.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCSwitchRenderAdapter, MDCSwitchState} from './adapter';\nimport {Selectors} from './constants';\nimport {MDCSwitchRenderFoundation} from './foundation';\n\n/**\n * `MDCSwitch` provides a component implementation of a Material Design switch.\n */\nexport class MDCSwitch extends\n    MDCComponent<MDCSwitchRenderFoundation> implements MDCSwitchState,\n                                                       MDCRippleCapableSurface {\n  /**\n   * Creates a new `MDCSwitch` and attaches it to the given root element.\n   * @param root The root to attach to.\n   * @return the new component instance.\n   */\n  static override attachTo(root: HTMLButtonElement) {\n    return new MDCSwitch(root);\n  }\n\n  disabled!: boolean;\n  processing!: boolean;\n  selected!: boolean;\n\n  ripple!: MDCRipple;\n\n  private rippleElement!: Element;\n\n  constructor(\n      public override root: HTMLButtonElement,\n      foundation?: MDCSwitchRenderFoundation) {\n    super(root, foundation);\n  }\n\n  override initialize() {\n    this.ripple = new MDCRipple(this.root, this.createRippleFoundation());\n  }\n\n  override initialSyncWithDOM() {\n    const rippleElement =\n        this.root.querySelector<HTMLElement>(Selectors.RIPPLE);\n    if (!rippleElement) {\n      throw new Error(`Switch ${Selectors.RIPPLE} element is required.`);\n    }\n\n    this.rippleElement = rippleElement;\n    this.root.addEventListener('click', this.foundation.handleClick);\n    this.foundation.initFromDOM();\n  }\n\n  override destroy() {\n    super.destroy();\n    this.ripple.destroy();\n    this.root.removeEventListener('click', this.foundation.handleClick);\n  }\n\n  override getDefaultFoundation() {\n    return new MDCSwitchRenderFoundation(this.createAdapter());\n  }\n\n  protected createAdapter(): MDCSwitchRenderAdapter {\n    return {\n      addClass: className => {\n        this.root.classList.add(className);\n      },\n      hasClass: className => this.root.classList.contains(className),\n      isDisabled: () => this.root.disabled,\n      removeClass: className => {\n        this.root.classList.remove(className);\n      },\n      setAriaChecked: ariaChecked => {\n        this.root.setAttribute('aria-checked', ariaChecked);\n      },\n      setDisabled: disabled => {\n        this.root.disabled = disabled;\n      },\n      state: this,\n    };\n  }\n\n  protected createRippleFoundation() {\n    return new MDCRippleFoundation(this.createRippleAdapter());\n  }\n\n  protected createRippleAdapter(): MDCRippleAdapter {\n    return {\n      ...MDCRipple.createAdapter(this),\n      computeBoundingRect: () => this.rippleElement.getBoundingClientRect(),\n      isUnbounded: () => true,\n    };\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/constants.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * CSS classes used for switch.\n */\nexport enum CssClasses {\n  PROCESSING = 'mdc-switch--processing',\n  SELECTED = 'mdc-switch--selected',\n  UNSELECTED = 'mdc-switch--unselected',\n}\n\n/**\n * Query selectors used for switch.\n */\nexport enum Selectors {\n  RIPPLE = '.mdc-switch__ripple',\n}\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_functions.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-switch-* hide $mdc-switch-track-width, $mdc-switch-track-height, $mdc-switch-thumb-diameter, $mdc-switch-ripple-size, $mdc-switch-minimum-size, $mdc-switch-maximum-size, $mdc-switch-density-scale, $mdc-switch-density-config, $mdc-switch-thumb-offset, $mdc-switch-thumb-active-margin, $mdc-switch-toggled-off-thumb-color, $mdc-switch-toggled-off-track-color, $mdc-switch-toggled-off-ripple-color, $mdc-switch-disabled-thumb-color, $mdc-switch-disabled-track-color, $mdc-switch-baseline-theme-color, mdc-switch-core-styles, mdc-switch-without-ripple, mdc-switch-ripple, mdc-switch-toggled-on-color, mdc-switch-toggled-off-color, mdc-switch-toggled-on-track-color, mdc-switch-toggled-on-thumb-color, mdc-switch-toggled-on-ripple-color, mdc-switch-toggled-off-track-color, mdc-switch-toggled-off-thumb-color, mdc-switch-toggled-off-ripple-color, mdc-switch-density, mdc-switch-ripple-size, mdc-switch-ripple-states-opacity, mdc-switch-base-, mdc-switch-track-, mdc-switch-thumb-underlay-, mdc-switch-native-control-, mdc-switch-thumb-, mdc-switch-track-checked-, mdc-switch-thumb-underlay-checked-, mdc-switch-native-control-checked-, mdc-switch-disabled-base-, mdc-switch-thumb-disabled-, mdc-switch-native-control-disabled-;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_functions.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/animation/variables';\n\n@function transition($property) {\n  @return $property 90ms variables.$standard-curve-timing-function;\n}\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_mixins.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/elevation\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/elevation\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow, mdc-transition-value, mdc-overlay-transition-value;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"./index\" as mdc-switch-*;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/density/functions' as density-functions;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './functions';\n@use './variables';\n@use '@material/dom/mixins' as dom-mixins;\n\n// Temporary suffix to add to shared selectors between versions for migration\n$deprecated-suffix: '-deprecated' !default;\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// switch styles. It is recommended that most users use `mdc-switch-core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  // postcss-bem-linter: define switch\n\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include density(variables.$density-scale, $query: $query);\n\n  .mdc-switch#{$deprecated-suffix} {\n    @include feature-targeting.targets($feat-structure) {\n      @include base_;\n    }\n\n    @include toggled-on-track-color(variables.$baseline-theme-color, $query);\n    @include toggled-on-thumb-color(variables.$baseline-theme-color, $query);\n    @include toggled-off-track-color(\n      variables.$toggled-off-track-color,\n      $query\n    );\n    @include toggled-off-thumb-color(\n      variables.$toggled-off-thumb-color,\n      $query\n    );\n  }\n\n  .mdc-switch__native-control {\n    @include feature-targeting.targets($feat-structure) {\n      @include native-control_;\n    }\n    @include feature-targeting.targets($feat-animation) {\n      transition: functions.transition(transform);\n    }\n  }\n\n  .mdc-switch__track#{$deprecated-suffix} {\n    @include track_($query);\n  }\n\n  .mdc-switch__thumb-underlay {\n    @include thumb-underlay_($query);\n  }\n\n  .mdc-switch__thumb {\n    @include thumb_($query);\n  }\n\n  .mdc-switch--checked {\n    @include feature-targeting.targets($feat-structure) {\n      .mdc-switch__track#{$deprecated-suffix} {\n        @include track-checked_;\n      }\n\n      .mdc-switch__thumb-underlay {\n        @include thumb-underlay-checked_;\n      }\n\n      .mdc-switch__native-control {\n        @include native-control-checked_;\n      }\n    }\n  }\n\n  .mdc-switch--disabled {\n    @include feature-targeting.targets($feat-structure) {\n      @include disabled-base_;\n\n      .mdc-switch__thumb {\n        @include thumb-disabled_;\n      }\n\n      .mdc-switch__native-control {\n        @include native-control-disabled_;\n      }\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// switch styles. It is recommended that most users use `mdc-switch-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-switch#{$deprecated-suffix} {\n    @include toggled-off-ripple-color(\n      variables.$toggled-off-ripple-color,\n      $query\n    );\n  }\n\n  .mdc-switch__thumb-underlay {\n    @include ripple.surface($query);\n    @include ripple.radius-unbounded(100%, $query);\n    @include ripple-theme.states(\n      variables.$baseline-theme-color,\n      false,\n      $query\n    );\n  }\n}\n\n@mixin toggled-on-color($color, $query: feature-targeting.all()) {\n  @include toggled-on-track-color($color, $query);\n  @include toggled-on-thumb-color($color, $query);\n  @include toggled-on-ripple-color($color, $query);\n}\n\n@mixin toggled-off-color($color, $query: feature-targeting.all()) {\n  @include toggled-off-track-color($color, $query);\n  @include toggled-off-thumb-color($color, $query);\n  @include toggled-off-ripple-color($color, $query);\n}\n\n@mixin toggled-on-track-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-switch--checked .mdc-switch__track#{$deprecated-suffix} {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin toggled-on-thumb-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-switch--checked .mdc-switch__thumb {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin toggled-on-ripple-color($color, $query: feature-targeting.all()) {\n  &.mdc-switch--checked .mdc-switch__thumb-underlay {\n    @include ripple-theme.states($color, false, $query);\n  }\n}\n\n@mixin toggled-off-track-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &:not(.mdc-switch--checked) .mdc-switch__track#{$deprecated-suffix} {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n@mixin toggled-off-thumb-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &:not(.mdc-switch--checked) .mdc-switch__thumb {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin toggled-off-ripple-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-switch--checked) .mdc-switch__thumb-underlay {\n    @include ripple-theme.states($color, false, $query);\n  }\n}\n\n///\n/// Sets density scale for switch.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n///     Supported density scale values are `-5`, `-4`, `-3`, `-2`, `-1`,\n///     `0` (default).\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $size: density-functions.prop-value(\n    $density-config: variables.$density-config,\n    $density-scale: $density-scale,\n    $property-name: size,\n  );\n\n  @include ripple-size($size, $query: $query);\n}\n\n@mixin ripple-size($ripple-size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Position for the tap target that contains the thumb to align the thumb\n  // correctly offset from the track.\n  $tap-target-initial-position: math.div(-$ripple-size, 2) +\n    math.div(variables.$thumb-diameter, 2);\n  // Value to cover the whole switch area (including the ripple) with the\n  // native control.\n  $native-control-width: variables.$track-width +\n    ($ripple-size - variables.$thumb-diameter);\n\n  .mdc-switch__thumb-underlay {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $tap-target-initial-position);\n\n      // Ensures the knob is centered on the track.\n      top: -(math.div($ripple-size - variables.$track-height, 2));\n      width: $ripple-size;\n      height: $ripple-size;\n    }\n  }\n\n  .mdc-switch__native-control {\n    @include feature-targeting.targets($feat-structure) {\n      width: $native-control-width;\n      height: $ripple-size;\n    }\n  }\n}\n\n///\n/// Customizes ripple opacities surrounding the thumb in `hover`, `focus`, or `press` states\n/// The customizations apply to both on and off switches to ensure symmetry\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n///\n@mixin ripple-states-opacity(\n  $opacity-map: (),\n  $query: feature-targeting.all()\n) {\n  // Ensure sufficient specificity to override base state opacities\n  &.mdc-switch#{$deprecated-suffix} .mdc-switch__thumb-underlay {\n    @include ripple-theme.states-opacities($opacity-map, $query: $query);\n  }\n}\n\n//\n// Private\n//\n\n// Structure\n@mixin base_ {\n  display: inline-block;\n  position: relative;\n  outline: none;\n  user-select: none;\n}\n\n@mixin track_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    box-sizing: border-box;\n    width: variables.$track-width;\n    height: variables.$track-height;\n    border: 1px solid transparent;\n    border-radius: math.div(variables.$track-height, 2);\n    opacity: 0.38;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: functions.transition(opacity),\n      functions.transition(background-color), functions.transition(border-color);\n  }\n}\n\n@mixin thumb-underlay_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    justify-content: center;\n    transform: translateX(0);\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: functions.transition(transform),\n      functions.transition(background-color), functions.transition(border-color);\n  }\n}\n\n@mixin native-control_ {\n  @include rtl.reflexive-position(left, 0);\n\n  position: absolute;\n  top: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n@mixin thumb_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include elevation-mixins.elevation($z-value: 2, $query: $query);\n\n  @include feature-targeting.targets($feat-structure) {\n    box-sizing: border-box;\n    width: variables.$thumb-diameter;\n    height: variables.$thumb-diameter;\n    border: math.div(variables.$thumb-diameter, 2) solid;\n    border-radius: 50%;\n    // Allow events to go through to the native control, necessary for IE and Edge.\n    pointer-events: none;\n    z-index: 1;\n  }\n}\n\n// Checked state\n\n@mixin track-checked_ {\n  opacity: 0.54;\n}\n\n@mixin thumb-underlay-checked_ {\n  transform: translateX(variables.$thumb-active-margin);\n\n  @include rtl.rtl {\n    transform: translateX(-(variables.$thumb-active-margin));\n  }\n}\n\n@mixin native-control-checked_ {\n  // Translate the native control the opposite direction so that the tap target stays the same.\n  transform: translateX(-(variables.$thumb-active-margin));\n\n  @include rtl.rtl {\n    transform: translateX(variables.$thumb-active-margin);\n  }\n}\n\n// Disabled state\n\n@mixin disabled-base_ {\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n@mixin thumb-disabled_ {\n  border-width: 1px; // In high contrast mode, only show outline of knob.\n}\n\n@mixin native-control-disabled_ {\n  cursor: default;\n  pointer-events: none;\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n  & .mdc-ripple-upgraded--background-focused .mdc-switch__thumb::before {\n    @include dom-mixins.transparent-border($border-width: 3px);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-switch-* hide mdc-switch-core-styles, mdc-switch-without-ripple, mdc-switch-ripple, mdc-switch-toggled-on-color, mdc-switch-toggled-off-color, mdc-switch-toggled-on-track-color, mdc-switch-toggled-on-thumb-color, mdc-switch-toggled-on-ripple-color, mdc-switch-toggled-off-track-color, mdc-switch-toggled-off-thumb-color, mdc-switch-toggled-off-ripple-color, mdc-switch-density, mdc-switch-ripple-size, mdc-switch-ripple-states-opacity, mdc-switch-base-, mdc-switch-track-, mdc-switch-thumb-underlay-, mdc-switch-native-control-, mdc-switch-thumb-, mdc-switch-track-checked-, mdc-switch-thumb-underlay-checked-, mdc-switch-native-control-checked-, mdc-switch-disabled-base-, mdc-switch-thumb-disabled-, mdc-switch-native-control-disabled-, mdc-switch-transition;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/density/variables' as density-variables;\n\n$track-width: 36px !default;\n$track-height: 14px !default;\n$thumb-diameter: 20px !default;\n$ripple-size: 48px !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  size: (\n    minimum: $minimum-size,\n    default: $maximum-size,\n    maximum: $maximum-size,\n  ),\n) !default;\n\n$thumb-active-margin: $track-width - $thumb-diameter !default;\n\n$toggled-off-thumb-color: surface !default;\n$toggled-off-track-color: on-surface !default;\n$toggled-off-ripple-color: #9e9e9e !default;\n$disabled-thumb-color: surface !default;\n$disabled-track-color: on-surface !default;\n\n$baseline-theme-color: secondary !default;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCSwitchAdapter {\n  /**\n   * Adds a CSS class to the root element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a CSS class from the root element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Sets checked state of the native HTML control underlying the switch.\n   */\n  setNativeControlChecked(checked: boolean): void;\n\n  /**\n   * Sets the disabled state of the native HTML control underlying the switch.\n   */\n  setNativeControlDisabled(disabled: boolean): void;\n\n  /**\n   * Sets an attribute value of the native HTML control underlying the switch.\n   */\n  setNativeControlAttr(attr: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {EventType, SpecificEventListener} from '@material/base/types';\nimport {applyPassive} from '@material/dom/events';\nimport {matches} from '@material/dom/ponyfill';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\nimport {safeAttrPrefix} from 'safevalues';\nimport {setElementPrefixedAttribute} from 'safevalues/dom';\n\nimport {MDCSwitchAdapter} from './adapter';\nimport {MDCSwitchFoundation} from './foundation';\n\n/** MDC Switch */\nexport class MDCSwitch\n  extends MDCComponent<MDCSwitchFoundation>\n  implements MDCRippleCapableSurface\n{\n  static override attachTo(root: HTMLElement) {\n    return new MDCSwitch(root);\n  }\n\n  private readonly rippleSurface = this.createRipple();\n\n  // Initialized in `initialSyncWithDOM`.\n  private changeHandler!: EventListener;\n\n  override destroy() {\n    super.destroy();\n    this.rippleSurface.destroy();\n    this.nativeControl.removeEventListener('change', this.changeHandler);\n  }\n\n  override initialSyncWithDOM() {\n    this.changeHandler = (...args) => {\n      this.foundation.handleChange(...args);\n    };\n    this.nativeControl.addEventListener('change', this.changeHandler);\n\n    // Sometimes the checked state of the input element is saved in the history.\n    // The switch styling should match the checked state of the input element.\n    // Do an initial sync between the native control and the foundation.\n    this.checked = this.checked;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCSwitchAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setNativeControlChecked: (checked) =>\n        (this.nativeControl.checked = checked),\n      setNativeControlDisabled: (disabled) =>\n        (this.nativeControl.disabled = disabled),\n      setNativeControlAttr: (attr, value) => {\n        setElementPrefixedAttribute(\n          [safeAttrPrefix`aria-`],\n          this.nativeControl,\n          attr,\n          value,\n        );\n      },\n    };\n    return new MDCSwitchFoundation(adapter);\n  }\n\n  get ripple() {\n    return this.rippleSurface;\n  }\n\n  get checked() {\n    return this.nativeControl.checked;\n  }\n\n  set checked(checked) {\n    this.foundation.setChecked(checked);\n  }\n\n  get disabled() {\n    return this.nativeControl.disabled;\n  }\n\n  set disabled(disabled) {\n    this.foundation.setDisabled(disabled);\n  }\n\n  private createRipple(): MDCRipple {\n    const {RIPPLE_SURFACE_SELECTOR} = MDCSwitchFoundation.strings;\n    const rippleSurface = this.root.querySelector<HTMLElement>(\n      RIPPLE_SURFACE_SELECTOR,\n    )!;\n\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      addClass: (className: string) => {\n        rippleSurface.classList.add(className);\n      },\n      computeBoundingRect: () => rippleSurface.getBoundingClientRect(),\n      deregisterInteractionHandler: <K extends EventType>(\n        eventType: K,\n        handler: SpecificEventListener<K>,\n      ) => {\n        this.nativeControl.removeEventListener(\n          eventType,\n          handler,\n          applyPassive(),\n        );\n      },\n      isSurfaceActive: () => matches(this.nativeControl, ':active'),\n      isUnbounded: () => true,\n      registerInteractionHandler: <K extends EventType>(\n        eventType: K,\n        handler: SpecificEventListener<K>,\n      ) => {\n        this.nativeControl.addEventListener(eventType, handler, applyPassive());\n      },\n      removeClass: (className: string) => {\n        rippleSurface.classList.remove(className);\n      },\n      updateCssVariable: (varName: string, value: string) => {\n        rippleSurface.style.setProperty(varName, value);\n      },\n    };\n    return new MDCRipple(this.root, new MDCRippleFoundation(adapter));\n  }\n\n  private get nativeControl() {\n    const {NATIVE_CONTROL_SELECTOR} = MDCSwitchFoundation.strings;\n    return this.root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/** CSS classes used by the switch. */\nconst cssClasses = {\n  /** Class used for a switch that is in the \"checked\" (on) position. */\n  CHECKED: 'mdc-switch--checked',\n  /** Class used for a switch that is disabled. */\n  DISABLED: 'mdc-switch--disabled',\n};\n\n/** String constants used by the switch. */\nconst strings = {\n  /** Aria attribute for checked or unchecked state of switch */\n  ARIA_CHECKED_ATTR: 'aria-checked',\n  /** A CSS selector used to locate the native HTML control for the switch.  */\n  NATIVE_CONTROL_SELECTOR: '.mdc-switch__native-control',\n  /**\n   * A CSS selector used to locate the ripple surface element for the switch.\n   */\n  RIPPLE_SURFACE_SELECTOR: '.mdc-switch__thumb-underlay',\n};\n\nexport {cssClasses, strings};\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCSwitchAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Switch Foundation */\nexport class MDCSwitchFoundation extends MDCFoundation<MDCSwitchAdapter> {\n  /** The string constants used by the switch. */\n  static override get strings() {\n    return strings;\n  }\n\n  /** The CSS classes used by the switch. */\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  /** The default Adapter for the switch. */\n  static override get defaultAdapter(): MDCSwitchAdapter {\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      setNativeControlChecked: () => undefined,\n      setNativeControlDisabled: () => undefined,\n      setNativeControlAttr: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCSwitchAdapter>) {\n    super({...MDCSwitchFoundation.defaultAdapter, ...adapter});\n  }\n\n  /** Sets the checked state of the switch. */\n  setChecked(checked: boolean) {\n    this.adapter.setNativeControlChecked(checked);\n    this.updateAriaChecked(checked);\n    this.updateCheckedStyling(checked);\n  }\n\n  /** Sets the disabled state of the switch. */\n  setDisabled(disabled: boolean) {\n    this.adapter.setNativeControlDisabled(disabled);\n    if (disabled) {\n      this.adapter.addClass(cssClasses.DISABLED);\n    } else {\n      this.adapter.removeClass(cssClasses.DISABLED);\n    }\n  }\n\n  /** Handles the change event for the switch native control. */\n  handleChange(event: Event) {\n    const nativeControl = event.target as HTMLInputElement;\n    this.updateAriaChecked(nativeControl.checked);\n    this.updateCheckedStyling(nativeControl.checked);\n  }\n\n  /** Updates the styling of the switch based on its checked state. */\n  private updateCheckedStyling(checked: boolean) {\n    if (checked) {\n      this.adapter.addClass(cssClasses.CHECKED);\n    } else {\n      this.adapter.removeClass(cssClasses.CHECKED);\n    }\n  }\n\n  private updateAriaChecked(checked: boolean) {\n    this.adapter.setNativeControlAttr(\n        strings.ARIA_CHECKED_ATTR, `${!!checked}`);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSwitchFoundation;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/mdc-switch-deprecated.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/mdc-switch.import.scss",
    "content": "// Must come first for configuration of deprecation\n@forward \"mdc-switch\";\n\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"variables\" as mdc-switch-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"mixins\" as mdc-switch-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"functions\" as mdc-switch-*;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/mdc-switch.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins' with ($deprecated-suffix: '');\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCRipple} from '../../../mdc-ripple/component';\nimport {supportsCssVariables} from '../../../mdc-ripple/util';\nimport {createFixture, html} from '../../../../testing/dom';\nimport {emitEvent} from '../../../../testing/dom/events';\nimport {createMockFoundation} from '../../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCSwitch} from '../component';\nimport {strings} from '../constants';\nimport {MDCSwitchFoundation} from '../foundation';\n\nconst {NATIVE_CONTROL_SELECTOR, RIPPLE_SURFACE_SELECTOR} = strings;\n\nfunction getFixture(): HTMLElement {\n  return createFixture(html`\n    <div class=\"mdc-switch\">\n      <div class=\"mdc-switch__track\"></div>\n      <div class=\"mdc-switch__thumb-underlay\">\n        <div class=\"mdc-switch__thumb\">\n          <input type=\"checkbox\" id=\"basic-switch\" class=\"mdc-switch__native-control\" role=\"switch\">\n        </div>\n      </div>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCSwitch(root);\n  const rippleSurface =\n      root.querySelector<HTMLElement>(RIPPLE_SURFACE_SELECTOR);\n  return {root, component, rippleSurface};\n}\n\ndescribe('MDCSwitch', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCSwitch instance', () => {\n    expect(MDCSwitch.attachTo(getFixture()) instanceof MDCSwitch).toBeTruthy();\n  });\n\n  if (supportsCssVariables(window)) {\n    it('#constructor initializes the root element with a ripple', () => {\n      const {rippleSurface} = setupTest();\n      jasmine.clock().tick(1);\n      expect(rippleSurface).toHaveClass('mdc-ripple-upgraded');\n    });\n\n    it('#destroy removes the ripple', () => {\n      const {component, rippleSurface} = setupTest();\n      jasmine.clock().tick(1);\n      component.destroy();\n      jasmine.clock().tick(1);\n      expect(rippleSurface).not.toHaveClass('mdc-ripple-upgraded');\n    });\n  }\n\n  it('get/set checked updates the checked value of the native switch input element',\n     () => {\n       const {root, component} = setupTest();\n       const inputEl =\n           root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n       component.checked = true;\n       expect(inputEl.checked).toBeTruthy();\n       expect(component.checked).toEqual(inputEl.checked);\n     });\n\n  it('get/set checked updates the component styles', () => {\n    const {root, component} = setupTest();\n    component.checked = true;\n    expect(root).toHaveClass(MDCSwitchFoundation.cssClasses.CHECKED);\n    component.checked = false;\n    expect(root).not.toHaveClass(MDCSwitchFoundation.cssClasses.CHECKED);\n  });\n\n  it('get/set disabled updates the disabled value of the native switch input element',\n     () => {\n       const {root, component} = setupTest();\n       const inputEl =\n           root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n       component.disabled = true;\n       expect(inputEl.disabled).toBeTruthy();\n       expect(component.disabled).toEqual(inputEl.disabled);\n       component.disabled = false;\n       expect(inputEl.disabled).toBeFalsy();\n       expect(component.disabled).toEqual(inputEl.disabled);\n     });\n\n  it('get/set disabled updates the component styles', () => {\n    const {root, component} = setupTest();\n    component.disabled = true;\n    expect(root).toHaveClass(MDCSwitchFoundation.cssClasses.DISABLED);\n    component.disabled = false;\n    expect(root).not.toHaveClass(MDCSwitchFoundation.cssClasses.DISABLED);\n  });\n\n  it('get/set checked updates the aria-checked of the native switch input element',\n     () => {\n       const {root, component} = setupTest();\n       const inputEl = root.querySelector<HTMLElement>(NATIVE_CONTROL_SELECTOR);\n       component.checked = true;\n       expect(\n           inputEl!.getAttribute(MDCSwitchFoundation.strings.ARIA_CHECKED_ATTR))\n           .toBe('true');\n       component.checked = false;\n       expect(\n           inputEl!.getAttribute(MDCSwitchFoundation.strings.ARIA_CHECKED_ATTR))\n           .toBe('false');\n     });\n\n  it('get ripple returns a MDCRipple instance', () => {\n    const {component} = setupTest();\n    expect(component.ripple instanceof MDCRipple).toBeTruthy();\n  });\n\n  function setupMockFoundationTest(root = getFixture()) {\n    const mockFoundation = createMockFoundation(MDCSwitchFoundation);\n    const component = new MDCSwitch(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  it('#initialSyncWithDOM calls foundation.setChecked', () => {\n    const root = getFixture();\n    const inputEl =\n        root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n    inputEl.checked = true;\n    const {mockFoundation} = setupMockFoundationTest(root);\n    expect(mockFoundation.setChecked).toHaveBeenCalledWith(true);\n    expect(mockFoundation.setChecked).toHaveBeenCalledTimes(1);\n  });\n\n  it('change handler is added to the native control element', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n\n    const inputEl =\n        root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n    emitEvent(inputEl, 'change');\n\n    expect(mockFoundation.handleChange).toHaveBeenCalledTimes(1);\n  });\n\n  it('change handler is removed from the native control element on destroy',\n     () => {\n       const {root, component, mockFoundation} = setupMockFoundationTest();\n       component.destroy();\n\n       const inputEl =\n           root.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR)!;\n       emitEvent(inputEl, 'change');\n\n       expect(mockFoundation.handleChange).not.toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as switch;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include switch.core-styles($query: $query);\n    @include switch.density(-1, $query: $query);\n    @include switch.toggled-on-color(on-surface, $query: $query);\n    @include switch.toggled-off-color(on-surface, $query: $query);\n    @include switch.toggled-on-ripple-color(on-surface, $query: $query);\n    @include switch.toggled-off-ripple-color(on-surface, $query: $query);\n    @include switch.toggled-on-track-color(on-surface, $query: $query);\n    @include switch.toggled-on-thumb-color(on-surface, $query: $query);\n    @include switch.toggled-off-track-color(on-surface, $query: $query);\n    @include switch.toggled-off-thumb-color(on-surface, $query: $query);\n    @include switch.ripple($query: $query);\n    @include switch.ripple-size(0, $query: $query);\n    @include switch.without-ripple($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCSwitchFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCSwitchFoundation);\n  return {foundation, mockAdapter};\n}\n\ndescribe('MDCSwitchFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCSwitchFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCSwitchFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    const {defaultAdapter} = MDCSwitchFoundation;\n    const methods =\n        Object.keys(defaultAdapter)\n            .filter((k) => typeof (defaultAdapter as any)[k] === 'function');\n\n    expect(methods.length).toEqual(Object.keys(defaultAdapter).length);\n    expect(methods).toEqual([\n      'addClass', 'removeClass', 'setNativeControlChecked',\n      'setNativeControlDisabled', 'setNativeControlAttr'\n    ]);\n    methods.forEach((m) => {\n      expect(() => (defaultAdapter as any)[m]).not.toThrow();\n    });\n  });\n\n  it('#setChecked updates the checked state', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setChecked(true);\n    expect(mockAdapter.setNativeControlChecked).toHaveBeenCalledWith(true);\n\n    foundation.setChecked(false);\n    expect(mockAdapter.setNativeControlChecked).toHaveBeenCalledWith(false);\n  });\n\n  it('#setChecked adds mdc-switch--checked to the switch element when set to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setChecked(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.CHECKED);\n     });\n\n  it('#setChecked removes mdc-switch--checked from the switch element when set to false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setChecked(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.CHECKED);\n     });\n\n  it('#setDisabled updates the disabled state', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.setNativeControlDisabled).toHaveBeenCalledWith(true);\n\n    foundation.setDisabled(false);\n    expect(mockAdapter.setNativeControlDisabled).toHaveBeenCalledWith(false);\n  });\n\n  it('#setDisabled adds mdc-switch--disabled to the switch element when set to true',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.DISABLED);\n     });\n\n  it('#setDisabled removes mdc-switch--disabled from the switch element when set to false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setDisabled(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.DISABLED);\n     });\n\n  it('#handleChange adds mdc-switch--checked to the switch when it is a checked state',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.handleChange({target: {checked: true}} as unknown as Event);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.CHECKED);\n     });\n\n  it('#handleChange removes mdc-switch--checked from the switch when it is an unchecked state',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       foundation.handleChange({target: {checked: false}} as unknown as Event);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCSwitchFoundation.cssClasses.CHECKED);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-switch/deprecated/test/mdc-switch.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../../testing/featuretargeting';\n\ndescribe('mdc-switch.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-switch/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCObserverFoundation} from '@material/base/observer-foundation';\n\nimport {MDCSwitchAdapter, MDCSwitchRenderAdapter} from './adapter';\nimport {CssClasses} from './constants';\n\n/**\n * `MDCSwitchFoundation` provides a state-only foundation for a switch\n * component.\n *\n * State observers and event handler entrypoints update a component's adapter's\n * state with the logic needed for switch to function.\n */\nexport class MDCSwitchFoundation extends MDCObserverFoundation<MDCSwitchAdapter> {\n  constructor(adapter: MDCSwitchAdapter) {\n    super(adapter);\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  /**\n   * Initializes the foundation and starts observing state changes.\n   */\n  override init() {\n    this.observe(this.adapter.state, {\n      disabled: this.stopProcessingIfDisabled,\n      processing: this.stopProcessingIfDisabled,\n    });\n  }\n\n  /**\n   * Event handler for switch click events. Clicking on a switch will toggle its\n   * selected state.\n   */\n  handleClick() {\n    if (this.adapter.state.disabled) {\n      return;\n    }\n\n    this.adapter.state.selected = !this.adapter.state.selected;\n  }\n\n  protected stopProcessingIfDisabled() {\n    if (this.adapter.state.disabled) {\n      this.adapter.state.processing = false;\n    }\n  }\n}\n/**\n * `MDCSwitchRenderFoundation` provides a state and rendering foundation for a\n * switch component.\n *\n * State observers and event handler entrypoints update a component's\n * adapter's state with the logic needed for switch to function.\n *\n * In response to state changes, the rendering foundation uses the component's\n * render adapter to keep the component's DOM updated with the state.\n */\nexport class MDCSwitchRenderFoundation extends MDCSwitchFoundation {\n  protected declare adapter: MDCSwitchRenderAdapter;\n\n  /**\n   * Initializes the foundation and starts observing state changes.\n   */\n  override init() {\n    super.init();\n    this.observe(this.adapter.state, {\n      disabled: this.onDisabledChange,\n      processing: this.onProcessingChange,\n      selected: this.onSelectedChange,\n    });\n  }\n\n  /**\n   * Initializes the foundation from a server side rendered (SSR) component.\n   * This will sync the adapter's state with the current state of the DOM.\n   *\n   * This method should be called after `init()`.\n   */\n  initFromDOM() {\n    // Turn off observers while setting state\n    this.setObserversEnabled(this.adapter.state, false);\n\n    this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED);\n    // Ensure aria-checked is set if attribute is not present\n    this.onSelectedChange();\n    this.adapter.state.disabled = this.adapter.isDisabled();\n    this.adapter.state.processing = this.adapter.hasClass(\n      CssClasses.PROCESSING,\n    );\n\n    // Re-observe state\n    this.setObserversEnabled(this.adapter.state, true);\n    this.stopProcessingIfDisabled();\n  }\n\n  protected onDisabledChange() {\n    this.adapter.setDisabled(this.adapter.state.disabled);\n  }\n\n  protected onProcessingChange() {\n    this.toggleClass(this.adapter.state.processing, CssClasses.PROCESSING);\n  }\n\n  protected onSelectedChange() {\n    this.adapter.setAriaChecked(String(this.adapter.state.selected));\n    this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED);\n    this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED);\n  }\n\n  private toggleClass(addClass: boolean, className: CssClasses) {\n    if (addClass) {\n      this.adapter.addClass(className);\n    } else {\n      this.adapter.removeClass(className);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/index.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n// TODO(b/185410690): remove deprecated export\nimport * as deprecated from './deprecated';\n\nexport {deprecated};\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\n"
  },
  {
    "path": "packages/mdc-switch/package.json",
    "content": "{\n  \"name\": \"@material/switch\",\n  \"description\": \"The Material Components for the web switch component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"switch\"\n  ],\n  \"main\": \"dist/mdc.switch.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-switch\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"safevalues\": \"^1.0.1\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/styles.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/dom/dom';\n@use './switch-theme';\n@use './switch';\n\n@include switch.static-styles();\n\n.mdc-switch {\n  @include switch-theme.theme-styles(switch-theme.$light-theme);\n}\n\n@include dom.forced-colors-mode {\n  .mdc-switch {\n    @include switch-theme.theme-styles(switch-theme.$forced-colors-theme);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-switch/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {\n  spyOnAllFunctions,\n  spyOnAllPrototypeFunctions,\n} from '../../../testing/helpers/jasmine';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {MDCSwitchRenderAdapter} from '../adapter';\nimport {MDCSwitch} from '../component';\nimport {CssClasses} from '../constants';\nimport {MDCSwitchRenderFoundation} from '../foundation';\n\nfunction getFixture() {\n  return createFixture<HTMLButtonElement>(html`\n    <button class=\"mdc-switch\" role=\"switch\" type=\"button\" aria-checked=\"false\">\n      <div class=\"mdc-switch__track\"></div>\n      <div class=\"mdc-switch__handle-track\">\n        <div class=\"mdc-switch__handle\">\n          <div class=\"mdc-switch__shadow\">\n            <div class=\"mdc-elevation-overlay\"></div>\n          </div>\n          <div class=\"mdc-switch__ripple\"></div>\n          <div class=\"mdc-switch__handle\">\n            <div class=\"mdc-switch__icons\">\n              <svg class=\"mdc-switch__icon mdc-switch__icon--on\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\">\n                <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n              </svg>\n              <svg class=\"mdc-switch__icon mdc-switch__icon--off\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\">\n                <path d=\"M20 13H4v-2h16v2z\" />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </button>\n  `);\n}\n\nclass MockMDCSwitch extends MDCSwitch {\n  static override attachTo(root: HTMLButtonElement) {\n    return new MockMDCSwitch(root);\n  }\n\n  adapter!: jasmine.SpyObj<MDCSwitchRenderAdapter>;\n  declare foundation: jasmine.SpyObj<MDCSwitchRenderFoundation>;\n\n  override getDefaultFoundation() {\n    const foundation = spyOnAllPrototypeFunctions(\n      super.getDefaultFoundation(),\n    ).and.callThrough();\n    this.foundation = this.foundation || foundation;\n    return foundation;\n  }\n\n  protected override createAdapter() {\n    const adapter = spyOnAllFunctions(super.createAdapter()).and.callThrough();\n    this.adapter = this.adapter || adapter;\n    return adapter;\n  }\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = MockMDCSwitch.attachTo(root);\n  return {\n    root,\n    component,\n    adapter: component.adapter,\n    foundation: component.foundation,\n  };\n}\n\ndescribe('MDCSwitch', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo initializes and returns a MDCSwitch instance', () => {\n    const {component} = setupTest();\n    expect(component instanceof MDCSwitch).toBeTruthy();\n  });\n\n  it('#initialSyncWithDOM() calls foundation initFromDOM()', () => {\n    const {foundation} = setupTest();\n    expect(foundation.initFromDOM).toHaveBeenCalledTimes(1);\n  });\n\n  it('#initialSyncWithDOM() adds foundation.handleClick listener to root', () => {\n    const {root, foundation} = setupTest();\n    root.click();\n    expect(foundation.handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  it('#destroy() removes foundation.handleClick listener from root', () => {\n    const {component, root, foundation} = setupTest();\n    component.destroy();\n    root.click();\n    expect(foundation.handleClick).not.toHaveBeenCalled();\n  });\n\n  it('adapter.addClass() adds classes to root', () => {\n    const {root, adapter} = setupTest();\n    expect(Array.from(root.classList)).not.toContain(CssClasses.PROCESSING);\n    adapter.addClass(CssClasses.PROCESSING);\n    expect(Array.from(root.classList)).toContain(CssClasses.PROCESSING);\n  });\n\n  it('adapter.hasClass() checks classes on root', () => {\n    const {root, adapter} = setupTest();\n    expect(adapter.hasClass(CssClasses.PROCESSING)).toBe(\n      false,\n      'returns false when class does not exist',\n    );\n    root.classList.add(CssClasses.PROCESSING);\n    expect(adapter.hasClass(CssClasses.PROCESSING)).toBe(\n      true,\n      'returns true when class exists',\n    );\n  });\n\n  it('adapter.isDisabled() returns root disabled property', () => {\n    const {root, adapter} = setupTest();\n    root.disabled = true;\n    expect(adapter.isDisabled()).toBe(true);\n  });\n\n  it('adapter.removeClass() removes classes from root', () => {\n    const {root, adapter} = setupTest();\n    root.classList.add(CssClasses.PROCESSING);\n    adapter.removeClass(CssClasses.PROCESSING);\n    expect(Array.from(root.classList)).not.toContain(CssClasses.PROCESSING);\n  });\n\n  it('adapter.setAriaChecked() sets aria-checked attribute on root', () => {\n    const {root, adapter} = setupTest();\n    adapter.setAriaChecked('true');\n    expect(root.getAttribute('aria-checked')).toBe('true');\n    adapter.setAriaChecked('false');\n    expect(root.getAttribute('aria-checked')).toBe('false');\n  });\n\n  it('adapter.state should be the component instance', () => {\n    const {adapter, component} = setupTest();\n    expect(adapter.state).toBe(component);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-switch/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {CssClasses} from '../constants';\nimport {MDCSwitchFoundation, MDCSwitchRenderFoundation} from '../foundation';\n\ndescribe('MDCSwitchFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  function setupTest() {\n    return setUpFoundationTest(\n        MDCSwitchFoundation,\n        {state: {disabled: false, processing: false, selected: false}});\n  }\n\n  it('#handleClick() toggles selected', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    foundation.handleClick();\n    expect(mockAdapter.state.selected)\n        .toBe(true, 'toggled from initial false to true');\n    foundation.handleClick();\n    expect(mockAdapter.state.selected).toBe(false);\n  });\n\n  it('#handleClick() does nothing when disabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.state.disabled = true;\n    foundation.handleClick();\n    expect(mockAdapter.state.selected).toBe(false, 'should not toggle to true');\n  });\n\n  it('#stopProcessingIfDisabled() sets processing to false when disabling',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.state.processing = true;\n       mockAdapter.state.disabled = true;\n       expect(mockAdapter.state.processing)\n           .toBe(false, 'processing set to false when disabled = true');\n     });\n\n  it('#stopProcessingIfDisabled() disallows processing if already disabled',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.state.disabled = true;\n       mockAdapter.state.processing = true;\n       expect(mockAdapter.state.processing)\n           .toBe(\n               false,\n               'processing should be set back to false when already disabled');\n     });\n\n  it('#stopProcessingIfDisabled() allows processing if enabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    mockAdapter.state.processing = true;\n    expect(mockAdapter.state.processing)\n        .toBe(true, 'should be true when not disabled');\n  });\n});\n\ndescribe('MDCSwitchRenderFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  function setupTest() {\n    return setUpFoundationTest(MDCSwitchRenderFoundation, {\n      state: {disabled: false, processing: false, selected: false},\n      addClass: () => {},\n      hasClass: () => false,\n      isDisabled: () => false,\n      removeClass: () => false,\n      setAriaChecked: () => {},\n      setDisabled: () => {},\n    });\n  }\n\n  it('#initFromDOM() sets selected if adapter has class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    // TODO(b/183749291): remove explicit arg type when Jasmine is updated\n    mockAdapter.hasClass.and.callFake(\n        (name: CssClasses) => name === CssClasses.SELECTED);\n    foundation.init();\n    foundation.initFromDOM();\n    expect(mockAdapter.state.selected).toBe(true);\n  });\n\n  it('#initFromDOM() ensures aria-checked is set in case it does not exist',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.initFromDOM();\n       // Default selected is false, aria-checked should be false\n       expect(mockAdapter.setAriaChecked).toHaveBeenCalledWith('false');\n     });\n\n  it('#initFromDOM() sets disabled from adapter.isDisabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isDisabled.and.returnValue(true);\n    foundation.init();\n    foundation.initFromDOM();\n    expect(mockAdapter.state.disabled).toBe(true);\n  });\n\n  it('#initFromDOM() sets processing if adapter has class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    // TODO(b/183749291): remove explicit arg type when Jasmine is updated\n    mockAdapter.hasClass.and.callFake(\n        (name: CssClasses) => name === CssClasses.PROCESSING);\n    foundation.init();\n    foundation.initFromDOM();\n    expect(mockAdapter.state.processing).toBe(true);\n  });\n\n  it('#initFromDOM() stops processing if adapter is disabled and has processing class',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       // TODO(b/183749291): remove explicit arg type when Jasmine is updated\n       mockAdapter.hasClass.and.callFake(\n           (name: CssClasses) => name === CssClasses.PROCESSING);\n       mockAdapter.isDisabled.and.returnValue(true);\n       foundation.init();\n       foundation.initFromDOM();\n       expect(mockAdapter.state.processing)\n           .toBe(\n               false,\n               'should not be processing if adapter.isDisabled() returns false');\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.PROCESSING);\n     });\n\n  it('#onDisabledChange() calls adapter.setDisabled when disabled changes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.state.disabled = true;\n       expect(mockAdapter.setDisabled).toHaveBeenCalledWith(true);\n     });\n\n  it(`#onProcessingChange() updates ${\n         CssClasses.PROCESSING} when processing changes`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.state.processing = true;\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.PROCESSING);\n       mockAdapter.state.processing = false;\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.PROCESSING);\n     });\n\n  it('#onSelectedChange() calls adapter.setAriaChecked when selected changes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       mockAdapter.state.selected = true;\n       expect(mockAdapter.setAriaChecked).toHaveBeenCalledWith('true');\n       mockAdapter.state.selected = false;\n       expect(mockAdapter.setAriaChecked).toHaveBeenCalledWith('false');\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-tab/README.md",
    "content": "<!--docs:\ntitle: \"Tab\"\nlayout: detail\nsection: components\nexcerpt: \"Governs the visibility of one of several groups of content.\"\niconId: tabs\npath: /catalog/tabs/tab/\n-->\n\n# Tab\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nEach Tab governs the visibility of one group of content.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<button class=\"mdc-tab\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\">\n  <span class=\"mdc-tab__content\">\n    <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n    <span class=\"mdc-tab__text-label\">Favorites</span>\n  </span>\n  <span class=\"mdc-tab-indicator\">\n    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n  </span>\n  <span class=\"mdc-tab__ripple\"></span>\n  <div class=\"mdc-tab__focus-ring\"></div>\n</button>\n```\n\nThe `mdc-tab__focus-ring` element ensures that a focus indicator is displayed in high contrast mode around the active/focused tab.\n\n### Styles\n\n```scss\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTab} from '@material/tab';\n\nconst tab = new MDCTab(document.querySelector('.mdc-tab'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Tab\n\n> *NOTE*: Don't forget to add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` subcomponent.\n\n```html\n<button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\">\n  <span class=\"mdc-tab__content\">\n    <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n    <span class=\"mdc-tab__text-label\">Favorites</span>\n  </span>\n  <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n    <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n  </span>\n  <span class=\"mdc-tab__ripple\"></span>\n  <div class=\"mdc-tab__focus-ring\"></div>\n</button>\n```\n\n### Tab with Indicator Spanning Only Content\n\nIn the example under Basic Usage, the Tab Indicator will span the entire tab. Alternatively, the tab indicator can be\nset up to span only the content of the tab if it is instead placed _within_ the `mdc-tab__content` element:\n\n```html\n<button class=\"mdc-tab\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\">\n  <span class=\"mdc-tab__content\">\n    <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n    <span class=\"mdc-tab__text-label\">Favorites</span>\n    <span class=\"mdc-tab-indicator\">\n      <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n    </span>\n  </span>\n  <span class=\"mdc-tab__ripple\"></span>\n  <div class=\"mdc-tab__focus-ring\"></div>\n</button>\n```\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab` | Mandatory.\n`mdc-tab__content` | Mandatory. Container of tab icon, text label and tab indicator.\n`mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab.\n`mdc-tab--active` | Optional. Indicates that the tab is active.\n`mdc-tab--stacked` | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally.\n`mdc-tab--min-width` | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap.\n`mdc-tab__text-label` | Optional. Indicates the text label of the tab.\n`mdc-tab__icon` | Optional. Indicates a leading icon in the tab.\n\n### Sass Mixins\n\nTo customize the colors of any part of the tab, use the following mixins.\n\nMixin | Description\n--- | ---\n`text-label-color($color)` | Customizes the color of the tab text label.\n`icon-color($color)` | Customizes the color of the tab icon.\n`states-color($color)`| Customizes the base states color, which affects hover/focus states and the press ripple.\n`ink-color($color)` | Customizes the text label, icon, and base states color.\n`active-text-label-color($color)`  | Customizes the color of the active tab's text label.\n`active-icon-color($color)`  | Customizes the color of the active tab's icon.\n`active-states-color($color)`  | Customizes the color of the active tab's states.\n`parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.\n`fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.\n`horizontal-padding($padding)` | Sets the horizontal padding of the tab.\n`height($height)` | Sets custom height to tab bar.\n`text-transform($transform)` | Sets tab `text-transform` property\n\n## `MDCTab` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`id` | `string` | Value of the root tab element's `id` attribute.\n`active` | `boolean` (read-only) | Allows getting the active state of the tab.\n`focusOnActivate` | `boolean` (write-only) | Sets whether the tab should focus itself when activated. Defaults to `true`.\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the indicator.  `previousIndicatorClientRect` is an optional argument.\n`deactivate() => void` | Deactivates the indicator.\n`focus() => void` | Focuses the tab.\n`computeIndicatorClientRect() => ClientRect` | Returns the bounding client rect of the indicator.\n`computeDimensions() => MDCTabDimensions` | Returns the dimensions of the Tab.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTab:interacted` | `{\"detail\": {\"tabId\": string}}` | Emitted when the Tab is interacted with, regardless of its active state. Used by parent components to know which Tab to activate.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given class.\n`setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value.\n`activateIndicator(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument.\n`deactivateIndicator() => void` | Deactivates the tab indicator subcomponent.\n`getOffsetLeft() => number` | Returns the `offsetLeft` value of the root element.\n`getOffsetWidth() => number` | Returns the `offsetWidth` value of the root element.\n`getContentOffsetLeft() => number` | Returns the `offsetLeft` value of the content element.\n`getContentOffsetWidth() => number` | Returns the `offsetWidth` value of the content element.\n`notifyInteracted() => void` | Emits the `MDCTab:interacted` event.\n`focus() => void` | Applies focus to the root element.\n\n### `MDCTabFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleClick() => void` | Handles the logic for the `\"click\"` event.\n`isActive() => boolean` | Returns whether the tab is active.\n`setFocusOnActivate(focusOnActivate: boolean) => void` | Sets whether the tab should focus itself when activated.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument.\n`deactivate() => void` | Deactivates the tab.\n`computeDimensions() => MDCTabDimensions` | Returns the dimensions of the tab.\n\n### `MDCTabFoundation` Event Handlers\n\nWhen wrapping the Tab component, it is necessary to register the following event handler. For an example of this, see the [`MDCTab`](component.ts) component's `initialSyncWithDOM` method.\n\nEvent | Element | Foundation Handler\n--- | --- | ---\n`click` | Root element | `handleClick()`\n"
  },
  {
    "path": "packages/mdc-tab/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-tab/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"./index\" as mdc-tab-*;\n@forward \"@material/tab-indicator\" as mdc-tab-indicator-*;\n"
  },
  {
    "path": "packages/mdc-tab/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use '@material/rtl/rtl';\n@use '@material/tab-indicator/mixins' as tab-indicator-mixins;\n@use './variables';\n\n// Public mixins\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include without-ripple($query);\n  @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-tab {\n    @include min-width(variables.$min-width, $query);\n    @include horizontal-padding(variables.$horizontal-padding, $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      flex: 1 0 auto;\n      justify-content: center;\n      box-sizing: border-box;\n      // Explicitly setting margin to 0 is to override safari default margin for button elements.\n      margin: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      border: none;\n      outline: none;\n      text-align: center;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-appearance: none;\n      z-index: 1;\n\n      // Firefox still draws a dotted border around focused buttons unless specifically overridden.\n      &::-moz-focus-inner {\n        padding: 0;\n        border: 0;\n      }\n\n      &[hidden] {\n        display: none;\n      }\n    }\n  }\n\n  .mdc-tab--min-width {\n    @include feature-targeting.targets($feat-structure) {\n      flex: 0 1 auto;\n    }\n  }\n\n  .mdc-tab__content {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: inherit;\n      pointer-events: none;\n    }\n  }\n\n  .mdc-tab__text-label {\n    @include feature-targeting.targets($feat-animation) {\n      transition: 150ms color linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-block;\n      // Setting line-height here overrides the line-height from the typography\n      // mixin above. The line-height needs to be overridden so that the spacing\n      // between the text label and the icon as well as the text label and the\n      // bottom of the tab remain the same.\n      line-height: 1;\n      z-index: 2;\n    }\n  }\n\n  .mdc-tab__icon {\n    @include feature-targeting.targets($feat-animation) {\n      transition: 150ms color linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 2;\n    }\n  }\n\n  .mdc-tab--stacked {\n    @include stacked_($query);\n  }\n\n  .mdc-tab--active {\n    .mdc-tab__text-label,\n    .mdc-tab__icon {\n      @include feature-targeting.targets($feat-animation) {\n        transition-delay: 100ms;\n      }\n    }\n  }\n\n  .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-box(padding, left, 8px);\n    }\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define tab\n\n  .mdc-tab {\n    @include base_($query);\n  }\n\n  .mdc-tab__content {\n    @include content_($query);\n  }\n\n  .mdc-tab__icon {\n    @include feature-targeting.targets($feat-structure) {\n      width: variables.$icon-size;\n      height: variables.$icon-size;\n      font-size: variables.$icon-size;\n    }\n  }\n\n  .mdc-tab--active {\n    @include active_($query);\n  }\n\n  .mdc-tab {\n    @include feature-targeting.targets($feat-structure) {\n      background: none;\n    }\n  }\n\n  @include static-styles($query: $query);\n  // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  @include ripple_($query);\n}\n\n@mixin horizontal-padding($padding, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    padding-right: $padding;\n    padding-left: $padding;\n  }\n}\n\n@mixin text-label-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-tab__text-label {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-tab__icon {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n\n      fill: currentColor;\n    }\n  }\n}\n\n@mixin states-color($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states(\n    $color,\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n}\n\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @include icon-color($color, $query);\n  @include states-color($color, $query);\n  @include text-label-color($color, $query);\n}\n\n@mixin active-text-label-color($color, $query: feature-targeting.all()) {\n  &.mdc-tab--active {\n    @include text-label-color($color, $query);\n  }\n}\n\n@mixin active-icon-color($color, $query: feature-targeting.all()) {\n  &.mdc-tab--active {\n    @include icon-color($color, $query);\n  }\n}\n\n@mixin active-states-color($color, $query: feature-targeting.all()) {\n  &.mdc-tab--active {\n    @include states-color($color, $query);\n  }\n}\n\n@mixin parent-positioning($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: relative;\n  }\n}\n\n@mixin fixed-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    flex: 0 1 $width;\n  }\n}\n\n///\n/// Sets tab height\n///\n/// @param {Number} $height Height value in `px`.\n///\n@mixin height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n///\n/// Sets tab text transform\n///\n/// @param {String} $transform The text-transform property to apply.\n///\n@mixin text-transform($transform, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    text-transform: $transform;\n  }\n}\n\n///\n/// Sets tab min-width.\n///\n/// @param {Number} $min-width Minimum width value in `px`.\n///\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    min-width: $min-width;\n  }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include typography.typography(button, $query);\n  @include text-label-color(variables.$text-label-color-default, $query);\n  @include icon-color(variables.$icon-color-default, $query);\n  @include tab-indicator-mixins.surface($query);\n\n  @include ripple-theme.focus() {\n    &.mdc-tab--active .mdc-tab__focus-ring {\n      @include focus-ring.focus-ring(\n        $query: $query,\n        $ring-radius: 10px,\n        $container-outer-padding-vertical: -6px,\n        $container-outer-padding-horizontal: -4px\n      );\n\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: -2px;\n        // Set z-index to +1 above the .mdc-tab\n        z-index: 2;\n      }\n    }\n\n    .mdc-tab__focus-ring {\n      @include focus-ring.focus-ring(\n        $query: $query,\n        $ring-radius: 10px,\n        $container-outer-padding-vertical: -4px,\n        $container-outer-padding-horizontal: -4px\n      );\n\n      @include feature-targeting.targets($feat-structure) {\n        // Set z-index to +1 above the .mdc-tab\n        z-index: 2;\n      }\n    }\n  }\n}\n\n@mixin ripple_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-tab {\n    @include ripple.surface(\n      $query,\n      $ripple-target: variables.$ripple-target,\n      $include-will-change: false\n    );\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n    @include ripple-theme.states(\n      $color: primary,\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n  }\n\n  #{variables.$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      // TODO(b/151931961): Remove the following line once resolved\n      will-change: transform, opacity;\n    }\n  }\n}\n\n@mixin content_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include tab-indicator-mixins.surface($query);\n}\n\n@mixin stacked_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-tab__content {\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .mdc-tab__text-label {\n      padding-top: 6px;\n      padding-bottom: 4px;\n    }\n  }\n}\n\n@mixin active_($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include text-label-color(variables.$text-label-color-active, $query);\n  @include icon-color(variables.$icon-color-active, $query);\n}\n"
  },
  {
    "path": "packages/mdc-tab/_tab-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/keys';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use '@material/tokens/resolvers';\n\n$primary-light-theme: (\n  active-focus-state-layer-color: theme-color.$primary,\n  active-focus-state-layer-opacity: 0.12,\n  active-hover-state-layer-color: theme-color.$primary,\n  active-hover-state-layer-opacity: 0.04,\n  active-pressed-state-layer-color: theme-color.$primary,\n  active-pressed-state-layer-opacity: 0.1,\n  container-color: theme-color.$surface,\n  container-elevation: elevation-theme.get-elevation(0),\n  container-height: 48px,\n  container-shape: 0,\n  inactive-focus-state-layer-color: theme-color.$on-surface,\n  inactive-focus-state-layer-opacity: 0.12,\n  inactive-hover-state-layer-color: theme-color.$on-surface,\n  inactive-hover-state-layer-opacity: 0.04,\n  inactive-pressed-state-layer-color: theme-color.$on-surface,\n  inactive-pressed-state-layer-opacity: 0.1,\n  with-icon-active-focus-icon-color: theme-color.$primary,\n  with-icon-active-hover-icon-color: theme-color.$primary,\n  with-icon-active-icon-color: theme-color.$primary,\n  with-icon-active-pressed-icon-color: theme-color.$primary,\n  with-icon-and-label-text-container-height: 64px,\n  with-icon-icon-size: 24px,\n  with-icon-inactive-focus-icon-color: theme-color.$on-surface,\n  with-icon-inactive-hover-icon-color: theme-color.$on-surface,\n  with-icon-inactive-icon-color: theme-color.$on-surface,\n  with-icon-inactive-pressed-icon-color: theme-color.$on-surface,\n  with-label-text-active-focus-label-text-color: theme-color.$primary,\n  with-label-text-active-hover-label-text-color: theme-color.$primary,\n  with-label-text-active-label-text-color: theme-color.$primary,\n  with-label-text-active-pressed-label-text-color: theme-color.$primary,\n  with-label-text-inactive-focus-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-hover-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-pressed-label-text-color: theme-color.$on-surface,\n  with-label-text-label-text-font: typography.get-font(subhead2),\n  with-label-text-label-text-size: typography.get-size(subhead2),\n  with-label-text-label-text-letter-spacing: typography.get-tracking(subhead2),\n  with-label-text-label-text-line-height: typography.get-line-height(subhead2),\n  with-label-text-label-text-weight: typography.get-weight(subhead2),\n);\n\n$secondary-light-theme: (\n  active-label-text-color: null,\n  container-color: null,\n  container-elevation: null,\n  container-height: null,\n  container-shadow-color: null,\n  container-shape: null,\n  focus-label-text-color: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-label-text-color: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  inactive-label-text-color: null,\n  label-text-font: null,\n  label-text-size: null,\n  label-text-letter-spacing: null,\n  label-text-line-height: null,\n  label-text-weight: null,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  with-icon-active-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-inactive-icon-color: null,\n  with-icon-pressed-icon-color: null,\n  with-icon-icon-size: null,\n);\n\n$_ripple-target: '.mdc-tab__ripple';\n$custom-property-prefix: 'tab';\n$custom-property-prefix-primary: 'primary-navigation-tab';\n$custom-property-prefix-secondary: 'secondary-navigation-tab';\n\n@mixin primary-navigation-tab-theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($primary-light-theme, $theme);\n  $theme: typography.resolve-theme(\n    $theme,\n    map.get($resolvers, typography),\n    with-label-text-label-text\n  );\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix-primary\n  );\n}\n\n@mixin secondary-navigation-tab-theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($secondary-light-theme, $theme);\n  $theme: typography.resolve-theme(\n    $theme,\n    map.get($resolvers, typography),\n    label-text\n  );\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix-secondary\n  );\n}\n\n@mixin primary-navigation-tab-theme-styles(\n  $theme,\n  $resolvers: resolvers.$material\n) {\n  // TODO(b/251881053): Use theme-styles mixin from validate module\n  // when all customers are migrated\n  @include theme.validate-theme-styles($primary-light-theme, $theme);\n  $theme: typography.resolve-theme(\n    $theme,\n    map.get($resolvers, typography),\n    with-label-text-label-text\n  );\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix-primary\n  );\n\n  // TODO(b/191298796): Use independent state layer color mixins when available.\n  @include _active-state-layer-color(\n    map.get($theme, active-hover-state-layer-color) or\n      map.get($theme, active-focus-state-layer-color) or\n      map.get($theme, active-pressed-state-layer-color)\n  );\n  @include _active-state-layer-opacity(\n    (\n      hover: map.get($theme, active-hover-state-layer-opacity),\n      focus: map.get($theme, active-focus-state-layer-opacity),\n      pressed: map.get($theme, active-pressed-state-layer-opacity),\n    )\n  );\n\n  // TODO(b/191298796): Use independent state layer color mixins when available.\n  @include _inactive-state-layer-color(\n    map.get($theme, inactive-hover-state-layer-color) or\n      map.get($theme, inactive-focus-state-layer-color) or\n      map.get($theme, inactive-pressed-state-layer-color)\n  );\n  @include _inactive-state-layer-opacity(\n    (\n      hover: map.get($theme, inactive-hover-state-layer-opacity),\n      focus: map.get($theme, inactive-focus-state-layer-opacity),\n      pressed: map.get($theme, inactive-pressed-state-layer-opacity),\n    )\n  );\n\n  @include _container-color(map.get($theme, container-color));\n  @include _container-elevation(map.get($theme, container-elevation));\n  @include _container-height(map.get($theme, container-height));\n  @include _container-shape(map.get($theme, container-shape));\n\n  @include _with-icon-and-label-text-container-height(\n    map.get($theme, with-icon-and-label-text-container-height)\n  );\n  @include _icon-size(map.get($theme, with-icon-icon-size));\n\n  @include _active-icon-color(\n    (\n      default: map.get($theme, with-icon-active-icon-color),\n      hover: map.get($theme, with-icon-active-hover-icon-color),\n      focus: map.get($theme, with-icon-active-focus-icon-color),\n      pressed: map.get($theme, with-icon-active-pressed-icon-color),\n    )\n  );\n\n  @include _inactive-icon-color(\n    (\n      default: map.get($theme, with-icon-inactive-icon-color),\n      hover: map.get($theme, with-icon-inactive-hover-icon-color),\n      focus: map.get($theme, with-icon-inactive-focus-icon-color),\n      pressed: map.get($theme, with-icon-inactive-pressed-icon-color),\n    )\n  );\n\n  @include _active-label-text-color(\n    (\n      default: map.get($theme, with-label-text-active-label-text-color),\n      hover: map.get($theme, with-label-text-active-hover-label-text-color),\n      focus: map.get($theme, with-label-text-active-focus-label-text-color),\n      pressed: map.get($theme, with-label-text-active-pressed-label-text-color),\n    )\n  );\n\n  @include _inactive-label-text-color(\n    (\n      default: map.get($theme, with-label-text-inactive-label-text-color),\n      hover: map.get($theme, with-label-text-inactive-hover-label-text-color),\n      focus: map.get($theme, with-label-text-inactive-focus-label-text-color),\n      pressed:\n        map.get($theme, with-label-text-inactive-pressed-label-text-color),\n    )\n  );\n\n  @include _label-text-font-family(\n    map.get($theme, with-label-text-label-text-font)\n  );\n  @include _label-text-font-size(\n    map.get($theme, with-label-text-label-text-size)\n  );\n  @include _label-text-letter-spacing(\n    map.get($theme, with-label-text-label-text-letter-spacing)\n  );\n  @include _label-text-line-height(\n    map.get($theme, with-label-text-label-text-line-height)\n  );\n  @include _label-text-weight(\n    map.get($theme, with-label-text-label-text-weight)\n  );\n}\n\n@mixin secondary-navigation-tab-theme-styles(\n  $theme,\n  $resolvers: resolvers.$material\n) {\n  // TODO(b/251881053): Use theme-styles mixin from validate module\n  // when all customers are migrated\n  @include theme.validate-theme-styles($secondary-light-theme, $theme);\n  $theme: typography.resolve-theme(\n    $theme,\n    map.get($resolvers, typography),\n    label-text\n  );\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix-secondary\n  );\n\n  // TODO(b/191298796): Use independent state layer color mixins when available.\n  @include _active-state-layer-color(\n    map.get($theme, hover-state-layer-color) or\n      map.get($theme, focus-state-layer-color) or\n      map.get($theme, pressed-state-layer-color)\n  );\n  @include _active-state-layer-opacity(\n    (\n      hover: map.get($theme, hover-state-layer-opacity),\n      focus: map.get($theme, focus-state-layer-opacity),\n      pressed: map.get($theme, pressed-state-layer-opacity),\n    )\n  );\n\n  // TODO(b/191298796): Use independent state layer color mixins when available.\n  @include _inactive-state-layer-color(\n    map.get($theme, hover-state-layer-color) or\n      map.get($theme, focus-state-layer-color) or\n      map.get($theme, pressed-state-layer-color)\n  );\n  @include _inactive-state-layer-opacity(\n    (\n      hover: map.get($theme, hover-state-layer-opacity),\n      focus: map.get($theme, focus-state-layer-opacity),\n      pressed: map.get($theme, pressed-state-layer-opacity),\n    )\n  );\n\n  @include _container-color(map.get($theme, container-color));\n  @include _container-elevation(map.get($theme, container-elevation));\n  @include _container-height(map.get($theme, container-height));\n  @include _container-shape(map.get($theme, container-shape));\n\n  @include _icon-size(map.get($theme, with-icon-icon-size));\n\n  @include _active-icon-color(\n    (\n      default: map.get($theme, with-icon-active-icon-color),\n      hover: map.get($theme, with-icon-hover-icon-color),\n      focus: map.get($theme, with-icon-focus-icon-color),\n      pressed: map.get($theme, with-icon-pressed-icon-color),\n    )\n  );\n\n  @include _inactive-icon-color(\n    (\n      default: map.get($theme, with-icon-inactive-icon-color),\n      hover: map.get($theme, with-icon-hover-icon-color),\n      focus: map.get($theme, with-icon-focus-icon-color),\n      pressed: map.get($theme, with-icon-pressed-icon-color),\n    )\n  );\n\n  @include _active-label-text-color(\n    (\n      default: map.get($theme, active-label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n    )\n  );\n\n  @include _inactive-label-text-color(\n    (\n      default: map.get($theme, inactive-label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n    )\n  );\n\n  @include _label-text-font-family(map.get($theme, label-text-font));\n  @include _label-text-font-size(map.get($theme, label-text-size));\n  @include _label-text-letter-spacing(\n    map.get($theme, label-text-letter-spacing)\n  );\n  @include _label-text-line-height(map.get($theme, label-text-line-height));\n  @include _label-text-weight(map.get($theme, label-text-weight));\n}\n\n@mixin _icon-color($color) {\n  .mdc-tab__icon {\n    @include theme.property(color, $color);\n\n    fill: currentColor;\n  }\n}\n\n@mixin _active-icon-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-active-icon-color(state.get-default-state($color-or-map));\n\n    &:hover {\n      @include _set-active-icon-color(state.get-hover-state($color-or-map));\n    }\n    &:focus {\n      @include _set-active-icon-color(state.get-focus-state($color-or-map));\n    }\n    &:active {\n      @include _set-active-icon-color(state.get-pressed-state($color-or-map));\n    }\n  }\n\n  &:disabled {\n    @include _set-active-icon-color(state.get-disabled-state($color-or-map));\n  }\n}\n\n@mixin _set-active-icon-color($color) {\n  @include _is-active() {\n    @include _icon-color($color);\n  }\n}\n\n@mixin _inactive-icon-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-inactive-icon-color(state.get-default-state($color-or-map));\n\n    &:hover {\n      @include _set-inactive-icon-color(state.get-hover-state($color-or-map));\n    }\n    &:focus {\n      @include _set-inactive-icon-color(state.get-focus-state($color-or-map));\n    }\n    &:active {\n      @include _set-inactive-icon-color(state.get-pressed-state($color-or-map));\n    }\n  }\n\n  &:disabled {\n    @include _set-inactive-icon-color(state.get-disabled-state($color-or-map));\n  }\n}\n\n@mixin _set-inactive-icon-color($color) {\n  @include _is-inactive() {\n    @include _icon-color($color);\n  }\n}\n\n@mixin _label-text-color($color) {\n  .mdc-tab__text-label {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _active-label-text-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-active-label-text-color(\n      state.get-default-state($color-or-map)\n    );\n\n    &:hover {\n      @include _set-active-label-text-color(\n        state.get-hover-state($color-or-map)\n      );\n    }\n    &:focus {\n      @include _set-active-label-text-color(\n        state.get-focus-state($color-or-map)\n      );\n    }\n    &:active {\n      @include _set-active-label-text-color(\n        state.get-pressed-state($color-or-map)\n      );\n    }\n  }\n\n  &:disabled {\n    @include _set-active-label-text-color(\n      state.get-disabled-state($color-or-map)\n    );\n  }\n}\n\n@mixin _set-active-label-text-color($color) {\n  @include _is-active() {\n    @include _label-text-color($color);\n  }\n}\n\n@mixin _inactive-label-text-color($color-or-map) {\n  &:not(:disabled) {\n    @include _set-inactive-label-text-color(\n      state.get-default-state($color-or-map)\n    );\n\n    &:hover {\n      @include _set-inactive-label-text-color(\n        state.get-hover-state($color-or-map)\n      );\n    }\n    &:focus {\n      @include _set-inactive-label-text-color(\n        state.get-focus-state($color-or-map)\n      );\n    }\n    &:active {\n      @include _set-inactive-label-text-color(\n        state.get-pressed-state($color-or-map)\n      );\n    }\n  }\n\n  &:disabled {\n    @include _set-inactive-label-text-color(\n      state.get-disabled-state($color-or-map)\n    );\n  }\n}\n\n@mixin _set-inactive-label-text-color($color) {\n  @include _is-inactive() {\n    @include _label-text-color($color);\n  }\n}\n\n@mixin _container-color($color) {\n  @include theme.property(background-color, $color);\n}\n\n@mixin _active-state-layer-color($color) {\n  @include _is-active() {\n    @include _state-layer-color($color);\n  }\n}\n\n@mixin _inactive-state-layer-color($color) {\n  @include _is-inactive() {\n    @include _state-layer-color($color);\n  }\n}\n\n@mixin _active-state-layer-opacity($opacity-or-map) {\n  @include _is-active() {\n    @include _hover-state-layer-opacity(state.get-hover-state($opacity-or-map));\n    @include _focus-state-layer-opacity(state.get-focus-state($opacity-or-map));\n    @include _pressed-state-layer-opacity(\n      state.get-pressed-state($opacity-or-map)\n    );\n  }\n}\n\n@mixin _inactive-state-layer-opacity($opacity-or-map) {\n  @include _is-inactive() {\n    @include _hover-state-layer-opacity(state.get-hover-state($opacity-or-map));\n    @include _focus-state-layer-opacity(state.get-focus-state($opacity-or-map));\n    @include _pressed-state-layer-opacity(\n      state.get-pressed-state($opacity-or-map)\n    );\n  }\n}\n\n@mixin _hover-state-layer-opacity($opacity) {\n  @include ripple-theme.states-hover-opacity(\n    $opacity,\n    $ripple-target: $_ripple-target\n  );\n}\n\n@mixin _focus-state-layer-opacity($opacity) {\n  @include ripple-theme.states-focus-opacity(\n    $opacity,\n    $ripple-target: $_ripple-target\n  );\n}\n\n@mixin _pressed-state-layer-opacity($opacity) {\n  @include ripple-theme.states-press-opacity(\n    $opacity,\n    $ripple-target: $_ripple-target\n  );\n}\n\n// TODO(b/191298796): support focused & pressed key colors.\n@mixin _state-layer-color($color) {\n  @include ripple-theme.states-base-color(\n    $color,\n    $ripple-target: $_ripple-target\n  );\n}\n\n@mixin _focus-state-layer-opacity($opacity) {\n  @include ripple-theme.states-focus-opacity(\n    $opacity,\n    $ripple-target: $_ripple-target\n  );\n}\n\n@mixin _pressed-state-layer-opacity($opacity) {\n  @include ripple-theme.states-press-opacity(\n    $opacity,\n    $ripple-target: $_ripple-target\n  );\n}\n\n@mixin _container-elevation($elevation) {\n  // TODO(b/188905911): Use elevation's theme() mixin.\n  @if $elevation and map.get($elevation, box-shadow) {\n    @include elevation-theme.shadow(map.get($elevation, box-shadow));\n  }\n\n  @if $elevation and map.get($elevation, overlay-opacity) {\n    @include elevation-theme.overlay-opacity(\n      map.get($elevation, overlay-opacity)\n    );\n  }\n}\n\n@mixin _container-shape($shape-radius) {\n  @include theme.property(border-radius, $shape-radius);\n\n  .mdc-tab__ripple {\n    @include theme.property(border-radius, $shape-radius);\n  }\n}\n\n@mixin _icon-size($size) {\n  @include theme.property('width', $size);\n  @include theme.property('height', $size);\n  @include theme.property('font-size', $size);\n}\n\n@mixin _label-text-font-family($font-family) {\n  .mdc-tab__text-label {\n    @include theme.property('font-family', $font-family);\n  }\n}\n\n@mixin _label-text-font-size($font-size) {\n  .mdc-tab__text-label {\n    @include theme.property('font-size', $font-size);\n  }\n}\n\n@mixin _label-text-letter-spacing($letter-spacing) {\n  .mdc-tab__text-label {\n    @include theme.property('letter-spacing', $letter-spacing);\n  }\n}\n\n@mixin _label-text-line-height($line-height) {\n  .mdc-tab__text-label {\n    @include theme.property('line-height', $line-height);\n  }\n}\n\n@mixin _label-text-weight($weight) {\n  .mdc-tab__text-label {\n    @include theme.property('font-weight', $weight);\n  }\n}\n\n@mixin _height($height) {\n  @include theme.property(height, $height);\n}\n\n@mixin _container-height($height) {\n  &:not(.mdc-tab--stacked) {\n    @include _height($height);\n  }\n}\n\n@mixin _with-icon-and-label-text-container-height($height) {\n  &.mdc-tab--stacked {\n    @include _height($height);\n  }\n}\n\n@mixin _is-active() {\n  &.mdc-tab--active {\n    @content;\n  }\n}\n\n@mixin _is-inactive() {\n  &:not(.mdc-tab--active) {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab/_variables.import.scss",
    "content": "@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-tab-* hide mdc-tab-core-styles, mdc-tab-without-ripple, mdc-tab-ripple, mdc-tab-horizontal-padding, mdc-tab-text-label-color, mdc-tab-icon-color, mdc-tab-states-color, mdc-tab-ink-color, mdc-tab-active-text-label-color, mdc-tab-active-icon-color, mdc-tab-active-states-color, mdc-tab-parent-positioning, mdc-tab-fixed-width, mdc-tab-height, mdc-tab-text-transform, mdc-tab-base-, mdc-tab-ripple-, mdc-tab-content-, mdc-tab-stacked-, mdc-tab-active-;\n"
  },
  {
    "path": "packages/mdc-tab/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/theme/theme-color';\n\n$icon-size: 24px !default;\n$height: 48px !default;\n$stacked-height: 72px !default;\n$min-width: 90px !default;\n$horizontal-padding: 24px !default;\n$text-label-opacity: 0.6 !default;\n$icon-opacity: 0.54 !default;\n$text-label-color-default: rgba(\n  theme-color.prop-value(on-surface),\n  $text-label-opacity\n) !default;\n$icon-color-default: rgba(\n  theme-color.prop-value(on-surface),\n  $icon-opacity\n) !default;\n$text-label-color-active: primary !default;\n$icon-color-active: primary !default;\n$ripple-target: '.mdc-tab__ripple';\n"
  },
  {
    "path": "packages/mdc-tab/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTabAdapter {\n  /**\n   * Adds the given className to the root element.\n   * @param className The className to add\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes the given className from the root element.\n   * @param className The className to remove\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns whether the root element has the given className.\n   * @param className The className to remove\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Sets the given attrName of the root element to the given value.\n   * @param attr The attribute name to set\n   * @param value The value so give the attribute\n   */\n  setAttr(attr: string, value: string): void;\n\n  /**\n   * Activates the indicator element.\n   * @param previousIndicatorClientRect The client rect of the previously\n   *     activated indicator\n   */\n  activateIndicator(previousIndicatorClientRect?: DOMRect): void;\n\n  /** Deactivates the indicator. */\n  deactivateIndicator(): void;\n\n  /**\n   * Emits the MDCTab:interacted event for use by parent components\n   */\n  notifyInteracted(): void;\n\n  /**\n   * Returns the offsetLeft value of the root element.\n   */\n  getOffsetLeft(): number;\n\n  /**\n   * Returns the offsetWidth value of the root element.\n   */\n  getOffsetWidth(): number;\n\n  /**\n   * Returns the offsetLeft of the content element.\n   */\n  getContentOffsetLeft(): number;\n\n  /**\n   * Returns the offsetWidth of the content element.\n   */\n  getContentOffsetWidth(): number;\n\n  /**\n   * Applies focus to the root element\n   */\n  focus(): void;\n\n  /**\n   * Returns whether the root element is focused.\n   */\n  isFocused(): boolean;\n}\n"
  },
  {
    "path": "packages/mdc-tab/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\nimport {MDCTabIndicator, MDCTabIndicatorFactory} from '@material/tab-indicator/component';\n\nimport {MDCTabAdapter} from './adapter';\nimport {MDCTabFoundation} from './foundation';\nimport {MDCTabDimensions, MDCTabInteractionEventDetail} from './types';\n\n/** MDC Tab Factory */\nexport type MDCTabFactory = (el: HTMLElement, foundation?: MDCTabFoundation) =>\n    MDCTab;\n\n/** MDC Tab */\nexport class MDCTab extends MDCComponent<MDCTabFoundation> implements\n    MDCRippleCapableSurface {\n  static override attachTo(root: HTMLElement): MDCTab {\n    return new MDCTab(root);\n  }\n\n  id!: string;  // assigned in initialize();\n\n  private ripple!: MDCRipple;              // assigned in initialize();\n  private tabIndicator!: MDCTabIndicator;  // assigned in initialize();\n  private content!: HTMLElement;           // assigned in initialize();\n  private handleClick!:\n      SpecificEventListener<'click'>;  // assigned in initialize();\n\n  override initialize(\n      rippleFactory:\n          MDCRippleFactory = (el, foundation) => new MDCRipple(el, foundation),\n      tabIndicatorFactory:\n          MDCTabIndicatorFactory = (el) => new MDCTabIndicator(el),\n  ) {\n    this.id = this.root.id;\n    const rippleFoundation =\n        new MDCRippleFoundation(MDCRipple.createAdapter(this));\n    this.ripple = rippleFactory(this.root, rippleFoundation);\n\n    const tabIndicatorElement = this.root.querySelector<HTMLElement>(\n        MDCTabFoundation.strings.TAB_INDICATOR_SELECTOR)!;\n    this.tabIndicator = tabIndicatorFactory(tabIndicatorElement);\n    this.content = this.root.querySelector<HTMLElement>(\n        MDCTabFoundation.strings.CONTENT_SELECTOR)!;\n  }\n\n  override initialSyncWithDOM() {\n    this.handleClick = () => {\n      this.foundation.handleClick();\n    };\n    this.listen('click', this.handleClick);\n  }\n\n  override destroy() {\n    this.unlisten('click', this.handleClick);\n    this.ripple.destroy();\n    super.destroy();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTabAdapter = {\n      setAttr: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      activateIndicator: (previousIndicatorClientRect) => {\n        this.tabIndicator.activate(previousIndicatorClientRect);\n      },\n      deactivateIndicator: () => {\n        this.tabIndicator.deactivate();\n      },\n      notifyInteracted: () => {\n        this.emit<MDCTabInteractionEventDetail>(\n            MDCTabFoundation.strings.INTERACTED_EVENT, {tabId: this.id},\n            true /* bubble */);\n      },\n      getOffsetLeft: () => this.root.offsetLeft,\n      getOffsetWidth: () => this.root.offsetWidth,\n      getContentOffsetLeft: () => this.content.offsetLeft,\n      getContentOffsetWidth: () => this.content.offsetWidth,\n      focus: () => {\n        this.root.focus();\n      },\n      isFocused: () => this.root === document.activeElement,\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTabFoundation(adapter);\n  }\n\n  /**\n   * Getter for the active state of the tab\n   */\n  get active(): boolean {\n    return this.foundation.isActive();\n  }\n\n  set focusOnActivate(focusOnActivate: boolean) {\n    this.foundation.setFocusOnActivate(focusOnActivate);\n  }\n\n  /**\n   * Activates the tab\n   */\n  activate(computeIndicatorClientRect?: DOMRect) {\n    this.foundation.activate(computeIndicatorClientRect);\n  }\n\n  /**\n   * Deactivates the tab\n   */\n  deactivate() {\n    this.foundation.deactivate();\n  }\n\n  /**\n   * Returns the indicator's client rect\n   */\n  computeIndicatorClientRect(): DOMRect {\n    return this.tabIndicator.computeContentClientRect();\n  }\n\n  computeDimensions(): MDCTabDimensions {\n    return this.foundation.computeDimensions();\n  }\n\n  /**\n   * Focuses the tab\n   */\n  focus() {\n    this.root.focus();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ACTIVE: 'mdc-tab--active',\n};\n\nconst strings = {\n  ARIA_SELECTED: 'aria-selected',\n  CONTENT_SELECTOR: '.mdc-tab__content',\n  INTERACTED_EVENT: 'MDCTab:interacted',\n  RIPPLE_SELECTOR: '.mdc-tab__ripple',\n  TABINDEX: 'tabIndex',\n  TAB_INDICATOR_SELECTOR: '.mdc-tab-indicator',\n};\n\nexport {\n  cssClasses,\n  strings,\n};\n"
  },
  {
    "path": "packages/mdc-tab/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTabAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\nimport {MDCTabDimensions} from './types';\n\n/** MDC Tab Foundation */\nexport class MDCTabFoundation extends MDCFoundation<MDCTabAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCTabAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      setAttr: () => undefined,\n      activateIndicator: () => undefined,\n      deactivateIndicator: () => undefined,\n      notifyInteracted: () => undefined,\n      getOffsetLeft: () => 0,\n      getOffsetWidth: () => 0,\n      getContentOffsetLeft: () => 0,\n      getContentOffsetWidth: () => 0,\n      focus: () => undefined,\n      isFocused: () => false,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private focusOnActivate = true;\n\n  constructor(adapter?: Partial<MDCTabAdapter>) {\n    super({...MDCTabFoundation.defaultAdapter, ...adapter});\n  }\n\n  handleClick() {\n    // It's up to the parent component to keep track of the active Tab and\n    // ensure we don't activate a Tab that's already active.\n    this.adapter.notifyInteracted();\n  }\n\n  isActive(): boolean {\n    return this.adapter.hasClass(cssClasses.ACTIVE);\n  }\n\n  /**\n   * Sets whether the tab should focus itself when activated\n   */\n  setFocusOnActivate(focusOnActivate: boolean) {\n    this.focusOnActivate = focusOnActivate;\n  }\n\n  /**\n   * Activates the Tab\n   */\n  activate(previousIndicatorClientRect?: DOMRect) {\n    this.adapter.addClass(cssClasses.ACTIVE);\n    this.adapter.setAttr(strings.ARIA_SELECTED, 'true');\n    this.adapter.setAttr(strings.TABINDEX, '0');\n    this.adapter.activateIndicator(previousIndicatorClientRect);\n    if (this.focusOnActivate && !this.adapter.isFocused()) {\n      this.adapter.focus();\n    }\n  }\n\n  /**\n   * Deactivates the Tab\n   */\n  deactivate() {\n    // Early exit\n    if (!this.isActive()) {\n      return;\n    }\n\n    this.adapter.removeClass(cssClasses.ACTIVE);\n    this.adapter.setAttr(strings.ARIA_SELECTED, 'false');\n    this.adapter.setAttr(strings.TABINDEX, '-1');\n    this.adapter.deactivateIndicator();\n  }\n\n  /**\n   * Returns the dimensions of the Tab\n   */\n  computeDimensions(): MDCTabDimensions {\n    const rootWidth = this.adapter.getOffsetWidth();\n    const rootLeft = this.adapter.getOffsetLeft();\n    const contentWidth = this.adapter.getContentOffsetWidth();\n    const contentLeft = this.adapter.getContentOffsetLeft();\n\n    return {\n      contentLeft: rootLeft + contentLeft,\n      contentRight: rootLeft + contentLeft + contentWidth,\n      rootLeft,\n      rootRight: rootLeft + rootWidth,\n    };\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabFoundation;\n"
  },
  {
    "path": "packages/mdc-tab/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-tab/mdc-tab.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"variables\" as mdc-tab-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/tab-indicator/mixins\" as mdc-tab-indicator-*;\n@forward \"mixins\" as mdc-tab-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-tab\";\n"
  },
  {
    "path": "packages/mdc-tab/mdc-tab.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-tab/package.json",
    "content": "{\n  \"name\": \"@material/tab\",\n  \"description\": \"The Material Components for the web tab component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tab\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tab\"\n  },\n  \"main\": \"dist/mdc.tab.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/focus-ring\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/tab-indicator\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {MDCTab, MDCTabFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n  <button class=\"mdc-tab\" aria-selected=\"false\" role=\"tab\">\n    <span class=\"mdc-tab__content\">\n      <span class=\"mdc-tab__text-label\">Foo</span>\n      <span class=\"mdc-tab__icon\" aria-hidden=\"true\"></span>\n    </span>\n    <span class=\"mdc-tab__ripple\"></span>\n    <span class=\"mdc-tab-indicator\">\n      <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n    </span>\n  </button>`);\n}\n\nfunction setupTest({useMockFoundation = false} = {}) {\n  const mockFoundation = useMockFoundation ?\n      createMockFoundation(MDCTabFoundation) :\n      new MDCTabFoundation();\n  const root = getFixture();\n  const content = root.querySelector<HTMLElement>(\n      MDCTabFoundation.strings.CONTENT_SELECTOR)!;\n  const component = new MDCTab(root, mockFoundation);\n  return {root, component, mockFoundation, content};\n}\n\ndescribe('MDCTab', () => {\n  setUpMdcTestEnvironment();\n\n  it('attachTo returns an MDCTab instance', () => {\n    expect(MDCTab.attachTo(getFixture()) instanceof MDCTab).toBe(true);\n  });\n\n  it('click handler is added during initialSyncWithDOM', () => {\n    const {component, root, mockFoundation} =\n        setupTest({useMockFoundation: true});\n\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).toHaveBeenCalled();\n\n    component.destroy();\n  });\n\n  it('click handler is removed during destroy', () => {\n    const {component, root, mockFoundation} =\n        setupTest({useMockFoundation: true});\n\n    component.destroy();\n    emitEvent(root, 'click');\n    expect(mockFoundation.handleClick).not.toHaveBeenCalled();\n  });\n\n  it('#destroy removes the ripple', () => {\n    const {component, root} = setupTest();\n    jasmine.clock().tick(1);\n    component.destroy();\n    jasmine.clock().tick(1);\n    expect(root).not.toHaveClass('mdc-ripple-upgraded');\n  });\n\n  it('#adapter.addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class to the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.hasClass returns true if a class exists on the root element',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       (component.getDefaultFoundation() as any).adapter.hasClass('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('#adapter.setAttr adds a given attribute to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.setAttr('data-foo', 'bar');\n    expect(root.getAttribute('data-foo')).toEqual('bar');\n  });\n\n  it('#adapter.activateIndicator activates the indicator subcomponent', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.activateIndicator();\n    expect(root.querySelector<HTMLElement>('.mdc-tab-indicator'))\n        .toHaveClass('mdc-tab-indicator--active');\n  });\n\n  it('#adapter.deactivateIndicator deactivates the indicator subcomponent',\n     () => {\n       const {root, component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.deactivateIndicator();\n       expect(root.querySelector<HTMLElement>('.mdc-tab-indicator'))\n           .not.toHaveClass('mdc-tab-indicator--active');\n     });\n\n  it('#adapter.getOffsetWidth() returns the offsetWidth of the root element',\n     () => {\n       const {root, component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.getOffsetWidth() === root.offsetWidth)\n           .toBe(true);\n     });\n\n  it('#adapter.getOffsetLeft() returns the offsetLeft of the root element',\n     () => {\n       const {root, component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any).adapter.getOffsetLeft() ===\n           root.offsetLeft)\n           .toBe(true);\n     });\n\n  it('#adapter.getContentOffsetWidth() returns the offsetLeft of the content element',\n     () => {\n       const {content, component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.getContentOffsetWidth() === content.offsetWidth)\n           .toBe(true);\n     });\n\n  it('#adapter.getContentOffsetLeft() returns the offsetLeft of the content element',\n     () => {\n       const {content, component} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.getContentOffsetLeft() === content.offsetLeft)\n           .toBe(true);\n     });\n\n  it('#adapter.focus() gives focus to the root element', () => {\n    const {root, component} = setupTest();\n    document.body.appendChild(root);\n    (component.getDefaultFoundation() as any).adapter.focus();\n    expect(document.activeElement === root).toBe(true);\n    document.body.removeChild(root);\n  });\n\n  it('#adapter.isFocused() returns true when the root element is focused',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       (component.getDefaultFoundation() as any).adapter.focus();\n       expect((component.getDefaultFoundation() as any).adapter.isFocused())\n           .toBe(true);\n     });\n\n  it('#adapter.isFocused() returns false when the root element is not focused',\n     () => {\n       const {root, component} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any).adapter.isFocused())\n           .toBe(false);\n     });\n\n  it(`#adapter.notifyInteracted() emits the ${\n         MDCTabFoundation.strings.INTERACTED_EVENT} event`,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('interaction handler');\n\n       component.listen(MDCTabFoundation.strings.INTERACTED_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyInteracted();\n       expect(handler).toHaveBeenCalled();\n     });\n\n  it('#active getter calls foundation.isActive', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.active;\n    expect(mockFoundation.isActive).toHaveBeenCalled();\n  });\n\n  it('#focusOnActivate setter calls foundation.setFocusOnActivate', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.focusOnActivate = false;\n    expect(mockFoundation.setFocusOnActivate).toHaveBeenCalledWith(false);\n  });\n\n  it('#activate() calls activate', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.activate();\n    expect(mockFoundation.activate).toHaveBeenCalledWith(undefined);\n  });\n\n  it('#activate({ClientRect}) calls activate', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.activate({width: 100, left: 200} as DOMRect);\n    expect(mockFoundation.activate)\n        .toHaveBeenCalledWith({width: 100, left: 200} as DOMRect);\n  });\n\n  it('#deactivate() calls deactivate', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.deactivate();\n    expect(mockFoundation.deactivate).toHaveBeenCalled();\n  });\n\n  it('#computeIndicatorClientRect() returns the indicator element\\'s bounding client rect',\n     () => {\n       const {root, component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.deactivateIndicator();\n       expect(component.computeIndicatorClientRect())\n           .toEqual(root.querySelector<HTMLElement>(\n                            '.mdc-tab-indicator')!.getBoundingClientRect());\n     });\n\n  it('#computeDimensions() calls computeDimensions', () => {\n    const {component, mockFoundation} = setupTest({useMockFoundation: true});\n    component.computeDimensions();\n    expect(mockFoundation.computeDimensions).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as tab;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include tab.core-styles($query: $query);\n    @include tab.without-ripple($query: $query);\n    @include tab.ripple($query: $query);\n    @include tab.height(0, $query: $query);\n    @include tab.text-transform(uppercase, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-tab/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTabFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCTabFoundation);\n  return {foundation, mockAdapter};\n}\n\ndescribe('MDCTabFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTabFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCTabFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTabFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'setAttr',\n      'activateIndicator',\n      'deactivateIndicator',\n      'getOffsetLeft',\n      'getOffsetWidth',\n      'getContentOffsetLeft',\n      'getContentOffsetWidth',\n      'notifyInteracted',\n      'focus',\n      'isFocused',\n    ]);\n  });\n\n  it('#activate adds mdc-tab--active class to the root element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate();\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(MDCTabFoundation.cssClasses.ACTIVE);\n  });\n\n  it('#activate sets the root element aria-selected attribute to true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate();\n    expect(mockAdapter.setAttr)\n        .toHaveBeenCalledWith(MDCTabFoundation.strings.ARIA_SELECTED, 'true');\n  });\n\n  it('#activate sets the root element tabindex to 0', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate();\n    expect(mockAdapter.setAttr)\n        .toHaveBeenCalledWith(MDCTabFoundation.strings.TABINDEX, '0');\n  });\n\n  it('#activate activates the indicator', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate({width: 100, left: 200} as DOMRect);\n    expect(mockAdapter.activateIndicator)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n        //  number; left: number; }' is not assignable to parameter of type\n        //  'Expected<DOMRect | undefined>'.\n        .toHaveBeenCalledWith({width: 100, left: 200});\n  });\n\n  it('#activate focuses the root node by default', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate({width: 100, left: 200} as DOMRect);\n    expect(mockAdapter.focus).toHaveBeenCalled();\n  });\n\n  it('#activate focuses the root node if focusOnActivate is true and it is not already focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setFocusOnActivate(true);\n       foundation.activate({width: 100, left: 200} as DOMRect);\n       expect(mockAdapter.focus).toHaveBeenCalled();\n     });\n\n  it('#activate does not focus the root node if focusOnActivate is false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.setFocusOnActivate(false);\n       foundation.activate({width: 100, left: 200} as DOMRect);\n       expect(mockAdapter.focus).not.toHaveBeenCalled();\n     });\n\n  it('#activate does not focus the root node if focusOnActivate is true but it is already focused',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.isFocused.and.returnValue(true);\n       foundation.activate({width: 100, left: 200} as DOMRect);\n       expect(mockAdapter.focus).not.toHaveBeenCalled();\n     });\n\n  it('#deactivate does nothing if not active', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.deactivate();\n    expect(mockAdapter.addClass).not.toHaveBeenCalled();\n  });\n\n  it('#deactivate removes mdc-tab--active class to the root element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.and.returnValue(true);\n    foundation.deactivate();\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(MDCTabFoundation.cssClasses.ACTIVE);\n  });\n\n  it('#deactivate sets the root element aria-selected attribute to false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass.and.returnValue(true);\n       foundation.deactivate();\n       expect(mockAdapter.setAttr)\n           .toHaveBeenCalledWith(\n               MDCTabFoundation.strings.ARIA_SELECTED, 'false');\n     });\n\n  it('#deactivate deactivates the indicator', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.and.returnValue(true);\n    foundation.deactivate();\n    expect(mockAdapter.deactivateIndicator).toHaveBeenCalled();\n  });\n\n  it('#deactivate sets the root element tabindex to -1', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.and.returnValue(true);\n    foundation.deactivate();\n    expect(mockAdapter.setAttr)\n        .toHaveBeenCalledWith(MDCTabFoundation.strings.TABINDEX, '-1');\n  });\n\n  it(`#handleClick emits the ${\n         MDCTabFoundation.strings.INTERACTED_EVENT} event`,\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleClick();\n       expect(mockAdapter.notifyInteracted).toHaveBeenCalled();\n     });\n\n  it('#computeDimensions() returns the dimensions of the tab', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getOffsetLeft.and.returnValue(10);\n    mockAdapter.getOffsetWidth.and.returnValue(100);\n    mockAdapter.getContentOffsetLeft.and.returnValue(11);\n    mockAdapter.getContentOffsetWidth.and.returnValue(30);\n    expect(foundation.computeDimensions()).toEqual({\n      rootLeft: 10,\n      rootRight: 110,\n      contentLeft: 21,\n      contentRight: 51,\n    });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab/test/mdc-tab.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-tab.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-tab/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * MDCTabDimensions provides details about the left and right edges of the Tab\n * root element and the Tab content element. These values are used to determine\n * the visual position of the Tab with respect it's parent container.\n */\nexport interface MDCTabDimensions {\n  rootLeft: number;\n  rootRight: number;\n  contentLeft: number;\n  contentRight: number;\n}\n\nexport interface MDCTabInteractionEventDetail {\n  tabId: string;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCTabInteractionEvent extends Event {\n  readonly detail: MDCTabInteractionEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-tab-bar/README.md",
    "content": "<!--docs:\ntitle: \"Tab Bar\"\nlayout: detail\nsection: components\nexcerpt: \"Manages a set of Tabs.\"\niconId: tabs\npath: /catalog/tabs/tab-bar/\n-->\n\n# Tab Bar\n\nTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\nThe Tab Bar contains the Tab Scroller and Tab components.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs\">Material Design guidelines: Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-bar\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-bar\" role=\"tablist\">\n  <div class=\"mdc-tab-scroller\">\n    <div class=\"mdc-tab-scroller__scroll-area\">\n      <div class=\"mdc-tab-scroller__scroll-content\">\n        <button class=\"mdc-tab mdc-tab--active\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\">\n          <span class=\"mdc-tab__content\">\n            <span class=\"mdc-tab__icon material-icons\" aria-hidden=\"true\">favorite</span>\n            <span class=\"mdc-tab__text-label\">Favorites</span>\n          </span>\n          <span class=\"mdc-tab-indicator mdc-tab-indicator--active\">\n            <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n          </span>\n          <span class=\"mdc-tab__ripple\"></span>\n          <div class=\"mdc-tab__focus-ring\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-bar/mdc-tab-bar\";\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n@use \"@material/tab/mdc-tab\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabBar} from '@material/tab-bar';\n\nconst tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\nMDC Tab Bar does not have any variants; however, its subcomponents do. See the [Tab Scroller](../mdc-tab-scroller),\n[Tab](../mdc-tab), and [Tab Indicator](../mdc-tab-indicator) documentation for more information.\n\n### Tab Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-bar` | Mandatory.\n\n### Sass Mixins\n\nTo customize the width of the tab bar, use the following mixin.\n\nMixin | Description\n--- | ---\n`width($width)` | Customizes the width of the tab bar.\n`density($density-scale)` | Sets density scale to default tab bar variant. Use `stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n`tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.\n\n\n## `MDCTabBar` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.\n`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTabBar:activated` | `{\"detail\": {\"index\": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.\n`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.\n`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.\n`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.\n`getOffsetWidth() => number` | Returns the offsetWidth of the root element.\n`isRTL() => boolean` | Returns if the text direction is RTL.\n`setActiveTab(index: number) => void` | Sets the tab at the given index to be activated.\n`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.\n`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.\n`focusTabAtIndex(index: number) => void` | Focuses the Tab at the given index.\n`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.\n`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.\n`getTabListLength() => number` | Returns the number of child Tab components.\n`getPreviousActiveTabIndex() => number` | Returns the index of the previously active Tab.\n`getFocusedTabIndex() => number` | Returns the index of the focused Tab.\n`getIndexOfTabById(id: string) => number` | Returns the index of the given Tab ID.\n`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.\n\n### `MDCTabBarFoundation`\n\nMethod Signature | Description\n--- | ---\n`activateTab(index: number) => void` | Activates the tab at the given index.\n`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.\n`handleKeyDown(event: Event) => void` | Handles the logic for the `\"keydown\"` event.\n`handleTabInteraction(event: Event) => void` | Handles the logic for the `\"MDCTab:interacted\"` event.\n`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.\n"
  },
  {
    "path": "packages/mdc-tab-bar/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-tab-bar/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/tab\" as mdc-tab-*;\n@forward \"@material/tab-scroller\" as mdc-tab-scroller-*;\n@forward \"./index\" as mdc-tab-bar-*;\n@forward \"@material/tab-indicator\" as mdc-tab-indicator-*;\n"
  },
  {
    "path": "packages/mdc-tab-bar/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/variables' as animation-variables;\n@use '@material/density/functions' as density-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/tab-scroller/mixins' as tab-scroller-mixins;\n@use '@material/tab/mixins' as tab-mixins;\n@use './variables';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  .mdc-tab-bar {\n    @include width(100%, $query);\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  // postcss-bem-linter: define tab-bar\n  @include static-styles($query: $query);\n  @include density(variables.$density-scale, $query: $query);\n  @include stacked-density(variables.$stacked-density-scale, $query: $query);\n  // postcss-bem-linter: end\n}\n\n@mixin width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    width: $width;\n  }\n}\n\n///\n/// Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density()` mixin for stacked tab bar\n/// variant.\n///\n/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-tab {\n    @include tab-mixins.height($height, $query: $query);\n  }\n}\n\n///\n/// Sets density scale to stacked tab bar variant.\n///\n/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n///\n@mixin stacked-density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: variables.$stacked-density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-tab--stacked {\n    @include tab-mixins.height($height, $query: $query);\n  }\n}\n\n///\n/// Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition`\n/// mixin.\n///\n/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin tab-scroller-transition(\n  $duration-ms,\n  $timing-function: animation-variables.$standard-curve-timing-function,\n  $query: feature-targeting.all()\n) {\n  .mdc-tab-scroller {\n    @include tab-scroller-mixins.transition(\n      $duration-ms,\n      $timing-function: $timing-function,\n      $query: $query\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/_tab-bar-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:map';\n@use '@material/elevation/elevation-theme';\n@use '@material/tab/tab-theme';\n@use '@material/theme/map-ext';\n@use '@material/tab-indicator/tab-indicator-theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use '@material/tokens/resolvers';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/validate';\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n$custom-property-prefix: 'tab-bar';\n\n// Complete tokens set for primary tabs component\n// tab bar should validate all tokens as it is the entry point\n$primary-navigation-tabs-light-theme: (\n  active-focus-state-layer-color: theme-color.$primary,\n  active-focus-state-layer-opacity: 0.12,\n  active-hover-state-layer-color: theme-color.$primary,\n  active-hover-state-layer-opacity: 0.04,\n  active-indicator-color: theme-color.$primary,\n  active-indicator-height: 3px,\n  active-indicator-shape: (\n    3px,\n    3px,\n    0,\n    0,\n  ),\n  active-pressed-state-layer-color: theme-color.$primary,\n  active-pressed-state-layer-opacity: 0.1,\n  container-color: theme-color.$surface,\n  container-elevation: elevation-theme.get-elevation(0),\n  container-height: 48px,\n  container-shape: 0,\n  divider-color: null,\n  divider-height: null,\n  inactive-focus-state-layer-color: theme-color.$on-surface,\n  inactive-focus-state-layer-opacity: 0.12,\n  inactive-hover-state-layer-color: theme-color.$on-surface,\n  inactive-hover-state-layer-opacity: 0.04,\n  inactive-pressed-state-layer-color: theme-color.$on-surface,\n  inactive-pressed-state-layer-opacity: 0.1,\n  with-icon-active-focus-icon-color: theme-color.$primary,\n  with-icon-active-hover-icon-color: theme-color.$primary,\n  with-icon-active-icon-color: theme-color.$primary,\n  with-icon-active-pressed-icon-color: theme-color.$primary,\n  with-icon-and-label-text-container-height: 64px,\n  with-icon-icon-size: 24px,\n  with-icon-inactive-focus-icon-color: theme-color.$on-surface,\n  with-icon-inactive-hover-icon-color: theme-color.$on-surface,\n  with-icon-inactive-icon-color: theme-color.$on-surface,\n  with-icon-inactive-pressed-icon-color: theme-color.$on-surface,\n  with-label-text-active-focus-label-text-color: theme-color.$primary,\n  with-label-text-active-hover-label-text-color: theme-color.$primary,\n  with-label-text-active-label-text-color: theme-color.$primary,\n  with-label-text-active-pressed-label-text-color: theme-color.$primary,\n  with-label-text-inactive-focus-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-hover-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-label-text-color: theme-color.$on-surface,\n  with-label-text-inactive-pressed-label-text-color: theme-color.$on-surface,\n  with-label-text-label-text-font-family: typography.get-font(subhead2),\n  with-label-text-label-text-font-size: typography.get-size(subhead2),\n  with-label-text-label-text-letter-spacing: typography.get-tracking(subhead2),\n  with-label-text-label-text-font: typography.get-font(subhead2),\n  with-label-text-label-text-size: typography.get-size(subhead2),\n  with-label-text-label-text-tracking: typography.get-tracking(subhead2),\n  with-label-text-label-text-line-height: typography.get-line-height(subhead2),\n  with-label-text-label-text-weight: typography.get-weight(subhead2),\n);\n\n// Complete tokens set for secondary tabs component\n// tab bar should validate all tokens as it is the entry point\n$secondary-navigation-tabs-light-theme: (\n  active-indicator-color: null,\n  active-indicator-height: null,\n  active-label-text-color: null,\n  container-color: null,\n  container-elevation: null,\n  container-height: null,\n  container-shadow-color: null,\n  container-shape: null,\n  divider-color: null,\n  divider-height: null,\n  focus-label-text-color: null,\n  focus-state-layer-color: null,\n  focus-state-layer-opacity: null,\n  hover-label-text-color: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  inactive-label-text-color: null,\n  label-text-font-family: null,\n  label-text-font-size: null,\n  label-text-letter-spacing: null,\n  label-text-font: null,\n  label-text-size: null,\n  label-text-tracking: null,\n  label-text-line-height: null,\n  label-text-weight: null,\n  pressed-label-text-color: null,\n  pressed-state-layer-color: null,\n  pressed-state-layer-opacity: null,\n  with-icon-active-icon-color: null,\n  with-icon-focus-icon-color: null,\n  with-icon-hover-icon-color: null,\n  with-icon-inactive-icon-color: null,\n  with-icon-pressed-icon-color: null,\n  with-icon-icon-size: null,\n);\n\n// Tab bar related tokens to create custom properties\n$light-theme: (\n  divider-color: null,\n  divider-height: null,\n);\n\n@mixin primary-navigation-tab-theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($primary-navigation-tabs-light-theme, $theme);\n  $tab-bar-theme: map-ext.pick($theme, map.keys($light-theme)...);\n  @include keys.declare-custom-properties(\n    $tab-bar-theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include tab-theme.primary-navigation-tab-theme(\n    map-ext.pick($theme, map.keys(tab-theme.$primary-light-theme)...),\n    $resolvers\n  );\n  @include tab-indicator-theme.theme(\n    map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)\n  );\n}\n\n@mixin secondary-navigation-tab-theme($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme($secondary-navigation-tabs-light-theme, $theme);\n  $tab-bar-theme: map-ext.pick($theme, map.keys($light-theme)...);\n  @include keys.declare-custom-properties(\n    $tab-bar-theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include tab-theme.secondary-navigation-tab-theme(\n    map-ext.pick($theme, map.keys(tab-theme.$secondary-light-theme)...),\n    $resolvers\n  );\n  @include tab-indicator-theme.theme(\n    map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)\n  );\n}\n\n@mixin primary-navigation-tab-theme-styles(\n  $theme,\n  $resolvers: resolvers.$material\n) {\n  // TODO(b/251881053): Use theme-styles mixin from validate module\n  // when all customers are migrated\n  @include theme.validate-theme-styles(\n    $primary-navigation-tabs-light-theme,\n    $theme\n  );\n  $tab-bar-theme: map-ext.pick($theme, map.keys($light-theme)...);\n  $tab-bar-theme: keys.create-theme-properties(\n    $tab-bar-theme,\n    $prefix: $custom-property-prefix\n  );\n\n  &.mdc-tab-bar {\n    @include _divider-color(map.get($tab-bar-theme, divider-color));\n    @include _divider-height(map.get($tab-bar-theme, divider-height));\n  }\n\n  .mdc-tab {\n    @include tab-theme.primary-navigation-tab-theme-styles(\n      map-ext.pick($theme, map.keys(tab-theme.$primary-light-theme)...),\n      $resolvers\n    );\n  }\n\n  .mdc-tab-indicator {\n    @include tab-indicator-theme.theme-styles(\n      map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)\n    );\n  }\n}\n\n@mixin secondary-navigation-tab-theme-styles(\n  $theme,\n  $resolvers: resolvers.$material\n) {\n  // TODO(b/251881053): Use theme-styles mixin from validate module\n  // when all customers are migrated\n  @include theme.validate-theme-styles(\n    $secondary-navigation-tabs-light-theme,\n    $theme\n  );\n  $tab-bar-theme: map-ext.pick($theme, map.keys($light-theme)...);\n  $tab-bar-theme: keys.create-theme-properties(\n    $tab-bar-theme,\n    $prefix: $custom-property-prefix\n  );\n\n  &.mdc-tab-bar {\n    @include _divider-color(map.get($tab-bar-theme, divider-color));\n    @include _divider-height(map.get($tab-bar-theme, divider-height));\n  }\n\n  .mdc-tab {\n    @include tab-theme.secondary-navigation-tab-theme-styles(\n      map-ext.pick($theme, map.keys(tab-theme.$secondary-light-theme)...),\n      $resolvers\n    );\n  }\n\n  .mdc-tab-indicator {\n    @include tab-indicator-theme.theme-styles(\n      map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)\n    );\n  }\n}\n\n@mixin _divider-color($color) {\n  @include theme.property('border-bottom-color', $color);\n}\n\n@mixin _divider-height($height) {\n  @include theme.property('border-bottom-width', $height);\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"@material/tab\" as mdc-tab-* hide mdc-tab-core-styles, mdc-tab-without-ripple, mdc-tab-ripple, mdc-tab-horizontal-padding, mdc-tab-text-label-color, mdc-tab-icon-color, mdc-tab-states-color, mdc-tab-ink-color, mdc-tab-active-text-label-color, mdc-tab-active-icon-color, mdc-tab-active-states-color, mdc-tab-parent-positioning, mdc-tab-fixed-width, mdc-tab-height, mdc-tab-text-transform, mdc-tab-base-, mdc-tab-ripple-, mdc-tab-content-, mdc-tab-stacked-, mdc-tab-active-;\n@forward \"./index\" as mdc-tab-bar-* hide mdc-tab-bar-core-styles, mdc-tab-bar-width, mdc-tab-bar-density, mdc-tab-bar-stacked-density, mdc-tab-bar-tab-scroller-transition;\n"
  },
  {
    "path": "packages/mdc-tab-bar/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/density/variables' as density-variables;\n@use '@material/tab/variables' as tab-variables;\n\n$height: tab-variables.$height !default;\n$minimum-height: 30px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n$stacked-height: tab-variables.$stacked-height !default;\n$stacked-minimum-height: 56px !default;\n$stacked-maximum-height: $stacked-height !default;\n$stacked-density-scale: density-variables.$default-scale !default;\n$stacked-density-config: (\n  height: (\n    default: $stacked-height,\n    maximum: $stacked-maximum-height,\n    minimum: $stacked-minimum-height,\n  ),\n) !default;\n"
  },
  {
    "path": "packages/mdc-tab-bar/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabDimensions} from '@material/tab/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTabBarAdapter {\n  /**\n   * Scrolls to the given position\n   * @param scrollX The position to scroll to\n   */\n  scrollTo(scrollX: number): void;\n\n  /**\n   * Increments the current scroll position by the given amount\n   * @param scrollXIncrement The amount to increment scroll\n   */\n  incrementScroll(scrollXIncrement: number): void;\n\n  /**\n   * Returns the current scroll position\n   */\n  getScrollPosition(): number;\n\n  /**\n   * Returns the width of the scroll content\n   */\n  getScrollContentWidth(): number;\n\n  /**\n   * Returns the root element's offsetWidth\n   */\n  getOffsetWidth(): number;\n\n  /**\n   * Returns if the Tab Bar language direction is RTL\n   */\n  isRTL(): boolean;\n\n  /**\n   * Sets the tab at the given index to be activated\n   * @param index The index of the tab to activate\n   */\n  setActiveTab(index: number): void;\n\n  /**\n   * Activates the tab at the given index with the given client rect\n   * @param index The index of the tab to activate\n   * @param clientRect The client rect of the previously active Tab Indicator\n   */\n  activateTabAtIndex(index: number, clientRect?: DOMRect): void;\n\n  /**\n   * Deactivates the tab at the given index\n   * @param index The index of the tab to deactivate\n   */\n  deactivateTabAtIndex(index: number): void;\n\n  /**\n   * Focuses the tab at the given index\n   * @param index The index of the tab to focus\n   */\n  focusTabAtIndex(index: number): void;\n\n  /**\n   * Returns the client rect of the tab's indicator\n   * @param index The index of the tab\n   */\n  getTabIndicatorClientRectAtIndex(index: number): DOMRect;\n\n  /**\n   * Returns the tab dimensions of the tab at the given index\n   * @param index The index of the tab\n   */\n  getTabDimensionsAtIndex(index: number): MDCTabDimensions;\n\n  /**\n   * Returns the length of the tab list\n   */\n  getTabListLength(): number;\n\n  /**\n   * Returns the index of the previously active tab\n   */\n  getPreviousActiveTabIndex(): number;\n\n  /**\n   * Returns the index of the focused tab\n   */\n  getFocusedTabIndex(): number;\n\n  /**\n   * Returns the index of the given tab\n   * @param id The ID of the tab whose index to determine\n   */\n  getIndexOfTabById(id: string): number;\n\n  /**\n   * Emits the MDCTabBar:activated event\n   * @param index The index of the activated tab\n   */\n  notifyTabActivated(index: number): void;\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {CustomEventListener, SpecificEventListener} from '@material/base/types';\nimport {MDCTabScroller, MDCTabScrollerFactory} from '@material/tab-scroller/component';\nimport {MDCTab, MDCTabFactory} from '@material/tab/component';\nimport {MDCTabFoundation} from '@material/tab/foundation';\nimport {MDCTabInteractionEvent} from '@material/tab/types';\n\nimport {MDCTabBarAdapter} from './adapter';\nimport {MDCTabBarFoundation} from './foundation';\nimport {MDCTabBarActivatedEventDetail} from './types';\n\nconst {strings} = MDCTabBarFoundation;\n\nlet tabIdCounter = 0;\n\n/** MDC Tab Bar */\nexport class MDCTabBar extends MDCComponent<MDCTabBarFoundation> {\n  static override attachTo(root: HTMLElement): MDCTabBar {\n    return new MDCTabBar(root);\n  }\n\n  private tabList!: MDCTab[];                 // assigned in initialize()\n  private tabScroller!: MDCTabScroller|null;  // assigned in initialize()\n  private handleTabInteraction!:\n      CustomEventListener<MDCTabInteractionEvent>;  // assigned in\n                                                    // initialSyncWithDOM()\n  private handleKeyDown!:\n      SpecificEventListener<'keydown'>;  // assigned in initialSyncWithDOM()\n\n  set focusOnActivate(focusOnActivate: boolean) {\n    for (const tab of this.tabList) {\n      tab.focusOnActivate = focusOnActivate;\n    }\n  }\n\n  set useAutomaticActivation(useAutomaticActivation: boolean) {\n    this.foundation.setUseAutomaticActivation(useAutomaticActivation);\n  }\n\n  override initialize(\n      tabFactory: MDCTabFactory = (el) => new MDCTab(el),\n      tabScrollerFactory:\n          MDCTabScrollerFactory = (el) => new MDCTabScroller(el),\n  ) {\n    this.tabList = this.instantiateTabs(tabFactory);\n    this.tabScroller = this.instantiatetabScroller(tabScrollerFactory);\n  }\n\n  override initialSyncWithDOM() {\n    this.handleTabInteraction = (event) => {\n      this.foundation.handleTabInteraction(event);\n    };\n    this.handleKeyDown = (event) => {\n      this.foundation.handleKeyDown(event);\n    };\n\n    this.listen(\n        MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);\n    this.listen('keydown', this.handleKeyDown);\n\n    for (let i = 0; i < this.tabList.length; i++) {\n      if (this.tabList[i].active) {\n        this.scrollIntoView(i);\n        break;\n      }\n    }\n  }\n\n  override destroy() {\n    super.destroy();\n    this.unlisten(\n        MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);\n    this.unlisten('keydown', this.handleKeyDown);\n    for (const tab of this.tabList) {\n      tab.destroy();\n    }\n\n    if (this.tabScroller) {\n      this.tabScroller.destroy();\n    }\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTabBarAdapter = {\n      scrollTo: (scrollX) => {\n        this.tabScroller!.scrollTo(scrollX);\n      },\n      incrementScroll: (scrollXIncrement) => {\n        this.tabScroller!.incrementScroll(scrollXIncrement);\n      },\n      getScrollPosition: () => this.tabScroller!.getScrollPosition(),\n      getScrollContentWidth: () => this.tabScroller!.getScrollContentWidth(),\n      getOffsetWidth: () => this.root.offsetWidth,\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(\n                       'direction') === 'rtl',\n      setActiveTab: (index) => {\n        this.foundation.activateTab(index);\n      },\n      activateTabAtIndex: (index, clientRect) => {\n        this.tabList[index].activate(clientRect);\n      },\n      deactivateTabAtIndex: (index) => {\n        this.tabList[index].deactivate();\n      },\n      focusTabAtIndex: (index) => {\n        this.tabList[index].focus();\n      },\n      getTabIndicatorClientRectAtIndex: (index) =>\n          this.tabList[index].computeIndicatorClientRect(),\n      getTabDimensionsAtIndex: (index) =>\n          this.tabList[index].computeDimensions(),\n      getPreviousActiveTabIndex: () => {\n        for (let i = 0; i < this.tabList.length; i++) {\n          if (this.tabList[i].active) {\n            return i;\n          }\n        }\n        return -1;\n      },\n      getFocusedTabIndex: () => {\n        const tabElements = this.getTabElements();\n        const activeElement = document.activeElement!;\n        return tabElements.indexOf(activeElement as HTMLElement);\n      },\n      getIndexOfTabById: (id) => {\n        for (let i = 0; i < this.tabList.length; i++) {\n          if (this.tabList[i].id === id) {\n            return i;\n          }\n        }\n        return -1;\n      },\n      getTabListLength: () => this.tabList.length,\n      notifyTabActivated: (index) => {\n        this.emit<MDCTabBarActivatedEventDetail>(\n            strings.TAB_ACTIVATED_EVENT, {index}, true);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTabBarFoundation(adapter);\n  }\n\n  /**\n   * Activates the tab at the given index\n   * @param index The index of the tab\n   */\n  activateTab(index: number) {\n    this.foundation.activateTab(index);\n  }\n\n  /**\n   * Scrolls the tab at the given index into view\n   * @param index THe index of the tab\n   */\n  scrollIntoView(index: number) {\n    this.foundation.scrollIntoView(index);\n  }\n\n  /**\n   * Returns all the tab elements in a nice clean array\n   */\n  private getTabElements() {\n    return Array.from(\n        this.root.querySelectorAll<HTMLElement>(strings.TAB_SELECTOR));\n  }\n\n  /**\n   * Instantiates tab components on all child tab elements\n   */\n  private instantiateTabs(tabFactory: MDCTabFactory) {\n    return this.getTabElements().map((el) => {\n      el.id = el.id || `mdc-tab-${++tabIdCounter}`;\n      return tabFactory(el);\n    });\n  }\n\n  /**\n   * Instantiates tab scroller component on the child tab scroller element\n   */\n  private instantiatetabScroller(tabScrollerFactory: MDCTabScrollerFactory):\n      MDCTabScroller|null {\n    const tabScrollerElement =\n        this.root.querySelector<HTMLElement>(strings.TAB_SCROLLER_SELECTOR);\n    if (tabScrollerElement) {\n      return tabScrollerFactory(tabScrollerElement);\n    }\n    return null;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  ARROW_LEFT_KEY: 'ArrowLeft',\n  ARROW_RIGHT_KEY: 'ArrowRight',\n  END_KEY: 'End',\n  ENTER_KEY: 'Enter',\n  HOME_KEY: 'Home',\n  SPACE_KEY: 'Space',\n  TAB_ACTIVATED_EVENT: 'MDCTabBar:activated',\n  TAB_SCROLLER_SELECTOR: '.mdc-tab-scroller',\n  TAB_SELECTOR: '.mdc-tab',\n};\n\nconst numbers = {\n  ARROW_LEFT_KEYCODE: 37,\n  ARROW_RIGHT_KEYCODE: 39,\n  END_KEYCODE: 35,\n  ENTER_KEYCODE: 13,\n  EXTRA_SCROLL_AMOUNT: 20,\n  HOME_KEYCODE: 36,\n  SPACE_KEYCODE: 32,\n};\n\nexport {numbers, strings};\n"
  },
  {
    "path": "packages/mdc-tab-bar/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {MDCTabDimensions, MDCTabInteractionEvent} from '@material/tab/types';\n\nimport {MDCTabBarAdapter} from './adapter';\nimport {numbers, strings} from './constants';\n\nconst ACCEPTABLE_KEYS = new Set<string>();\n// IE11 has no support for new Set with iterable so we need to initialize this\n// by hand\nACCEPTABLE_KEYS.add(strings.ARROW_LEFT_KEY);\nACCEPTABLE_KEYS.add(strings.ARROW_RIGHT_KEY);\nACCEPTABLE_KEYS.add(strings.END_KEY);\nACCEPTABLE_KEYS.add(strings.HOME_KEY);\nACCEPTABLE_KEYS.add(strings.ENTER_KEY);\nACCEPTABLE_KEYS.add(strings.SPACE_KEY);\n\nconst KEYCODE_MAP = new Map<number, string>();\n// IE11 has no support for new Map with iterable so we need to initialize this\n// by hand\nKEYCODE_MAP.set(numbers.ARROW_LEFT_KEYCODE, strings.ARROW_LEFT_KEY);\nKEYCODE_MAP.set(numbers.ARROW_RIGHT_KEYCODE, strings.ARROW_RIGHT_KEY);\nKEYCODE_MAP.set(numbers.END_KEYCODE, strings.END_KEY);\nKEYCODE_MAP.set(numbers.HOME_KEYCODE, strings.HOME_KEY);\nKEYCODE_MAP.set(numbers.ENTER_KEYCODE, strings.ENTER_KEY);\nKEYCODE_MAP.set(numbers.SPACE_KEYCODE, strings.SPACE_KEY);\n\n/** MDC Tab Bar Foundation */\nexport class MDCTabBarFoundation extends MDCFoundation<MDCTabBarAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  static override get defaultAdapter(): MDCTabBarAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      scrollTo: () => undefined,\n      incrementScroll: () => undefined,\n      getScrollPosition: () => 0,\n      getScrollContentWidth: () => 0,\n      getOffsetWidth: () => 0,\n      isRTL: () => false,\n      setActiveTab: () => undefined,\n      activateTabAtIndex: () => undefined,\n      deactivateTabAtIndex: () => undefined,\n      focusTabAtIndex: () => undefined,\n      getTabIndicatorClientRectAtIndex: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      getTabDimensionsAtIndex: () =>\n          ({rootLeft: 0, rootRight: 0, contentLeft: 0, contentRight: 0}),\n      getPreviousActiveTabIndex: () => -1,\n      getFocusedTabIndex: () => -1,\n      getIndexOfTabById: () => -1,\n      getTabListLength: () => 0,\n      notifyTabActivated: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private useAutomaticActivation = false;\n\n  constructor(adapter?: Partial<MDCTabBarAdapter>) {\n    super({...MDCTabBarFoundation.defaultAdapter, ...adapter});\n  }\n\n  /**\n   * Switches between automatic and manual activation modes.\n   * See https://www.w3.org/TR/wai-aria-practices/#tabpanel for examples.\n   */\n  setUseAutomaticActivation(useAutomaticActivation: boolean) {\n    this.useAutomaticActivation = useAutomaticActivation;\n  }\n\n  activateTab(index: number) {\n    const previousActiveIndex = this.adapter.getPreviousActiveTabIndex();\n    if (!this.indexIsInRange(index) || index === previousActiveIndex) {\n      return;\n    }\n\n    let previousClientRect;\n    if (previousActiveIndex !== -1) {\n      this.adapter.deactivateTabAtIndex(previousActiveIndex);\n      previousClientRect =\n          this.adapter.getTabIndicatorClientRectAtIndex(previousActiveIndex);\n    }\n\n    this.adapter.activateTabAtIndex(index, previousClientRect);\n    this.scrollIntoView(index);\n\n    this.adapter.notifyTabActivated(index);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Get the key from the event\n    const key = this.getKeyFromEvent(event);\n\n    // Early exit if the event key isn't one of the keyboard navigation keys\n    if (key === undefined) {\n      return;\n    }\n\n    // Prevent default behavior for movement keys, but not for activation keys,\n    // since :active is used to apply ripple\n    if (!this.isActivationKey(key)) {\n      event.preventDefault();\n    }\n\n    if (this.useAutomaticActivation && this.isActivationKey(key)) {\n      return;\n    }\n    const focusedTabIndex = this.adapter.getFocusedTabIndex();\n    if (this.isActivationKey(key)) {\n      this.adapter.setActiveTab(focusedTabIndex);\n      return;\n    }\n    const index = this.determineTargetFromKey(focusedTabIndex, key);\n    this.adapter.focusTabAtIndex(index);\n    this.scrollIntoView(index);\n    if (this.useAutomaticActivation) {\n      this.adapter.setActiveTab(index);\n    }\n  }\n\n  /**\n   * Handles the MDCTab:interacted event\n   */\n  handleTabInteraction(event: MDCTabInteractionEvent) {\n    this.adapter.setActiveTab(this.adapter.getIndexOfTabById(event.detail.tabId));\n  }\n\n  /**\n   * Scrolls the tab at the given index into view\n   * @param index The tab index to make visible\n   */\n  scrollIntoView(index: number) {\n    // Early exit if the index is out of range\n    if (!this.indexIsInRange(index)) {\n      return;\n    }\n\n    // Always scroll to 0 if scrolling to the 0th index\n    if (index === 0) {\n      this.adapter.scrollTo(0);\n      return;\n    }\n\n    // Always scroll to the max value if scrolling to the Nth index\n    // MDCTabScroller.scrollTo() will never scroll past the max possible value\n    if (index === this.adapter.getTabListLength() - 1) {\n      this.adapter.scrollTo(this.adapter.getScrollContentWidth());\n      return;\n    }\n\n    if (this.isRTL()) {\n      this.scrollIntoViewImplRTL(index);\n      return;\n    }\n\n    this.scrollIntoViewImpl(index);\n  }\n\n  /**\n   * Private method for determining the index of the destination tab based on\n   * what key was pressed\n   * @param origin The original index from which to determine the destination\n   * @param key The name of the key\n   */\n  private determineTargetFromKey(origin: number, key: string): number {\n    const isRTL = this.isRTL();\n    const maxIndex = this.adapter.getTabListLength() - 1;\n    const shouldGoToEnd = key === strings.END_KEY;\n    const shouldDecrement = key === strings.ARROW_LEFT_KEY && !isRTL ||\n        key === strings.ARROW_RIGHT_KEY && isRTL;\n    const shouldIncrement = key === strings.ARROW_RIGHT_KEY && !isRTL ||\n        key === strings.ARROW_LEFT_KEY && isRTL;\n    let index = origin;\n\n    if (shouldGoToEnd) {\n      index = maxIndex;\n    } else if (shouldDecrement) {\n      index -= 1;\n    } else if (shouldIncrement) {\n      index += 1;\n    } else {\n      index = 0;\n    }\n\n    if (index < 0) {\n      index = maxIndex;\n    } else if (index > maxIndex) {\n      index = 0;\n    }\n\n    return index;\n  }\n\n  /**\n   * Calculates the scroll increment that will make the tab at the given index\n   * visible\n   * @param index The index of the tab\n   * @param nextIndex The index of the next tab\n   * @param scrollPosition The current scroll position\n   * @param barWidth The width of the Tab Bar\n   */\n  private calculateScrollIncrement(\n      index: number,\n      nextIndex: number,\n      scrollPosition: number,\n      barWidth: number,\n      ): number {\n    const nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);\n    const relativeContentLeft =\n        nextTabDimensions.contentLeft - scrollPosition - barWidth;\n    const relativeContentRight =\n        nextTabDimensions.contentRight - scrollPosition;\n    const leftIncrement = relativeContentRight - numbers.EXTRA_SCROLL_AMOUNT;\n    const rightIncrement = relativeContentLeft + numbers.EXTRA_SCROLL_AMOUNT;\n\n    if (nextIndex < index) {\n      return Math.min(leftIncrement, 0);\n    }\n\n    return Math.max(rightIncrement, 0);\n  }\n\n  /**\n   * Calculates the scroll increment that will make the tab at the given index\n   * visible in RTL\n   * @param index The index of the tab\n   * @param nextIndex The index of the next tab\n   * @param scrollPosition The current scroll position\n   * @param barWidth The width of the Tab Bar\n   * @param scrollContentWidth The width of the scroll content\n   */\n  private calculateScrollIncrementRTL(\n      index: number,\n      nextIndex: number,\n      scrollPosition: number,\n      barWidth: number,\n      scrollContentWidth: number,\n      ): number {\n    const nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);\n    const relativeContentLeft =\n        scrollContentWidth - nextTabDimensions.contentLeft - scrollPosition;\n    const relativeContentRight = scrollContentWidth -\n        nextTabDimensions.contentRight - scrollPosition - barWidth;\n    const leftIncrement = relativeContentRight + numbers.EXTRA_SCROLL_AMOUNT;\n    const rightIncrement = relativeContentLeft - numbers.EXTRA_SCROLL_AMOUNT;\n\n    if (nextIndex > index) {\n      return Math.max(leftIncrement, 0);\n    }\n\n    return Math.min(rightIncrement, 0);\n  }\n\n  /**\n   * Determines the index of the adjacent tab closest to either edge of the Tab\n   * Bar\n   * @param index The index of the tab\n   * @param tabDimensions The dimensions of the tab\n   * @param scrollPosition The current scroll position\n   * @param barWidth The width of the tab bar\n   */\n  private findAdjacentTabIndexClosestToEdge(\n      index: number,\n      tabDimensions: MDCTabDimensions,\n      scrollPosition: number,\n      barWidth: number,\n      ): number {\n    /**\n     * Tabs are laid out in the Tab Scroller like this:\n     *\n     *    Scroll Position\n     *    +---+\n     *    |   |   Bar Width\n     *    |   +-----------------------------------+\n     *    |   |                                   |\n     *    |   V                                   V\n     *    |   +-----------------------------------+\n     *    V   |             Tab Scroller          |\n     *    +------------+--------------+-------------------+\n     *    |    Tab     |      Tab     |        Tab        |\n     *    +------------+--------------+-------------------+\n     *        |                                   |\n     *        +-----------------------------------+\n     *\n     * To determine the next adjacent index, we look at the Tab root left and\n     * Tab root right, both relative to the scroll position. If the Tab root\n     * left is less than 0, then we know it's out of view to the left. If the\n     * Tab root right minus the bar width is greater than 0, we know the Tab is\n     * out of view to the right. From there, we either increment or decrement\n     * the index.\n     */\n    const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;\n    const relativeRootRight =\n        tabDimensions.rootRight - scrollPosition - barWidth;\n    const relativeRootDelta = relativeRootLeft + relativeRootRight;\n    const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;\n    const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;\n\n    if (leftEdgeIsCloser) {\n      return index - 1;\n    }\n\n    if (rightEdgeIsCloser) {\n      return index + 1;\n    }\n\n    return -1;\n  }\n\n  /**\n   * Determines the index of the adjacent tab closest to either edge of the Tab\n   * Bar in RTL\n   * @param index The index of the tab\n   * @param tabDimensions The dimensions of the tab\n   * @param scrollPosition The current scroll position\n   * @param barWidth The width of the tab bar\n   * @param scrollContentWidth The width of the scroller content\n   */\n  private findAdjacentTabIndexClosestToEdgeRTL(\n      index: number,\n      tabDimensions: MDCTabDimensions,\n      scrollPosition: number,\n      barWidth: number,\n      scrollContentWidth: number,\n      ): number {\n    const rootLeft =\n        scrollContentWidth - tabDimensions.rootLeft - barWidth - scrollPosition;\n    const rootRight =\n        scrollContentWidth - tabDimensions.rootRight - scrollPosition;\n    const rootDelta = rootLeft + rootRight;\n    const leftEdgeIsCloser = rootLeft > 0 || rootDelta > 0;\n    const rightEdgeIsCloser = rootRight < 0 || rootDelta < 0;\n\n    if (leftEdgeIsCloser) {\n      return index + 1;\n    }\n\n    if (rightEdgeIsCloser) {\n      return index - 1;\n    }\n\n    return -1;\n  }\n\n  /**\n   * Returns the key associated with a keydown event\n   * @param event The keydown event\n   */\n  private getKeyFromEvent(event: KeyboardEvent): string {\n    if (ACCEPTABLE_KEYS.has(event.key)) {\n      return event.key;\n    }\n    return KEYCODE_MAP.get(event.keyCode)!;\n  }\n\n  private isActivationKey(key: string) {\n    return key === strings.SPACE_KEY || key === strings.ENTER_KEY;\n  }\n\n  /**\n   * Returns whether a given index is inclusively between the ends\n   * @param index The index to test\n   */\n  private indexIsInRange(index: number) {\n    return index >= 0 && index < this.adapter.getTabListLength();\n  }\n\n  /**\n   * Returns the view's RTL property\n   */\n  private isRTL(): boolean {\n    return this.adapter.isRTL();\n  }\n\n  /**\n   * Scrolls the tab at the given index into view for left-to-right user agents.\n   * @param index The index of the tab to scroll into view\n   */\n  private scrollIntoViewImpl(index: number) {\n    const scrollPosition = this.adapter.getScrollPosition();\n    const barWidth = this.adapter.getOffsetWidth();\n    const tabDimensions = this.adapter.getTabDimensionsAtIndex(index);\n    const nextIndex = this.findAdjacentTabIndexClosestToEdge(\n        index, tabDimensions, scrollPosition, barWidth);\n\n    if (!this.indexIsInRange(nextIndex)) {\n      return;\n    }\n\n    const scrollIncrement = this.calculateScrollIncrement(\n        index, nextIndex, scrollPosition, barWidth);\n    this.adapter.incrementScroll(scrollIncrement);\n  }\n\n  /**\n   * Scrolls the tab at the given index into view in RTL\n   * @param index The tab index to make visible\n   */\n  private scrollIntoViewImplRTL(index: number) {\n    const scrollPosition = this.adapter.getScrollPosition();\n    const barWidth = this.adapter.getOffsetWidth();\n    const tabDimensions = this.adapter.getTabDimensionsAtIndex(index);\n    const scrollWidth = this.adapter.getScrollContentWidth();\n    const nextIndex = this.findAdjacentTabIndexClosestToEdgeRTL(\n        index, tabDimensions, scrollPosition, barWidth, scrollWidth);\n\n    if (!this.indexIsInRange(nextIndex)) {\n      return;\n    }\n\n    const scrollIncrement = this.calculateScrollIncrementRTL(\n        index, nextIndex, scrollPosition, barWidth, scrollWidth);\n    this.adapter.incrementScroll(scrollIncrement);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabBarFoundation;\n"
  },
  {
    "path": "packages/mdc-tab-bar/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-tab-bar/mdc-tab-bar.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/tab/variables\" as mdc-tab-*;\n@forward \"@material/tab-scroller/variables\" as mdc-tab-scroller-*;\n@forward \"variables\" as mdc-tab-bar-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/tab-indicator/mixins\" as mdc-tab-indicator-*;\n@forward \"@material/tab/mixins\" as mdc-tab-*;\n@forward \"@material/tab-scroller/mixins\" as mdc-tab-scroller-*;\n@forward \"mixins\" as mdc-tab-bar-*;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-tab-bar\";\n"
  },
  {
    "path": "packages/mdc-tab-bar/mdc-tab-bar.scss",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-tab-bar/package.json",
    "content": "{\n  \"name\": \"@material/tab-bar\",\n  \"description\": \"The Material Components for the web tab bar component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tab\",\n    \"bar\"\n  ],\n  \"main\": \"dist/mdc.tabBar.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tab-bar\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/tab\": \"^14.0.0\",\n    \"@material/tab-indicator\": \"^14.0.0\",\n    \"@material/tab-scroller\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-bar/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTab, MDCTabFoundation} from '../../mdc-tab/index';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {MDCTabBar, MDCTabBarFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-tab-bar\">\n      <div class=\"mdc-tab-scroller\">\n        <div class=\"mdc-tab-scroller__scroll-area\">\n          <div class=\"mdc-tab-scroller__scroll-content\">\n            <div class=\"mdc-tab\">\n              <span class=\"mdc-tab-indicator\"></span>\n              <span class=\"mdc-tab__ripple\"></span>\n            </div>\n            <div class=\"mdc-tab\">\n              <span class=\"mdc-tab-indicator\"></span>\n              <span class=\"mdc-tab__ripple\"></span>\n            </div>\n            <div class=\"mdc-tab\">\n              <span class=\"mdc-tab-indicator\"></span>\n              <span class=\"mdc-tab__ripple\"></span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `);\n}\n\ndescribe('MDCTabBar', () => {\n  it('attachTo returns an MDCTabBar instance', () => {\n    expect(MDCTabBar.attachTo(getFixture()) instanceof MDCTabBar).toBeTruthy();\n  });\n\n  let fakeTabIdCounter = 0;\n  class FakeTab {\n    id: string = `mdc-tab-${++fakeTabIdCounter}`;\n    destroy: Function = jasmine.createSpy('destroy');\n    activate: Function = jasmine.createSpy('activate');\n    deactivate: Function = jasmine.createSpy('deactivate');\n    computeIndicatorClientRect: Function =\n        jasmine.createSpy('computeIndicatorClientRect');\n    computeDimensions: Function = jasmine.createSpy('computeDimensions');\n    active: boolean = false;\n    focusOnActivate: boolean = true;\n  }\n\n  class FakeTabScroller {\n    destroy: Function = jasmine.createSpy('destroy');\n    scrollTo: Function = jasmine.createSpy('scrollTo');\n    incrementScroll: Function = jasmine.createSpy('incrementScroll');\n    getScrollPosition: Function = jasmine.createSpy('getScrollPosition');\n    getScrollContentWidth: Function =\n        jasmine.createSpy('getScrollContentWidth');\n  }\n\n  it('#constructor instantiates child tab components', () => {\n    const root = getFixture();\n    const component = new MDCTabBar(\n        root, undefined, () => new FakeTab(), () => new FakeTabScroller());\n    expect((component as any).tabList.length).toEqual(3);\n    expect((component as any).tabList[0]).toEqual(jasmine.any(FakeTab));\n    expect((component as any).tabList[1]).toEqual(jasmine.any(FakeTab));\n    expect((component as any).tabList[2]).toEqual(jasmine.any(FakeTab));\n  });\n\n  it('#constructor instantiates child tab scroller component', () => {\n    const root = getFixture();\n    const component = new MDCTabBar(\n        root, undefined, () => new FakeTab(), () => new FakeTabScroller());\n    expect((component as any).tabScroller)\n        .toEqual(jasmine.any(FakeTabScroller));\n  });\n\n  it('#destroy cleans up child tab components', () => {\n    const root = getFixture();\n    const component = new MDCTabBar(\n        root, undefined, () => new FakeTab(), () => new FakeTabScroller());\n    component.destroy();\n    expect((component as any).tabList[0].destroy).toHaveBeenCalled();\n    expect((component as any).tabList[1].destroy).toHaveBeenCalled();\n    expect((component as any).tabList[2].destroy).toHaveBeenCalled();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCTabBar(\n        root, undefined, () => new FakeTab(), () => new FakeTabScroller());\n    return {root, component};\n  }\n\n  function setupMockFoundationTest() {\n    const root = getFixture();\n    const mockFoundation = createMockFoundation(MDCTabBarFoundation);\n    const component = new MDCTabBar(\n        root, mockFoundation, () => new FakeTab(), () => new FakeTabScroller());\n    return {root, component, mockFoundation};\n  }\n\n  it('focusOnActivate setter updates setting on all tabs', () => {\n    const {component} = setupTest();\n\n    component.focusOnActivate = false;\n    (component as any).tabList.forEach((tab: MDCTab) => {\n      expect(tab.focusOnActivate).toBe(false);\n    });\n\n    component.focusOnActivate = true;\n    (component as any).tabList.forEach((tab: MDCTab) => {\n      expect(tab.focusOnActivate).toBe(true);\n    });\n  });\n\n  it('useAutomaticActivation setter calls foundation#setUseAutomaticActivation',\n     () => {\n       const {component, mockFoundation} = setupMockFoundationTest();\n\n       component.useAutomaticActivation = false;\n       expect(mockFoundation.setUseAutomaticActivation)\n           .toHaveBeenCalledWith(false);\n\n       component.useAutomaticActivation = true;\n       expect(mockFoundation.setUseAutomaticActivation)\n           .toHaveBeenCalledWith(true);\n     });\n\n  it('#adapter.scrollTo calls scrollTo of the child tab scroller', () => {\n    const {component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.scrollTo(123);\n    expect((component as any).tabScroller.scrollTo).toHaveBeenCalledWith(123);\n  });\n\n  it('#adapter.incrementScroll calls incrementScroll of the child tab scroller',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.incrementScroll(123);\n       expect((component as any).tabScroller.incrementScroll)\n           .toHaveBeenCalledWith(123);\n     });\n\n  it('#adapter.getScrollPosition calls getScrollPosition of the child tab scroller',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.getScrollPosition();\n       expect((component as any).tabScroller.getScrollPosition)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.getScrollContentWidth calls getScrollContentWidth of the child tab scroller',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.getScrollContentWidth();\n       expect((component as any).tabScroller.getScrollContentWidth)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.getOffsetWidth returns getOffsetWidth of the root element',\n     () => {\n       const {component, root} = setupTest();\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.getOffsetWidth() === root.offsetWidth)\n           .toBe(true);\n     });\n\n  it('#adapter.isRTL returns the RTL state of the root element', () => {\n    const {component, root} = setupTest();\n    document.body.appendChild(root);\n    document.body.setAttribute('dir', 'rtl');\n    expect((component.getDefaultFoundation() as any).adapter.isRTL() === true)\n        .toBe(true);\n    document.body.removeChild(root);\n    document.body.removeAttribute('dir');\n  });\n\n  it('#adapter.activateTabAtIndex calls activate on the tab at the index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.activateTabAtIndex(2, {});\n       expect((component as any).tabList[2].activate).toHaveBeenCalledWith({});\n       expect((component as any).tabList[2].activate).toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.deactivateTabAtIndex calls deactivate on the tab at the index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.deactivateTabAtIndex(1);\n       expect((component as any).tabList[1].deactivate)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.getTabIndicatorClientRectAtIndex calls computeIndicatorClientRect on the tab at the index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.getTabIndicatorClientRectAtIndex(0);\n       expect((component as any).tabList[0].computeIndicatorClientRect)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.getTabDimensionsAtIndex calls computeDimensions on the tab at the index',\n     () => {\n       const {component} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.getTabDimensionsAtIndex(0);\n       expect((component as any).tabList[0].computeDimensions)\n           .toHaveBeenCalledTimes(1);\n     });\n\n  it('#adapter.getPreviousActiveTabIndex returns the index of the active tab',\n     () => {\n       const {component} = setupTest();\n       (component as any).tabList[1].active = true;\n       expect(\n           (component.getDefaultFoundation() as any)\n               .adapter.getPreviousActiveTabIndex() === 1)\n           .toBe(true);\n     });\n\n  it('#adapter.getIndexOfTabById returns the index of the given tab', () => {\n    const {component} = setupTest();\n    const tab = (component as any).tabList[2];\n    expect(\n        (component.getDefaultFoundation() as any)\n            .adapter.getIndexOfTabById(tab.id) === 2)\n        .toBe(true);\n  });\n\n  it('#adapter.getTabListLength returns the length of the tab list', () => {\n    const {component} = setupTest();\n    expect(\n        (component.getDefaultFoundation() as any).adapter.getTabListLength() ===\n        3)\n        .toBe(true);\n  });\n\n  it(`#adapter.notifyTabActivated emits the ${\n         MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT} event`,\n     () => {\n       const {component, root} = setupTest();\n       const handler = jasmine.createSpy('');\n       root.addEventListener(\n           MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyTabActivated(66);\n       expect(handler).toHaveBeenCalledWith(\n           jasmine.objectContaining({detail: {index: 66}}));\n     });\n\n  it('#activateTab calls activateTab', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.activateTab(1);\n    expect(mockFoundation.activateTab).toHaveBeenCalledWith(1);\n    expect(mockFoundation.activateTab).toHaveBeenCalledTimes(1);\n  });\n\n  it('#scrollIntoView calls scrollIntoView', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.scrollIntoView(1);\n    expect(mockFoundation.scrollIntoView).toHaveBeenCalledWith(1);\n    expect(mockFoundation.scrollIntoView).toHaveBeenCalledTimes(1);\n  });\n\n  it(`on ${\n         MDCTabFoundation.strings.INTERACTED_EVENT}, call handleTabInteraction`,\n     () => {\n       const {root, mockFoundation} = setupMockFoundationTest();\n       const tab = root.querySelector<HTMLElement>(\n           MDCTabBarFoundation.strings.TAB_SELECTOR)!;\n       emitEvent(tab, MDCTabFoundation.strings.INTERACTED_EVENT, {\n         bubbles: true,\n       });\n       expect(mockFoundation.handleTabInteraction)\n           .toHaveBeenCalledWith(jasmine.anything());\n       expect(mockFoundation.handleTabInteraction).toHaveBeenCalledTimes(1);\n     });\n\n  it('on keydown, call handleKeyDown', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n    emitEvent(root, 'keydown');\n    expect(mockFoundation.handleKeyDown)\n        .toHaveBeenCalledWith(jasmine.anything());\n    expect(mockFoundation.handleKeyDown).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab-bar/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as tab-bar;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include tab-bar.core-styles($query: $query);\n    @include tab-bar.density(0, $query: $query);\n    @include tab-bar.stacked-density(0, $query: $query);\n    @include tab-bar.tab-scroller-transition(0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-tab-bar/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabInteractionEvent} from '../../mdc-tab/types';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTabBarFoundation} from '../foundation';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} = setUpFoundationTest(MDCTabBarFoundation);\n  return {foundation, mockAdapter};\n}\n\ndescribe('MDCTabBarFoundation', () => {\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTabBarFoundation).toBe(true);\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCTabBarFoundation).toBe(true);\n  });\n\n  it('exports numbers', () => {\n    expect('numbers' in MDCTabBarFoundation).toBe(true);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTabBarFoundation, [\n      'scrollTo',\n      'incrementScroll',\n      'getScrollPosition',\n      'getScrollContentWidth',\n      'getOffsetWidth',\n      'isRTL',\n      'setActiveTab',\n      'activateTabAtIndex',\n      'deactivateTabAtIndex',\n      'focusTabAtIndex',\n      'getTabIndicatorClientRectAtIndex',\n      'getTabDimensionsAtIndex',\n      'getPreviousActiveTabIndex',\n      'getFocusedTabIndex',\n      'getIndexOfTabById',\n      'getTabListLength',\n      'notifyTabActivated',\n    ]);\n  });\n\n  const setupKeyDownTest = () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setUseAutomaticActivation(false);\n    foundation.scrollIntoView = jasmine.createSpy(\n        'scrollIntoView');  // Avoid errors due to adapters being stubs\n    foundation.activateTab = jasmine.createSpy('activateTab');\n    return {foundation, mockAdapter};\n  };\n\n  const mockKeyDownEvent =\n      ({key, keyCode}: {key?: string, keyCode?: number}) => {\n        const preventDefault = jasmine.createSpy('preventDefault');\n        const fakeEvent = {\n          key,\n          keyCode,\n          preventDefault,\n        } as unknown as KeyboardEvent;\n\n        return {preventDefault, fakeEvent};\n      };\n\n  it('#handleTabInteraction() activates the tab', () => {\n    const {foundation, mockAdapter} = setupKeyDownTest();\n    foundation.handleTabInteraction({detail: {}} as MDCTabInteractionEvent);\n    expect(mockAdapter.setActiveTab).toHaveBeenCalled();\n  });\n\n  it('#handleKeyDown() focuses the tab at the 0th index on home key press',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.HOME_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 36});\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the N - 1 index on end key press',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.END_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 35});\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(12);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the previous index on left arrow press',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_LEFT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 37});\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(1);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the next index when the right arrow key is pressed' +\n         ' and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_LEFT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 37});\n       mockAdapter.isRTL.and.returnValue(true);\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(3);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the N - 1 index when the left arrow key is pressed' +\n         ' and the current active index is 0',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_LEFT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 37});\n       mockAdapter.getFocusedTabIndex.and.returnValue(0);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(12);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the N - 1 index when the right arrow key is pressed' +\n         ' and the current active index is the 0th index and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} = mockKeyDownEvent({key: 'ArrowRight'});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 39});\n       mockAdapter.isRTL.and.returnValue(true);\n       mockAdapter.getFocusedTabIndex.and.returnValue(0);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(12);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the next index when the right arrow key is pressed',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_RIGHT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 39});\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(3);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the previous index when the right arrow key is pressed' +\n         ' and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_RIGHT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 39});\n       mockAdapter.isRTL.and.returnValue(true);\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(1);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the 0th index when the right arrow key is pressed' +\n         ' and the current active index is the max index',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_RIGHT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 39});\n       mockAdapter.getFocusedTabIndex.and.returnValue(12);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() focuses the tab at the 0th index when the left arrow key is pressed' +\n         ' and the current active index is the max index and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_LEFT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 37});\n       mockAdapter.isRTL.and.returnValue(true);\n       mockAdapter.getFocusedTabIndex.and.returnValue(12);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledWith(0);\n       expect(mockAdapter.focusTabAtIndex).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() activates the current focused tab on space/enter press w/o useAutomaticActivation',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const index = 2;\n       mockAdapter.getFocusedTabIndex.and.returnValue(index);\n       foundation.handleKeyDown(mockKeyDownEvent({\n                                  key: MDCTabBarFoundation.strings.SPACE_KEY\n                                }).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({keyCode: 32}).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({\n                                  key: MDCTabBarFoundation.strings.ENTER_KEY\n                                }).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({keyCode: 13}).fakeEvent);\n\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledWith(index);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledTimes(4);\n     });\n\n  it('#handleKeyDown() does nothing on space/enter press w/ useAutomaticActivation',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       foundation.setUseAutomaticActivation(true);\n       foundation.handleKeyDown(mockKeyDownEvent({\n                                  key: MDCTabBarFoundation.strings.SPACE_KEY\n                                }).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({keyCode: 32}).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({\n                                  key: MDCTabBarFoundation.strings.ENTER_KEY\n                                }).fakeEvent);\n       foundation.handleKeyDown(mockKeyDownEvent({keyCode: 13}).fakeEvent);\n\n       expect(mockAdapter.setActiveTab)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#handleKeyDown() activates the tab at the 0th index on home key press w/ useAutomaticActivation',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.HOME_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 36});\n       foundation.setUseAutomaticActivation(true);\n\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledWith(0);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() activates the tab at the N - 1 index on end key press w/ useAutomaticActivation',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.END_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 35});\n       foundation.setUseAutomaticActivation(true);\n       mockAdapter.getTabListLength.and.returnValue(13);\n\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledWith(12);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() activates the tab at the previous index on left arrow press w/ useAutomaticActivation',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} =\n           mockKeyDownEvent({key: MDCTabBarFoundation.strings.ARROW_LEFT_KEY});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 37});\n       foundation.setUseAutomaticActivation(true);\n       mockAdapter.getFocusedTabIndex.and.returnValue(2);\n       mockAdapter.getTabListLength.and.returnValue(13);\n\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledWith(1);\n       expect(mockAdapter.setActiveTab).toHaveBeenCalledTimes(2);\n     });\n\n  it('#handleKeyDown() prevents the default behavior for handled non-activation keys',\n     () => {\n       [MDCTabBarFoundation.strings.ARROW_LEFT_KEY,\n        MDCTabBarFoundation.strings.ARROW_RIGHT_KEY,\n        MDCTabBarFoundation.strings.HOME_KEY,\n        MDCTabBarFoundation.strings.END_KEY,\n       ].forEach((eventName) => {\n         const {foundation} = setupKeyDownTest();\n         const {fakeEvent, preventDefault} = mockKeyDownEvent({key: eventName});\n         foundation.handleKeyDown(fakeEvent);\n         expect(preventDefault).toHaveBeenCalled();\n       });\n     });\n\n  it('#handleKeyDown() does not prevent the default behavior for handled activation keys',\n     () => {\n       [MDCTabBarFoundation.strings.SPACE_KEY,\n        MDCTabBarFoundation.strings.ENTER_KEY]\n           .forEach((eventName) => {\n             const {foundation} = setupKeyDownTest();\n             const {fakeEvent, preventDefault} =\n                 mockKeyDownEvent({key: eventName});\n             foundation.handleKeyDown(fakeEvent);\n             expect(preventDefault).not.toHaveBeenCalled();\n           });\n     });\n\n  it('#handleKeyDown() prevents the default behavior for handled non-activation keyCodes',\n     () => {\n       [MDCTabBarFoundation.numbers.ARROW_LEFT_KEYCODE,\n        MDCTabBarFoundation.numbers.ARROW_RIGHT_KEYCODE,\n        MDCTabBarFoundation.numbers.HOME_KEYCODE,\n        MDCTabBarFoundation.numbers.END_KEYCODE,\n       ].forEach((keyCode) => {\n         const {foundation} = setupKeyDownTest();\n         const {fakeEvent, preventDefault} = mockKeyDownEvent({keyCode});\n         foundation.handleKeyDown(fakeEvent);\n         expect(preventDefault).toHaveBeenCalled();\n       });\n     });\n\n  it('#handleKeyDown() prevents the default behavior for handled activation keyCodes',\n     () => {\n       [MDCTabBarFoundation.numbers.SPACE_KEYCODE,\n        MDCTabBarFoundation.numbers.ENTER_KEYCODE]\n           .forEach((keyCode) => {\n             const {foundation} = setupKeyDownTest();\n             const {fakeEvent, preventDefault} = mockKeyDownEvent({keyCode});\n             foundation.handleKeyDown(fakeEvent);\n             expect(preventDefault).not.toHaveBeenCalled();\n           });\n     });\n\n  it('#handleKeyDown() does not prevent the default behavior for unhandled keys',\n     () => {\n       const {foundation} = setupKeyDownTest();\n       const {fakeEvent, preventDefault} = mockKeyDownEvent({key: 'Shift'});\n       foundation.handleKeyDown(fakeEvent);\n       expect(preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeyDown() does not prevent the default behavior for unhandled keyCodes',\n     () => {\n       const {foundation} = setupKeyDownTest();\n       const {fakeEvent, preventDefault} = mockKeyDownEvent({keyCode: 16});\n       foundation.handleKeyDown(fakeEvent);\n       expect(preventDefault).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeyDown() does not activate a tab when an unhandled key is pressed',\n     () => {\n       const {foundation, mockAdapter} = setupKeyDownTest();\n       const {fakeEvent: fakeKeyEvent} = mockKeyDownEvent({key: 'Shift'});\n       const {fakeEvent: fakeKeyCodeEvent} = mockKeyDownEvent({keyCode: 16});\n       foundation.handleKeyDown(fakeKeyEvent);\n       foundation.handleKeyDown(fakeKeyCodeEvent);\n       expect(mockAdapter.setActiveTab).not.toHaveBeenCalled();\n     });\n\n  const setupActivateTabTest = () => {\n    const {foundation, mockAdapter} = setupTest();\n    const scrollIntoView = jasmine.createSpy('');\n    foundation.scrollIntoView = scrollIntoView;\n    return {foundation, mockAdapter, scrollIntoView};\n  };\n\n  it('#activateTab() does nothing if the index overflows the tab list', () => {\n    const {foundation, mockAdapter} = setupActivateTabTest();\n    mockAdapter.getTabListLength.and.returnValue(13);\n    foundation.activateTab(13);\n    expect(mockAdapter.deactivateTabAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n    expect(mockAdapter.activateTabAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#activateTab() does nothing if the index underflows the tab list', () => {\n    const {foundation, mockAdapter} = setupActivateTabTest();\n    mockAdapter.getTabListLength.and.returnValue(13);\n    foundation.activateTab(-1);\n    expect(mockAdapter.deactivateTabAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n    expect(mockAdapter.activateTabAtIndex)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#activateTab() does nothing if the index is the same as the previous active index',\n     () => {\n       const {foundation, mockAdapter} = setupActivateTabTest();\n       mockAdapter.getPreviousActiveTabIndex.and.returnValue(0);\n       mockAdapter.getTabListLength.and.returnValue(13);\n       foundation.activateTab(0);\n       expect(mockAdapter.deactivateTabAtIndex)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n       expect(mockAdapter.activateTabAtIndex)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it(`#activateTab() does not emit the ${\n         MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT} event if the index` +\n         ' is the currently active index',\n     () => {\n       const {foundation, mockAdapter} = setupActivateTabTest();\n       mockAdapter.getTabListLength.and.returnValue(13);\n       mockAdapter.getPreviousActiveTabIndex.and.returnValue(6);\n       foundation.activateTab(6);\n       expect(mockAdapter.notifyTabActivated)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#activateTab() deactivates the previously active tab', () => {\n    const {foundation, mockAdapter} = setupActivateTabTest();\n    mockAdapter.getTabListLength.and.returnValue(13);\n    mockAdapter.getPreviousActiveTabIndex.and.returnValue(6);\n    foundation.activateTab(1);\n    expect(mockAdapter.deactivateTabAtIndex).toHaveBeenCalledWith(6);\n  });\n\n  it('#activateTab() does not deactivate the previously active tab if there is none',\n     () => {\n       const {foundation, mockAdapter} = setupActivateTabTest();\n       mockAdapter.getTabListLength.and.returnValue(13);\n       mockAdapter.getPreviousActiveTabIndex.and.returnValue(-1);\n       foundation.activateTab(1);\n       expect(mockAdapter.deactivateTabAtIndex)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#activateTab() activates the newly active tab with the previously active tab\\'s indicatorClientRect',\n     () => {\n       const {foundation, mockAdapter} = setupActivateTabTest();\n       mockAdapter.getTabListLength.and.returnValue(13);\n       mockAdapter.getPreviousActiveTabIndex.and.returnValue(6);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n       //  number; right: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTabIndicatorClientRectAtIndex.and.returnValue({\n         left: 22,\n         right: 33,\n       });\n       foundation.activateTab(1);\n       expect(mockAdapter.activateTabAtIndex)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n           //  number; right: number; }' is not assignable to parameter of type\n           //  'Expected<DOMRect | undefined>'.\n           .toHaveBeenCalledWith(1, {left: 22, right: 33});\n     });\n\n  it('#activateTab() scrolls the new tab index into view', () => {\n    const {foundation, mockAdapter, scrollIntoView} = setupActivateTabTest();\n    mockAdapter.getTabListLength.and.returnValue(13);\n    mockAdapter.getPreviousActiveTabIndex.and.returnValue(6);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left: number;\n    //  right: number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getTabIndicatorClientRectAtIndex.and.returnValue({\n      left: 22,\n      right: 33,\n    });\n    foundation.activateTab(1);\n    expect(scrollIntoView).toHaveBeenCalledWith(1);\n  });\n\n  it(`#activateTab() emits the ${\n         MDCTabBarFoundation.strings\n             .TAB_ACTIVATED_EVENT} with the index of the tab`,\n     () => {\n       const {foundation, mockAdapter} = setupActivateTabTest();\n       mockAdapter.getTabListLength.and.returnValue(13);\n       mockAdapter.getPreviousActiveTabIndex.and.returnValue(6);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ left:\n       //  number; right: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTabIndicatorClientRectAtIndex.and.returnValue({\n         left: 22,\n         right: 33,\n       });\n       foundation.activateTab(1);\n       expect(mockAdapter.notifyTabActivated).toHaveBeenCalledWith(1);\n     });\n\n  function setupScrollIntoViewTest({\n    activeIndex = 0,\n    tabListLength = 10,\n    indicatorClientRect = {},\n    scrollContentWidth = 1000,\n    scrollPosition = 0,\n    offsetWidth = 400,\n    tabDimensionsMap = {},\n  } = {}) {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getPreviousActiveTabIndex.and.returnValue(activeIndex);\n    mockAdapter.getTabListLength.and.returnValue(tabListLength);\n    mockAdapter.getTabIndicatorClientRectAtIndex\n        .withArgs(jasmine.any(Number))\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{}' is not\n        //  assignable to parameter of type 'DOMRect'.\n        .and.returnValue(indicatorClientRect);\n    mockAdapter.getScrollPosition.and.returnValue(scrollPosition);\n    mockAdapter.getScrollContentWidth.and.returnValue(scrollContentWidth);\n    mockAdapter.getOffsetWidth.and.returnValue(offsetWidth);\n    mockAdapter.getTabDimensionsAtIndex.withArgs(jasmine.any(Number))\n        .and.callFake((index: number) => {\n          return (tabDimensionsMap as any)[index];\n        });\n\n    return {foundation, mockAdapter};\n  }\n\n  it('#scrollIntoView() does nothing if the index overflows the tab list',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         tabListLength: 13,\n       });\n       foundation.scrollIntoView(13);\n       expect(mockAdapter.scrollTo)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n       expect(mockAdapter.incrementScroll)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#scrollIntoView() does nothing if the index underflows the tab list',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         tabListLength: 9,\n       });\n       foundation.scrollIntoView(-1);\n       expect(mockAdapter.scrollTo)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n       expect(mockAdapter.incrementScroll)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#scrollIntoView() scrolls to 0 if the index is 0', () => {\n    const {foundation, mockAdapter} = setupScrollIntoViewTest({\n      tabListLength: 9,\n    });\n    foundation.scrollIntoView(0);\n    expect(mockAdapter.scrollTo).toHaveBeenCalledWith(0);\n  });\n\n  it('#scrollIntoView() scrolls to the scroll content width if the index is the max possible',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         tabListLength: 9,\n         scrollContentWidth: 987,\n       });\n       foundation.scrollIntoView(8);\n       expect(mockAdapter.scrollTo).toHaveBeenCalledWith(987);\n     });\n\n  it('#scrollIntoView() increments the scroll by 150 when the selected tab is 100px to the right' +\n         ' and the closest tab\\'s left content edge is 30px from its left root edge',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 0,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         offsetWidth: 200,\n         tabDimensionsMap: {\n           1: {\n             rootLeft: 0,\n             rootRight: 300,\n           },\n           2: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n       foundation.scrollIntoView(1);\n       expect(mockAdapter.incrementScroll)\n           .toHaveBeenCalledWith(\n               130 + MDCTabBarFoundation.numbers.EXTRA_SCROLL_AMOUNT);\n     });\n\n  it('#scrollIntoView() increments the scroll by 250 when the selected tab is 100px to the left, is 100px wide,' +\n         ' and the closest tab\\'s left content edge is 30px from its left root edge and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 0,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         offsetWidth: 200,\n         scrollPosition: 100,\n         tabDimensionsMap: {\n           5: {\n             rootLeft: 400,\n             contentLeft: 430,\n             contentRight: 470,\n             rootRight: 500,\n           },\n           4: {\n             rootLeft: 500,\n             rootRight: 600,\n           },\n         },\n       });\n       mockAdapter.isRTL.and.returnValue(true);\n       foundation.scrollIntoView(4);\n       expect(mockAdapter.incrementScroll)\n           .toHaveBeenCalledWith(\n               230 + MDCTabBarFoundation.numbers.EXTRA_SCROLL_AMOUNT);\n     });\n\n  it('#scrollIntoView() increments the scroll by -250 when the selected tab is 100px to the left, is 100px wide,' +\n         ' and the closest tab\\'s right content edge is 30px from its right root edge',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         scrollPosition: 500,\n         offsetWidth: 200,\n         tabDimensionsMap: {\n           1: {\n             rootLeft: 190,\n             contentLeft: 220,\n             contentRight: 270,\n             rootRight: 300,\n           },\n           2: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n       foundation.scrollIntoView(2);\n       expect(mockAdapter.incrementScroll)\n           .toHaveBeenCalledWith(\n               -230 - MDCTabBarFoundation.numbers.EXTRA_SCROLL_AMOUNT);\n     });\n\n  it('#scrollIntoView() increments the scroll by -150 when the selected tab is 100px wide,' +\n         ' and the closest tab\\'s right content edge is 30px from its right root edge and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         scrollPosition: 300,\n         offsetWidth: 200,\n         tabDimensionsMap: {\n           2: {\n             rootLeft: 700,\n             contentLeft: 730,\n             contentRight: 770,\n             rootRight: 800,\n           },\n           1: {\n             rootLeft: 800,\n             contentLeft: 830,\n             contentRight: 870,\n             rootRight: 900,\n           },\n         },\n       });\n       mockAdapter.isRTL.and.returnValue(true);\n       foundation.scrollIntoView(2);\n       expect(mockAdapter.incrementScroll)\n           .toHaveBeenCalledWith(\n               -130 - MDCTabBarFoundation.numbers.EXTRA_SCROLL_AMOUNT);\n     });\n\n  it('#scrollIntoView() does nothing when the tab is perfectly in the center',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         scrollPosition: 200,\n         offsetWidth: 300,\n         tabDimensionsMap: {\n           1: {\n             rootLeft: 200,\n             contentLeft: 230,\n             contentRight: 270,\n             rootRight: 300,\n           },\n           2: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n\n       foundation.scrollIntoView(2);\n       expect(mockAdapter.scrollTo)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n       expect(mockAdapter.incrementScroll)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#scrollIntoView() does nothing when the tab is perfectly in the center and the text direction is RTL',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 10,\n         scrollContentWidth: 1000,\n         scrollPosition: 500,\n         offsetWidth: 300,\n         tabDimensionsMap: {\n           8: {\n             rootLeft: 200,\n             contentLeft: 230,\n             contentRight: 270,\n             rootRight: 300,\n           },\n           7: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n       mockAdapter.isRTL.and.returnValue(true);\n       foundation.scrollIntoView(7);\n       expect(mockAdapter.scrollTo)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n       expect(mockAdapter.incrementScroll)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#scrollIntoView() increments the scroll by 0 when the tab and its left neighbor\\'s content are visible',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         scrollPosition: 200,\n         offsetWidth: 500,\n         tabDimensionsMap: {\n           1: {\n             rootLeft: 200,\n             contentLeft: 230,\n             contentRight: 270,\n             rootRight: 300,\n           },\n           2: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n\n       foundation.scrollIntoView(2);\n       expect(mockAdapter.incrementScroll).toHaveBeenCalledWith(0);\n     });\n\n  it('#scrollIntoView() increments the scroll by 0 when the tab and its right neighbor\\'s content are visible',\n     () => {\n       const {foundation, mockAdapter} = setupScrollIntoViewTest({\n         activeIndex: 3,\n         tabListLength: 9,\n         scrollContentWidth: 1000,\n         scrollPosition: 22,\n         offsetWidth: 400,\n         tabDimensionsMap: {\n           1: {\n             rootLeft: 200,\n             contentLeft: 230,\n             contentRight: 270,\n             rootRight: 300,\n           },\n           2: {\n             rootLeft: 300,\n             contentLeft: 330,\n             contentRight: 370,\n             rootRight: 400,\n           },\n         },\n       });\n\n       foundation.scrollIntoView(1);\n       expect(mockAdapter.incrementScroll).toHaveBeenCalledWith(0);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-bar/test/mdc-tab-bar.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-tab-bar.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-tab-bar/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport interface MDCTabBarActivatedEventDetail {\n  index: number;\n}\n\n// Note: CustomEvent<T> is not supported by Closure Compiler.\n\nexport interface MDCTabBarActivatedEvent extends Event {\n  readonly detail: MDCTabBarActivatedEventDetail;\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-tab-indicator/README.md",
    "content": "<!--docs:\ntitle: \"Tab Indicator\"\nlayout: detail\nsection: components\nexcerpt: \"A visual guide that shows which Tab is active.\"\niconId: tabs\npath: /catalog/tabs/indicator/\n-->\n\n# Tab Indicator\n\nA Tab Indicator is a visual guide that shows which Tab is active.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs#anatomy\">Material Design guidelines: Anatomy of Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-indicator\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content\"></span>\n</span>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-indicator/mdc-tab-indicator\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabIndicator} from '@material/tab-indicator';\n\nconst tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Active Indicator\n\nAdd the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.\n\n### Indicator Types and Transitions\n\nThe Tab Indicator may be represented in one of two ways:\n\n* Underline, indicated by the `mdc-tab-indicator__content--underline` class\n* Icon, indicated by the `mdc-tab-indicator__content--icon` class\n\n> *NOTE*: One of these classes _must_ be applied to the Tab Indicator's content element.\n\nThe Tab Indicator may transition in one of two ways:\n\n* Slide, the default behavior\n* Fade, indicated by the `mdc-tab-indicator--fade` class\n\n#### Sliding Underline Indicator\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\"></span>\n</span>\n```\n\n#### Icon Indicators\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nRemember to include `aria-hidden=\"true\"`, since the active indicator is already signified via the\n`aria-selected` attribute on the tab.\n\n##### Fading Icon Indicator\n\n```html\n<span class=\"mdc-tab-indicator mdc-tab-indicator--fade\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons\" aria-hidden=\"true\">star</span>\n</span>\n```\n\n##### Sliding Icon Indicator\n\n```html\n<span class=\"mdc-tab-indicator\">\n  <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons\" aria-hidden=\"true\">star</span>\n</span>\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-indicator` | Mandatory. Contains the tab indicator content.\n`mdc-tab-indicator__content` | Mandatory. Denotes the tab indicator content.\n`mdc-tab-indicator--active` | Optional. Visually activates the indicator.\n`mdc-tab-indicator--fade` | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation.\n`mdc-tab-indicator__content--underline` | Optional. Denotes an underline tab indicator.\n`mdc-tab-indicator__content--icon` | Optional. Denotes an icon tab indicator.\n\n> *NOTE*: Exactly one of the `--underline` or `--icon` content modifier classes should be present.\n\n### Sass Mixins\n\nTo customize the tab indicator, use the following mixins.\n\nMixin | Description\n--- | ---\n`surface` | Mandatory. Must be applied to the parent element of the `mdc-tab-indicator`.\n`underline-color($color)` | Customizes the color of the underline.\n`icon-color($color)` | Customizes the color of the icon subelement.\n`underline-height($height)` | Customizes the height of the underline.\n`icon-height($height)` | Customizes the height of the icon subelement.\n`underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline child element.\n\n## `MDCTabIndicator` Methods\n\nMethod Signature | Description\n--- | ---\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element bounding client rect.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabIndicatorAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setContentStyleProperty(property: string, value: string) => void` | Sets the style property of the content element.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n\n### `MDCTabIndicatorFoundation`\n\nMethod Signature | Description\n--- | ---\n`handleTransitionEnd(event: Event) => void` | Handles the logic for the `\"transitionend\"` event on the root element.\n`activate(previousIndicatorClientRect?: ClientRect) => void` | Activates the tab indicator.\n`deactivate() => void` | Deactivates the tab indicator.\n`computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.\n"
  },
  {
    "path": "packages/mdc-tab-indicator/_index.scss",
    "content": "@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-tab-indicator/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-tab-indicator-*;\n"
  },
  {
    "path": "packages/mdc-tab-indicator/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/variables';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-tab-indicator {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n\n  .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-structure) {\n      transform-origin: left;\n      opacity: 0;\n    }\n  }\n\n  .mdc-tab-indicator__content--underline {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-end;\n      box-sizing: border-box;\n      width: 100%;\n      border-top-style: solid;\n    }\n  }\n\n  .mdc-tab-indicator__content--icon {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: center;\n      margin: 0 auto;\n    }\n  }\n\n  .mdc-tab-indicator--active .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n\n  // Slide by default\n  .mdc-tab-indicator .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-animation) {\n      transition: 250ms transform variables.$standard-curve-timing-function;\n    }\n  }\n\n  // --no-transition is applied in cases where styles need to be applied immediately to set up a transition\n  .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-animation) {\n      transition: none;\n    }\n  }\n\n  .mdc-tab-indicator--fade .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-animation) {\n      transition: 150ms opacity linear;\n    }\n  }\n\n  // postcss-bem-linter: ignore\n  .mdc-tab-indicator--active.mdc-tab-indicator--fade\n    .mdc-tab-indicator__content {\n    @include feature-targeting.targets($feat-animation) {\n      transition-delay: 100ms;\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define tab-indicator\n\n  .mdc-tab-indicator {\n    @include base_($query);\n  }\n\n  @include static-styles($query: $query);\n\n  // postcss-bem-linter: end\n}\n\n@mixin surface($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: relative;\n  }\n}\n\n@mixin underline-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-tab-indicator__content--underline {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin underline-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-tab-indicator__content--underline {\n    @include feature-targeting.targets($feat-structure) {\n      border-top-width: $height;\n    }\n  }\n}\n\n@mixin underline-shape($radius) {\n  .mdc-tab-indicator__content--underline {\n    @include theme.property('border-radius', $radius);\n  }\n}\n\n@mixin underline-top-corner-radius($radius, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-tab-indicator__content--underline {\n    @include feature-targeting.targets($feat-structure) {\n      border-top-left-radius: $radius;\n      border-top-right-radius: $radius;\n    }\n  }\n}\n\n@mixin icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-tab-indicator__content--icon {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin icon-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-tab-indicator__content--icon {\n    @include feature-targeting.targets($feat-structure) {\n      height: $height;\n      font-size: $height;\n    }\n  }\n}\n\n//\n// Private\n//\n\n@mixin base_($query) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include underline-color(primary, $query);\n  @include icon-color(secondary, $query);\n  @include underline-height(2px, $query);\n  @include icon-height(34px, $query);\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/_tab-indicator-theme.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/theme/theme-color';\n\n$light-theme: (\n  active-indicator-color: theme-color.$primary,\n  active-indicator-height: 3px,\n  active-indicator-shape: (\n    3px,\n    3px,\n    0,\n    0,\n  ),\n);\n$custom-property-prefix: 'tab-indicator';\n\n@mixin theme($theme) {\n  $theme: validate.theme($light-theme, $theme);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme) {\n  // TODO(b/251881053): Use theme-styles mixin from validate module\n  // all customers are migrated\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n  @include underline-color(map.get($theme, active-indicator-color));\n  @include _underline-height(map.get($theme, active-indicator-height));\n  @include _underline-shape(map.get($theme, active-indicator-shape));\n}\n\n@mixin underline-color($color) {\n  .mdc-tab-indicator__content--underline {\n    @include theme.property(border-color, $color);\n  }\n}\n\n@mixin _underline-height($height) {\n  .mdc-tab-indicator__content--underline {\n    @include theme.property(border-top-width, $height);\n  }\n}\n\n@mixin _underline-shape($radius) {\n  .mdc-tab-indicator__content--underline {\n    @include theme.property(border-radius, $radius);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTabIndicatorAdapter {\n  /**\n   * Adds the given className to the root element.\n   * @param className The className to add\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes the given className from the root element.\n   * @param className The className to remove\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns the client rect of the content element.\n   */\n  computeContentClientRect(): DOMRect;\n\n  /**\n   * Sets a style property of the content element to the passed value\n   * @param propName The style property name to set\n   * @param value The style property value\n   */\n  setContentStyleProperty(propName: string, value: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCTabIndicatorAdapter} from './adapter';\nimport {MDCFadingTabIndicatorFoundation} from './fading-foundation';\nimport {MDCTabIndicatorFoundation} from './foundation';\nimport {MDCSlidingTabIndicatorFoundation} from './sliding-foundation';\n\n/** MDC Tab Indicator Factory */\nexport type MDCTabIndicatorFactory =\n    (el: HTMLElement, foundation?: MDCTabIndicatorFoundation) =>\n        MDCTabIndicator;\n\n/** MDC Tab Indicator */\nexport class MDCTabIndicator extends MDCComponent<MDCTabIndicatorFoundation> {\n  static override attachTo(root: HTMLElement): MDCTabIndicator {\n    return new MDCTabIndicator(root);\n  }\n\n  private content!: HTMLElement;  // assigned in initialize()\n\n  override initialize() {\n    this.content = this.root.querySelector<HTMLElement>(\n        MDCTabIndicatorFoundation.strings.CONTENT_SELECTOR)!;\n  }\n\n  computeContentClientRect(): DOMRect {\n    return this.foundation.computeContentClientRect();\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTabIndicatorAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      computeContentClientRect: () => this.content.getBoundingClientRect(),\n      setContentStyleProperty: (prop, value) => {\n        this.content.style.setProperty(prop, value);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n\n    if (this.root.classList.contains(\n            MDCTabIndicatorFoundation.cssClasses.FADE)) {\n      return new MDCFadingTabIndicatorFoundation(adapter);\n    }\n\n    // Default to the sliding indicator\n    return new MDCSlidingTabIndicatorFoundation(adapter);\n  }\n\n  activate(previousIndicatorClientRect?: DOMRect) {\n    this.foundation.activate(previousIndicatorClientRect);\n  }\n\n  deactivate() {\n    this.foundation.deactivate();\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ACTIVE: 'mdc-tab-indicator--active',\n  FADE: 'mdc-tab-indicator--fade',\n  NO_TRANSITION: 'mdc-tab-indicator--no-transition',\n};\n\nconst strings = {\n  CONTENT_SELECTOR: '.mdc-tab-indicator__content',\n};\n\nexport {\n  cssClasses,\n  strings,\n};\n"
  },
  {
    "path": "packages/mdc-tab-indicator/fading-foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabIndicatorFoundation} from './foundation';\n\n/* istanbul ignore next: subclass is not a branch statement */\nexport class MDCFadingTabIndicatorFoundation extends MDCTabIndicatorFoundation {\n  activate() {\n    this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);\n  }\n\n  deactivate() {\n    this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCFadingTabIndicatorFoundation;\n"
  },
  {
    "path": "packages/mdc-tab-indicator/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTabIndicatorAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Tab Indicator Foundation */\nexport abstract class MDCTabIndicatorFoundation extends\n    MDCFoundation<MDCTabIndicatorAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCTabIndicatorAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      computeContentClientRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      setContentStyleProperty: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter?: Partial<MDCTabIndicatorAdapter>) {\n    super({...MDCTabIndicatorFoundation.defaultAdapter, ...adapter});\n  }\n\n  computeContentClientRect(): DOMRect {\n    return this.adapter.computeContentClientRect();\n  }\n\n  abstract activate(previousIndicatorClientRect?: DOMRect): void;\n  abstract deactivate(): void;\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabIndicatorFoundation;\n"
  },
  {
    "path": "packages/mdc-tab-indicator/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './fading-foundation';\nexport * from './sliding-foundation';\n"
  },
  {
    "path": "packages/mdc-tab-indicator/mdc-tab-indicator.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"mixins\" as mdc-tab-indicator-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"mdc-tab-indicator\";\n"
  },
  {
    "path": "packages/mdc-tab-indicator/mdc-tab-indicator.scss",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-tab-indicator/package.json",
    "content": "{\n  \"name\": \"@material/tab-indicator\",\n  \"description\": \"The Material Components for the web tab indicator component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tab\",\n    \"indicator\"\n  ],\n  \"main\": \"dist/mdc.tabIndicator.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tab-indicator\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-indicator/sliding-foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabIndicatorFoundation} from './foundation';\n\n/* istanbul ignore next: subclass is not a branch statement */\nexport class MDCSlidingTabIndicatorFoundation extends\n    MDCTabIndicatorFoundation {\n  activate(previousIndicatorClientRect?: DOMRect) {\n    // Early exit if no indicator is present to handle cases where an indicator\n    // may be activated without a prior indicator state\n    if (!previousIndicatorClientRect) {\n      this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);\n      return;\n    }\n\n    // This animation uses the FLIP approach. You can read more about it at the\n    // link below: https://aerotwist.com/blog/flip-your-animations/\n\n    // Calculate the dimensions based on the dimensions of the previous\n    // indicator\n    const currentClientRect = this.computeContentClientRect();\n    const widthDelta =\n        previousIndicatorClientRect.width / currentClientRect.width;\n    const xPosition = previousIndicatorClientRect.left - currentClientRect.left;\n    this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);\n    this.adapter.setContentStyleProperty(\n        'transform', `translateX(${xPosition}px) scaleX(${widthDelta})`);\n\n    // Force repaint before updating classes and transform to ensure the\n    // transform properly takes effect\n    this.computeContentClientRect();\n\n    this.adapter.removeClass(\n        MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);\n    this.adapter.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);\n    this.adapter.setContentStyleProperty('transform', '');\n  }\n\n  deactivate() {\n    this.adapter.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCSlidingTabIndicatorFoundation;\n"
  },
  {
    "path": "packages/mdc-tab-indicator/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation, MDCTabIndicator, MDCTabIndicatorFoundation} from '../index';\n\nfunction getFixture() {\n  return createFixture(html`\n  <span class=\"mdc-tab-indicator\">\n    <span class=\"mdc-tab-indicator__content\"></span>\n  </span>\n`);\n}\n\nfunction getFadingFixture() {\n  return createFixture(html`\n  <span class=\"mdc-tab-indicator mdc-tab-indicator--fade\">\n    <span class=\"mdc-tab-indicator__content\"></span>\n  </span>\n`);\n}\n\ndescribe('MDCTabIndicator', () => {\n  it('attachTo returns an MDCTabIndicator instance', () => {\n    expect(MDCTabIndicator.attachTo(getFixture()) instanceof MDCTabIndicator)\n        .toBe(true);\n  });\n\n  it('attachTo an icon returns an MDCTabIndicator instance', () => {\n    expect(\n        MDCTabIndicator.attachTo(getFadingFixture()) instanceof MDCTabIndicator)\n        .toBe(true);\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCTabIndicator(root);\n    const content = root.querySelector<HTMLElement>(\n        MDCTabIndicatorFoundation.strings.CONTENT_SELECTOR)!;\n    return {root, component, content};\n  }\n\n  it('#adapter.addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class to the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.computeContentClientRect returns the root element client rect',\n     () => {\n       const {component, root, content} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.computeContentClientRect())\n           .toEqual(content.getBoundingClientRect());\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.setContentStyleProperty sets a style property on the root element',\n     () => {\n       const {component, content} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setContentStyleProperty('background-color', 'red');\n       expect(content.style.backgroundColor).toBe('red');\n     });\n\n  function setupMockSlidingFoundationTest(root = getFixture()) {\n    const mockFoundation =\n        createMockFoundation(MDCSlidingTabIndicatorFoundation);\n    const component = new MDCTabIndicator(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  function setupMockFadingFoundationTest(root = getFadingFixture()) {\n    const mockFoundation =\n        createMockFoundation(MDCFadingTabIndicatorFoundation);\n    const component = new MDCTabIndicator(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  it('#activate sliding indicator calls activate with passed args', () => {\n    const {component, mockFoundation} = setupMockSlidingFoundationTest();\n    component.activate({width: 100, left: 0} as DOMRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; left: number; }' is not assignable to parameter of type\n    //  'Expected<DOMRect | undefined>'.\n    expect(mockFoundation.activate).toHaveBeenCalledWith({width: 100, left: 0});\n  });\n\n  it('#activate icon indicator calls activate with passed args', () => {\n    const {component, mockFoundation} = setupMockFadingFoundationTest();\n    component.activate({width: 1, left: 2} as DOMRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Expected 0 arguments, but got 1.\n    expect(mockFoundation.activate).toHaveBeenCalledWith({width: 1, left: 2});\n  });\n\n  it('#deactivate sliding indicator calls deactivate', () => {\n    const {component, mockFoundation} = setupMockSlidingFoundationTest();\n    component.deactivate();\n    expect(mockFoundation.deactivate).toHaveBeenCalledTimes(1);\n  });\n\n  it('#deactivate icon indicator calls deactivate', () => {\n    const {component, mockFoundation} = setupMockFadingFoundationTest();\n    component.deactivate();\n    expect(mockFoundation.deactivate).toHaveBeenCalledTimes(1);\n  });\n\n  it('#computeContentClientRect calls computeClientRect', () => {\n    const {component, mockFoundation} = setupMockSlidingFoundationTest();\n    component.computeContentClientRect();\n    expect(mockFoundation.computeContentClientRect).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab-indicator/test/fading-foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {cssClasses} from '../constants';\nimport {MDCFadingTabIndicatorFoundation} from '../fading-foundation';\n\ndescribe('MDCFadingTabIndicatorFoundation', () => {\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCFadingTabIndicatorFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#activate adds the ${cssClasses.ACTIVE} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.activate();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ACTIVE);\n  });\n\n  it(`#deactivate removes the ${cssClasses.ACTIVE} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.deactivate();\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.ACTIVE);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab-indicator/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as tab-indicator;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include tab-indicator.core-styles($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-tab-indicator/test/mdc-tab-indicator.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-tab-indicator.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-tab-indicator/test/sliding-foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {cssClasses} from '../constants';\nimport {MDCSlidingTabIndicatorFoundation} from '../sliding-foundation';\n\ndescribe('MDCSlidingTabIndicatorFoundation', () => {\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCSlidingTabIndicatorFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it(`#activate adds the ${cssClasses.ACTIVE} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.computeContentClientRect.and.returnValue(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n        //  number; left: number; }' is not assignable to parameter of type\n        //  'DOMRect'.\n        {width: 100, left: 10});\n\n    foundation.activate({width: 90, left: 25} as DOMRect);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ACTIVE);\n  });\n\n  it('#activate sets the transform property with no transition, then transitions it back',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.computeContentClientRect.and.returnValue(\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n           //  number; left: number; }' is not assignable to parameter of type\n           //  'DOMRect'.\n           {width: 100, left: 10});\n\n       foundation.activate({width: 90, left: 25} as DOMRect);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.NO_TRANSITION);\n       expect(mockAdapter.setContentStyleProperty)\n           .toHaveBeenCalledWith('transform', 'translateX(15px) scaleX(0.9)');\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.NO_TRANSITION);\n       expect(mockAdapter.setContentStyleProperty)\n           .toHaveBeenCalledWith('transform', '');\n     });\n\n  it('#activate does not modify transform and does not transition if no client rect is passed',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.activate();\n       expect(mockAdapter.setContentStyleProperty)\n           .not.toHaveBeenCalledWith('transform', jasmine.any(String));\n     });\n\n  it(`#deactivate removes the ${cssClasses.ACTIVE} class`, () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.deactivate();\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.ACTIVE);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-tab-scroller/README.md",
    "content": "<!--docs:\ntitle: \"Tab Scroller\"\nlayout: detail\nsection: components\nexcerpt: \"Allows for smooth native and animated scrolling of tabs.\"\niconId: tabs\npath: /catalog/tabs/scroller/\n-->\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-tabs#scrollable-tabs\">Material Design guidelines: Scrollable Tabs</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/tabs\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-tab-scroller\">\n  <div class=\"mdc-tab-scroller__scroll-area\">\n    <div class=\"mdc-tab-scroller__scroll-content\"></div>\n  </div>\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n"
  },
  {
    "path": "packages/mdc-tab-scroller/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-tab-scroller/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/tab\" as mdc-tab-*;\n@forward \"./index\" as mdc-tab-scroller-*;\n@forward \"@material/tab-indicator\" as mdc-tab-indicator-*;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/variables' as animation-variables;\n@use '@material/tab/mixins' as tab-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n\n///\n/// Sets the CSS transition for the tab scrolling animation.\n///\n/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin transition(\n  $duration-ms,\n  $timing-function: animation-variables.$standard-curve-timing-function,\n  $query: feature-targeting.all()\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  &.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content {\n    @include feature-targeting.targets($feat-animation) {\n      transition: $duration-ms transform $timing-function;\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  @include core-styles($query: $query);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define tab-scroller\n  .mdc-tab-scroller {\n    @include transition(\n      $duration-ms: variables.$transition-duration,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      overflow-y: hidden;\n    }\n  }\n\n  // Selector for test element used to feature-detect horizontal scrollbar height\n  .mdc-tab-scroller__test {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      top: -9999px;\n      width: 100px;\n      height: 100px;\n      overflow-x: scroll;\n    }\n  }\n\n  .mdc-tab-scroller__scroll-area {\n    @include feature-targeting.targets($feat-structure) {\n      -webkit-overflow-scrolling: touch;\n      display: flex;\n      overflow-x: hidden;\n    }\n  }\n\n  .mdc-tab-scroller__scroll-area,\n  .mdc-tab-scroller__test {\n    @include feature-targeting.targets($feat-structure) {\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n  }\n\n  // This modifier class will be added in JS after computing the OS scrollbar size in order to hide the scrollbar.\n  .mdc-tab-scroller__scroll-area--scroll {\n    @include feature-targeting.targets($feat-structure) {\n      overflow-x: scroll;\n    }\n  }\n\n  .mdc-tab-scroller__scroll-content {\n    @include scroll-content_($query);\n  }\n\n  .mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content {\n    @include feature-targeting.targets($feat-structure) {\n      justify-content: flex-start;\n    }\n  }\n\n  .mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content {\n    @include feature-targeting.targets($feat-structure) {\n      justify-content: flex-end;\n    }\n  }\n\n  .mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content {\n    @include feature-targeting.targets($feat-structure) {\n      justify-content: center;\n    }\n  }\n\n  .mdc-tab-scroller--animating {\n    .mdc-tab-scroller__scroll-area {\n      @include feature-targeting.targets($feat-animation) {\n        -webkit-overflow-scrolling: auto;\n      }\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n//\n// Private\n//\n\n@mixin scroll-content_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include tab-mixins.parent-positioning($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: flex;\n    flex: 1 0 auto;\n    transform: none;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    will-change: transform;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-scroller/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-tab-scroller-* hide mdc-tab-scroller-transition, mdc-tab-scroller-core-styles, mdc-tab-scroller-scroll-content-;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$transition-duration: 250ms !default;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTabScrollerAdapter {\n  /**\n   * Adds the given className to the root element.\n   * @param className The className to add\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes the given className from the root element.\n   * @param className The className to remove\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Adds the given className to the scroll area element.\n   * @param className The className to add\n   */\n  addScrollAreaClass(className: string): void;\n\n  /**\n   * Returns whether the event target matches given className.\n   * @param eventTarget The event target\n   * @param selector The selector to check\n   */\n  eventTargetMatchesSelector(eventTarget: EventTarget, selector: string): boolean;\n\n  /**\n   * Sets a style property of the area element to the passed value.\n   * @param propName The style property name to set\n   * @param value The style property value\n   */\n  setScrollAreaStyleProperty(propName: string, value: string): void;\n\n  /**\n   * Sets a style property of the content element to the passed value.\n   * @param propName The style property name to set\n   * @param value The style property value\n   */\n  setScrollContentStyleProperty(propName: string, value: string): void;\n\n  /**\n   * Returns the scroll content element's computed style value of the given css\n   * property `propertyName`. We achieve this via\n   * `getComputedStyle(...).getPropertyValue(propertyName)`.\n   */\n  getScrollContentStyleValue(propertyName: string): string;\n\n  /**\n   * Sets the scrollLeft value of the scroll area element to the passed value.\n   * @param scrollLeft The new scrollLeft value\n   */\n  setScrollAreaScrollLeft(scrollLeft: number): void;\n\n  /**\n   * Returns the scrollLeft value of the scroll area element.\n   */\n  getScrollAreaScrollLeft(): number;\n\n  /**\n   * Returns the offsetWidth of the scroll content element.\n   */\n  getScrollContentOffsetWidth(): number;\n\n  /**\n   * Returns the offsetWitdth of the scroll area element.\n   */\n  getScrollAreaOffsetWidth(): number;\n\n  /**\n   * Returns the bounding client rect of the scroll area element.\n   */\n  computeScrollAreaClientRect(): DOMRect;\n\n  /**\n   * Returns the bounding client rect of the scroll content element.\n   */\n  computeScrollContentClientRect(): DOMRect;\n\n  /**\n   * Returns the height of the browser's horizontal scrollbars (in px).\n   */\n  computeHorizontalScrollbarHeight(): number;\n}\n"
  },
  {
    "path": "packages/mdc-tab-scroller/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {applyPassive} from '@material/dom/events';\nimport {matches} from '@material/dom/ponyfill';\n\nimport {MDCTabScrollerAdapter} from './adapter';\nimport {MDCTabScrollerFoundation} from './foundation';\nimport * as util from './util';\n\ntype InteractionEventType =\n    'wheel'|'touchstart'|'pointerdown'|'mousedown'|'keydown';\n\n/** MDC Tab Scroller Factory */\nexport type MDCTabScrollerFactory =\n    (el: HTMLElement, foundation?: MDCTabScrollerFoundation) => MDCTabScroller;\n\n/** MDC Tab Scroller */\nexport class MDCTabScroller extends MDCComponent<MDCTabScrollerFoundation> {\n  static override attachTo(root: HTMLElement): MDCTabScroller {\n    return new MDCTabScroller(root);\n  }\n\n  private content!: HTMLElement;  // assigned in initialize()\n  private area!: HTMLElement;     // assigned in initialize()\n  private handleInteraction!:\n      SpecificEventListener<InteractionEventType>;  // assigned in\n                                                    // initialSyncWithDOM()\n  private handleTransitionEnd!:\n      SpecificEventListener<'transitionend'>;  // assigned in\n                                               // initialSyncWithDOM()\n\n  override initialize() {\n    this.area = this.root.querySelector<HTMLElement>(\n        MDCTabScrollerFoundation.strings.AREA_SELECTOR)!;\n    this.content = this.root.querySelector<HTMLElement>(\n        MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;\n  }\n\n  override initialSyncWithDOM() {\n    this.handleInteraction = () => {\n      this.foundation.handleInteraction();\n    };\n    this.handleTransitionEnd = (event) => {\n      this.foundation.handleTransitionEnd(event);\n    };\n\n    this.area.addEventListener('wheel', this.handleInteraction, applyPassive());\n    this.area.addEventListener(\n        'touchstart', this.handleInteraction, applyPassive());\n    this.area.addEventListener(\n        'pointerdown', this.handleInteraction, applyPassive());\n    this.area.addEventListener(\n        'mousedown', this.handleInteraction, applyPassive());\n    this.area.addEventListener(\n        'keydown', this.handleInteraction, applyPassive());\n    this.content.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  override destroy() {\n    super.destroy();\n\n    this.area.removeEventListener(\n        'wheel', this.handleInteraction, applyPassive());\n    this.area.removeEventListener(\n        'touchstart', this.handleInteraction, applyPassive());\n    this.area.removeEventListener(\n        'pointerdown', this.handleInteraction, applyPassive());\n    this.area.removeEventListener(\n        'mousedown', this.handleInteraction, applyPassive());\n    this.area.removeEventListener(\n        'keydown', this.handleInteraction, applyPassive());\n    this.content.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTabScrollerAdapter = {\n      eventTargetMatchesSelector: (eventTarget, selector) =>\n          matches(eventTarget as Element, selector),\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      addScrollAreaClass: (className) => {\n        this.area.classList.add(className);\n      },\n      setScrollAreaStyleProperty: (prop, value) => {\n        this.area.style.setProperty(prop, value);\n      },\n      setScrollContentStyleProperty: (prop, value) => {\n        this.content.style.setProperty(prop, value);\n      },\n      getScrollContentStyleValue: (propName) =>\n          window.getComputedStyle(this.content).getPropertyValue(propName),\n      setScrollAreaScrollLeft: (scrollX) => this.area.scrollLeft = scrollX,\n      getScrollAreaScrollLeft: () => this.area.scrollLeft,\n      getScrollContentOffsetWidth: () => this.content.offsetWidth,\n      getScrollAreaOffsetWidth: () => this.area.offsetWidth,\n      computeScrollAreaClientRect: () => this.area.getBoundingClientRect(),\n      computeScrollContentClientRect: () =>\n          this.content.getBoundingClientRect(),\n      computeHorizontalScrollbarHeight: () =>\n          util.computeHorizontalScrollbarHeight(document),\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTabScrollerFoundation(adapter);\n  }\n\n  /**\n   * Returns the current visual scroll position\n   */\n  getScrollPosition(): number {\n    return this.foundation.getScrollPosition();\n  }\n\n  /**\n   * Returns the width of the scroll content\n   */\n  getScrollContentWidth(): number {\n    return this.content.offsetWidth;\n  }\n\n  /**\n   * Increments the scroll value by the given amount\n   * @param scrollXIncrement The pixel value by which to increment the scroll\n   *     value\n   */\n  incrementScroll(scrollXIncrement: number) {\n    this.foundation.incrementScroll(scrollXIncrement);\n  }\n\n  /**\n   * Scrolls to the given pixel position\n   * @param scrollX The pixel value to scroll to\n   */\n  scrollTo(scrollX: number) {\n    this.foundation.scrollTo(scrollX);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-scroller/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ANIMATING: 'mdc-tab-scroller--animating',\n  SCROLL_AREA_SCROLL: 'mdc-tab-scroller__scroll-area--scroll',\n  SCROLL_TEST: 'mdc-tab-scroller__test',\n};\n\nconst strings = {\n  AREA_SELECTOR: '.mdc-tab-scroller__scroll-area',\n  CONTENT_SELECTOR: '.mdc-tab-scroller__scroll-content',\n};\n\nexport {\n  cssClasses,\n  strings,\n};\n"
  },
  {
    "path": "packages/mdc-tab-scroller/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTabScrollerAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\nimport {MDCTabScrollerRTLDefault} from './rtl-default-scroller';\nimport {MDCTabScrollerRTLNegative} from './rtl-negative-scroller';\nimport {MDCTabScrollerRTLReverse} from './rtl-reverse-scroller';\nimport {MDCTabScrollerRTL} from './rtl-scroller';\nimport {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';\n\n/** MDC Tab Scroller Foundation */\nexport class MDCTabScrollerFoundation extends\n    MDCFoundation<MDCTabScrollerAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get defaultAdapter(): MDCTabScrollerAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      eventTargetMatchesSelector: () => false,\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      addScrollAreaClass: () => undefined,\n      setScrollAreaStyleProperty: () => undefined,\n      setScrollContentStyleProperty: () => undefined,\n      getScrollContentStyleValue: () => '',\n      setScrollAreaScrollLeft: () => undefined,\n      getScrollAreaScrollLeft: () => 0,\n      getScrollContentOffsetWidth: () => 0,\n      getScrollAreaOffsetWidth: () => 0,\n      computeScrollAreaClientRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      computeScrollContentClientRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      computeHorizontalScrollbarHeight: () => 0,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  /**\n   * Controls whether we should handle the transitionend and interaction events\n   * during the animation.\n   */\n  private isAnimating = false;\n\n  /**\n   * The MDCTabScrollerRTL instance varies per browser and allows us to\n   * encapsulate the peculiar browser behavior of RTL scrolling in its own\n   * class.\n   */\n  private rtlScrollerInstance?: MDCTabScrollerRTL;\n\n  constructor(adapter?: Partial<MDCTabScrollerAdapter>) {\n    super({...MDCTabScrollerFoundation.defaultAdapter, ...adapter});\n  }\n\n  override init() {\n    // Compute horizontal scrollbar height on scroller with overflow initially\n    // hidden, then update overflow to scroll and immediately adjust bottom\n    // margin to avoid the scrollbar initially appearing before JS runs.\n    const horizontalScrollbarHeight =\n        this.adapter.computeHorizontalScrollbarHeight();\n    this.adapter.setScrollAreaStyleProperty(\n        'margin-bottom', -horizontalScrollbarHeight + 'px');\n    this.adapter.addScrollAreaClass(\n        MDCTabScrollerFoundation.cssClasses.SCROLL_AREA_SCROLL);\n  }\n\n  /**\n   * Computes the current visual scroll position\n   */\n  getScrollPosition(): number {\n    if (this.isRTL()) {\n      return this.computeCurrentScrollPositionRTL();\n    }\n\n    const currentTranslateX = this.calculateCurrentTranslateX();\n    const scrollLeft = this.adapter.getScrollAreaScrollLeft();\n    return scrollLeft - currentTranslateX;\n  }\n\n  /**\n   * Handles interaction events that occur during transition\n   */\n  handleInteraction() {\n    // Early exit if we aren't animating\n    if (!this.isAnimating) {\n      return;\n    }\n\n    // Prevent other event listeners from handling this event\n    this.stopScrollAnimation();\n  }\n\n  /**\n   * Handles the transitionend event\n   */\n  handleTransitionEnd(event: Event) {\n    // Early exit if we aren't animating or the event was triggered by a\n    // different element.\n    const eventTarget = event.target as Element;\n    if (!this.isAnimating ||\n        !this.adapter.eventTargetMatchesSelector(\n            eventTarget, MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)) {\n      return;\n    }\n\n    this.isAnimating = false;\n    this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n  }\n\n  /**\n   * Increment the scroll value by the scrollXIncrement using animation.\n   * @param scrollXIncrement The value by which to increment the scroll position\n   */\n  incrementScroll(scrollXIncrement: number) {\n    // Early exit for non-operational increment values\n    if (scrollXIncrement === 0) {\n      return;\n    }\n\n    this.animate(this.getIncrementScrollOperation(scrollXIncrement));\n  }\n\n  /**\n   * Increment the scroll value by the scrollXIncrement without animation.\n   * @param scrollXIncrement The value by which to increment the scroll position\n   */\n  incrementScrollImmediate(scrollXIncrement: number) {\n    // Early exit for non-operational increment values\n    if (scrollXIncrement === 0) {\n      return;\n    }\n\n    const operation = this.getIncrementScrollOperation(scrollXIncrement);\n    if (operation.scrollDelta === 0) {\n      return;\n    }\n\n    this.stopScrollAnimation();\n    this.adapter.setScrollAreaScrollLeft(operation.finalScrollPosition);\n  }\n\n  /**\n   * Scrolls to the given scrollX value\n   */\n  scrollTo(scrollX: number) {\n    if (this.isRTL()) {\n      this.scrollToImplRTL(scrollX);\n      return;\n    }\n\n    this.scrollToImpl(scrollX);\n  }\n\n  /**\n   * @return Browser-specific {@link MDCTabScrollerRTL} instance.\n   */\n  getRTLScroller(): MDCTabScrollerRTL {\n    if (!this.rtlScrollerInstance) {\n      this.rtlScrollerInstance = this.rtlScrollerFactory();\n    }\n\n    return this.rtlScrollerInstance;\n  }\n\n  /**\n   * @return translateX value from a CSS matrix transform function string.\n   */\n  private calculateCurrentTranslateX(): number {\n    const transformValue = this.adapter.getScrollContentStyleValue('transform');\n    // Early exit if no transform is present\n    if (transformValue === 'none') {\n      return 0;\n    }\n\n    // The transform value comes back as a matrix transformation in the form\n    // of `matrix(a, b, c, d, tx, ty)`. We only care about tx (translateX) so\n    // we're going to grab all the parenthesized values, strip out tx, and\n    // parse it.\n    const match = /\\((.+?)\\)/.exec(transformValue);\n    if (!match) {\n      return 0;\n    }\n\n    const matrixParams = match[1];\n\n    // tslint:disable-next-line:ban-ts-suppressions \"Unused vars\" should be a linter warning, not a compiler error.\n    // @ts-ignore These unused variables should retain their semantic names for\n    // clarity.\n    const [a, b, c, d, tx, ty] = matrixParams.split(',');\n\n    return parseFloat(tx);  // tslint:disable-line:ban\n  }\n\n  /**\n   * Calculates a safe scroll value that is > 0 and < the max scroll value\n   * @param scrollX The distance to scroll\n   */\n  private clampScrollValue(scrollX: number): number {\n    const edges = this.calculateScrollEdges();\n    return Math.min(Math.max(edges.left, scrollX), edges.right);\n  }\n\n  private computeCurrentScrollPositionRTL(): number {\n    const translateX = this.calculateCurrentTranslateX();\n    return this.getRTLScroller().getScrollPositionRTL(translateX);\n  }\n\n  private calculateScrollEdges(): MDCTabScrollerHorizontalEdges {\n    const contentWidth = this.adapter.getScrollContentOffsetWidth();\n    const rootWidth = this.adapter.getScrollAreaOffsetWidth();\n    return {\n      left: 0,\n      right: contentWidth - rootWidth,\n    };\n  }\n\n  /**\n   * Internal scroll method\n   * @param scrollX The new scroll position\n   */\n  private scrollToImpl(scrollX: number) {\n    const currentScrollX = this.getScrollPosition();\n    const safeScrollX = this.clampScrollValue(scrollX);\n    const scrollDelta = safeScrollX - currentScrollX;\n    this.animate({\n      finalScrollPosition: safeScrollX,\n      scrollDelta,\n    });\n  }\n\n  /**\n   * Internal RTL scroll method\n   * @param scrollX The new scroll position\n   */\n  private scrollToImplRTL(scrollX: number) {\n    const animation = this.getRTLScroller().scrollToRTL(scrollX);\n    this.animate(animation);\n  }\n\n  /**\n   * Internal method to compute the increment scroll operation values.\n   * @param scrollX The desired scroll position increment\n   * @return MDCTabScrollerAnimation with the sanitized values for performing\n   *     the scroll operation.\n   */\n  private getIncrementScrollOperation(scrollX: number):\n      MDCTabScrollerAnimation {\n    if (this.isRTL()) {\n      return this.getRTLScroller().incrementScrollRTL(scrollX);\n    }\n\n    const currentScrollX = this.getScrollPosition();\n    const targetScrollX = scrollX + currentScrollX;\n    const safeScrollX = this.clampScrollValue(targetScrollX);\n    const scrollDelta = safeScrollX - currentScrollX;\n    return {\n      finalScrollPosition: safeScrollX,\n      scrollDelta,\n    };\n  }\n\n  /**\n   * Animates the tab scrolling\n   * @param animation The animation to apply\n   */\n  private animate(animation: MDCTabScrollerAnimation) {\n    // Early exit if translateX is 0, which means there's no animation to\n    // perform\n    if (animation.scrollDelta === 0) {\n      return;\n    }\n\n    this.stopScrollAnimation();\n    // This animation uses the FLIP approach.\n    // Read more here: https://aerotwist.com/blog/flip-your-animations/\n    this.adapter.setScrollAreaScrollLeft(animation.finalScrollPosition);\n    this.adapter.setScrollContentStyleProperty(\n        'transform', `translateX(${animation.scrollDelta}px)`);\n    // Force repaint\n    this.adapter.computeScrollAreaClientRect();\n\n    requestAnimationFrame(() => {\n      this.adapter.addClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n      this.adapter.setScrollContentStyleProperty('transform', 'none');\n    });\n\n    this.isAnimating = true;\n  }\n\n  /**\n   * Stops scroll animation\n   */\n  private stopScrollAnimation() {\n    this.isAnimating = false;\n    const currentScrollPosition = this.getAnimatingScrollPosition();\n    this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n    this.adapter.setScrollContentStyleProperty('transform', 'translateX(0px)');\n    this.adapter.setScrollAreaScrollLeft(currentScrollPosition);\n  }\n\n  /**\n   * Gets the current scroll position during animation\n   */\n  private getAnimatingScrollPosition(): number {\n    const currentTranslateX = this.calculateCurrentTranslateX();\n    const scrollLeft = this.adapter.getScrollAreaScrollLeft();\n    if (this.isRTL()) {\n      return this.getRTLScroller().getAnimatingScrollPosition(\n          scrollLeft, currentTranslateX);\n    }\n\n    return scrollLeft - currentTranslateX;\n  }\n\n  /**\n   * Determines the RTL Scroller to use\n   */\n  private rtlScrollerFactory(): MDCTabScrollerRTL {\n    // Browsers have three different implementations of scrollLeft in RTL mode,\n    // dependent on the browser. The behavior is based off the max LTR\n    // scrollLeft value and 0.\n    //\n    // * Default scrolling in RTL *\n    //    - Left-most value: 0\n    //    - Right-most value: Max LTR scrollLeft value\n    //\n    // * Negative scrolling in RTL *\n    //    - Left-most value: Negated max LTR scrollLeft value\n    //    - Right-most value: 0\n    //\n    // * Reverse scrolling in RTL *\n    //    - Left-most value: Max LTR scrollLeft value\n    //    - Right-most value: 0\n    //\n    // We use those principles below to determine which RTL scrollLeft\n    // behavior is implemented in the current browser.\n    const initialScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    this.adapter.setScrollAreaScrollLeft(initialScrollLeft - 1);\n    const newScrollLeft = this.adapter.getScrollAreaScrollLeft();\n\n    // If the newScrollLeft value is negative,then we know that the browser has\n    // implemented negative RTL scrolling, since all other implementations have\n    // only positive values.\n    if (newScrollLeft < 0) {\n      // Undo the scrollLeft test check\n      this.adapter.setScrollAreaScrollLeft(initialScrollLeft);\n      return new MDCTabScrollerRTLNegative(this.adapter);\n    }\n\n    const rootClientRect = this.adapter.computeScrollAreaClientRect();\n    const contentClientRect = this.adapter.computeScrollContentClientRect();\n    const rightEdgeDelta =\n        Math.round(contentClientRect.right - rootClientRect.right);\n    // Undo the scrollLeft test check\n    this.adapter.setScrollAreaScrollLeft(initialScrollLeft);\n\n    // By calculating the clientRect of the root element and the clientRect of\n    // the content element, we can determine how much the scroll value changed\n    // when we performed the scrollLeft subtraction above.\n    if (rightEdgeDelta === newScrollLeft) {\n      return new MDCTabScrollerRTLReverse(this.adapter);\n    }\n\n    return new MDCTabScrollerRTLDefault(this.adapter);\n  }\n\n  private isRTL(): boolean {\n    return this.adapter.getScrollContentStyleValue('direction') === 'rtl';\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabScrollerFoundation;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as util from './util';\n\nexport {util};\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\n"
  },
  {
    "path": "packages/mdc-tab-scroller/mdc-tab-scroller.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/tab/variables\" as mdc-tab-*;\n@forward \"variables\" as mdc-tab-scroller-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/tab-indicator/mixins\" as mdc-tab-indicator-*;\n@forward \"@material/tab/mixins\" as mdc-tab-*;\n@forward \"mixins\" as mdc-tab-scroller-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"mdc-tab-scroller\";\n"
  },
  {
    "path": "packages/mdc-tab-scroller/mdc-tab-scroller.scss",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use './mixins';\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/package.json",
    "content": "{\n  \"name\": \"@material/tab-scroller\",\n  \"description\": \"The Material Components for the web tab scroller component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tab\",\n    \"scroller\"\n  ],\n  \"main\": \"dist/mdc.tabScroller.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tab-scroller\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/tab\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tab-scroller/rtl-default-scroller.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabScrollerRTL} from './rtl-scroller';\nimport {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';\n\n/** MDC Tab Scroller RTL Default */\nexport class MDCTabScrollerRTLDefault extends MDCTabScrollerRTL {\n  getScrollPositionRTL(): number {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const {right} = this.calculateScrollEdges();\n    // Scroll values on most browsers are ints instead of floats so we round\n    return Math.round(right - currentScrollLeft);\n  }\n\n  scrollToRTL(scrollX: number): MDCTabScrollerAnimation {\n    const edges = this.calculateScrollEdges();\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft = this.clampScrollValue(edges.right - scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: clampedScrollLeft - currentScrollLeft,\n    };\n  }\n\n  incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft =\n        this.clampScrollValue(currentScrollLeft - scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: clampedScrollLeft - currentScrollLeft,\n    };\n  }\n\n  getAnimatingScrollPosition(scrollX: number): number {\n    return scrollX;\n  }\n\n  private calculateScrollEdges(): MDCTabScrollerHorizontalEdges {\n    const contentWidth = this.adapter.getScrollContentOffsetWidth();\n    const rootWidth = this.adapter.getScrollAreaOffsetWidth();\n    return {\n      left: 0,\n      right: contentWidth - rootWidth,\n    };\n  }\n\n  private clampScrollValue(scrollX: number): number {\n    const edges = this.calculateScrollEdges();\n    return Math.min(Math.max(edges.left, scrollX), edges.right);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabScrollerRTLDefault;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/rtl-negative-scroller.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabScrollerRTL} from './rtl-scroller';\nimport {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';\n\n/** MDC Tab Scroller RTL Negative */\nexport class MDCTabScrollerRTLNegative extends MDCTabScrollerRTL {\n  getScrollPositionRTL(translateX: number): number {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    return Math.round(translateX - currentScrollLeft);\n  }\n\n  scrollToRTL(scrollX: number): MDCTabScrollerAnimation {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft = this.clampScrollValue(-scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: clampedScrollLeft - currentScrollLeft,\n    };\n  }\n\n  incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft =\n        this.clampScrollValue(currentScrollLeft - scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: clampedScrollLeft - currentScrollLeft,\n    };\n  }\n\n  getAnimatingScrollPosition(scrollX: number, translateX: number): number {\n    return scrollX - translateX;\n  }\n\n  private calculateScrollEdges(): MDCTabScrollerHorizontalEdges {\n    const contentWidth = this.adapter.getScrollContentOffsetWidth();\n    const rootWidth = this.adapter.getScrollAreaOffsetWidth();\n    return {\n      left: rootWidth - contentWidth,\n      right: 0,\n    };\n  }\n\n  private clampScrollValue(scrollX: number): number {\n    const edges = this.calculateScrollEdges();\n    return Math.max(Math.min(edges.right, scrollX), edges.left);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabScrollerRTLNegative;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/rtl-reverse-scroller.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabScrollerRTL} from './rtl-scroller';\nimport {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';\n\n/** MDC Tab Scroller RTL Reverse */\nexport class MDCTabScrollerRTLReverse extends MDCTabScrollerRTL {\n  getScrollPositionRTL(translateX: number): number {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    // Scroll values on most browsers are ints instead of floats so we round\n    return Math.round(currentScrollLeft - translateX);\n  }\n\n  scrollToRTL(scrollX: number): MDCTabScrollerAnimation {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft = this.clampScrollValue(scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: currentScrollLeft - clampedScrollLeft,\n    };\n  }\n\n  incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {\n    const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();\n    const clampedScrollLeft =\n        this.clampScrollValue(currentScrollLeft + scrollX);\n    return {\n      finalScrollPosition: clampedScrollLeft,\n      scrollDelta: currentScrollLeft - clampedScrollLeft,\n    };\n  }\n\n  getAnimatingScrollPosition(scrollX: number, translateX: number): number {\n    return scrollX + translateX;\n  }\n\n  private calculateScrollEdges(): MDCTabScrollerHorizontalEdges {\n    const contentWidth = this.adapter.getScrollContentOffsetWidth();\n    const rootWidth = this.adapter.getScrollAreaOffsetWidth();\n    return {\n      left: contentWidth - rootWidth,\n      right: 0,\n    };\n  }\n\n  private clampScrollValue(scrollX: number): number {\n    const edges = this.calculateScrollEdges();\n    return Math.min(Math.max(edges.right, scrollX), edges.left);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabScrollerRTLReverse;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/rtl-scroller.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTabScrollerAdapter} from './adapter';\nimport {MDCTabScrollerAnimation} from './types';\n\n/** MDC Tab Scroller RTL */\nexport abstract class MDCTabScrollerRTL {\n  constructor(protected readonly adapter: MDCTabScrollerAdapter) {}\n\n  abstract getScrollPositionRTL(translateX: number): number;\n\n  abstract scrollToRTL(scrollX: number): MDCTabScrollerAnimation;\n\n  abstract incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation;\n\n  /**\n   * @param scrollX The current scrollX position\n   * @param translateX The current translateX position\n   */\n  abstract getAnimatingScrollPosition(scrollX: number, translateX: number):\n      number;\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTabScrollerRTL;\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {MDCTabScroller, MDCTabScrollerFoundation, util} from '../index';\nimport {MDCTabScrollerRTL} from '../rtl-scroller';\n\nfunction getFixture() {\n  return createFixture(html`\n    <div class=\"mdc-tab-scroller\">\n      <div class=\"mdc-tab-scroller__scroll-area\">\n        <div class=\"mdc-tab-scroller__scroll-content\"></div>\n      </div>\n    </div>\n  `);\n}\n\nfunction setupTest() {\n  const root = getFixture();\n  const component = new MDCTabScroller(root);\n  const area = root.querySelector<HTMLElement>(\n      MDCTabScrollerFoundation.strings.AREA_SELECTOR)!;\n  const content = root.querySelector<HTMLElement>(\n      MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;\n  return {root, component, content, area};\n}\n\ndescribe('MDCTabScroller', () => {\n  it('attachTo returns an MDCTabScroller instance', () => {\n    expect(MDCTabScroller.attachTo(getFixture()) instanceof MDCTabScroller)\n        .toBe(true);\n  });\n\n  it('#destroy() calls super.destroy()', () => {\n    const {component} = setupTest();\n    const mockFoundation = jasmine.createSpyObj('foundation', ['destroy']);\n    (component as any).foundation = mockFoundation;\n    component.destroy();\n    expect(mockFoundation.destroy).toHaveBeenCalledTimes(1);\n  });\n\n  it('#adapter.eventTargetMatchesSelector returns true if the event target matches the selector',\n     () => {\n       const {area, component} = setupTest();\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.eventTargetMatchesSelector(\n                      area, MDCTabScrollerFoundation.strings.AREA_SELECTOR))\n           .toBe(true);\n     });\n\n  it('#adapter.addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.addScrollAreaClass adds a class to the area element', () => {\n    const {component, area} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addScrollAreaClass('foo');\n    expect(area).toHaveClass('foo');\n  });\n\n  it('#adapter.setScrollAreaStyleProperty sets a style property on the area element',\n     () => {\n       const {component, area} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setScrollAreaStyleProperty('background-color', 'red');\n       expect(area.style.backgroundColor === 'red').toBe(true);\n     });\n\n  it('#adapter.setScrollContentStyleProperty sets a style property on the content element',\n     () => {\n       const {component, content} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setScrollContentStyleProperty('background-color', 'red');\n       expect(content.style.backgroundColor === 'red').toBe(true);\n     });\n\n  it('#adapter.getScrollContentStyleValue returns the style property value on the content element',\n     () => {\n       const {component, content} = setupTest();\n       content.style.setProperty('color', 'chartreuse');\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getScrollContentStyleValue('color'))\n           .toBe(window.getComputedStyle(content).getPropertyValue('color'));\n     });\n\n  function setupScrollLeftTests() {\n    const {component, area, content, root} = setupTest();\n    area.style.setProperty('width', '100px');\n    area.style.setProperty('height', '10px');\n    area.style.setProperty('overflow-x', 'scroll');\n    content.style.setProperty('width', '10000px');\n    content.style.setProperty('height', '10px');\n    return {component, area, root};\n  }\n\n  it('#adapter.setScrollAreaScrollLeft sets the scrollLeft value of the area element',\n     () => {\n       const {component, root, area} = setupScrollLeftTests();\n       document.body.appendChild(root);\n       (component.getDefaultFoundation() as any)\n           .adapter.setScrollAreaScrollLeft(101);\n       expect(area.scrollLeft).toBeGreaterThanOrEqual(0);\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.getScrollAreaScrollLeft returns the scrollLeft value of the root element',\n     () => {\n       const {component, root, area} = setupScrollLeftTests();\n       document.body.appendChild(root);\n       area.scrollLeft = 416;\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getScrollAreaScrollLeft())\n           .toBeGreaterThanOrEqual(0);\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.getScrollContentOffsetWidth returns the content element offsetWidth',\n     () => {\n       const {component, root, content} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getScrollContentOffsetWidth())\n           .toEqual(content.offsetWidth);\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.getScrollAreaOffsetWidth returns the root element offsetWidth',\n     () => {\n       const {component, root} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getScrollAreaOffsetWidth())\n           .toEqual(root.offsetWidth);\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.computeScrollAreaClientRect returns the root element bounding client rect',\n     () => {\n       const {component, root} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.computeScrollAreaClientRect())\n           .toEqual(root.getBoundingClientRect());\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.computeScrollContentClientRect returns the content element bounding client rect',\n     () => {\n       const {component, root, content} = setupTest();\n       document.body.appendChild(root);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.computeScrollContentClientRect())\n           .toEqual(content.getBoundingClientRect());\n       document.body.removeChild(root);\n     });\n\n  it('#adapter.computeHorizontalScrollbarHeight uses util function to return scrollbar height',\n     () => {\n       const {component, root} = setupTest();\n       document.body.appendChild(root);\n\n       // Unfortunately we can't stub the util API due to it transpiling to a\n       // read-only property, so we need to settle for comparing the return\n       // values in each browser.\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.computeHorizontalScrollbarHeight())\n           .toBe(util.computeHorizontalScrollbarHeight(document));\n       document.body.removeChild(root);\n     });\n\n  function setupMockFoundationTest(root = getFixture()) {\n    const mockFoundation = createMockFoundation(MDCTabScrollerFoundation);\n    const component = new MDCTabScroller(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  it('#scrollTo calls scrollTo', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.scrollTo(703);\n    expect(mockFoundation.scrollTo).toHaveBeenCalledWith(703);\n    expect(mockFoundation.scrollTo).toHaveBeenCalledTimes(1);\n  });\n\n  it('#incrementScroll calls incrementScroll', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.incrementScroll(10);\n    expect(mockFoundation.incrementScroll).toHaveBeenCalledWith(10);\n    expect(mockFoundation.incrementScroll).toHaveBeenCalledTimes(1);\n  });\n\n  it('#getScrollPosition() calls getScrollPosition', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.getScrollPosition();\n    expect(mockFoundation.getScrollPosition).toHaveBeenCalledTimes(1);\n  });\n\n  it('#getScrollContentWidth() returns the offsetWidth of the content element',\n     () => {\n       const {component, root} = setupMockFoundationTest();\n       const contentElement = root.querySelector<HTMLElement>(\n           MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;\n       expect(component.getScrollContentWidth())\n           .toEqual(contentElement.offsetWidth);\n     });\n\n  function setupTestRTL() {\n    const {root, content, component} = setupTest();\n    root.style.setProperty('width', '100px');\n    root.style.setProperty('height', '10px');\n    root.style.setProperty('overflow-x', 'scroll');\n    content.style.setProperty('width', '10000px');\n    content.style.setProperty('height', '10px');\n    content.style.setProperty('backgroundColor', 'red');\n    root.setAttribute('dir', 'rtl');\n    return {root, component, content};\n  }\n\n  it('#getRTLScroller() returns an instance of MDCTabScrollerRTL', () => {\n    const {root, component} = setupTestRTL();\n    document.body.appendChild(root);\n    expect(component.getDefaultFoundation().getRTLScroller())\n        .toEqual(jasmine.any(MDCTabScrollerRTL));\n    document.body.removeChild(root);\n  });\n\n  it('on interaction in the area element, call #handleInteraction()', () => {\n    const {root, mockFoundation} = setupMockFoundationTest();\n    const area = root.querySelector<HTMLElement>(\n        MDCTabScrollerFoundation.strings.AREA_SELECTOR)!;\n    emitEvent(area, 'touchstart', {bubbles: true});\n    expect(mockFoundation.handleInteraction).toHaveBeenCalled();\n  });\n\n  it('on transitionend of the content element, call #handleTransitionEnd()',\n     () => {\n       const {root, mockFoundation} = setupMockFoundationTest();\n       const content = root.querySelector<HTMLElement>(\n           MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;\n       emitEvent(content, 'transitionend', {bubbles: true});\n       expect(mockFoundation.handleTransitionEnd)\n           .toHaveBeenCalledWith(jasmine.anything());\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as tab-scroller;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include tab-scroller.core-styles($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {MDCTabScrollerFoundation} from '../foundation';\nimport {MDCTabScrollerRTLDefault} from '../rtl-default-scroller';\nimport {MDCTabScrollerRTLNegative} from '../rtl-negative-scroller';\nimport {MDCTabScrollerRTLReverse} from '../rtl-reverse-scroller';\n\nfunction setupTest() {\n  const {foundation, mockAdapter} =\n      setUpFoundationTest(MDCTabScrollerFoundation);\n  return {foundation, mockAdapter};\n}\n\nfunction setupScrollToTest({\n  rootWidth = 300,\n  contentWidth = 1000,\n  scrollLeft = 0,\n  translateX = 0,\n  isAnimating = false\n} = {}) {\n  const opts = {\n    rootWidth,\n    contentWidth,\n    scrollLeft,\n    translateX,\n    isAnimating,\n  };\n  const {foundation, mockAdapter} = setupTest();\n  mockAdapter.getScrollAreaOffsetWidth.and.returnValue(rootWidth);\n  mockAdapter.getScrollContentOffsetWidth.and.returnValue(contentWidth);\n  mockAdapter.getScrollAreaScrollLeft.and.returnValue(scrollLeft);\n  (foundation as any).isAnimating = isAnimating;\n  mockAdapter.getScrollContentStyleValue.withArgs('transform')\n      .and.returnValue(`matrix(1, 0, 0, 1, ${translateX}, 0)`);\n  return {foundation, mockAdapter, opts};\n}\n\ndescribe('MDCTabScrollerFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTabScrollerFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCTabScrollerFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTabScrollerFoundation, [\n      'eventTargetMatchesSelector',\n      'addClass',\n      'removeClass',\n      'addScrollAreaClass',\n      'setScrollAreaStyleProperty',\n      'setScrollContentStyleProperty',\n      'getScrollContentStyleValue',\n      'setScrollAreaScrollLeft',\n      'getScrollAreaScrollLeft',\n      'getScrollContentOffsetWidth',\n      'getScrollAreaOffsetWidth',\n      'computeScrollAreaClientRect',\n      'computeScrollContentClientRect',\n      'computeHorizontalScrollbarHeight',\n    ]);\n  });\n\n  it('#getScrollPosition() returns scroll value when transform is none', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getScrollContentStyleValue.withArgs('transform')\n        .and.returnValue('none');\n    mockAdapter.getScrollAreaScrollLeft.and.returnValue(0);\n    expect(foundation.getScrollPosition() === 0).toBe(true);\n  });\n\n  it('#getScrollPosition() returns difference between scrollLeft and translateX',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getScrollContentStyleValue.withArgs('transform')\n           .and.returnValue('matrix(1, 0, 0, 0, 101, 0)');\n       mockAdapter.getScrollAreaScrollLeft.and.returnValue(212);\n       expect(foundation.getScrollPosition() === 111).toBe(true);\n     });\n\n  it('#handleInteraction() does nothing if should not handle interaction',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleInteraction();\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n       expect(mockAdapter.setScrollContentStyleProperty)\n           .not.toHaveBeenCalledWith(jasmine.any(String), jasmine.any(String));\n     });\n\n  function setupHandleInteractionTest({scrollLeft = 0, translateX = 99} = {}) {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getScrollContentStyleValue.withArgs('transform')\n        .and.returnValue(`matrix(1, 0, 0, 1, ${translateX}, 0)`);\n    mockAdapter.getScrollAreaScrollLeft.and.returnValue(scrollLeft);\n    (foundation as any).isAnimating = true;\n    return {foundation, mockAdapter};\n  }\n\n  it(`#handleInteraction() removes the ${\n         MDCTabScrollerFoundation.cssClasses.ANIMATING} class`,\n     () => {\n       const {foundation, mockAdapter} = setupHandleInteractionTest();\n       foundation.handleInteraction();\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleInteraction() sets the transform property to translateX(0px)',\n     () => {\n       const {foundation, mockAdapter} = setupHandleInteractionTest();\n       foundation.handleInteraction();\n       expect(mockAdapter.setScrollContentStyleProperty)\n           .toHaveBeenCalledWith('transform', 'translateX(0px)');\n     });\n\n  it('#handleInteraction() sets scrollLeft to the difference between scrollLeft and translateX',\n     () => {\n       const {foundation, mockAdapter} =\n           setupHandleInteractionTest({scrollLeft: 123, translateX: 101});\n       foundation.handleInteraction();\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(22);\n     });\n\n  it('#handleTransitionEnd() does nothing if should not handle transition',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.handleTransitionEnd({\n         target: {},\n       } as TransitionEvent);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n     });\n\n  it(`#handleTransitionEnd() removes the ${\n         MDCTabScrollerFoundation.cssClasses.ANIMATING} class`,\n     () => {\n       const {foundation, mockAdapter} =\n           setupHandleInteractionTest({scrollLeft: 123, translateX: 101});\n       mockAdapter.eventTargetMatchesSelector\n           .withArgs(jasmine.any(Object), jasmine.any(String))\n           .and.returnValue(true);\n       foundation.handleTransitionEnd({\n         target: {},\n       } as TransitionEvent);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n     });\n\n  it('#scrollTo() exits early if difference between scrollX and scrollLeft is 0',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 66});\n       foundation.scrollTo(66);\n       expect(mockAdapter.setScrollContentStyleProperty)\n           .not.toHaveBeenCalledWith(jasmine.any(String), jasmine.any(String));\n       expect(mockAdapter.setScrollAreaScrollLeft)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#scrollTo() scrolls to 0 if scrollX is less than 0', () => {\n    const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 1});\n    foundation.scrollTo(-999);\n    expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(0);\n  });\n\n  it('#scrollTo() scrolls to the max scrollable size if scrollX is greater than the max scrollable value',\n     () => {\n       const {foundation, mockAdapter} =\n           setupScrollToTest({rootWidth: 212, contentWidth: 1000});\n       foundation.scrollTo(900);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(788);\n     });\n\n  it('#scrollTo() sets the content transform style property to the difference between scrollX and scrollLeft',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest(\n           {rootWidth: 300, contentWidth: 1000, scrollLeft: 123});\n       foundation.scrollTo(456);\n       expect(mockAdapter.setScrollContentStyleProperty)\n           .toHaveBeenCalledWith('transform', 'translateX(333px)');\n     });\n\n  it('#scrollTo() sets the scroll property to the computed scrollX', () => {\n    const {foundation, mockAdapter} =\n        setupScrollToTest({rootWidth: 300, contentWidth: 1000, scrollLeft: 5});\n    foundation.scrollTo(111);\n    expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(111);\n  });\n\n  it(`#scrollTo() adds the ${\n         MDCTabScrollerFoundation.cssClasses.ANIMATING} class in a rAF`,\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest();\n       foundation.scrollTo(100);\n       jasmine.clock().tick(1);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('#scrollTo() sets scrollLeft to the visual scroll position if called during an animation',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({\n         scrollLeft: 50,\n         rootWidth: 100,\n         contentWidth: 200,\n         translateX: 19,\n         isAnimating: true,\n       });\n       foundation.scrollTo(33);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(31);\n     });\n\n  it(`#scrollTo() removes the ${\n         MDCTabScrollerFoundation.cssClasses\n             .ANIMATING} if called during an animation`,\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({\n         scrollLeft: 50,\n         rootWidth: 100,\n         contentWidth: 200,\n         translateX: 19,\n         isAnimating: true,\n       });\n       foundation.scrollTo(60);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n     });\n\n  it('#scrollTo() unsets the transform property in a rAF', () => {\n    const {foundation, mockAdapter} = setupScrollToTest();\n    foundation.scrollTo(212);\n    jasmine.clock().tick(1);\n    expect(mockAdapter.setScrollContentStyleProperty)\n        .toHaveBeenCalledWith('transform', 'none');\n  });\n\n  it('#incrementScroll() exits early if increment is 0', () => {\n    const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});\n    foundation.incrementScroll(0);\n    expect(mockAdapter.setScrollContentStyleProperty)\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n        //  got 1.\n        .not.toHaveBeenCalledWith(jasmine.any(String));\n    expect(mockAdapter.setScrollAreaScrollLeft)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#incrementScroll() exits early if increment puts the scrollLeft over the max value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});\n       foundation.incrementScroll(10);\n       expect(mockAdapter.setScrollContentStyleProperty)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n           //  got 1.\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n       expect(mockAdapter.setScrollAreaScrollLeft)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#incrementScroll() exits early if increment puts the scrollLeft below the min value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 0});\n       foundation.incrementScroll(-10);\n       expect(mockAdapter.setScrollContentStyleProperty)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Expected 2 arguments, but\n           //  got 1.\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n       expect(mockAdapter.setScrollAreaScrollLeft)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#incrementScroll() increases the scrollLeft value by the given value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});\n       foundation.incrementScroll(11);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(134);\n     });\n\n  it('#incrementScroll() increases the scrollLeft value by the given value up to the max scroll value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest(\n           {scrollLeft: 99, rootWidth: 100, contentWidth: 200});\n       foundation.incrementScroll(2);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(100);\n     });\n\n  it('#incrementScroll() decreases the scrollLeft value by the given value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});\n       foundation.incrementScroll(-11);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(112);\n     });\n\n  it('#incrementScroll() decreases the scrollLeft value by the given value down to the min scroll value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest(\n           {scrollLeft: 1, rootWidth: 100, contentWidth: 200});\n       foundation.incrementScroll(-2);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(0);\n     });\n\n  it('#incrementScroll() sets scrollLeft to the visual scroll position if called during an animation',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({\n         scrollLeft: 50,\n         rootWidth: 100,\n         contentWidth: 200,\n         translateX: 22,\n         isAnimating: true,\n       });\n       foundation.incrementScroll(10);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(28);\n     });\n\n  it(`#incrementScroll() removes the ${\n         MDCTabScrollerFoundation.cssClasses\n             .ANIMATING} if called during an animation`,\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({\n         scrollLeft: 50,\n         rootWidth: 100,\n         contentWidth: 200,\n         translateX: 19,\n         isAnimating: true,\n       });\n       foundation.incrementScroll(5);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(MDCTabScrollerFoundation.cssClasses.ANIMATING);\n     });\n\n  it('#incrementScrollImmediate() exits early if increment is 0', () => {\n    const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});\n    foundation.incrementScrollImmediate(0);\n    expect(mockAdapter.setScrollAreaScrollLeft)\n        .not.toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#incrementScrollImmediate() exits early if increment puts the scrollLeft over the max value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});\n       foundation.incrementScrollImmediate(10);\n       expect(mockAdapter.setScrollAreaScrollLeft)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#incrementScrollImmediate() exits early if increment puts the scrollLeft below the min value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 0});\n       foundation.incrementScrollImmediate(-10);\n       expect(mockAdapter.setScrollAreaScrollLeft)\n           .not.toHaveBeenCalledWith(jasmine.any(Number));\n     });\n\n  it('#incrementScrollImmediate() increases the scrollLeft value by the given value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});\n       foundation.incrementScrollImmediate(11);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(134);\n     });\n\n  it('#incrementScrollImmediate() increases the scrollLeft value by the given value up to the max scroll value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest(\n           {scrollLeft: 99, rootWidth: 100, contentWidth: 200});\n       foundation.incrementScrollImmediate(2);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(100);\n     });\n\n  it('#incrementScrollImmediate() decreases the scrollLeft value by the given value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});\n       foundation.incrementScrollImmediate(-11);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(112);\n     });\n\n  it('#incrementScrollImmediate() decreases the scrollLeft value by the given value down to the min scroll value',\n     () => {\n       const {foundation, mockAdapter} = setupScrollToTest(\n           {scrollLeft: 1, rootWidth: 100, contentWidth: 200});\n       foundation.incrementScrollImmediate(-2);\n       expect(mockAdapter.setScrollAreaScrollLeft).toHaveBeenCalledWith(0);\n     });\n\n  // RTL Mode\n  function setupScrollToRTLTest() {\n    const {foundation, mockAdapter, opts} = setupScrollToTest();\n    mockAdapter.getScrollContentStyleValue.withArgs('direction')\n        .and.returnValue('rtl');\n    mockAdapter.computeScrollAreaClientRect.and.returnValue(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ right:\n        //  number; }' is not assignable to parameter of type 'DOMRect'.\n        {right: opts.rootWidth});\n    mockAdapter.computeScrollContentClientRect.and.returnValue(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ right:\n        //  number; }' is not assignable to parameter of type 'DOMRect'.\n        {right: opts.contentWidth});\n    return {foundation, mockAdapter};\n  }\n\n  it('#scrollTo() sets the scrollLeft property in RTL', () => {\n    const {foundation, mockAdapter} = setupScrollToRTLTest();\n    foundation.scrollTo(10);\n    expect(mockAdapter.setScrollAreaScrollLeft)\n        .toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#scrollTo() sets the transform style property in RTL', () => {\n    const {foundation, mockAdapter} = setupScrollToRTLTest();\n    foundation.scrollTo(10);\n    expect(mockAdapter.setScrollContentStyleProperty)\n        .toHaveBeenCalledWith('transform', 'translateX(690px)');\n  });\n\n  it('#incrementScroll() sets the scrollLeft property in RTL', () => {\n    const {foundation, mockAdapter} = setupScrollToRTLTest();\n    foundation.incrementScroll(-10);\n    expect(mockAdapter.setScrollAreaScrollLeft)\n        .toHaveBeenCalledWith(jasmine.any(Number));\n  });\n\n  it('#incrementScroll() sets the transform style property in RTL', () => {\n    const {foundation, mockAdapter} = setupScrollToRTLTest();\n    foundation.incrementScroll(-10);\n    expect(mockAdapter.setScrollContentStyleProperty)\n        .toHaveBeenCalledWith('transform', 'translateX(10px)');\n  });\n\n  it('#getScrollPosition() returns a numeric scroll position in RTL', () => {\n    const {foundation} = setupScrollToRTLTest();\n    expect(foundation.getScrollPosition()).toEqual(jasmine.any(Number));\n  });\n\n  // RTLScroller\n  function setupNegativeScroller() {\n    const {foundation, mockAdapter} = setupTest();\n    const rootWidth = 200;\n    const contentWidth = 1000;\n    let scrollLeft = 0;\n    mockAdapter.getScrollAreaOffsetWidth.and.callFake(() => rootWidth);\n    mockAdapter.getScrollContentOffsetWidth.and.callFake(() => contentWidth);\n    mockAdapter.getScrollAreaScrollLeft.and.callFake(() => scrollLeft);\n    mockAdapter.setScrollAreaScrollLeft.withArgs(jasmine.any(Number))\n        .and.callFake((newScrollLeft: number) => {\n          scrollLeft = newScrollLeft;\n        });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollAreaClientRect.and.callFake(() => {\n      return {right: rootWidth};\n    });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollContentClientRect.and.callFake(() => {\n      return {right: rootWidth - scrollLeft};\n    });\n    return {foundation, mockAdapter};\n  }\n\n  it('#getRTLScroller() returns an instance of MDCTabScrollerRTLNegative',\n     () => {\n       const {foundation} = setupNegativeScroller();\n       expect(foundation.getRTLScroller())\n           .toEqual(jasmine.any(MDCTabScrollerRTLNegative));\n     });\n\n  function setupReverseScroller() {\n    const {foundation, mockAdapter} = setupTest();\n    const rootWidth = 200;\n    const contentWidth = 1000;\n    let scrollLeft = 0;\n    mockAdapter.getScrollAreaOffsetWidth.and.callFake(() => rootWidth);\n    mockAdapter.getScrollContentOffsetWidth.and.callFake(() => contentWidth);\n    mockAdapter.getScrollAreaScrollLeft.and.callFake(() => scrollLeft);\n    mockAdapter.setScrollAreaScrollLeft.withArgs(jasmine.any(Number))\n        .and.callFake((newScrollLeft: number) => {\n          scrollLeft = Math.max(newScrollLeft, scrollLeft);\n        });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollAreaClientRect.and.callFake(() => {\n      return {right: rootWidth};\n    });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollContentClientRect.and.callFake(() => {\n      return {right: rootWidth - scrollLeft};\n    });\n    return {foundation, mockAdapter};\n  }\n\n  it('#getRTLScroller() returns an instance of MDCTabScrollerRTLReverse',\n     () => {\n       const {foundation} = setupReverseScroller();\n       expect(foundation.getRTLScroller())\n           .toEqual(jasmine.any(MDCTabScrollerRTLReverse));\n     });\n\n  function setupDefaultScroller() {\n    const {foundation, mockAdapter} = setupTest();\n    const rootWidth = 200;\n    const contentWidth = 1000;\n    let scrollLeft = 800;\n    mockAdapter.getScrollAreaOffsetWidth.and.callFake(() => rootWidth);\n    mockAdapter.getScrollContentOffsetWidth.and.callFake(() => contentWidth);\n    mockAdapter.getScrollAreaScrollLeft.and.callFake(() => scrollLeft);\n    mockAdapter.setScrollAreaScrollLeft.withArgs(jasmine.any(Number))\n        .and.callFake((newScrollLeft: number) => {\n          scrollLeft = newScrollLeft;\n        });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollAreaClientRect.and.callFake(() => {\n      return {right: rootWidth};\n    });\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '() => { right:\n    //  number; }' is not assignable to parameter of type '() => DOMRect'.\n    mockAdapter.computeScrollContentClientRect.and.callFake(() => {\n      return {right: contentWidth - scrollLeft};\n    });\n    return {foundation, mockAdapter};\n  }\n\n  it('#getRTLScroller() returns an instance of MDCTabScrollerRTLDefault',\n     () => {\n       const {foundation} = setupDefaultScroller();\n       expect(foundation.getRTLScroller())\n           .toEqual(jasmine.any(MDCTabScrollerRTLDefault));\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/mdc-tab-scroller.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-tab-scroller.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/rtl-default-scroller.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTabScrollerFoundation} from '../foundation';\nimport {MDCTabScrollerRTLDefault} from '../rtl-default-scroller';\n\nconst setupTest =\n    ({rootWidth, contentWidth, scrollLeft}:\n         {rootWidth: number, contentWidth: number, scrollLeft: number}) => {\n      const {mockAdapter} = setUpFoundationTest(MDCTabScrollerFoundation);\n      const scroller = new MDCTabScrollerRTLDefault(mockAdapter);\n      mockAdapter.getScrollAreaOffsetWidth.and.returnValue(rootWidth);\n      mockAdapter.getScrollContentOffsetWidth.and.returnValue(contentWidth);\n      mockAdapter.getScrollAreaScrollLeft.and.returnValue(scrollLeft);\n      return {scroller, mockAdapter};\n    };\n\ndescribe('MDCTabScrollerRTLDefault', () => {\n  it('#getScrollPositionRTL() returns the distance from the right edge', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.getScrollPositionRTL()).toBe(123);\n  });\n\n  it('#scrollToRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.scrollToRTL(111).finalScrollPosition).toBe(689);\n  });\n\n  it('#scrollToRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.scrollToRTL(111).scrollDelta).toBe(12);\n  });\n\n  it('#scrollToRTL() returns 0 for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(801).finalScrollPosition).toBe(0);\n     });\n\n  it('#scrollToRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(123).scrollDelta).toBe(0);\n     });\n\n  it('#scrollToRTL() returns max scroll value for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(-10).finalScrollPosition).toBe(800);\n     });\n\n  it('#incrementScrollRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.incrementScrollRTL(50).finalScrollPosition).toBe(627);\n  });\n\n  it('#incrementScrollRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.incrementScrollRTL(50).scrollDelta).toBe(-50);\n  });\n\n  it('#incrementScrollRTL() returns 0 for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.incrementScrollRTL(678).finalScrollPosition).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.incrementScrollRTL(0).scrollDelta).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns max scroll value for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.incrementScrollRTL(-124).finalScrollPosition).toBe(800);\n     });\n\n  it('#getAnimatingScrollPosition() returns just the scrollX value', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.getAnimatingScrollPosition(123)).toBe(123);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/rtl-negative-scroller.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTabScrollerFoundation} from '../foundation';\nimport {MDCTabScrollerRTLNegative} from '../rtl-negative-scroller';\n\nconst setupTest =\n    ({rootWidth, contentWidth, scrollLeft}:\n         {rootWidth: number, contentWidth: number, scrollLeft: number}) => {\n      const {mockAdapter} = setUpFoundationTest(MDCTabScrollerFoundation);\n      const scroller = new MDCTabScrollerRTLNegative(mockAdapter);\n      mockAdapter.getScrollAreaOffsetWidth.and.returnValue(rootWidth);\n      mockAdapter.getScrollContentOffsetWidth.and.returnValue(contentWidth);\n      mockAdapter.getScrollAreaScrollLeft.and.returnValue(scrollLeft);\n      return {scroller, mockAdapter};\n    };\n\ndescribe('MDCTabScrollerRTLNegative', () => {\n  it('#getScrollPositionRTL() returns the current scroll distance when translateX is 0',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -123});\n       expect(scroller.getScrollPositionRTL(0)).toBe(123);\n     });\n\n  it('#getScrollPositionRTL() returns the current scroll distance minus translateX',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -123});\n       expect(scroller.getScrollPositionRTL(11)).toBe(134);\n     });\n\n  it('#scrollToRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -111});\n    expect(scroller.scrollToRTL(123).finalScrollPosition).toBe(-123);\n  });\n\n  it('#scrollToRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -111});\n    expect(scroller.scrollToRTL(123).scrollDelta).toBe(-12);\n  });\n\n  it('#scrollToRTL() returns 0 for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -500});\n       expect(scroller.scrollToRTL(-1).finalScrollPosition).toBe(0);\n     });\n\n  it('#scrollToRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -123});\n       expect(scroller.scrollToRTL(123).scrollDelta).toBe(0);\n     });\n\n  it('#scrollToRTL() returns min scroll value for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -677});\n       expect(scroller.scrollToRTL(801).finalScrollPosition).toBe(-800);\n     });\n\n  it('#incrementScrollRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -111});\n    expect(scroller.incrementScrollRTL(17).finalScrollPosition).toBe(-128);\n  });\n\n  it('#incrementScrollRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -111});\n    expect(scroller.incrementScrollRTL(50).scrollDelta).toBe(-50);\n  });\n\n  it('#incrementScrollRTL() returns 0 for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -45});\n       expect(scroller.incrementScrollRTL(-46).finalScrollPosition).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -123});\n       expect(scroller.incrementScrollRTL(0).scrollDelta).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns min scroll value for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: -677});\n       expect(scroller.incrementScrollRTL(124).finalScrollPosition).toBe(-800);\n     });\n\n  it('#getAnimatingScrollPosition() returns the difference between the scrollX value and the translateX value',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.getAnimatingScrollPosition(123, 11)).toBe(112);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/rtl-reverse-scroller.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTabScrollerFoundation} from '../foundation';\nimport {MDCTabScrollerRTLReverse} from '../rtl-reverse-scroller';\n\ndescribe('MDCTabScrollerRTLReverse', () => {\n  const setupTest =\n      ({rootWidth, contentWidth, scrollLeft}:\n           {rootWidth: number, contentWidth: number, scrollLeft: number}) => {\n        const {mockAdapter} = setUpFoundationTest(MDCTabScrollerFoundation);\n        const scroller = new MDCTabScrollerRTLReverse(mockAdapter);\n        mockAdapter.getScrollAreaOffsetWidth.and.returnValue(rootWidth);\n        mockAdapter.getScrollContentOffsetWidth.and.returnValue(contentWidth);\n        mockAdapter.getScrollAreaScrollLeft.and.returnValue(scrollLeft);\n        return {scroller, mockAdapter};\n      };\n\n  it('#getScrollPositionRTL() returns the negated scrollLeft value', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.getScrollPositionRTL(0)).toBe(677);\n  });\n\n  it('#getScrollPositionRTL() returns the negated current scroll distance minus translateX',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.getScrollPositionRTL(11)).toBe(666);\n     });\n\n  it('#scrollToRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n    expect(scroller.scrollToRTL(111).finalScrollPosition).toBe(111);\n  });\n\n  it('#scrollToRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 145});\n    expect(scroller.scrollToRTL(111).scrollDelta).toBe(34);\n  });\n\n  it('#scrollToRTL() returns 0 for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(-10).finalScrollPosition).toBe(0);\n     });\n\n  it('#scrollToRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(677).scrollDelta).toBe(0);\n     });\n\n  it('#scrollToRTL() returns max scroll value for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.scrollToRTL(801).finalScrollPosition).toBe(800);\n     });\n\n  it('#incrementScrollRTL() returns a normalized scrollX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 202});\n    expect(scroller.incrementScrollRTL(50).finalScrollPosition).toBe(252);\n  });\n\n  it('#incrementScrollRTL() returns a normalized translateX property', () => {\n    const {scroller} =\n        setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 212});\n    expect(scroller.incrementScrollRTL(50).scrollDelta).toBe(-50);\n  });\n\n  it('#incrementScrollRTL() returns 0 for scrollX property when scrollLeft would be too far right',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 45});\n       expect(scroller.incrementScrollRTL(-50).finalScrollPosition).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns 0 for translateX property when scrollLeft would be the same',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 0});\n       expect(scroller.incrementScrollRTL(-50).scrollDelta).toBe(0);\n     });\n\n  it('#incrementScrollRTL() returns max scroll value for scrollX property when scrollLeft would be too far left',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.incrementScrollRTL(124).finalScrollPosition).toBe(800);\n     });\n\n  it('#getAnimatingScrollPosition() returns the sum of the scrollX value and the translateX value',\n     () => {\n       const {scroller} =\n           setupTest({rootWidth: 200, contentWidth: 1000, scrollLeft: 677});\n       expect(scroller.getAnimatingScrollPosition(123, 11)).toBe(134);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/test/util.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {cssClasses} from '../constants';\nimport * as util from '../util';\n\nfunction createMockDocumentForHorizontalScrollbarHeight(height: number) {\n  const classListAddFunc = jasmine.createSpy('classList.add');\n  const mockDocument = {\n    appendedNodes: 0,\n    body: {\n      appendChild: () => mockDocument.appendedNodes++,\n      removeChild: () => mockDocument.appendedNodes--,\n    },\n    createElement: () => {\n      return {\n        classList: {add: classListAddFunc},\n        // Populate both offsetHeight and contentHeight such that the difference\n        // is the intended height, to test that the util function is computing\n        // based on both\n        clientHeight: height,\n        offsetHeight: height * 2,\n      };\n    },\n  };\n\n  return {mockDocument, classListAddFunc};\n}\n\ndescribe('MDCTabScroller - util', () => {\n  it('#computeHorizontalScrollbarHeight returns value based on difference between offset and client height',\n     () => {\n       const expectedHeight = 17;\n       const {mockDocument, classListAddFunc} =\n           createMockDocumentForHorizontalScrollbarHeight(expectedHeight);\n\n       expect(util.computeHorizontalScrollbarHeight(\n                  mockDocument as any, false /* shouldCacheResult */))\n           .toBe(expectedHeight);\n       expect(classListAddFunc).toHaveBeenCalledWith(cssClasses.SCROLL_TEST);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tab-scroller/types.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * MDCTabScrollerAnimation contains the values required for animating from the\n * current scroll position to the new scroll position. The \"finalScrollPosition\"\n * value represents the new scroll position while the \"scrollDelta\" value is the\n * corresponding transformation that is applied to the scroll content. Together,\n * they create the animation by first updating the scroll value then applying\n * the transformation and animating the transition. Both pieces are necessary\n * for the scroll animation to work. The values are used as-is by the tab\n * scroller animation method, ensuring that all logic for determining scroll\n * position or transformation is abstracted away from the animation method.\n */\nexport interface MDCTabScrollerAnimation {\n  finalScrollPosition: number;\n  scrollDelta: number;\n}\n\n/**\n * MDCTabScrollerHorizontalEdges represents the left and right edges of the\n * scroll content. These values vary depending on how scrolling in RTL is\n * implemented by the browser. One value is always 0 and one value is always\n * the max scrollable value as either a positive or negative integer.\n */\nexport interface MDCTabScrollerHorizontalEdges {\n  left: number;\n  right: number;\n}\n"
  },
  {
    "path": "packages/mdc-tab-scroller/util.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {cssClasses} from './constants';\n\n/**\n * Stores result from computeHorizontalScrollbarHeight to avoid redundant\n * processing.\n */\nlet horizontalScrollbarHeight_: number|undefined;\n\n/**\n * Computes the height of browser-rendered horizontal scrollbars using a\n * self-created test element. May return 0 (e.g. on OS X browsers under default\n * configuration).\n */\nexport function computeHorizontalScrollbarHeight(\n    documentObj: Document, shouldCacheResult = true): number {\n  if (shouldCacheResult && typeof horizontalScrollbarHeight_ !== 'undefined') {\n    return horizontalScrollbarHeight_;\n  }\n\n  const el = documentObj.createElement('div');\n  el.classList.add(cssClasses.SCROLL_TEST);\n  documentObj.body.appendChild(el);\n\n  const horizontalScrollbarHeight = el.offsetHeight - el.clientHeight;\n  documentObj.body.removeChild(el);\n\n  if (shouldCacheResult) {\n    horizontalScrollbarHeight_ = horizontalScrollbarHeight;\n  }\n  return horizontalScrollbarHeight;\n}\n"
  },
  {
    "path": "packages/mdc-textfield/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-textfield/README.md",
    "content": "<!--docs:\ntitle: \"Text field\"\nlayout: detail\nsection: components\nexcerpt: \"MDC Web text field\"\niconId: text_field\npath: /catalog/input-controls/text-field/\n-->\n\n# Text field\n\n[Text fields](https://material.io/components/text-fields) let users enter and edit text.\n\nFor more information, see the [API](#api) documentation.\n\nThe text field class consists of the following types:\n\n* [Filled text](#filled-text)\n* [Outlined text](#outlined-text)\n\n<img src=\"images/text-field-generic.png\" alt=\"Text field examples of both filled and outlined types, and each type showing both inactive and focused states.\">\n\n## Using text fields\n\nText fields allow users to enter text into a UI. They typically appear in forms and dialogs.\n\n### Installation\n\n```\nnpm install @material/textfield\n```\n\n### Styles\n\n```scss\n@use \"@material/floating-label/mdc-floating-label\";\n@use \"@material/line-ripple/mdc-line-ripple\";\n@use \"@material/notched-outline/mdc-notched-outline\";\n@use \"@material/textfield\";\n\n@include textfield.core-styles;\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCTextField} from '@material/textfield';\n\nconst textField = new MDCTextField(document.querySelector('.mdc-text-field'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Filled text\n\n[Filled text fields](https://material.io/components/text-fields/#filled-text-field) have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.\n\n### Filled text example\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Hint text</span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n## Outlined text\n\n[Outlined text fields](https://material.io/components/text-fields/#outlined-text-field) have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.\n\n### Outlined text example\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label-id\">\n</label>\n```\n\nSee [here](../mdc-notched-outline/) for more information on using the notched outline sub-component.\n\n**Note: Do not use `mdc-line-ripple` inside of `mdc-text-field` _if you plan on using `mdc-text-field--outlined`_. Line Ripple should not be included as part of the DOM structure of an outlined text field.**\n\n## Other variations\n\n### Textarea\n\n#### Filled\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--textarea mdc-text-field--no-label\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-text-field__resizer\">\n    <textarea class=\"mdc-text-field__input\" rows=\"8\" cols=\"40\" aria-label=\"Label\"></textarea>\n  </span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n#### Outlined\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <span class=\"mdc-text-field__resizer\">\n    <textarea class=\"mdc-text-field__input\" rows=\"8\" cols=\"40\" aria-label=\"Label\"></textarea>\n  </span>\n</label>\n```\n\n**Note: The `mdc-text-field__resizer` element may be omitted for a non-resizable textarea.**\n\n### Text field without label\n\nA text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field.\nAdd class name `mdc-text-field--no-label` and remove the label element from the structure.\n\n#### Filled\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <input class=\"mdc-text-field__input\" type=\"text\" placeholder=\"Placeholder text\" aria-label=\"Label\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n#### Outlined\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--no-label\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-label=\"Label\">\n</label>\n```\n\n#### Textarea\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <span class=\"mdc-text-field__resizer\">\n    <textarea class=\"mdc-text-field__input\" rows=\"8\" cols=\"40\" aria-label=\"Label\"></textarea>\n  </span>\n</label>\n```\n\n### Disabled text field\n\nTo disable the text field, add the `disabled` attribute to the `<input>` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--disabled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Disabled text field</span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\" disabled>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n### Text field with helper text\n\nThe helper text provides supplemental information and/or validation messages to users. It appears on input field focus\nand disappears on input field blur by default, or it can be persistent. Helper text should be rendered inside `.mdc-text-field-helper-line` element\nwhich is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for more information on using helper text.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">My Label</span>\n  <input class=\"mdc-text-field__input\" type=\"text\"\n         aria-labelledby=\"my-label-id\"\n         aria-controls=\"my-helper-id\"\n         aria-describedby=\"my-helper-id\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n<div class=\"mdc-text-field-helper-line\">\n  <div class=\"mdc-text-field-helper-text\" id=\"my-helper-id\" aria-hidden=\"true\">helper text</div>\n</div>\n```\n\n### Text field with character counter\n\nCharacter counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.\nCharacter counter should be rendered inside `.mdc-text-field-helper-line` element which is immediate sibling of `.mdc-text-field`.\nSee [here](character-counter/) for more information on using character counter.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">My Label</span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\" maxlength=\"10\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n<div class=\"mdc-text-field-helper-line\">\n  <div class=\"mdc-text-field-character-counter\">0 / 10</div>\n</div>\n```\n\n### Multi-line text field (textarea) with character counter\n\nA character counter can be associated with a textarea by including it in the\nhelper line. In this case, the counter will appear below the textarea, adjacent\nto any helper text.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--textarea\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Textarea Label</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <span class=\"mdc-text-field__resizer\">\n    <textarea class=\"mdc-text-field__input\" aria-labelledby=\"my-label-id\" rows=\"8\"\n      cols=\"40\" maxlength=\"140\"></textarea>\n  </span>\n</label>\n<div class=\"mdc-text-field-helper-line\">\n  <div class=\"mdc-text-field-character-counter\">0 / 140</div>\n</div>\n```\nAlternatively, the character counter can be placed in the textarea's body by\ninserting the character counter below the textarea and adding the\n`mdc-text-field--with-internal-counter` modifier class to the text field.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--with-internal-counter\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Textarea Label</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <span class=\"mdc-text-field__resizer\">\n    <textarea class=\"mdc-text-field__input\" aria-labelledby=\"my-label-id\" rows=\"8\" cols=\"40\" maxlength=\"140\"></textarea>\n    <span class=\"mdc-text-field-character-counter\">0 / 140</span>\n  </span>\n</label>\n```\n\nHelper text and Character counter are optional subcomponents of text field that can co-exist independently.\nIt is recommended that `.mdc-text-field` and `.mdc-text-field-helper-line` elements have same width for correct layout.\n\n### Text field with prefix and suffix text\n\nPrefix and suffix text can add context to a text field, such as a currency symbol prefix or a unit of mass suffix.\nA prefix, suffix, or both can be added within the default or outlined variants of text fields.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Currency Value</span>\n  <span class=\"mdc-text-field__affix mdc-text-field__affix--prefix\">$</span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <span class=\"mdc-text-field__affix mdc-text-field__affix--suffix\">.00</span>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n**Note: Do not use `mdc-text-field--affix` within `mdc-text-field--textarea`.**\n\n### Text field with leading and trailing icons\n\nLeading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as\nwell as interaction targets. See [here](icon/) for more information on using icons.\n\n## Other features\n\n### HTML5 validation\n\n`MDCTextFieldFoundation` provides validity styling by using the `:invalid` and `:required` attributes provided\nby HTML5's form validation API.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Password</span>\n  <input class=\"mdc-text-field__input\" type=\"password\" aria-labelledby=\"my-label-id\" required minlength=\"8\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n`MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set.\n\n### Pre-filled\n\nWhen dealing with JS-driven text fields that already have values, you'll want to ensure that you\nrender `mdc-text-field` with the `mdc-text-field--label-floating` modifier class, as well as\n`mdc-floating-label` with the `mdc-floating-label--float-above` modifier class. This will\nensure that the label moves out of the way of the text field's value and prevents a Flash Of\nUn-styled Content (**FOUC**).\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--label-floating\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label mdc-floating-label--float-above\" id=\"my-label-id\">\n    Label in correct place\n  </span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\" value=\"Pre-filled value\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\n### Baseline alignment\n\nBy default, text fields will be aligned with other elements relative to their\nbaseline. The input text's baseline is used to determine where a text field\nshould be aligned to and is different between variants. To force alignment to\nthe text field's container instead of its baseline, align the element using\nflexbox.\n\n```html\n<div>\n  <label class=\"mdc-text-field mdc-text-field--outlined\">\n    <span class=\"mdc-notched-outline\">\n      <span class=\"mdc-notched-outline__leading\"></span>\n      <span class=\"mdc-notched-outline__trailing\"></span>\n    </span>\n    <input type=\"text\" class=\"mdc-text-field__input\" value=\"Baseline\">\n  </label>\n  <span>Text that is aligned with the text field's value</span>\n</div>\n\n<div style=\"display: flex; flex-direction: row; align-items: flex-end;\">\n  <label class=\"mdc-text-field mdc-text-field--outlined\">\n    <span class=\"mdc-notched-outline\">\n      <span class=\"mdc-notched-outline__leading\"></span>\n      <span class=\"mdc-notched-outline__trailing\"></span>\n    </span>\n    <input type=\"text\" class=\"mdc-text-field__input\" value=\"Baseline\">\n  </label>\n  <span>Text that is aligned to the bottom of the text field's outline</span>\n</div>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-text-field` | Mandatory.\n`mdc-text-field--filled` | Styles the text field as a filled text field.\n`mdc-text-field--outlined` | Styles the text field as an outlined text field.\n`mdc-text-field--textarea` | Indicates the text field is a `<textarea>`.\n`mdc-text-field--disabled` | Styles the text field as a disabled text field.\n`mdc-text-field--with-leading-icon` | Styles the text field as a text field with a leading icon.\n`mdc-text-field--with-trailing-icon` | Styles the text field as a text field with a trailing icon.\n`mdc-text-field--focused` | Styles the text field as a text field in focus.\n`mdc-text-field--no-label` | Styles the text field that has no label.\n`mdc-text-field--end-aligned` | Styles the text field with an end-aligned input.\n`mdc-text-field--label-floating` | Styles the text field with a floating label and pre-filled or focused value.\n`mdc-text-field--ltr-text` | Styles the text field's text elements (input, prefix, and suffix) as LTR even when the direction is RTL. Useful for RTL languages that use LTR for fractional notations.\n`mdc-text-field--with-internal-counter` | Styles the text area as a text area with an internal character counter.\n`mdc-text-field-helper-line` | Styles the container of helper text and character counter elements.\n\n### Sass mixins\n\nTo customize the colors of any part of the text-field, use the following mixins. We recommend you apply\nthese mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--focused)` to select your unfocused text fields,\nand `.foo-text-field.mdc-text-field--focused` to select your focused text-fields. To change the invalid state of your text fields,\napply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--invalid`.\n\n> _NOTE_: the `mdc-line-ripple-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-text-field--focused)`).\n\n#### Mixins for all text fields\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Customizes the color of the text entered into an enabled text field.\n`placeholder-color($color)` | Customizes the color of the placeholder in an enabled text field.\n`disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.\n`disabled-placeholder-color($color)` | Customizes the color of the placeholder in a disabled text field.\n`label-color($color)` | Customizes the text color of the label in an enabled text field.\n`disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.\n`caret-color($color)` | Customizes the color of the cursor caret of the text field.\n`prefix-color($color)` | Customizes the color of the prefix text of an enabled text field.\n`disabled-prefix-color($color)` | Customizes the color of the prefix text of a disabled text field.\n`suffix-color($color)` | Customizes the color of the suffix text of an enabled text field.\n`disabled-suffix-color($color)` | Customizes the color of the suffix text of a disabled text field.\n`floating-label-float-transition($duration-ms, $timing-function)` | Customizes the duration and optional timing function for the floating label's \"float\" transition.\n\n#### Mixins for filled text field and textarea\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Customizes the background color of the text field or textarea when enabled.\n`disabled-fill-color($color)` | Customizes the background color of the text field or textarea when disabled.\n\n#### Mixins for filled text field only\n\nMixin | Description\n--- | ---\n`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`bottom-line-color($color)` | Customizes the text field bottom line color.\n`hover-bottom-line-color($color)` | Customizes the hover text field bottom line color.\n`disabled-bottom-line-color($color)` | Customizes the disabled text field bottom line color.\n`line-ripple-color($color)` | Customizes the color of the default line ripple of the text field.\n`density($density-scale)` | Sets density scale for default text field variant. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.\n`height($height)` | Sets height of default text field variant.\n\n#### Mixins for outlined text field and textarea\n\nMixin | Description\n--- | ---\n`focused-outline-color($color)` | Customizes the outline border color when the text field or textarea is focused.\n`hover-outline-color($color)` | Customizes the outline border color when the text field or textarea is hovered.\n`disabled-outline-color($color)` | Customizes the outline border color when the text field or textarea is disabled.\n`outline-color($color)` | Customizes the border color of the outlined text field or textarea.\n\n#### Mixins for outlined text field only\n\nMixin | Description\n--- | ---\n`outline-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to outlined text field variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`outlined-density($density-scale)` | Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.\n`outlined-height($height)` | Sets height of outlined text field variant (Excluding outlined text field with leading icon).\n`outlined-with-leading-icon-density($density-scale)` | Sets density scale for outlined text field with leading icon. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.\n`outlined-with-leading-icon-height($height)` | Sets height of outlined text field with leading icon variant.\n\n#### Mixins for textarea only\n\nMixin | Description\n--- | ---\n`textarea-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to text area variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`outlined-textarea-density($density-scale)` | Sets density scale for outlined textarea. Supported density scale values `-4`, `-3`, `-2`, `-1`, `0`.\n`textarea-min-rows($rows)` | Sets the minimum number of rows for a textarea a textarea may be resized to.\n\n## `MDCTextField` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`value` | `string` | Proxies to the foundation's `getValue`/`setValue` methods.\n`disabled` | `boolean` | Proxies to the foundation's `isDisabled`/`setDisabled` methods.\n`useNativeValidation` | `boolean` (write-only) | Proxies to the foundation's `setUseNativeValidation` method.\n`valid` | `boolean` | Proxies to the foundation's `isValid`/`setValid` methods.\n`helperTextContent` | `string` (write-only)| Proxies to the foundation's `setHelperTextContent` method when set.\n`ripple` | `MDCRipple` (write-only) | The `MDCRipple` instance for the root element that `MDCTextField` initializes; this only applies to the default Text Field, and is `null` for other variants.\n`leadingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setLeadingIconAriaLabel` method.\n`trailingIconAriaLabel` | `string` (write-only) | Proxies to the foundation's `setTrailingIconAriaLabel` method.\n`leadingIconContent` | `string` (write-only) | Proxies to the foundation's `setLeadingIconContent` method.\n`trailingIconContent` | `string` (write-only) | Proxies to the foundation's `setTrailingIconContent` method.\n`prefixText` | `string` | Gets or sets the text content of the prefix, if it exists.\n`suffixText` | `string` | Gets or sets the text content of the suffix, if it exists.\n\nIn addition to the above, the following properties proxy to the `input` element's properties of the same name:\n\n* `required`\n* `pattern`\n* `minLength`\n* `maxLength`\n* `min`\n* `max`\n* `step`\n\nMethod Signature | Description\n--- | ---\n`focus() => void` | Focuses the `input` or `textarea` element.\n`layout() => void` | Adjusts the dimensions and positions for all sub-elements.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Text Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTextFieldAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given class name.\n`registerTextFieldInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event.\n`deregisterTextFieldInteractionHandler(eventType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event.\n`registerInputInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event listener on the native input element for a given event.\n`deregisterInputInteractionHandler(eventType: string, handler: EventListener) => void` | Deregisters an event listener on the native input element for a given event.\n`registerValidationAttributeChangeHandler(handler: (attributeNames: string[]) => void) => MutationObserver` | Registers a validation attribute change listener on the input element. Handler accepts list of attribute changes.\n`deregisterValidationAttributeChangeHandler(!MutationObserver) => void` | Disconnects a validation attribute observer on the input element.\n`getNativeInput() => NativeInputType \\| null` | Returns an object representing the native text input element, with a similar API shape. See [types.ts](types.ts).\n`isFocused() => boolean` | Returns whether the input is focused.\n`shakeLabel(shouldShake: boolean) => void` | Shakes the label to indicate an invalid input value.\n`floatLabel(shouldFloat: boolean) => void` | Floats the label.\n`hasLabel() => boolean` | Determines whether the text field has a label element.\n`getLabelWidth() => number` | Returns the width of the label element in px.\n`activateLineRipple() => void` | Activates the text field's line ripple sub-element.\n`deactivateLineRipple() => void` | Deactivate the text field's line ripple sub-element.\n`setLineRippleTransformOrigin(normalizedX: number) => void` | Sets the CSS `transform-origin` property to the given value on the text field's line ripple sub-element (if present).\n`hasOutline() => boolean` | Determines whether the text field has an outline sub-element.\n`notchOutline(labelWidth: number) => void` | Sets the width of the text field's notched outline sub-element.\n`closeOutline() => void` | Closes the text field's notched outline sub-element.\n\n#### `MDCTextFieldAdapter.getNativeInput()`\n\nReturns an object representing the native text input element, with a similar API shape. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully.\n\n#### `MDCTextFieldAdapter.getIdleOutlineStyleValue(propertyName: string)`\n\nReturns the idle outline element's computed style value of the given css property `propertyName`. The vanilla implementation achieves this via `getComputedStyle(...).getPropertyValue(propertyName)`.\n\n### `MDCTextFieldFoundation`\n\nProperty | Value Type | Description\n--- | --- | ---\n`shouldFloat` | `boolean` (read-only) | Determines whether the label should float.\n`shouldShake` | `boolean` (read-only) | Determines whether the label should shake.\n\nMethod Signature | Description\n--- | ---\n`getValue() => string` | Returns the input's value.\n`setValue(value: string)` | Sets the input's value.\n`setUseNativeValidation(useNativeValidation: boolean)` | Sets whether to check native HTML validity state (`true`, default) or custom validity state when updating styles (`false`).\n`setValid(isValid: boolean)` | Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless `setUseNativeValidation(false)` is also called.\n`isValid() => boolean` | Returns the component's current validity state (either native or custom, depending on how `setUseNativeValidation()` was configured).\n`isDisabled() => boolean` | Returns whether or not the input is disabled.\n`setDisabled(disabled: boolean) => void` | Updates the input's disabled state.\n`handleTextFieldInteraction(event: Event) => void` | Handles click and keydown events originating from inside the Text Field component.\n`handleInput() => void` | Handles text input and textarea input event.\n`handleValidationAttributeChange(attributesList: !Array<string>) => void` | Handles validation attribute changes.\n`activateFocus() => void` | Activates the focus state of the Text Field. Normally called in response to the input focus event.\n`deactivateFocus() => void` | Deactivates the focus state of the Text Field. Normally called in response to the input blur event.\n`setHelperTextContent(content: string) => void` | Sets the content of the helper text.\n`setLeadingIconAriaLabel(label: string) => void` | Sets the aria label of the leading icon.\n`setLeadingIconContent(content: string) => void` | Sets the text content of the leading icon.\n`setTrailingIconAriaLabel(label: string) => void` | Sets the aria label of the trailing icon.\n`setTrailingIconContent(content: string) => void` | Sets the text content of the trailing icon.\n`notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline.\n`setTransformOrigin(event: TouchEvent \\| MouseEvent) => void` | Sets the line ripple's transform origin, so that the line ripple activate animation will animate out from the user's click location.\n`autoCompleteFocus() => void` | Activates the Text Field's focus state in cases when the input value is changed programmatically (i.e., without user action).\n`setAutovalidate(shouldAutovalidate: boolean) => void` | Sets whether or not the textfield should validate its input when `value` changes.\n`getAutovalidate() => boolean` | Whether or not the textfield should validate its input when `value` changes. `true` by default.\n\n`MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.\n"
  },
  {
    "path": "packages/mdc-textfield/_filled-text-field-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:map';\n@use '@material/line-ripple/mixins' as line-ripple-mixins;\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/tokens/resolvers';\n@use './text-field-theme';\n@use './mixins';\n\n$custom-property-prefix: 'filled-text-field';\n\n$light-theme: (\n  active-indicator-color: null,\n  active-indicator-height: null,\n  caret-color: null,\n  container-color: null,\n  container-height: null,\n  container-shape: null,\n  disabled-active-indicator-color: null,\n  disabled-active-indicator-height: null,\n  disabled-active-indicator-opacity: null,\n  disabled-container-color: null,\n  disabled-container-opacity: null,\n  disabled-input-text-color: null,\n  disabled-input-text-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  disabled-leading-icon-color: null,\n  disabled-leading-icon-opacity: null,\n  disabled-supporting-text-color: null,\n  disabled-supporting-text-opacity: null,\n  disabled-trailing-icon-color: null,\n  disabled-trailing-icon-opacity: null,\n  error-active-indicator-color: null,\n  error-caret-color: null,\n  error-focus-active-indicator-color: null,\n  error-focus-caret-color: null,\n  error-focus-input-text-color: null,\n  error-focus-label-text-color: null,\n  error-focus-leading-icon-color: null,\n  error-focus-supporting-text-color: null,\n  error-focus-trailing-icon-color: null,\n  error-hover-active-indicator-color: null,\n  error-hover-caret-color: null,\n  error-hover-input-text-color: null,\n  error-hover-label-text-color: null,\n  error-hover-leading-icon-color: null,\n  error-hover-state-layer-color: null,\n  error-hover-state-layer-opacity: null,\n  error-hover-supporting-text-color: null,\n  error-hover-trailing-icon-color: null,\n  error-input-text-color: null,\n  error-label-text-color: null,\n  error-leading-icon-color: null,\n  error-supporting-text-color: null,\n  error-trailing-icon-color: null,\n  focus-active-indicator-color: null,\n  focus-active-indicator-height: null,\n  focus-caret-color: null,\n  focus-input-text-color: null,\n  focus-label-text-color: null,\n  focus-leading-icon-color: null,\n  focus-supporting-text-color: null,\n  focus-trailing-icon-color: null,\n  hover-active-indicator-color: null,\n  hover-active-indicator-height: null,\n  hover-caret-color: null,\n  hover-input-text-color: null,\n  hover-label-text-color: null,\n  hover-leading-icon-color: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  hover-supporting-text-color: null,\n  hover-trailing-icon-color: null,\n  input-text-color: null,\n  input-text-font: null,\n  input-text-line-height: null,\n  input-text-placeholder-color: null,\n  input-text-prefix-color: null,\n  input-text-size: null,\n  input-text-suffix-color: null,\n  input-text-tracking: null,\n  input-text-type: null,\n  input-text-weight: null,\n  label-text-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-populated-line-height: null,\n  label-text-populated-size: null,\n  label-text-size: null,\n  label-text-tracking: null,\n  label-text-type: null,\n  label-text-weight: null,\n  leading-icon-color: null,\n  leading-icon-size: null,\n  supporting-text-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-tracking: null,\n  supporting-text-weight: null,\n  trailing-icon-color: null,\n  trailing-icon-size: null,\n);\n\n@mixin theme($theme) {\n  $theme: validate.theme($light-theme, $theme);\n\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme-styles($light-theme, $theme, false);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include text-field-theme.theme-styles($theme, $resolvers: $resolvers);\n\n  &:not(.mdc-text-field--textarea) {\n    @if map.get($theme, container-height) {\n      @include mixins.height(map.get($theme, container-height));\n    }\n  }\n  @if map.get($theme, container-shape) {\n    @include mixins.shape-radius(map.get($theme, container-shape));\n  }\n\n  @include _container-color(\n    (\n      default: map.get($theme, container-color),\n      disabled: map.get($theme, disabled-container-color),\n    )\n  );\n  @include _active-indicator-color(\n    (\n      default: map.get($theme, active-indicator-color),\n      hover: map.get($theme, hover-active-indicator-color),\n      focus: map.get($theme, focus-active-indicator-color),\n      disabled: map.get($theme, disabled-active-indicator-color),\n    )\n  );\n  @include _error-active-indicator-color(\n    (\n      default: map.get($theme, error-active-indicator-color),\n      hover: map.get($theme, error-hover-active-indicator-color),\n      focus: map.get($theme, error-focus-active-indicator-color),\n    )\n  );\n  @include _active-indicator-height(map.get($theme, active-indicator-height));\n  @include _focus-active-indicator-height(\n    map.get($theme, focus-active-indicator-height)\n  );\n  @include _hover-state-layer(\n    (\n      error-hover-state-layer-color:\n        map.get($theme, error-hover-state-layer-color),\n      error-hover-state-layer-opacity:\n        map.get($theme, error-hover-state-layer-opacity),\n      hover-state-layer-color: map.get($theme, hover-state-layer-color),\n      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),\n    )\n  );\n}\n\n@mixin _container-color($colors) {\n  @include text-field-theme.if-enabled {\n    @include _set-container-color(map.get($colors, default));\n  }\n\n  @include text-field-theme.if-disabled {\n    @include _set-container-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-container-color($color) {\n  @include theme.property(background-color, $color);\n}\n\n@mixin _active-indicator-color($colors) {\n  @include text-field-theme.if-enabled {\n    @include _set-active-indicator-color(map.get($colors, default));\n\n    @include text-field-theme.if-hovered {\n      @include _set-active-indicator-color(map.get($colors, hover));\n    }\n\n    @include _focused-line-ripple-color(map.get($colors, focus));\n  }\n\n  @include text-field-theme.if-disabled {\n    @include _set-active-indicator-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-active-indicator-color($color) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.inactive-color($color);\n  }\n}\n\n@mixin _focused-line-ripple-color($color) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.active-color($color);\n  }\n}\n\n@mixin _error-active-indicator-color($colors) {\n  &.mdc-text-field--invalid {\n    @include _active-indicator-color($colors);\n  }\n}\n\n@mixin _active-indicator-height($height) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.height($height);\n  }\n}\n\n@mixin _focus-active-indicator-height($height) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.active-height($height);\n  }\n}\n\n@mixin _hover-state-layer($colors) {\n  @include ripple-theme.theme-styles(\n    (\n      hover-state-layer-color: map.get($colors, hover-state-layer-color),\n      hover-state-layer-opacity: map.get($colors, hover-state-layer-opacity),\n    ),\n    $ripple-target: '.mdc-text-field__ripple'\n  );\n\n  &.mdc-text-field--invalid {\n    @include ripple-theme.theme-styles(\n      (\n        hover-state-layer-color: map.get($colors, error-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($colors, error-hover-state-layer-opacity),\n      ),\n      $ripple-target: '.mdc-text-field__ripple'\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-textfield/_mixins.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-*;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/typography\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/typography\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis, mdc-get-global-variable-, mdc-set-styles-, mdc-get-letter-spacing-;\n@forward \"@material/floating-label\" as mdc-floating-label-*;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"@material/notched-outline\" as mdc-notched-outline-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"./icon\" as mdc-text-field-*;\n@forward \"./index\" as mdc-text-field-*;\n@forward \"./helper-text\" as mdc-text-field-*;\n@forward \"./character-counter\" as mdc-text-field-*;\n@forward \"@material/line-ripple\" as mdc-line-ripple-*;\n"
  },
  {
    "path": "packages/mdc-textfield/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import `_text-field.scss` instead.\n@forward './text-field' show core-styles, without-ripple, ripple, density,\n  outlined-density, outlined-with-leading-icon-density, filled-textarea-density,\n  outlined-textarea-density, textarea-min-rows, height, outlined-height,\n  outlined-with-leading-icon-height, shape-radius, textarea-shape-radius,\n  ink-color, disabled-ink-color, placeholder-color, disabled-placeholder-color,\n  fill-color, disabled-fill-color, bottom-line-color, disabled-bottom-line-color,\n  hover-bottom-line-color, line-ripple-color, label-color, disabled-label-color,\n  outline-color, hover-outline-color, focused-outline-color,\n  disabled-outline-color, caret-color, prefix-color, disabled-prefix-color,\n  suffix-color, disabled-suffix-color, outline-shape-radius,\n  floating-label-float-transition, input-font-size, input-font-family,\n  floating-label_, filled-no-label, outlined_, disabled_, invalid_, focused_,\n  with-leading-icon_, outlined-with-leading-icon_, textarea_, end-aligned_,\n  ink-color_, placeholder-color_, fill-color_, bottom-line-color_,\n  hover-bottom-line-color_, line-ripple-color_, hover-outline-color_,\n  focused-outline-color_, label-ink-color_, placeholder-selector_, if-enabled_,\n  if-disabled_;\n"
  },
  {
    "path": "packages/mdc-textfield/_outlined-text-field-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:map';\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/validate';\n@use '@material/tokens/resolvers';\n@use './text-field-theme';\n@use './mixins';\n@use './variables';\n\n$custom-property-prefix: 'outlined-text-field';\n\n$light-theme: (\n  caret-color: null,\n  container-height: null,\n  container-shape: null,\n  disabled-input-text-color: null,\n  disabled-input-text-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  disabled-leading-icon-color: null,\n  disabled-leading-icon-opacity: null,\n  disabled-outline-color: null,\n  disabled-outline-opacity: null,\n  disabled-outline-width: null,\n  disabled-supporting-text-color: null,\n  disabled-supporting-text-opacity: null,\n  disabled-trailing-icon-color: null,\n  disabled-trailing-icon-opacity: null,\n  error-caret-color: null,\n  error-focus-caret-color: null,\n  error-focus-input-text-color: null,\n  error-focus-label-text-color: null,\n  error-focus-leading-icon-color: null,\n  error-focus-outline-color: null,\n  error-focus-supporting-text-color: null,\n  error-focus-trailing-icon-color: null,\n  error-hover-caret-color: null,\n  error-hover-input-text-color: null,\n  error-hover-label-text-color: null,\n  error-hover-leading-icon-color: null,\n  error-hover-outline-color: null,\n  error-hover-supporting-text-color: null,\n  error-hover-trailing-icon-color: null,\n  error-input-text-color: null,\n  error-label-text-color: null,\n  error-leading-icon-color: null,\n  error-outline-color: null,\n  error-supporting-text-color: null,\n  error-trailing-icon-color: null,\n  focus-caret-color: null,\n  focus-input-text-color: null,\n  focus-label-text-color: null,\n  focus-leading-icon-color: null,\n  focus-outline-color: null,\n  focus-outline-width: null,\n  focus-supporting-text-color: null,\n  focus-trailing-icon-color: null,\n  hover-caret-color: null,\n  hover-input-text-color: null,\n  hover-label-text-color: null,\n  hover-leading-icon-color: null,\n  hover-outline-color: null,\n  hover-outline-width: null,\n  hover-supporting-text-color: null,\n  hover-trailing-icon-color: null,\n  input-text-color: null,\n  input-text-font: null,\n  input-text-line-height: null,\n  input-text-placeholder-color: null,\n  input-text-prefix-color: null,\n  input-text-size: null,\n  input-text-suffix-color: null,\n  input-text-tracking: null,\n  input-text-type: null,\n  input-text-weight: null,\n  label-text-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-populated-line-height: null,\n  label-text-populated-size: null,\n  label-text-size: null,\n  label-text-tracking: null,\n  label-text-type: null,\n  label-text-weight: null,\n  leading-icon-color: null,\n  leading-icon-size: null,\n  outline-color: null,\n  outline-width: null,\n  supporting-text-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-tracking: null,\n  supporting-text-type: null,\n  supporting-text-weight: null,\n  trailing-icon-color: null,\n  trailing-icon-size: null,\n);\n\n@mixin theme($theme) {\n  $theme: validate.theme($light-theme, $theme);\n\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  $theme: validate.theme-styles($light-theme, $theme, false);\n\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include text-field-theme.theme-styles($theme, $resolvers: $resolvers);\n\n  &:not(.mdc-text-field--textarea) {\n    $container-height: map.get($theme, container-height);\n    $label-font-size: if(\n      map.has-key($theme, label-text-size),\n      map.get($theme, label-text-size),\n      undefined\n    );\n\n    @if $container-height {\n      $container-height-value: if(\n        custom-properties.is-custom-prop($container-height),\n        custom-properties.get-declaration-value($container-height),\n        $container-height\n      );\n      $keyframe-suffix: if(\n        custom-properties.is-custom-prop($container-height),\n        'text-field-outlined-#{custom-properties.get-fallback($container-height)}',\n        'text-field-outlined-#{$container-height}'\n      );\n      $label-font-size-value: if(\n        custom-properties.is-custom-prop($label-font-size),\n        custom-properties.get-declaration-value($label-font-size),\n        $label-font-size\n      );\n\n      @include mixins.outlined-height(\n        $container-height-value,\n        $keyframe-suffix,\n        $label-font-size-value\n      );\n\n      &.mdc-text-field--with-leading-icon {\n        $with-leading-icon-keyframe-suffix: if(\n          custom-properties.is-custom-prop($container-height),\n          'text-field-outlined-with-leading-icon-#{custom-properties.get-fallback($container-height)}',\n          'text-field-outlined-with-leading-icon-#{$container-height}'\n        );\n        @include mixins.outlined-with-leading-icon-height(\n          $container-height-value,\n          $with-leading-icon-keyframe-suffix,\n          $label-font-size-value\n        );\n      }\n    }\n  }\n\n  @if map.get($theme, label-text-size) {\n    &.mdc-text-field--textarea.mdc-text-field--outlined {\n      @include notched-outline-mixins.floating-label-float-font-size(\n        $font-size: map.get($theme, label-text-size)\n      );\n    }\n  }\n\n  @if map.get($theme, container-shape) {\n    @include mixins.outline-shape-radius(map.get($theme, container-shape));\n  }\n\n  @include _outline-color(\n    (\n      default: map.get($theme, outline-color),\n      hover: map.get($theme, hover-outline-color),\n      focus: map.get($theme, focus-outline-color),\n      disabled: map.get($theme, disabled-outline-color),\n    )\n  );\n  @include _error-outline-color(\n    (\n      default: map.get($theme, error-outline-color),\n      hover: map.get($theme, error-hover-outline-color),\n      focus: map.get($theme, error-focus-outline-color),\n    )\n  );\n  @include _outline-width(\n    (\n      default: map.get($theme, outline-width),\n      hover: map.get($theme, hover-outline-width),\n      focus: map.get($theme, focus-outline-width),\n    )\n  );\n}\n\n@mixin _outline-color($colors) {\n  @include text-field-theme.if-enabled {\n    @include _set-outline-color(map.get($colors, default));\n\n    @include text-field-theme.if-hovered {\n      .mdc-notched-outline {\n        @include _set-outline-color(map.get($colors, hover));\n      }\n    }\n\n    @include text-field-theme.if-focused {\n      @include _set-outline-color(map.get($colors, focus));\n    }\n  }\n\n  @include text-field-theme.if-disabled {\n    @include _set-outline-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-outline-color($color) {\n  @include notched-outline-mixins.color($color);\n}\n\n@mixin _error-outline-color($color) {\n  &.mdc-text-field--invalid {\n    @include _outline-color($color);\n  }\n}\n\n@mixin _outline-width($width) {\n  @include text-field-theme.if-enabled {\n    @include _set-outline-width(map.get($width, default));\n\n    @include text-field-theme.if-hovered {\n      @include _set-outline-width(map.get($width, hover));\n    }\n\n    @include text-field-theme.if-focused {\n      @include _set-outline-width(map.get($width, focus));\n    }\n  }\n}\n\n@mixin _set-outline-width($width) {\n  .mdc-notched-outline {\n    @include notched-outline-mixins.stroke-width($width);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/_text-field-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:map';\n@use '@material/tokens/resolvers';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n\n@use './text-field';\n\n$light-theme: (\n  active-indicator-color: null,\n  active-indicator-height: null,\n  caret-color: null,\n  container-color: null,\n  container-height: null,\n  container-shape: null,\n  disabled-active-indicator-color: null,\n  disabled-active-indicator-height: null,\n  disabled-active-indicator-opacity: null,\n  disabled-container-color: null,\n  disabled-container-opacity: null,\n  disabled-input-text-color: null,\n  disabled-input-text-opacity: null,\n  disabled-label-text-color: null,\n  disabled-label-text-opacity: null,\n  disabled-leading-icon-color: null,\n  disabled-leading-icon-opacity: null,\n  disabled-outline-color: null,\n  disabled-outline-opacity: null,\n  disabled-outline-width: null,\n  disabled-supporting-text-color: null,\n  disabled-supporting-text-opacity: null,\n  disabled-trailing-icon-color: null,\n  disabled-trailing-icon-opacity: null,\n  error-active-indicator-color: null,\n  // Token key `error-caret-color` not available on DSDB.\n  error-caret-color: null,\n  error-focus-active-indicator-color: null,\n  error-focus-caret-color: null,\n  error-focus-input-text-color: null,\n  error-focus-label-text-color: null,\n  error-focus-leading-icon-color: null,\n  error-focus-outline-color: null,\n  error-focus-supporting-text-color: null,\n  error-focus-trailing-icon-color: null,\n  error-hover-active-indicator-color: null,\n  // Token key `error-hover-caret-color` not available on DSDB.\n  error-hover-caret-color: null,\n  error-hover-input-text-color: null,\n  error-hover-label-text-color: null,\n  error-hover-leading-icon-color: null,\n  error-hover-outline-color: null,\n  error-hover-state-layer-color: null,\n  error-hover-state-layer-opacity: null,\n  error-hover-supporting-text-color: null,\n  error-hover-trailing-icon-color: null,\n  error-input-text-color: null,\n  error-label-text-color: null,\n  error-leading-icon-color: null,\n  error-outline-color: null,\n  error-supporting-text-color: null,\n  error-trailing-icon-color: null,\n  focus-active-indicator-color: null,\n  focus-active-indicator-height: null,\n  // Token key `focus-caret-color` not available on DSDB.\n  focus-caret-color: null,\n  focus-input-text-color: null,\n  focus-label-text-color: null,\n  focus-leading-icon-color: null,\n  focus-outline-color: null,\n  focus-outline-width: null,\n  focus-supporting-text-color: null,\n  focus-trailing-icon-color: null,\n  hover-active-indicator-color: null,\n  hover-active-indicator-height: null,\n  // Token key `hover-caret-color` not available on DSDB.\n  hover-caret-color: null,\n  hover-input-text-color: null,\n  hover-label-text-color: null,\n  hover-leading-icon-color: null,\n  hover-outline-color: null,\n  hover-outline-width: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  hover-supporting-text-color: null,\n  hover-trailing-icon-color: null,\n  input-text-color: null,\n  input-text-font: null,\n  input-text-line-height: null,\n  input-text-placeholder-color: null,\n  input-text-prefix-color: null,\n  input-text-size: null,\n  input-text-suffix-color: null,\n  input-text-tracking: null,\n  input-text-type: null,\n  input-text-weight: null,\n  label-text-color: null,\n  label-text-font: null,\n  label-text-line-height: null,\n  label-text-populated-line-height: null,\n  label-text-populated-size: null,\n  label-text-size: null,\n  label-text-tracking: null,\n  label-text-type: null,\n  label-text-weight: null,\n  leading-icon-color: null,\n  leading-icon-size: null,\n  outline-color: null,\n  outline-width: null,\n  supporting-text-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-tracking: null,\n  supporting-text-type: null,\n  supporting-text-weight: null,\n  trailing-icon-color: null,\n  trailing-icon-size: null,\n);\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n\n  // TODO(b/261633818): Remove support for extraneous `*-caret-color` tokens.\n  @include _caret-color(\n    (\n      default: map.get($theme, caret-color),\n      hover: map.get($theme, hover-caret-color),\n      focus: map.get($theme, focus-caret-color),\n    )\n  );\n  @include _error-caret-color(\n    (\n      default: map.get($theme, error-caret-color),\n      hover: map.get($theme, error-hover-caret-color),\n      focus: map.get($theme, error-focus-caret-color),\n    )\n  );\n  @include _input-text-color(\n    (\n      default: map.get($theme, input-text-color),\n      hover: map.get($theme, hover-input-text-color),\n      focus: map.get($theme, focus-input-text-color),\n      disabled: map.get($theme, disabled-input-text-color),\n    )\n  );\n  @include _error-input-text-color(\n    (\n      default: map.get($theme, error-input-text-color),\n      hover: map.get($theme, error-hover-input-text-color),\n      focus: map.get($theme, error-focus-input-text-color),\n    )\n  );\n  @include _label-text-color(\n    (\n      default: map.get($theme, label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      disabled: map.get($theme, disabled-label-text-color),\n    )\n  );\n  @include _error-label-text-color(\n    (\n      default: map.get($theme, error-label-text-color),\n      hover: map.get($theme, error-hover-label-text-color),\n      focus: map.get($theme, error-focus-label-text-color),\n    )\n  );\n  @include _leading-icon-color(\n    (\n      default: map.get($theme, leading-icon-color),\n      hover: map.get($theme, hover-leading-icon-color),\n      focus: map.get($theme, focus-leading-icon-color),\n      disabled: map.get($theme, disabled-leading-icon-color),\n    )\n  );\n  @include _error-leading-icon-color(\n    (\n      default: map.get($theme, error-leading-icon-color),\n      hover: map.get($theme, error-hover-leading-icon-color),\n      focus: map.get($theme, error-focus-leading-icon-color),\n    )\n  );\n  @include _trailing-icon-color(\n    (\n      default: map.get($theme, trailing-icon-color),\n      hover: map.get($theme, hover-trailing-icon-color),\n      focus: map.get($theme, focus-trailing-icon-color),\n      disabled: map.get($theme, disabled-trailing-icon-color),\n    )\n  );\n  @include _error-trailing-icon-color(\n    (\n      default: map.get($theme, error-trailing-icon-color),\n      hover: map.get($theme, error-hover-trailing-icon-color),\n      focus: map.get($theme, error-focus-trailing-icon-color),\n    )\n  );\n  @include _supporting-text-color(\n    (\n      default: map.get($theme, supporting-text-color),\n      hover: map.get($theme, hover-supporting-text-color),\n      focus: map.get($theme, focus-supporting-text-color),\n      disabled: map.get($theme, disabled-supporting-text-color),\n    )\n  );\n  @include _error-supporting-text-color(\n    (\n      default: map.get($theme, error-supporting-text-color),\n      hover: map.get($theme, error-hover-supporting-text-color),\n      focus: map.get($theme, error-focus-supporting-text-color),\n    )\n  );\n  @include _input-text-typography(\n    (\n      font: map.get($theme, input-text-font),\n      line-height: map.get($theme, input-text-line-height),\n      size: map.get($theme, input-text-size),\n      tracking: map.get($theme, input-text-tracking),\n      weight: map.get($theme, input-text-weight),\n    )\n  );\n  @include _label-text-typography(\n    (\n      font: map.get($theme, label-text-font),\n      line-height: map.get($theme, label-text-line-height),\n      size: map.get($theme, label-text-size),\n      tracking: map.get($theme, label-text-tracking),\n      weight: map.get($theme, label-text-weight),\n    )\n  );\n  @include _label-text-populated-typography(\n    (\n      line-height: map.get($theme, label-text-populated-line-height),\n      size: map.get($theme, label-text-populated-size),\n    )\n  );\n  @include _supporting-text-typography(\n    (\n      font: map.get($theme, supporting-text-font),\n      line-height: map.get($theme, supporting-text-line-height),\n      size: map.get($theme, supporting-text-size),\n      tracking: map.get($theme, supporting-text-tracking),\n      weight: map.get($theme, supporting-text-weight),\n    )\n  );\n  @include text-field.placeholder-color(\n    map.get($theme, input-text-placeholder-color)\n  );\n}\n\n@mixin _caret-color($colors) {\n  @include if-enabled {\n    @include _set-caret-color(map.get($colors, default));\n\n    @include if-hovered {\n      @include _set-caret-color(map.get($colors, hover));\n    }\n\n    @include if-focused {\n      @include _set-caret-color(map.get($colors, focus));\n    }\n  }\n}\n\n@mixin _set-caret-color($color) {\n  .mdc-text-field__input {\n    @include theme.property(caret-color, $color);\n  }\n}\n\n@mixin _error-caret-color($colors) {\n  &.mdc-text-field--invalid {\n    @include _caret-color($colors);\n  }\n}\n\n@mixin _input-text-color($colors) {\n  @include if-enabled {\n    @include _set-input-text-color(map.get($colors, default));\n\n    @include if-hovered {\n      @include _set-input-text-color(map.get($colors, hover));\n    }\n\n    @include if-focused {\n      @include _set-input-text-color(map.get($colors, focus));\n    }\n  }\n\n  @include if-disabled {\n    @include _set-input-text-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-input-text-color($color) {\n  @if $color {\n    .mdc-text-field__input {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _error-input-text-color($color) {\n  &.mdc-text-field--invalid {\n    @include _input-text-color($color);\n  }\n}\n\n@mixin _label-text-color($colors) {\n  @include if-enabled {\n    @include _set-label-text-color(map.get($colors, default));\n\n    @include if-focused {\n      @include _set-label-text-color(map.get($colors, focus));\n    }\n\n    @include if-hovered {\n      @include _set-label-text-color(map.get($colors, hover));\n    }\n  }\n\n  @include if-disabled {\n    @include _set-label-text-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-label-text-color($color) {\n  .mdc-floating-label,\n  .mdc-floating-label--float-above {\n    @include floating-label-mixins.ink-color($color);\n  }\n}\n\n@mixin _error-label-text-color($color) {\n  &.mdc-text-field--invalid {\n    @include _label-text-color($color);\n  }\n}\n\n@mixin _leading-icon-color($colors) {\n  @include if-enabled {\n    @include _set-leading-icon-color(map.get($colors, default));\n\n    @include if-hovered {\n      @include _set-leading-icon-color(map.get($colors, hover));\n    }\n\n    @include if-focused {\n      @include _set-leading-icon-color(map.get($colors, focus));\n    }\n  }\n\n  @include if-disabled {\n    @include _set-leading-icon-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-leading-icon-color($color) {\n  .mdc-text-field__icon--leading {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _error-leading-icon-color($color) {\n  &.mdc-text-field--invalid {\n    @include _leading-icon-color($color);\n  }\n}\n\n@mixin _trailing-icon-color($colors) {\n  @include if-enabled {\n    @include _set-trailing-icon-color(map.get($colors, default));\n\n    @include if-hovered {\n      @include _set-trailing-icon-color(map.get($colors, hover));\n    }\n\n    @include if-focused {\n      @include _set-trailing-icon-color(map.get($colors, focus));\n    }\n  }\n\n  @include if-disabled {\n    @include _set-trailing-icon-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _set-trailing-icon-color($color) {\n  .mdc-text-field__icon--trailing {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _error-trailing-icon-color($color) {\n  &.mdc-text-field--invalid {\n    @include _trailing-icon-color($color);\n  }\n}\n\n@mixin _supporting-text-color($colors) {\n  @include if-enabled {\n    @include _set-supporting-text-color(map.get($colors, default));\n\n    @include if-hovered {\n      @include _set-supporting-text-color(map.get($colors, hover));\n    }\n\n    @include if-focused {\n      @include _set-supporting-text-color(map.get($colors, focus));\n    }\n  }\n\n  @include if-disabled {\n    @include _set-supporting-text-color(map.get($colors, disabled));\n  }\n}\n\n@mixin _error-supporting-text-color($color) {\n  &.mdc-text-field--invalid {\n    @include _supporting-text-color($color);\n  }\n}\n\n@mixin _set-supporting-text-color($color) {\n  & + .mdc-text-field-helper-line .mdc-text-field-helper-text,\n  & + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n    @include theme.property(color, $color);\n  }\n}\n\n@mixin _input-text-typography($typography-theme) {\n  .mdc-text-field__input {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _label-text-typography($typography-theme) {\n  .mdc-floating-label {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _label-text-populated-typography($typography-theme) {\n  .mdc-floating-label--float-above {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n@mixin _supporting-text-typography($typography-theme) {\n  & + .mdc-text-field-helper-line .mdc-text-field-helper-text,\n  & + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n    @include typography.theme-styles($typography-theme);\n  }\n}\n\n/// Selector for hovered state\n@mixin if-hovered {\n  &:not(.mdc-text-field--focused):hover {\n    @content;\n  }\n}\n\n/// Selector for focused state\n@mixin if-focused {\n  &.mdc-text-field--focused {\n    @content;\n  }\n}\n\n/// Selector for enabled state\n@mixin if-enabled {\n  &:not(.mdc-text-field--disabled) {\n    @content;\n  }\n}\n\n/// Selector for disabled state\n@mixin if-disabled {\n  &.mdc-text-field--disabled {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/_text-field.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:map';\n@use '@material/animation/animation';\n@use '@material/theme/css';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/dom';\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/line-ripple/mixins' as line-ripple-mixins;\n@use '@material/notched-outline/mixins' as notched-outline-mixins;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use 'helper-text/mixins' as helper-text-mixins;\n@use 'character-counter/mixins' as character-counter-mixins;\n@use 'icon/mixins' as icon-mixins;\n@use 'icon/variables' as icon-variables;\n@use './variables';\n@use '@material/rtl/rtl';\n\n$_density-config: map.merge(\n  variables.$density-config,\n  (\n    minimum: math.min(variables.$minimum-height, 36px),\n  )\n);\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include ripple($query);\n  @include static-styles($query);\n  @include helper-text-mixins.helper-text-core-styles($query);\n  @include character-counter-mixins.character-counter-core-styles($query);\n  @include icon-mixins.icon-core-styles($query);\n}\n\n/// @deprecated Use static-styles() instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n  @include static-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Baseline\n  // postcss-bem-linter: define text-field\n  .mdc-text-field {\n    @include _base($query);\n  }\n\n  .mdc-text-field__input {\n    @include _input($query);\n\n    @include placeholder-selector_ {\n      @include _input-placeholder($query);\n    }\n\n    // Always show placeholder for text fields that has no\n    // label and show only on focused state when label is present.\n    .mdc-text-field--no-label &,\n    .mdc-text-field--focused & {\n      @include placeholder-selector_ {\n        @include _input-placeholder-visible($query);\n      }\n    }\n  }\n\n  .mdc-text-field__affix {\n    @include _affix($query: $query);\n\n    .mdc-text-field--label-floating &,\n    .mdc-text-field--no-label & {\n      @include _affix-visible($query: $query);\n    }\n\n    // Safari only\n    @supports (-webkit-hyphens: none) {\n      .mdc-text-field--outlined & {\n        @include _centered-affix-safari-support($query: $query);\n      }\n    }\n  }\n\n  .mdc-text-field__affix--prefix {\n    @include _prefix($query: $query);\n\n    .mdc-text-field--end-aligned & {\n      @include _prefix-end-aligned($query: $query);\n    }\n  }\n\n  .mdc-text-field__affix--suffix {\n    @include _suffix($query: $query);\n\n    .mdc-text-field--end-aligned & {\n      @include _suffix-end-aligned($query: $query);\n    }\n  }\n\n  // Variants\n\n  .mdc-text-field--filled {\n    @include _filled($query);\n\n    &.mdc-text-field--no-label {\n      @include filled-no-label($query);\n    }\n  }\n\n  .mdc-text-field--outlined {\n    @include outlined_($query);\n\n    .mdc-notched-outline {\n      @include _outlined-notched-outline($query);\n    }\n  }\n\n  // Other Variations\n\n  .mdc-text-field--textarea {\n    @include textarea_($query);\n\n    .mdc-text-field__input {\n      @include _textarea-input($query);\n    }\n\n    &.mdc-text-field--filled {\n      @include _textarea-filled($query);\n\n      .mdc-text-field__input {\n        @include _textarea-filled-input($query);\n      }\n\n      &.mdc-text-field--no-label {\n        .mdc-text-field__input {\n          @include _textarea-filled-no-label-input($query);\n        }\n      }\n    }\n\n    &.mdc-text-field--outlined {\n      @include _textarea-outlined($query);\n\n      .mdc-text-field__input {\n        @include _textarea-outlined-input($query);\n      }\n\n      .mdc-floating-label {\n        @include _textarea-outlined-floating-label($query);\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        @include _textarea-input-with-internal-counter($query);\n      }\n\n      .mdc-text-field-character-counter {\n        @include _textarea-internal-counter($query);\n      }\n    }\n  }\n\n  // Resizer element does not need to be under mdc-text-field--textarea, that\n  // just adds specificity\n  .mdc-text-field__resizer {\n    @include _textarea-resizer($query);\n\n    .mdc-text-field--filled & {\n      @include _textarea-filled-resizer($query);\n\n      .mdc-text-field__input,\n      .mdc-text-field-character-counter {\n        @include _textarea-filled-resizer-children($query);\n      }\n    }\n\n    .mdc-text-field--outlined & {\n      @include _textarea-outlined-resizer($query);\n\n      .mdc-text-field__input,\n      .mdc-text-field-character-counter {\n        @include _textarea-outlined-resizer-children($query);\n      }\n    }\n  }\n\n  .mdc-text-field--with-leading-icon {\n    @include _padding-horizontal-with-leading-icon($query);\n\n    &.mdc-text-field--filled {\n      @include with-leading-icon_($query);\n    }\n\n    &.mdc-text-field--outlined {\n      @include outlined-with-leading-icon_($query);\n    }\n  }\n\n  .mdc-text-field--with-trailing-icon {\n    @include _padding-horizontal-with-trailing-icon($query);\n\n    &.mdc-text-field--filled {\n      @include _with-trailing-icon($query);\n    }\n\n    &.mdc-text-field--outlined {\n      @include _outlined-with-trailing-icon($query);\n    }\n  }\n\n  .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n    @include _padding-horizontal-with-both-icons($query);\n\n    &.mdc-text-field--filled {\n      @include _with-leading-and-trailing-icon($query);\n    }\n  }\n\n  // postcss-bem-linter: define text-field-helper-text\n  .mdc-text-field-helper-line {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      justify-content: space-between;\n      box-sizing: border-box;\n    }\n\n    .mdc-text-field + & {\n      @include feature-targeting.targets($feat-structure) {\n        padding-right: variables.$helper-line-padding;\n        padding-left: variables.$helper-line-padding;\n      }\n    }\n  }\n  // postcss-bem-linter: end\n\n  // mdc-form-field tweaks to align text field label correctly\n  // stylelint-disable selector-max-type --\n  // TODO: document why this disable is neccessary\n  .mdc-form-field > .mdc-text-field + label {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-start;\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  // States\n  .mdc-text-field--focused {\n    @include focused_($query);\n\n    &.mdc-text-field--outlined {\n      @include _focused-outlined($query);\n\n      &.mdc-text-field--textarea {\n        @include _focused-outlined-textarea($query);\n      }\n    }\n  }\n\n  .mdc-text-field--invalid {\n    @include invalid_($query);\n  }\n\n  .mdc-text-field--disabled {\n    @include disabled_($query);\n\n    &.mdc-text-field--filled {\n      @include _disabled-filled($query);\n    }\n\n    .mdc-text-field__input {\n      @include _disabled-input($query);\n    }\n  }\n\n  .mdc-text-field--end-aligned {\n    @include end-aligned_($query);\n  }\n\n  .mdc-text-field--ltr-text {\n    @include _ltr-text($query);\n\n    &.mdc-text-field--end-aligned {\n      @include _ltr-text-end-aligned($query);\n    }\n  }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other text field styles. It is recommended that most users use `mdc-text-field-core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  .mdc-text-field--filled {\n    @include ripple.surface(\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n    @include ripple.radius-bounded(\n      $query: $query,\n      $ripple-target: variables.$ripple-target\n    );\n  }\n\n  #{variables.$ripple-target} {\n    @include ripple.target-common($query: $query);\n  }\n}\n\n///\n/// Sets density scale for default text field variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled textfields at which to allow floating labels.\n///\n@mixin density(\n  $density-scale,\n  $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height(\n    $height,\n    $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n    $query: $query\n  );\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $label-font-size - Font-size for the textfield's floating label. If the label size is being customized, it is necessary to specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info. Defaults to 1rem.\n///\n@mixin outlined-density(\n  $density-scale,\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-height(\n    $height,\n    $label-font-size: $label-font-size,\n    $query: $query\n  );\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for outlined text field with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $label-font-size - Font-size for the textfield's floating label. It is necessary tto specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info.\n///\n@mixin outlined-with-leading-icon-density(\n  $density-scale,\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include outlined-with-leading-icon-height(\n    $height,\n    $label-font-size: $label-font-size,\n    $query: $query\n  );\n  // TODO(b/151839219): resize icons and adjust label position\n  // @if $density-scale < 0 {\n  //   @include icon-mixins.size(icon-variables.$dense-icon-size);\n  // }\n}\n\n///\n/// Sets density scale for filled textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin filled-textarea-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $textfield-height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n  $no-label-margin-top: density-functions.prop-value(\n    $density-config: variables.$textarea-filled-no-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-top,\n  );\n  $no-label-margin-bottom: density-functions.prop-value(\n    $density-config: variables.$textarea-filled-no-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-bottom,\n  );\n\n  // Textarea mixins require two modifier classes since two are used internally\n  // for styles (textarea and filled). An extra class is added for the public\n  // mixin so that only a single public class is needed for specificity.\n  &.mdc-text-field--filled {\n    .mdc-text-field__resizer {\n      @include feature-targeting.targets($feat-structure) {\n        min-height: $textfield-height;\n      }\n    }\n\n    @if $density-scale >= -1 {\n      $keyframe-suffix: text-field-filled-#{$density-scale};\n      $label-top: density-functions.prop-value(\n        $density-config: variables.$textarea-filled-label-density-config,\n        $density-scale: math.div($density-scale, 2),\n        $property-name: top,\n      );\n\n      // Adjust the floating position and animation/keyframes of the floating\n      // label by the new position of the resting label\n      $label-top-difference: variables.$textarea-outlined-label-top -\n        $label-top;\n\n      // Floating label position\n      @include floating-label-mixins.float-position(\n        variables.$textarea-filled-label-position-y - $label-top-difference,\n        $query: $query\n      );\n\n      // Floating label animation\n      @include floating-label-mixins.shake-animation(\n        $keyframe-suffix,\n        $query: $query\n      );\n      @at-root {\n        @include floating-label-mixins.shake-keyframes(\n          $keyframe-suffix,\n          variables.$textarea-filled-label-position-y - $label-top-difference,\n          0%,\n          $query: $query\n        );\n      }\n\n      // Resting label position\n      .mdc-floating-label {\n        @include feature-targeting.targets($feat-structure) {\n          top: $label-top;\n        }\n      }\n\n      $margin-bottom: density-functions.prop-value(\n        $density-config: variables.$textarea-filled-density-config,\n        $density-scale: $density-scale,\n        $property-name: margin-bottom,\n      );\n\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-bottom: $margin-bottom;\n        }\n      }\n    } @else {\n      // The textarea is too dense to show a floating label\n      .mdc-floating-label {\n        @include feature-targeting.targets($feat-structure) {\n          display: none;\n        }\n      }\n\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-top: $no-label-margin-top;\n          margin-bottom: $no-label-margin-bottom;\n        }\n      }\n    }\n\n    &.mdc-text-field--no-label {\n      .mdc-text-field__input {\n        @include feature-targeting.targets($feat-structure) {\n          margin-top: $no-label-margin-top;\n          margin-bottom: $no-label-margin-bottom;\n        }\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        // Space between textarea and internal counter should not be affected\n        @include _textarea-input-with-internal-counter($query);\n      }\n    }\n  }\n}\n\n///\n/// Sets density scale for outlined textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n///     `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-textarea-density(\n  $density-scale,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $keyframe-suffix: text-field-outlined-#{$density-scale};\n  $label-top: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-label-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: top,\n  );\n  $textfield-height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n  $margin-top: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-top,\n  );\n  $margin-bottom: density-functions.prop-value(\n    $density-config: variables.$textarea-outlined-density-config,\n    $density-scale: math.div($density-scale, 2),\n    $property-name: margin-bottom,\n  );\n\n  // Textarea mixins require two modifier classes since two are used internally\n  // for styles (textarea and outlined). An extra class is added for the public\n  // mixin so that only a single public class is needed for specificity.\n  &.mdc-text-field--outlined {\n    // Adjust the floating position and animation/keyframes of the floating\n    // label by the new position of the resting label\n    $label-top-difference: variables.$textarea-outlined-label-top - $label-top;\n\n    // Floating label position\n    @include notched-outline-mixins.floating-label-float-position-absolute(\n      variables.$textarea-outlined-label-position-y - $label-top-difference,\n      $query: $query\n    );\n\n    // Floating label animation\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n    @at-root {\n      @include floating-label-mixins.shake-keyframes(\n        $keyframe-suffix,\n        variables.$textarea-outlined-label-position-y - $label-top-difference,\n        0%,\n        $query: $query\n      );\n    }\n\n    // Resting label position\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        top: $label-top;\n      }\n    }\n\n    .mdc-text-field__resizer {\n      @include feature-targeting.targets($feat-structure) {\n        min-height: $textfield-height;\n      }\n    }\n\n    .mdc-text-field__input {\n      @include feature-targeting.targets($feat-structure) {\n        margin-top: $margin-top;\n        margin-bottom: $margin-bottom;\n      }\n    }\n\n    &.mdc-text-field--with-internal-counter {\n      .mdc-text-field__input {\n        // Space between textarea and internal counter should not be affected\n        @include _textarea-input-with-internal-counter($query);\n      }\n    }\n  }\n}\n\n///\n/// Sets the minimum number of rows for a textarea a textarea may be resized to.\n///\n/// For IE11 this mixin can be used instead of the rows attribute.\n///\n/// @param {Number} $rows - The minimum number of rows for a textarea.\n/// @param {Number} $line-height - The line-height of the textarea.\n///\n@mixin textarea-min-rows(\n  $rows,\n  $line-height: variables.$textarea-line-height,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      min-height: $rows * $line-height;\n    }\n  }\n}\n\n///\n/// Sets height of default text field variant.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n///     filled textfields at which to allow floating labels.\n/// @access public\n///\n@mixin height(\n  $height,\n  $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(height, $height);\n  }\n\n  // We can only hide the label (when there's not enough vertical space for it)\n  // if we know the container height at compilation time.\n  // That's not the case when $height is a custom property.\n  @if not custom-properties.is-custom-prop($height) {\n    @if $height < $minimum-height-for-filled-label {\n      @include filled-no-label($query: $query);\n    }\n  }\n}\n\n///\n/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @param {Number} label-font-size - font size for the floating label. Defaults to 1rem.\n/// @access public\n///\n@mixin outlined-height(\n  $height,\n  $keyframe-suffix: text-field-outlined-#{$height},\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $positionY: variables.get-outlined-label-position-y($height);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    $positionY,\n    $font-size: $label-font-size,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    $keyframe-suffix,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix,\n      $positionY,\n      $query: $query\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n///\n/// Sets height of outlined text field with leading icon variant.\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n///     floating label keyframes\n/// @param {Number} $label-font-size - Font-size for the textfield's floating label. It is necessary tto specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info.\n/// @access public\n///\n@mixin outlined-with-leading-icon-height(\n  $height,\n  $keyframe-suffix: null,\n  $label-font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // This extra specificity is needed because textfield applies the below mixin\n  // already to two selectors (outlined + with-leading-icon). To override\n  // them with a new label position and animation, another selector is needed.\n  &.mdc-text-field--outlined {\n    @include _outlined-with-leading-icon-floating-label-position-animation(\n      $height,\n      $keyframe-suffix,\n      $label-font-size,\n      $query\n    );\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    height: $height;\n  }\n}\n\n// Mixin that sets the floating label position and animations for a given height.\n// This mixin is separate to allow outlined-with-leading-icon-height() to\n// provide greater specificity over the default mixin that adds styles for\n// outlined with leading icons.\n@mixin _outlined-with-leading-icon-floating-label-position-animation(\n  $height,\n  $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height},\n  $font-size: 1rem,\n  $query: feature-targeting.all()\n) {\n  $positionY: variables.get-outlined-label-position-y($height);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    $positionY,\n    variables.$outlined-with-leading-icon-label-position-x,\n    $font-size: $font-size,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    $keyframe-suffix,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix,\n      $positionY,\n      variables.$outlined-with-leading-icon-label-position-x,\n      $query: $query\n    );\n  }\n\n  $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n  @include rtl.rtl {\n    @include floating-label-mixins.shake-animation(\n      $keyframe-suffix,\n      $query: $query\n    );\n  }\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      $keyframe-suffix-rtl,\n      $positionY,\n      -(variables.$outlined-with-leading-icon-label-position-x),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets shape radius of default text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of default text field variant. Required only when `$radius` is in\n///     percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin shape-radius(\n  $radius,\n  $density-scale: variables.$density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @if (meta.type-of($radius) == 'list') and\n    (list.length($radius) > 2) and\n    (list.nth($radius, 3) != 0 or list.nth($radius, 4) != 0)\n  {\n    @error \"mdc-textfield: Invalid radius #{$radius}. Only top-left and top-right corners may be customized.\";\n  }\n\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  $masked-radius: shape-functions.mask-radius($radius, 1 1 0 0);\n\n  $fallback: if(\n    custom-properties.is-custom-prop($radius),\n    custom-properties.get-fallback($radius),\n    null\n  );\n\n  @if meta.type-of($fallback) == 'list' {\n    $fallback: css.unpack-value($fallback);\n    $first: list.nth($masked-radius, 1);\n    $second: list.nth($masked-radius, 2);\n    $third: list.nth($masked-radius, 3);\n    $fourth: list.nth($masked-radius, 4);\n    $masked-radius: (\n      if(\n        custom-properties.is-custom-prop($first),\n        custom-properties.set-fallback($first, list.nth($fallback, 1)),\n        $first\n      ),\n      if(\n        custom-properties.is-custom-prop($second),\n        custom-properties.set-fallback($second, list.nth($fallback, 2)),\n        $second\n      ),\n      if(\n        custom-properties.is-custom-prop($third),\n        custom-properties.set-fallback($third, list.nth($fallback, 3)),\n        $third\n      ),\n      if(\n        custom-properties.is-custom-prop($fourth),\n        custom-properties.set-fallback($fourth, list.nth($fallback, 4)),\n        $fourth\n      )\n    );\n  }\n\n  @include shape-mixins.radius(\n    $masked-radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n}\n\n@mixin textarea-shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  @include notched-outline-mixins.shape-radius(\n    $radius,\n    $rtl-reflexive,\n    $query: $query\n  );\n}\n\n///\n/// Customizes the color of the text entered into an enabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the entered text in a disabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the placeholder in an enabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin placeholder-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include placeholder-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the placeholder in a disabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin disabled-placeholder-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include placeholder-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the background color of the text field or textarea when enabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include fill-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the background color of the text field or textarea when disabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin disabled-fill-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include fill-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the disabled text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin disabled-bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the hover text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin hover-bottom-line-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include hover-bottom-line-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the default line ripple of the text field.\n/// @param {Color} $color - The desired line ripple color.\n///\n@mixin line-ripple-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include line-ripple-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text color of the label in an enabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin label-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include label-ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the text color of the label in a disabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin disabled-label-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include label-ink-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the border color of the outlined text field or textarea.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is hovered.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin hover-outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include hover-outline-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is focused.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin focused-outline-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include focused-outline-color_($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is disabled.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin disabled-outline-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the caret color of the text field or textarea.\n/// @param {Color} $color - The desired caret color.\n///\n@mixin caret-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(caret-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the color of the prefix text for an enabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin prefix-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include _prefix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the prefix text for a disabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin disabled-prefix-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include _prefix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the suffix text for an enabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin suffix-color($color, $query: feature-targeting.all()) {\n  @include if-enabled_ {\n    @include _suffix-color($color, $query: $query);\n  }\n}\n\n///\n/// Customizes the color of the suffix text for a disabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin disabled-suffix-color($color, $query: feature-targeting.all()) {\n  @include if-disabled_ {\n    @include _suffix-color($color, $query: $query);\n  }\n}\n\n///\n/// Sets shape radius of outlined text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of outlined text field variant. Required only when `$radius` is in\n///     percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin outline-shape-radius(\n  $radius,\n  $density-scale: variables.$density-scale,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $height: density-functions.prop-value(\n    $density-config: $_density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  .mdc-notched-outline {\n    @include notched-outline-mixins.shape-radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $height\n  );\n  $unpacked-radius: shape-functions.unpack-radius($resolved-radius);\n  $top-left-radius: list.nth($unpacked-radius, 1);\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n  $top-right-radius: list.nth($unpacked-radius, 2);\n  $top-right-is-custom-prop: custom-properties.is-custom-prop(\n    $top-right-radius\n  );\n\n  @if (\n    $top-left-is-custom-prop or\n      $top-right-is-custom-prop or\n      $top-left-radius-px >\n      notched-outline-variables.$leading-width\n  ) {\n    // The horizontal padding only needs to be overriden from the base padding\n    // if the radius is a custom property, or if the top-left radius is a value\n    // that is large than that default notched outline's leading width.\n    @include _outline-shape-radius-horizontal-padding(\n      $top-left-radius,\n      $top-right-radius,\n      $query: $query\n    );\n\n    + .mdc-text-field-helper-line {\n      @include _outline-shape-radius-horizontal-padding(\n        $top-left-radius,\n        $top-right-radius,\n        $query: $query\n      );\n    }\n\n    // Ensure that leading/trailing icon padding is overriden. Even if the\n    // top left/right isn't a custom property or the leading isn't larger, we\n    // still need to override. The above left/right padding rules have more\n    // specificty than the original leading/trailing icon rules, so we need to\n    // re-apply them.\n    // Additionally, if the top left/right radii _are_ custom properties, we\n    // should use those instead.\n\n    &.mdc-text-field--with-leading-icon {\n      @if ($top-right-is-custom-prop) {\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          padding-left: 0;\n        }\n        @include _apply-outline-shape-padding(\n          padding-right,\n          $top-right-radius,\n          $query: $query\n        );\n\n        @include rtl.rtl {\n          @include _apply-outline-shape-padding(\n            padding-left,\n            $top-right-radius,\n            $query: $query\n          );\n          @include feature-targeting.targets($feat-structure) {\n            @include rtl.ignore-next-line();\n            padding-right: 0;\n          }\n        }\n      } @else {\n        @include _padding-horizontal-with-leading-icon($query);\n      }\n    }\n\n    &.mdc-text-field--with-trailing-icon {\n      @if (\n        $top-left-is-custom-prop or\n          $top-left-radius-px >\n          notched-outline-variables.$leading-width\n      ) {\n        @include _apply-outline-shape-padding(\n          padding-left,\n          $top-left-radius,\n          $add-label-padding: true,\n          $query: $query\n        );\n        @include feature-targeting.targets($feat-structure) {\n          @include rtl.ignore-next-line();\n          padding-right: 0;\n        }\n\n        @include rtl.rtl {\n          @include feature-targeting.targets($feat-structure) {\n            @include rtl.ignore-next-line();\n            padding-left: 0;\n          }\n          @include _apply-outline-shape-padding(\n            padding-right,\n            $top-left-radius,\n            $add-label-padding: true,\n            $query: $query\n          );\n        }\n      } @else {\n        @include _padding-horizontal-with-trailing-icon($query);\n      }\n    }\n\n    &.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n      @include _padding-horizontal-with-both-icons($query);\n    }\n  }\n}\n\n@mixin _outline-shape-radius-horizontal-padding(\n  $top-left-radius,\n  $top-right-radius,\n  $query: feature-targeting.all()\n) {\n  @include _apply-outline-shape-padding(\n    padding-left,\n    $top-left-radius,\n    $add-label-padding: true,\n    $query: $query\n  );\n  @include _apply-outline-shape-padding(\n    padding-right,\n    $top-right-radius,\n    $query: $query\n  );\n\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n  $top-right-is-custom-prop: custom-properties.is-custom-prop(\n    $top-right-radius\n  );\n  $top-right-radius-px: $top-right-radius;\n  @if ($top-right-is-custom-prop) {\n    $top-right-radius-px: custom-properties.get-fallback($top-right-radius);\n  }\n\n  @if (\n    (\n        $top-left-is-custom-prop and\n          $top-right-is-custom-prop and not\n          custom-properties.are-equal($top-left-radius, $top-right-radius)\n      ) or\n      $top-left-radius-px !=\n      $top-right-radius-px\n  ) {\n    // Normally base horizontal padding doesn't need RTL, but if the values\n    // are different or they are two different custom properties, they need to\n    // be reversed.\n    @include rtl.rtl {\n      @include _apply-outline-shape-padding(\n        padding-right,\n        $top-left-radius,\n        $add-label-padding: true,\n        $query: $query\n      );\n      @include _apply-outline-shape-padding(\n        padding-left,\n        $top-right-radius,\n        $query: $query\n      );\n    }\n  }\n}\n\n@mixin _apply-outline-shape-padding(\n  $property,\n  $padding,\n  $add-label-padding: false,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $padding-is-custom-prop: custom-properties.is-custom-prop($padding);\n  $padding-px: $padding;\n  @if ($padding-is-custom-prop) {\n    $padding-px: custom-properties.get-fallback($padding);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    // The shape should only change the padding if the radius becomes greater\n    // than the default padding. That means we need to add more padding.\n    @if ($padding-px > variables.$padding-horizontal) {\n      // Set a px value if it's greater. This is either the only value (if\n      // we're given an exact value), or an IE11 fallback if we're given a\n      // custom property and the fallback value is greater than the padding.\n      $value: $padding-px;\n      @if ($add-label-padding) {\n        // If this is for the top-left leading, add the notched outline padding\n        // to keep it aligned with the label\n        $value: $padding-px + notched-outline-variables.$padding;\n      }\n\n      @include rtl.ignore-next-line();\n      #{$property}: $value;\n      @if ($padding-is-custom-prop) {\n        // Add an alternate GSS tag b/c this was an IE11 fallback and we're\n        // going to add another property with the var() value\n        /* @alternate */\n      }\n    }\n    @if ($padding-is-custom-prop) {\n      // If it's a custom property, always add it since the value may change\n      // to be greater than the padding at runtime, even if the fallback is\n      // not currently greater than the default padding.\n      $value: custom-properties.create-var($padding);\n      @if ($add-label-padding) {\n        $value: calc(#{$value} + #{notched-outline-variables.$padding});\n      }\n\n      // Interpolation is a workaround for sass/sass#3259.\n      @supports (top: max(#{0%})) {\n        // A max() function makes this runtime dynamic. The padding will be\n        // whichever is greater: the default horizontal padding, or the calculated\n        // custom property plus extra padding.\n        @include rtl.ignore-next-line();\n        #{$property}: max(#{variables.$padding-horizontal}, #{$value});\n      }\n    }\n  }\n}\n\n///\n/// Sets the CSS transition for the floating label's 'float' animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin floating-label-float-transition(\n  $duration-ms,\n  $timing-function: null,\n  $query: feature-targeting.all()\n) {\n  .mdc-floating-label {\n    @include floating-label-mixins.float-transition(\n      $duration-ms,\n      $timing-function,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets custom font size of the input.\n///\n/// @param {number} $font-size - Overrides the font size.\n///\n@mixin input-font-size($font-size, $query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  .mdc-text-field__input,\n  .mdc-text-field__affix--suffix,\n  .mdc-text-field__affix--prefix {\n    @include feature-targeting.targets($feat-typography) {\n      font-size: $font-size;\n    }\n  }\n}\n\n///\n/// Sets custom font family of the input.\n///\n/// @param {String} $font-family - Selected font family.\n///\n@mixin input-font-family($font-family, $query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-typography) {\n      font-family: $font-family;\n    }\n  }\n}\n\n// Private mixins\n\n// Base shared styles\n@mixin _base($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Shape\n  @include shape-radius(variables.$shape-radius, $query: $query);\n\n  // Colors\n  @include label-color(variables.$label, $query: $query);\n  @include ink-color(variables.$ink-color, $query: $query);\n  @include placeholder-color(variables.$placeholder-ink-color, $query: $query);\n  @include caret-color(primary, $query: $query);\n  @include helper-text-mixins.helper-text-color(\n    variables.$helper-text-color,\n    $query: $query\n  );\n  @include character-counter-mixins.character-counter-color(\n    variables.$helper-text-color,\n    $query: $query\n  );\n  @include icon-mixins.leading-icon-color(\n    variables.$icon-color,\n    $query: $query\n  );\n  @include icon-mixins.trailing-icon-color(\n    variables.$icon-color,\n    $query: $query\n  );\n  @include prefix-color(variables.$affix-color, $query: $query);\n  @include suffix-color(variables.$affix-color, $query: $query);\n\n  // Floating Label\n  @include floating-label_($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    // display and align-items are necessary to make the text field participate\n    // in baseline alignment, even though some variants are 'centered'. Those\n    // variants should use the _baseline-center-aligned() mixin\n    display: inline-flex;\n    align-items: baseline;\n    padding: 0 variables.$padding-horizontal;\n    position: relative;\n    box-sizing: border-box;\n    overflow: hidden;\n    /* @alternate */\n    will-change: opacity, transform, color;\n  }\n}\n\n// This mixin adds styles to visually center the text within the text field.\n// Sibling text will align to the baseline and appear centered next to the\n// text field.\n@mixin _baseline-center-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // In order for a flexbox container to participate in baseline alignment,\n    // it follows these rules to determine where its baseline is:\n    // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n    //\n    // In order to avoid leading icons 'controlling' the baseline (since they\n    // are the first child), flexbox will generate a baseline from any child\n    // flex items that participate in baseline alignment.\n    //\n    // Icons are set to \"align-self: center\", while all other children are\n    // aligned to baseline. The next problem is deciding which child is\n    // used to determine the baseline.\n    //\n    // According to spec, the item with the largest distance between its\n    // baseline and the edge of the cross axis is placed flush with that edge,\n    // making it the baseline of the container.\n    // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n    //\n    // For the filled variant, the pseudo ::before strut is the 'largest'\n    // child since the input has a height of 28px and the strut is 40px. We\n    // can emulate center alignment and force the baseline to use the input\n    // text by making the input the full height of the container and removing\n    // the baseline strut.\n\n    // IE11 does not respect this, and makes the leading icon (if present) the\n    // baseline. This is a gap with IE11 that we have accepted.\n    .mdc-text-field__input {\n      height: 100%;\n    }\n  }\n}\n\n@mixin _padding-horizontal-with-leading-icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(padding, 0, variables.$padding-horizontal);\n  }\n}\n\n@mixin _padding-horizontal-with-trailing-icon($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(padding, variables.$padding-horizontal, 0);\n  }\n}\n\n@mixin _padding-horizontal-with-both-icons($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    padding-left: 0;\n    @include rtl.ignore-next-line();\n    padding-right: 0;\n  }\n}\n\n@mixin floating-label_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n  }\n}\n\n// Filled\n\n@mixin _filled($query: feature-targeting.all()) {\n  // Text Field intentionally omits press ripple, so each state needs to be specified individually.\n  @include ripple-theme.states-base-color(\n    variables.$ink-color,\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include ripple-theme.states-hover-opacity(\n    ripple-theme.states-opacity(variables.$ink-color, hover),\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include ripple-theme.states-focus-opacity(\n    ripple-theme.states-opacity(variables.$ink-color, focus),\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n\n  @include height(variables.$height, $query: $query);\n  @include typography.baseline-top(\n    variables.$filled-baseline-top,\n    $query: $query\n  );\n  @include fill-color(variables.$background, $query: $query);\n  @include bottom-line-color(variables.$bottom-line-idle, $query: $query);\n  @include hover-bottom-line-color(\n    variables.$bottom-line-hover,\n    $query: $query\n  );\n  @include line-ripple-color_(primary, $query: $query);\n  @include _filled-floating-label($query);\n}\n\n@mixin _filled-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, variables.$label-offset);\n    }\n  }\n\n  @include floating-label-mixins.float-position(\n    variables.$label-position-y,\n    $query: $query\n  );\n}\n\n// Filled variant with no label. This variant centers the text elements and\n// hides the label and is used with there is explicitly no label provided or\n// when the height of the text field is too small for a label to be allowed.\n@mixin filled-no-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _baseline-center-aligned($query);\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-floating-label {\n      display: none;\n    }\n\n    &::before {\n      // Remove baseline-top strut\n      display: none;\n    }\n  }\n\n  // Safari only\n  @supports (-webkit-hyphens: none) {\n    .mdc-text-field__affix {\n      @include _centered-affix-safari-support($query: $query);\n    }\n  }\n}\n\n// Outlined\n\n@mixin outlined_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include outlined-height(\n    $height: variables.$height,\n    $keyframe-suffix: text-field-outlined,\n    $query: $query\n  );\n  @include _baseline-center-aligned($query: $query);\n  @include outline-color(variables.$outlined-idle-border, $query: $query);\n  @include hover-outline-color(\n    variables.$outlined-hover-border,\n    $query: $query\n  );\n  @include focused-outline-color(primary, $query: $query);\n  @include outline-shape-radius(variables.$shape-radius, $query: $query);\n  @include notched-outline-mixins.notch-offset(\n    notched-outline-variables.$border-width,\n    $query: $query\n  );\n  @include ripple-theme.states-base-color(\n    transparent,\n    $query: $query,\n    $ripple-target: variables.$ripple-target\n  );\n  @include _outlined-floating-label($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    overflow: visible;\n  }\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      // TODO(b/154349735): Investigate the neccessity of these styles\n      display: flex;\n      // stylelint-disable-next-line declaration-no-important --\n      // FF adds unwanted border in HC mode on windows.\n      border: none !important;\n      background-color: transparent;\n    }\n  }\n}\n\n@mixin _outlined-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, notched-outline-variables.$padding);\n    }\n  }\n}\n\n@mixin _outlined-notched-outline($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // Force the outline to appear \"above\" the textfield elements, even though\n    // it is absolutely positioned and comes before the input in the DOM. This\n    // is primarily for the textarea scrollbar and resize elements, which may\n    // clip with with outline border.\n    z-index: 1;\n  }\n}\n\n// States\n\n@mixin disabled_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ink-color_(variables.$disabled-ink-color, $query: $query);\n  @include placeholder-color_(\n    variables.$disabled-placeholder-ink-color,\n    $query: $query\n  );\n  @include label-ink-color_(variables.$disabled-label-color, $query: $query);\n  @include helper-text-mixins.helper-text-color_(\n    variables.$disabled-helper-text-color,\n    $query: $query\n  );\n  @include character-counter-mixins.character-counter-color_(\n    variables.$disabled-helper-text-color,\n    $query: $query\n  );\n  @include icon-mixins.leading-icon-color_(\n    variables.$disabled-icon,\n    $query: $query\n  );\n  @include icon-mixins.trailing-icon-color_(\n    variables.$disabled-icon,\n    $query: $query\n  );\n  @include _prefix-color(variables.$disabled-affix-color, $query: $query);\n  @include _suffix-color(variables.$disabled-affix-color, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include bottom-line-color_(variables.$disabled-border, $query: $query);\n  @include notched-outline-mixins.color(\n    variables.$outlined-disabled-border,\n    $query: $query\n  );\n\n  @include dom.forced-colors-mode {\n    @include placeholder-color_(GrayText, $query: $query);\n    @include label-ink-color_(GrayText, $query: $query);\n    @include helper-text-mixins.helper-text-color_(GrayText, $query: $query);\n    @include character-counter-mixins.character-counter-color_(\n      GrayText,\n      $query: $query\n    );\n    @include icon-mixins.leading-icon-color_(GrayText, $query: $query);\n    @include icon-mixins.trailing-icon-color_(GrayText, $query: $query);\n    @include _prefix-color(GrayText, $query: $query);\n    @include _suffix-color(GrayText, $query: $query);\n\n    // Mixins that are ok to include since they target variant-specific elements\n    @include bottom-line-color_(GrayText, $query: $query);\n    @include notched-outline-mixins.color(GrayText, $query: $query);\n  }\n\n  @include dom.forced-colors-mode($exclude-ie11: true) {\n    .mdc-text-field__input {\n      @include feature-targeting.targets($feat-structure) {\n        background-color: Window;\n      }\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        z-index: 1;\n      }\n    }\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    pointer-events: none;\n  }\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: default;\n    }\n  }\n}\n\n@mixin _disabled-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // disabled inputs should still allow users to interact with them to select\n    // text and scroll for textareas\n    pointer-events: auto;\n  }\n}\n\n@mixin _disabled-filled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include fill-color_(variables.$disabled-background, $query: $query);\n\n  #{variables.$ripple-target} {\n    @include feature-targeting.targets($feat-structure) {\n      // prevent ripple from displaying on hover when some interactible\n      // elements like input and resize handles are hovered\n      display: none;\n    }\n  }\n}\n\n@mixin invalid_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include hover-bottom-line-color(variables.$error, $query: $query);\n  @include line-ripple-color(variables.$error, $query: $query);\n  @include label-color(variables.$error, $query: $query);\n  @include helper-text-mixins.helper-text-validation-color(\n    variables.$error,\n    $query: $query\n  );\n  @include caret-color(variables.$error, $query: $query);\n  @include icon-mixins.trailing-icon-color(variables.$error, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include bottom-line-color(variables.$error, $query: $query);\n  @include outline-color(variables.$error, $query: $query);\n  @include hover-outline-color(variables.$error, $query: $query);\n  @include focused-outline-color(variables.$error, $query: $query);\n\n  + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin focused_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include label-color(variables.$focused-label-color, $query: $query);\n\n  // Mixins that are ok to include since they target variant-specific elements\n  @include notched-outline-mixins.stroke-width(\n    variables.$outlined-stroke-width,\n    $query: $query\n  );\n\n  + .mdc-text-field-helper-line\n    .mdc-text-field-helper-text:not(\n      .mdc-text-field-helper-text--validation-msg\n    ) {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin _focused-outlined($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(\n    variables.$outlined-stroke-width,\n    $query: $query\n  );\n}\n\n@mixin _focused-outlined-textarea($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(0, $query: $query);\n}\n\n// Icons\n\n@mixin with-leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  $icon-padding: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($icon-padding, $query: $query);\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $icon-padding);\n    }\n  }\n\n  $truncation: $icon-padding + variables.$padding-horizontal;\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _with-trailing-icon($query: feature-targeting.all()) {\n  $truncation: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right +\n    variables.$label-offset;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($truncation, $query: $query);\n  }\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _with-leading-and-trailing-icon($query: feature-targeting.all()) {\n  $leading-icon: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n  $trailing-icon: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n  $truncation: $leading-icon + $trailing-icon;\n\n  .mdc-floating-label {\n    @include _truncate-floating-label-max-width($truncation, $query: $query);\n  }\n\n  .mdc-floating-label--float-above {\n    @include _truncate-floating-label-floated-max-width(\n      $truncation,\n      $query: $query\n    );\n  }\n}\n\n@mixin outlined-with-leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Resting label position\n  $icon-padding: icon-variables.$leading-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n  $left-spacing: $icon-padding - notched-outline-variables.$leading-width;\n\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(left, $left-spacing);\n    }\n  }\n\n  // Notch width\n  $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n  @include _truncate-notched-outline-max-width(\n    $notch-truncation,\n    $query: $query\n  );\n\n  // Floating label position and animation\n  @include _outlined-with-leading-icon-floating-label-position-animation(\n    $height: variables.$height,\n    $keyframe-suffix: text-field-outlined-leading-icon,\n    $query: $query\n  );\n}\n\n///\n/// Applied to the outlined text field with a trailing icon\n///\n@mixin _outlined-with-trailing-icon($query: feature-targeting.all()) {\n  // Resting label position\n  $icon-padding: icon-variables.$trailing-icon-padding-left +\n    icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n  // Notch width\n  $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n\n  @include _truncate-notched-outline-max-width(\n    $notch-truncation,\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the notched outline by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the notched outline max-width\n///\n@mixin _truncate-notched-outline-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  @include notched-outline-mixins.notch-max-width(\n    calc(100% - #{$truncation}),\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  @include floating-label-mixins.max-width(\n    calc(100% - #{$truncation}),\n    $query: $query\n  );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount while scaling by the given scale value\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-floated-max-width(\n  $truncation,\n  $query: feature-targeting.all()\n) {\n  $scale: floating-label-variables.$float-scale;\n  @include floating-label-mixins.max-width(\n    calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n    $query: $query\n  );\n}\n\n// Textarea\n\n@mixin textarea_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include _textarea-floating-label($query);\n\n  @include feature-targeting.targets($feat-structure) {\n    flex-direction: column;\n    align-items: center;\n    width: auto;\n    height: auto;\n    padding: 0; // see below for explanation\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: none;\n  }\n}\n\n@mixin _textarea-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-self: stretch;\n    display: inline-flex;\n    flex-direction: column;\n    flex-grow: 1;\n    max-height: 100%;\n    max-width: 100%;\n    min-height: variables.$height;\n    // 'stretch' is the preferred rule here. It will allow the textarea to grow\n    // to the min/max width of the container, but if an explicit width is set,\n    // it cannot be resized horizontally.\n    // Stretch is still a working draft. Chrome and Firefox have it implemented\n    // with 'available' prefixes. fit-content is another good target for\n    // Safari since it works in almost all use cases except when an explicit\n    // width is set (the user can make the textarea smaller than the container).\n    // None of this matters for IE11, which doesn't support resize.\n    min-width: fit-content;\n    /* @alternate */\n    min-width: -moz-available;\n    /* @alternate */\n    min-width: -webkit-fill-available;\n    overflow: hidden;\n    resize: both;\n  }\n}\n\n@mixin _textarea-filled-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Shift the resizer element up by a margin amount to make space for the\n  // resize handle. For filled elements, the resize handle directly touches\n  // the bottom line and is hard to see.\n  // Using a margin affects the width and positioning of the overall component\n  // and underlying textarea, which is why a transform is used instead.\n  $y: -1 * variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    transform: translateY($y);\n  }\n}\n\n@mixin _textarea-filled-resizer-children($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // See above. After shifting the resize wrapper element, all of its children\n  // should be shifted in the opposite direction (down) to compensate.\n  $y: variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    transform: translateY($y);\n  }\n}\n\n@mixin _textarea-outlined-resizer($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Shift the resizer element left/up by a margin amount to make space for the\n  // resize handle. For outlined elements, the resize handle directly touches\n  // the outline and is hard to see.\n  // Using a margin affects the width and positioning of the overall component\n  // and underlying textarea, which is why a transform is used instead.\n  $x: -1 * variables.$textarea-input-handle-margin;\n  $y: -1 * variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    transform: translateX($x) translateY($y);\n\n    @include rtl.rtl {\n      // Flip the horizontal shifting direction for RTL\n      @include rtl.ignore-next-line();\n      transform: translateX(-1 * $x) translateY($y);\n    }\n  }\n}\n\n@mixin _textarea-outlined-resizer-children($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // See above. After shifting the resize wrapper element, all of its children\n  // should be shifted in the opposite direction (right and down) to compensate.\n  $x: variables.$textarea-input-handle-margin;\n  $y: variables.$textarea-input-handle-margin;\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.ignore-next-line();\n    transform: translateX($x) translateY($y);\n\n    @include rtl.rtl {\n      // Flip the horizontal shifting direction for RTL\n      @include rtl.ignore-next-line();\n      transform: translateX(-1 * $x) translateY($y);\n    }\n  }\n}\n\n@mixin _textarea-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Resting label position\n  .mdc-floating-label {\n    @include feature-targeting.targets($feat-structure) {\n      top: variables.$textarea-label-top;\n    }\n\n    // Resets center aligning the floating label.\n    &:not(.mdc-floating-label--float-above) {\n      @include feature-targeting.targets($feat-structure) {\n        transform: none;\n      }\n    }\n  }\n}\n\n@mixin _textarea-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include feature-targeting.targets($feat-structure) {\n    flex-grow: 1;\n    height: auto;\n    min-height: variables.$textarea-line-height;\n    overflow-x: hidden; // https://bugzilla.mozilla.org/show_bug.cgi?id=33654\n    overflow-y: auto;\n    box-sizing: border-box;\n    resize: none;\n    // Textarea has horizontal padding instead of the container. This allows the\n    // resize handle to extend to the edge of the container.\n    padding: 0 variables.$padding-horizontal;\n  }\n\n  @include feature-targeting.targets($feat-typography) {\n    line-height: variables.$textarea-line-height;\n  }\n}\n\n@mixin _textarea-internal-counter($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include typography.baseline-bottom(\n    variables.$textarea-internal-counter-baseline-bottom,\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    align-self: flex-end;\n    // Needed since padding is on the textarea and not the container\n    padding: 0 variables.$padding-horizontal;\n\n    &::before {\n      // Remove baseline-top\n      display: none;\n    }\n  }\n}\n\n@mixin _textarea-input-with-internal-counter($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-bottom: variables.$textarea-internal-counter-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-filled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    &::before {\n      // <textarea> does not align to baseline when it does not have a value,\n      // unlike <input>, so we have to use padding to fake it instead\n      display: none;\n    }\n  }\n\n  // Floating label position\n  @include floating-label-mixins.float-position(\n    variables.$textarea-filled-label-position-y,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    textarea-filled,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      textarea-filled,\n      variables.$textarea-filled-label-position-y,\n      0%,\n      $query: $query\n    );\n  }\n}\n\n@mixin _textarea-filled-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-filled-input-margin-top;\n    margin-bottom: variables.$textarea-filled-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-filled-no-label-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-filled-no-label-input-margin-top;\n    margin-bottom: variables.$textarea-filled-no-label-input-margin-bottom;\n  }\n}\n\n@mixin _textarea-outlined($query: feature-targeting.all()) {\n  @include notched-outline-mixins.notch-offset(0, $query: $query);\n\n  // Floating label position\n  @include notched-outline-mixins.floating-label-float-position-absolute(\n    variables.$textarea-outlined-label-position-y,\n    $query: $query\n  );\n\n  // Floating label animation\n  @include floating-label-mixins.shake-animation(\n    textarea-outlined,\n    $query: $query\n  );\n  @at-root {\n    @include floating-label-mixins.shake-keyframes(\n      textarea-outlined,\n      variables.$textarea-outlined-label-position-y,\n      0%,\n      $query: $query\n    );\n  }\n}\n\n@mixin _textarea-outlined-floating-label($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    top: variables.$textarea-outlined-label-top;\n  }\n}\n\n@mixin _textarea-outlined-input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: variables.$textarea-outlined-input-margin-top;\n    margin-bottom: variables.$textarea-outlined-input-margin-bottom;\n  }\n}\n\n// Text, Prefix and Suffix\n\n// Common styles for the text of the text field, including the prefix, suffix,\n// and input.\n@mixin _text($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.\n  @include typography.typography(\n    subtitle1,\n    $exclude-props: (line-height),\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    height: variables.$input-height;\n  }\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: animation.standard(opacity, 150ms);\n  }\n}\n\n@mixin _input($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _text($query: $query);\n  @include feature-targeting.targets($feat-structure) {\n    width: 100%;\n    min-width: 0; // Fixes flex issues on Firefox\n    border: none;\n    border-radius: 0;\n    background: none;\n    appearance: none;\n    padding: 0;\n\n    // Remove built-in trailing clear icon on IE11. IE vendor prefixes cannot\n    // be combined with other vendor prefixes like the webkit one below.\n    &::-ms-clear {\n      display: none;\n    }\n\n    // Remove built-in datepicker icon on Chrome\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    // Remove red outline on firefox\n    &:invalid {\n      box-shadow: none;\n    }\n  }\n}\n\n@mixin _input-placeholder($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition: animation.standard(opacity, 67ms);\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 0;\n  }\n}\n\n@mixin _input-placeholder-visible($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-animation) {\n    transition-delay: 40ms;\n    transition-duration: 110ms;\n  }\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin _affix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include _text($query: $query);\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 0;\n    white-space: nowrap;\n  }\n}\n\n// TODO(b/155467610): Remove when Safari supports baseline alignment\n// https://github.com/material-components/material-components-web/issues/5879\n@mixin _centered-affix-safari-support($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-items: center;\n    align-self: center;\n    display: inline-flex;\n    height: 100%;\n  }\n}\n\n@mixin _affix-visible($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin _prefix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(padding, right, variables.$prefix-padding);\n  }\n}\n\n@mixin _prefix-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(\n      padding,\n      right,\n      variables.$prefix-end-aligned-padding\n    );\n  }\n}\n\n@mixin _suffix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(padding, left, variables.$suffix-padding);\n  }\n}\n\n@mixin _suffix-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-box(\n      padding,\n      left,\n      variables.$suffix-end-aligned-padding\n    );\n  }\n}\n\n// End aligned\n@mixin end-aligned_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-structure) {\n      // IE11 does not support text-align: end\n      @include rtl.ignore-next-line();\n      text-align: right;\n    }\n\n    @include rtl.rtl {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        text-align: left;\n      }\n    }\n  }\n}\n\n// Forces input, prefix, and suffix to be LTR when in an RTL environment. Other\n// elements such as labels and icons will remain RTL.\n@mixin _ltr-text($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.rtl {\n      .mdc-text-field__input,\n      .mdc-text-field__affix {\n        @include rtl.ignore-next-line();\n        direction: ltr;\n      }\n\n      .mdc-text-field__affix--prefix {\n        @include rtl.ignore-next-line();\n        padding-left: 0;\n        @include rtl.ignore-next-line();\n        padding-right: variables.$prefix-padding;\n      }\n\n      .mdc-text-field__affix--suffix {\n        @include rtl.ignore-next-line();\n        padding-left: variables.$suffix-padding;\n        @include rtl.ignore-next-line();\n        padding-right: 0;\n      }\n\n      // Need to specify an order for all elements since icons maintain their\n      // original positions. We can't just reverse the container.\n      .mdc-text-field__icon--leading {\n        order: 1;\n      }\n\n      .mdc-text-field__affix--suffix {\n        order: 2;\n      }\n\n      .mdc-text-field__input {\n        order: 3;\n      }\n\n      .mdc-text-field__affix--prefix {\n        order: 4;\n      }\n\n      .mdc-text-field__icon--trailing {\n        order: 5;\n      }\n    }\n  }\n}\n\n// Forces input, prefix, and suffix that are already forced to LTR to also be\n// end-aligned. This mixin should be used alongside the styles provided in\n// _ltr-text().\n@mixin _ltr-text-end-aligned($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.rtl {\n      .mdc-text-field__input {\n        // IE11 does not support text-align: end, so we need to duplicate\n        // the LTR end-aligned style here.\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n\n      .mdc-text-field__affix--prefix {\n        // padding-left: 0 provided by _ltr-text mixin\n        @include rtl.ignore-next-line();\n        padding-right: variables.$prefix-end-aligned-padding;\n      }\n\n      .mdc-text-field__affix--suffix {\n        @include rtl.ignore-next-line();\n        padding-left: variables.$suffix-end-aligned-padding;\n        // padding-right: 0 provided by _ltr-text mixin\n      }\n    }\n  }\n}\n\n// Customization\n\n@mixin ink-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__input {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin placeholder-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__input {\n      @include placeholder-selector_ {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin fill-color_(\n  $color,\n  $query: feature-targeting.all(),\n  $addAlternate: false\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @if ($addAlternate) {\n      /* @alternate */\n    }\n    @include theme.property(background-color, $color);\n  }\n}\n\n@mixin bottom-line-color_($color, $query: feature-targeting.all()) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.inactive-color($color, $query: $query);\n  }\n}\n\n@mixin hover-bottom-line-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &:hover .mdc-line-ripple {\n    @include line-ripple-mixins.inactive-color($color, $query: $query);\n  }\n}\n\n@mixin line-ripple-color_($color, $query: feature-targeting.all()) {\n  .mdc-line-ripple {\n    @include line-ripple-mixins.active-color($color, $query: $query);\n  }\n}\n\n@mixin hover-outline-color_($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--focused):hover {\n    .mdc-notched-outline {\n      @include notched-outline-mixins.color($color, $query: $query);\n    }\n  }\n}\n\n@mixin focused-outline-color_($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--focused {\n    @include notched-outline-mixins.color($color, $query: $query);\n  }\n}\n\n@mixin label-ink-color_($color, $query: feature-targeting.all()) {\n  .mdc-floating-label {\n    @include floating-label-mixins.ink-color($color, $query: $query);\n  }\n}\n\n@mixin _prefix-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__affix--prefix {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _suffix-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    .mdc-text-field__affix--suffix {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n// Selectors\n\n@mixin placeholder-selector_ {\n  // GSS will combine selectors with the same content, and some browsers have a\n  // CSS quirk where it drops a rule if it does not recognize one of the\n  // selectors.\n  // To avoid GSS combining the ::placeholder and :-ms-input-placeholder\n  // selectors, we wrap them in `@media all`.\n  // TODO(b/142329051)\n  @media all {\n    // ::placeholder needs to be wrapped because IE11 will drop other selectors\n    // with the same content\n    &::placeholder {\n      @content;\n    }\n  }\n\n  @media all {\n    // :-ms-input-placeholder needs to be wrapped because Firefox will drop\n    // other selectors with the same content\n    &:-ms-input-placeholder {\n      @content;\n    }\n  }\n}\n\n// State qualifiers\n\n///\n/// Helps style the text-field only when it's enabled.\n/// @access private\n///\n@mixin if-enabled_ {\n  &:not(.mdc-text-field--disabled) {\n    @content;\n  }\n}\n\n///\n/// Helps style the text-field only when it's disabled.\n/// @access private\n///\n@mixin if-disabled_ {\n  &.mdc-text-field--disabled {\n    @content;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/_variables.import.scss",
    "content": "@forward \"@material/density\" as mdc-density-* hide mdc-density-prop-value;\n@forward \"@material/floating-label\" as mdc-floating-label-* hide mdc-floating-label-core-styles, mdc-floating-label-ink-color, mdc-floating-label-fill-color, mdc-floating-label-shake-keyframes, mdc-floating-label-float-position, mdc-floating-label-shake-animation, mdc-floating-label-max-width;\n@forward \"@material/notched-outline\" as mdc-notched-outline-* hide mdc-notched-outline-core-styles, mdc-notched-outline-color, mdc-notched-outline-stroke-width, mdc-notched-outline-notch-offset, mdc-notched-outline-shape-radius, mdc-notched-outline-floating-label-float-position, mdc-notched-outline-floating-label-float-position-absolute, mdc-notched-outline-base-;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n@forward \"./index\" as mdc-text-field-* hide mdc-text-field-core-styles, mdc-text-field-without-ripple, mdc-text-field-ripple, mdc-text-field-density, mdc-text-field-outlined-density, mdc-text-field-outlined-with-leading-icon-density, mdc-text-field-height, mdc-text-field-outlined-height, mdc-text-field-outlined-with-leading-icon-height, mdc-text-field-shape-radius, mdc-text-field-textarea-shape-radius, mdc-text-field-ink-color, mdc-text-field-disabled-ink-color, mdc-text-field-placeholder-color, mdc-text-field-disabled-placeholder-color, mdc-text-field-fill-color, mdc-text-field-disabled-fill-color, mdc-text-field-bottom-line-color, mdc-text-field-disabled-bottom-line-color, mdc-text-field-hover-bottom-line-color, mdc-text-field-line-ripple-color, mdc-text-field-label-color, mdc-text-field-disabled-label-color, mdc-text-field-outline-color, mdc-text-field-hover-outline-color, mdc-text-field-focused-outline-color, mdc-text-field-disabled-outline-color, mdc-text-field-caret-color, mdc-text-field-disabled-, mdc-text-field-invalid-, mdc-text-field-focused-, mdc-text-field-dense-, mdc-text-field-required-label-asterisk-, mdc-text-field-outline-shape-radius, mdc-text-field-floating-label-, mdc-text-field-outlined-disabled-, mdc-text-field-outlined-invalid-, mdc-text-field-outlined-focused-, mdc-text-field-outlined-dense-, mdc-text-field-outlined-, mdc-text-field-hover-outline-color-, mdc-text-field-focused-outline-color-, mdc-text-field-with-leading-icon-, mdc-text-field-dense-with-leading-icon-, mdc-text-field-outlined-with-leading-icon-, mdc-text-field-outlined-dense-with-leading-icon-, mdc-text-field-with-trailing-icon-, mdc-text-field-dense-with-trailing-icon-, mdc-text-field-with-both-icons-, mdc-text-field-dense-with-both-icons-, mdc-text-field-fullwidth-, mdc-text-field-fullwidth-invalid-, mdc-text-field-textarea-disabled-, mdc-text-field-textarea-invalid-, mdc-text-field-textarea-, mdc-text-field-end-aligned-, mdc-text-field-ink-color-, mdc-text-field-placeholder-color-, mdc-text-field-fill-color-, mdc-text-field-bottom-line-color-, mdc-text-field-hover-bottom-line-color-, mdc-text-field-line-ripple-color-, mdc-text-field-label-ink-color-, mdc-text-field-if-enabled-, mdc-text-field-if-disabled-, mdc-text-field-transition;\n"
  },
  {
    "path": "packages/mdc-textfield/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:math';\n@use 'sass:color';\n@use '@material/density/variables' as density-variables;\n@use '@material/floating-label/variables' as floating-label-variables;\n@use '@material/notched-outline/variables' as notched-outline-variables;\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme-color';\n\n///\n/// Returns outlined text field floating label position for given height.\n///\n/// @todo Instead of adjusting `$positionY` with label box height that might change based on floating label font size\n///     wrap label in a child element to apply `transitionY(-50%)` to automatically offset based on box height.\n///\n@function get-outlined-label-position-y($text-field-height) {\n  $offset: math.div(notched-outline-variables.$label-box-height, 2);\n\n  // If $text-field-height is not a primitive value, but a custom property or a custom property map,\n  // we cannot compute the label Y position at compilation time.\n  // We will have to defer it to the browser, using calc().\n  @if custom-properties.is-custom-prop($text-field-height) {\n    $text-field-height: custom-properties.get-declaration-value(\n      $text-field-height\n    );\n    @return calc($offset + $text-field-height / 2); // Evaluated in the browser.\n  }\n\n  @if custom-properties.is-custom-prop-string($text-field-height) {\n    @return calc($offset + $text-field-height / 2); // Evaluated in the browser.\n  }\n\n  @return $offset + math.div($text-field-height, 2); // Evaluated statically.\n}\n\n$error: error !default;\n$disabled-border: rgba(theme-color.prop-value(on-surface), 0.06) !default;\n$disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3) !default;\n$bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42) !default;\n$label: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$ink-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n$helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n$icon-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$focused-label-color: rgba(theme-color.prop-value(primary), 0.87) !default;\n$placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$affix-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-placeholder-ink-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-helper-text-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.38\n) !default;\n$disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n\n$background: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  4%\n) !default;\n$disabled-background: color.mix(\n  theme-color.prop-value(on-surface),\n  theme-color.prop-value(surface),\n  2%\n) !default;\n$secondary-text: rgba(theme-color.prop-value(on-surface), 0.6) !default;\n\n$outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$outlined-disabled-border: rgba(\n  theme-color.prop-value(on-surface),\n  0.06\n) !default;\n$outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87) !default;\n\n$textarea-border: rgba(theme-color.prop-value(on-surface), 0.73) !default;\n$textarea-background: rgba(theme-color.prop-value(surface), 1) !default;\n$textarea-disabled-border-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.26\n) !default;\n// cannot be transparent because multiline textarea input\n// will make text unreadable\n$textarea-disabled-background: rgba(249, 249, 249, 1) !default;\n\n$ripple-target: '.mdc-text-field__ripple';\n$outlined-stroke-width: 2px !default;\n$height: 56px !default;\n$minimum-height: 36px !default;\n$minimum-height-for-filled-label: 52px !default;\n$maximum-height: $height !default;\n$padding-horizontal: 16px !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n$shape-radius: small !default;\n$label-position-y: floating-label-variables.$position-y !default;\n$label-offset: 16px !default;\n// TODO(b/154350788): Remove this variable, it's not used internally but it is\n// externally in Angular\n/// @deprecated this variable will be removed in the future.\n/// Use get-outlined-label-position-y($height) instead\n$outlined-label-position-y: get-outlined-label-position-y($height) !default;\n$outlined-with-leading-icon-label-position-x: 32px !default;\n$textarea-outlined-label-position-y: 24.75px !default; // visually ~4dp from top to baseline\n$textarea-filled-label-position-y: 10.25px !default; // visually ~20dp from top to label baseline\n$helper-line-padding: 16px !default;\n$filled-baseline-top: 40px !default;\n$input-height: 28px !default;\n$textarea-label-top: 19px !default; // visually ~32dp from top to label baseline\n$textarea-outlined-label-top: $textarea-label-top -\n  notched-outline-variables.$border-width !default;\n$textarea-line-height: 1.5rem !default; // 24dp from baseline to baseline\n$textarea-input-handle-margin: 1px !default;\n// Outlined textarea's first line should be placed at the same position as\n// outlined textfield, and should look identical if it is 1 row. Since textfield\n// is centered and font metrics vary for where the baseline is, the best way to\n// ensure textarea and textfield align is with padding. At 56px height with a\n// 24px line-height, a centered textfield has 16px of top and bottom padding.\n// Textarea should use this to position itself.\n$textarea-outlined-input-margin-top: 16px !default;\n$textarea-outlined-input-margin-bottom: 16px !default;\n$textarea-outlined-density-config: (\n  margin-top: (\n    default: $textarea-outlined-input-margin-top,\n    maximum: $textarea-outlined-input-margin-top,\n    minimum: $textarea-outlined-input-margin-top - 8,\n  ),\n  margin-bottom: (\n    default: $textarea-outlined-input-margin-bottom,\n    maximum: $textarea-outlined-input-margin-bottom,\n    minimum: $textarea-outlined-input-margin-bottom - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-outlined-label-density-config: (\n  top: (\n    default: $textarea-outlined-label-top,\n    maximum: $textarea-outlined-label-top,\n    minimum: $textarea-outlined-label-top - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-filled-input-margin-top: 23px !default; // visually ~40dp from top to baseline\n$textarea-filled-input-margin-bottom: 9px !default; // visually ~16dp from baseline to bottom\n$textarea-filled-density-config: (\n  margin-bottom: (\n    default: $textarea-filled-input-margin-bottom,\n    maximum: $textarea-filled-input-margin-bottom,\n    minimum: $textarea-filled-input-margin-bottom - 4,\n  ),\n) !default; // scale to -1 for minimum\n$textarea-filled-label-density-config: (\n  top: (\n    default: $textarea-label-top,\n    maximum: $textarea-label-top,\n    minimum: $textarea-label-top - 2,\n  ),\n) !default; // remove 1/2 of scale to -1 for minimm\n$textarea-filled-no-label-input-margin-top: 16px !default; // see above explanation for outlined textarea margin\n$textarea-filled-no-label-input-margin-bottom: 16px !default; // see above explanation for outlined textarea margin\n$textarea-filled-no-label-density-config: (\n  margin-top: (\n    default: $textarea-filled-no-label-input-margin-top,\n    maximum: $textarea-filled-no-label-input-margin-top,\n    minimum: $textarea-filled-no-label-input-margin-top - 8,\n  ),\n  margin-bottom: (\n    default: $textarea-filled-no-label-input-margin-bottom,\n    maximum: $textarea-filled-no-label-input-margin-bottom,\n    minimum: $textarea-filled-no-label-input-margin-bottom - 8,\n  ),\n) !default; // remove 1/2 of scale to -4 for minimum\n$textarea-internal-counter-input-margin-bottom: 2px !default; // visually ~20dp from baseline to counter baseline\n$textarea-internal-counter-baseline-bottom: 16px !default;\n// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.\n\n$prefix-padding: 2px !default;\n$prefix-end-aligned-padding: 12px !default;\n$suffix-padding: 12px !default;\n$suffix-end-aligned-padding: 2px !default;\n"
  },
  {
    "path": "packages/mdc-textfield/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\nimport {MDCTextFieldNativeInputElement} from './types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTextFieldAdapter extends MDCTextFieldRootAdapter,\n                                             MDCTextFieldInputAdapter,\n                                             MDCTextFieldLabelAdapter,\n                                             MDCTextFieldLineRippleAdapter,\n                                             MDCTextFieldOutlineAdapter {}\n\nexport interface MDCTextFieldRootAdapter {\n  /**\n   * Adds a class to the root Element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the root Element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * @return true if the root element contains the given class name.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Registers an event handler on the root element for a given event.\n   */\n  registerTextFieldInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event handler on the root element for a given event.\n   */\n  deregisterTextFieldInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers a validation attribute change listener on the input element.\n   * Handler accepts list of attribute names.\n   */\n  registerValidationAttributeChangeHandler(\n      handler: (attributeNames: string[]) => void): MutationObserver;\n\n  /**\n   * Disconnects a validation attribute observer on the input element.\n   */\n  deregisterValidationAttributeChangeHandler(observer: MutationObserver): void;\n}\n\nexport interface MDCTextFieldInputAdapter {\n  /**\n   * @return The native `<input>` element, or an object with the same shape.\n   * Note that this method can return null, which the foundation will handle\n   * gracefully.\n   */\n  getNativeInput(): MDCTextFieldNativeInputElement|null;\n\n  /**\n   * Sets the specified attribute to the specified value on the input element.\n   */\n  setInputAttr(attr: string, value: string): void;\n\n  /**\n   * Removes the specified attribute from the input element.\n   */\n  removeInputAttr(attr: string): void;\n\n  /**\n   * @return true if the textfield is focused. We achieve this via\n   *     `document.activeElement === this.root`.\n   */\n  isFocused(): boolean;\n\n  /**\n   * Registers an event listener on the native input element for a given event.\n   */\n  registerInputInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the native input element for a given\n   * event.\n   */\n  deregisterInputInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n}\n\nexport interface MDCTextFieldLabelAdapter {\n  /**\n   * Only implement if label exists.\n   * Shakes label if shouldShake is true.\n   */\n  shakeLabel(shouldShake: boolean): void;\n\n  /**\n   * Only implement if label exists.\n   * Floats the label above the input element if shouldFloat is true.\n   */\n  floatLabel(shouldFloat: boolean): void;\n\n  /**\n   * @return true if label element exists, false if it doesn't.\n   */\n  hasLabel(): boolean;\n\n  /**\n   * Only implement if label exists.\n   * @return width of label in pixels.\n   */\n  getLabelWidth(): number;\n\n  /**\n   * Only implement if label exists.\n   * Styles the label as required.\n   */\n  setLabelRequired(isRequired: boolean): void;\n}\n\nexport interface MDCTextFieldLineRippleAdapter {\n  /**\n   * Activates the line ripple.\n   */\n  activateLineRipple(): void;\n\n  /**\n   * Deactivates the line ripple.\n   */\n  deactivateLineRipple(): void;\n\n  /**\n   * Sets the transform origin of the line ripple.\n   */\n  setLineRippleTransformOrigin(normalizedX: number): void;\n}\n\nexport interface MDCTextFieldOutlineAdapter {\n  /**\n   * @return true if outline element exists, false if it doesn't.\n   */\n  hasOutline(): boolean;\n\n  /**\n   * Only implement if outline element exists.\n   */\n  notchOutline(labelWidth: number): void;\n\n  /**\n   * Only implement if outline element exists.\n   * Closes notch in outline element.\n   */\n  closeOutline(): void;\n}\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/README.md",
    "content": "<!--docs:\ntitle: \"Text field character counter\"\nlayout: detail\nsection: components\nexcerpt: \"Character counter displays the ratio of characters used and the total character limit\"\niconId: text_field\npath: /catalog/input-controls/text-field/character-counter/\n-->\n\n# Text field character counter\n\nCharacter counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.\n\n## Basic usage\n\n### HTML structure\n\n```html\n<div class=\"mdc-text-field-character-counter\">0 / 140</div>\n```\n\n> NOTE: Place this inside `.mdc-text-field-helper-line` for single line mdc text field which is an immediate sibling of `.mdc-text-field` and\n> place it as first element of `.mdc-text-field` for multi-line text field variant (textarea).\n\n### Styles\n\n```scss\n@use \"@material/textfield/character-counter\";\n\n@include character-counter.character-counter-core-styles;\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCTextFieldCharacterCounter} from '@material/textfield/character-counter';\n\nconst characterCounter = new MDCTextFieldCharacterCounter(document.querySelector('.mdc-text-field-character-counter'));\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-text-field-character-counter` | Mandatory.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`mdc-text-field-character-counter-color($color)` | Customizes the color of the character counter associated with an enabled text field.\n`mdc-text-field-disabled-character-counter-color($color)` | Customizes the color of the character counter associated with a disabled text field.\n`mdc-text-field-character-counter-position($xOffset, $yOffset)` | Positions the character counter element inside text field. Used only for textarea variant.\n\n## `MDCTextFieldCharacterCounter` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`foundation` | `MDCTextFieldCharacterCounterFoundation` | Returns the character counter's foundation. This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldCharacterCounterFoundation` class.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Character Counter for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### `MDCTextFieldCharacterCounterAdapter`\n\nMethod Signature | Description\n--- | ---\n`setContent(content: string) => void` | Sets the text content of character counter element.\n\n### `MDCTextFieldCharacterCounterFoundation`\n\nMethod Signature | Description\n--- | ---\n`setCounterValue(currentLength: number, maxLength: number) => void` | Sets the character counter values including characters used and total character limit.\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/_index.scss",
    "content": "@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"./index\" as mdc-text-field-*;\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/_mixins.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/theme';\n@use '@material/rtl/rtl';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n\n// Public mixins\n\n@mixin character-counter-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  // postcss-bem-linter: define text-field-character-counter\n\n  .mdc-text-field-character-counter {\n    @include typography.typography(caption, $query: $query);\n    @include typography.text-baseline($top: 16px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      // Keep flex item align to trailing side on absence of helper text.\n      @include rtl.reflexive-box(margin, left, auto);\n      @include rtl.reflexive-box(padding, left, 16px);\n\n      white-space: nowrap;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n///\n/// Customizes the color of the character counter associated with an enabled text field.\n/// @param {Color} $color - The desired character counter color.\n///\n@mixin character-counter-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include character-counter-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color of the character counter associated with a disabled text field.\n/// @param {Color} $color - The desired character counter color.\n///\n@mixin disabled-character-counter-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  &.mdc-text-field--disabled {\n    @include character-counter-color_($color, $query);\n  }\n}\n\n@mixin character-counter-position(\n  $xOffset,\n  $yOffset,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-text-field-character-counter {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-position(right, $xOffset);\n      position: absolute;\n      bottom: $yOffset;\n    }\n  }\n}\n\n// Private mixins\n\n@mixin character-counter-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Character counter is placed inside mdc-textfield element (for textarea variant) or\n  // inside helper line which is sibling to mdc-textfield.\n  .mdc-text-field-character-counter,\n  + .mdc-text-field-helper-line .mdc-text-field-character-counter {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTextFieldCharacterCounterAdapter {\n  /**\n   * Sets the text content of character counter element.\n   */\n  setContent(content: string): void;\n\n  /**\n   * Sets the max char length and char length of current value.\n   * Allows more flexible character counter text.\n   */\n  setCounterValue(currentLength: number, maxLength: number): void;\n}\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/component.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCTextFieldCharacterCounterAdapter} from './adapter';\nimport {MDCTextFieldCharacterCounterFoundation} from './foundation';\n\n/** MDC Text Field Character Counter Factory */\nexport type MDCTextFieldCharacterCounterFactory =\n    (el: HTMLElement, foundation?: MDCTextFieldCharacterCounterFoundation) =>\n        MDCTextFieldCharacterCounter;\n\n/** MDC Text Field Character Counter */\nexport class MDCTextFieldCharacterCounter extends\n    MDCComponent<MDCTextFieldCharacterCounterFoundation> {\n  static override attachTo(root: HTMLElement): MDCTextFieldCharacterCounter {\n    return new MDCTextFieldCharacterCounter(root);\n  }\n\n  // Provided for access by MDCTextField component\n  get foundationForTextField(): MDCTextFieldCharacterCounterFoundation {\n    return this.foundation;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCTextFieldCharacterCounterAdapter = {\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n      setCounterValue: () => undefined,\n    };\n    return new MDCTextFieldCharacterCounterFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/constants.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  ROOT: 'mdc-text-field-character-counter',\n};\n\nconst strings = {\n  ROOT_SELECTOR: `.${cssClasses.ROOT}`,\n};\n\nexport {strings, cssClasses};\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTextFieldCharacterCounterAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Text Field Character Counter Foundation */\nexport class MDCTextFieldCharacterCounterFoundation extends\n    MDCFoundation<MDCTextFieldCharacterCounterAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  /**\n   * See {@link MDCTextFieldCharacterCounterAdapter} for typing information on\n   * parameters and return types.\n   */\n  static override get defaultAdapter(): MDCTextFieldCharacterCounterAdapter {\n    return {\n      setContent: () => undefined,\n      setCounterValue: () => undefined,\n    };\n  }\n\n  constructor(adapter?: Partial<MDCTextFieldCharacterCounterAdapter>) {\n    super(\n        {...MDCTextFieldCharacterCounterFoundation.defaultAdapter, ...adapter});\n  }\n\n  setCounterValue(currentLength: number, maxLength: number) {\n    currentLength = Math.min(currentLength, maxLength);\n    this.adapter.setContent(`${currentLength} / ${maxLength}`);\n    this.adapter.setCounterValue(currentLength, maxLength);\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTextFieldCharacterCounterFoundation;\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {cssClasses as characterCountCssClasses, strings as characterCountStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {MDCTextFieldCharacterCounter} from '../../../mdc-textfield/character-counter/index';\n\nconst getFixture = () => {\n  return createFixture(html`\n    <div class=\"mdc-text-field-character-counter\">0/10</div>\n  `);\n};\n\ndescribe('MDCTextFieldCharacterCounter', () => {\n  it('attachTo returns an MDCTextFieldCharacterCounter instance', () => {\n    expect(\n        MDCTextFieldCharacterCounter.attachTo(getFixture()) instanceof\n        MDCTextFieldCharacterCounter)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCTextFieldCharacterCounter(root);\n    return {root, component};\n  }\n\n  it('#adapter.setContent sets the text content of the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.setContent('5 / 10');\n    expect(root.textContent).toEqual('5 / 10');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/character-counter/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {MDCTextFieldCharacterCounterFoundation} from '../../../mdc-textfield/character-counter/foundation';\n\ndescribe('MDCTextFieldCharacterCounterFoundation', () => {\n  it('exports cssClasses', () => {\n    expect(MDCTextFieldCharacterCounterFoundation.cssClasses).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect(MDCTextFieldCharacterCounterFoundation.strings).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTextFieldCharacterCounterFoundation, [\n      'setContent',\n      'setCounterValue',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCTextFieldCharacterCounterFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('istanbul code coverage', () => {\n    expect(() => new MDCTextFieldCharacterCounterFoundation).not.toThrow();\n  });\n\n  it('#setContent sets the content of the character counter element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setCounterValue(12, 20);\n    expect(mockAdapter.setContent).toHaveBeenCalledWith('12 / 20');\n  });\n\n  it('#setContent current length does not exceed character count limit', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setCounterValue(24, 20);\n    expect(mockAdapter.setContent).toHaveBeenCalledWith('20 / 20');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/component.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {applyPassive} from '@material/dom/events';\nimport * as ponyfill from '@material/dom/ponyfill';\nimport {MDCFloatingLabel, MDCFloatingLabelFactory} from '@material/floating-label/component';\nimport {MDCLineRipple, MDCLineRippleFactory} from '@material/line-ripple/component';\nimport {MDCNotchedOutline, MDCNotchedOutlineFactory} from '@material/notched-outline/component';\nimport {MDCRippleAdapter} from '@material/ripple/adapter';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\nimport {MDCRippleFoundation} from '@material/ripple/foundation';\nimport {MDCRippleCapableSurface} from '@material/ripple/types';\n\nimport {MDCTextFieldAdapter, MDCTextFieldInputAdapter, MDCTextFieldLabelAdapter, MDCTextFieldLineRippleAdapter, MDCTextFieldOutlineAdapter, MDCTextFieldRootAdapter} from './adapter';\nimport {MDCTextFieldCharacterCounter, MDCTextFieldCharacterCounterFactory} from './character-counter/component';\nimport {MDCTextFieldCharacterCounterFoundation} from './character-counter/foundation';\nimport {cssClasses, strings} from './constants';\nimport {MDCTextFieldFoundation} from './foundation';\nimport {MDCTextFieldHelperText, MDCTextFieldHelperTextFactory} from './helper-text/component';\nimport {MDCTextFieldHelperTextFoundation} from './helper-text/foundation';\nimport {MDCTextFieldIcon, MDCTextFieldIconFactory} from './icon/component';\nimport {MDCTextFieldFoundationMap} from './types';\n\n/** MDC Text Field */\nexport class MDCTextField extends\n    MDCComponent<MDCTextFieldFoundation> implements MDCRippleCapableSurface {\n  static override attachTo(root: HTMLElement): MDCTextField {\n    return new MDCTextField(root);\n  }\n\n  ripple!: MDCRipple|null;  // assigned in initialize()\n\n  // The only required sub-element.\n  private input!: HTMLInputElement;  // assigned in initialize()\n\n  // Optional sub-elements.\n  private characterCounter!: MDCTextFieldCharacterCounter|\n      null;                                          // assigned in initialize()\n  private helperText!: MDCTextFieldHelperText|null;  // assigned in initialize()\n  private label!: MDCFloatingLabel|null;             // assigned in initialize()\n  private leadingIcon!: MDCTextFieldIcon|null;       // assigned in initialize()\n  private lineRipple!: MDCLineRipple|null;           // assigned in initialize()\n  private outline!: MDCNotchedOutline|null;          // assigned in initialize()\n  private trailingIcon!: MDCTextFieldIcon|null;      // assigned in initialize()\n  private prefix!: Element|null;                     // assigned in initialize()\n  private suffix!: Element|null;                     // assigned in initialize()\n\n  override initialize(\n      rippleFactory:\n          MDCRippleFactory = (el, foundation) => new MDCRipple(el, foundation),\n      lineRippleFactory: MDCLineRippleFactory = (el) => new MDCLineRipple(el),\n      helperTextFactory: MDCTextFieldHelperTextFactory = (el) =>\n          new MDCTextFieldHelperText(el),\n      characterCounterFactory: MDCTextFieldCharacterCounterFactory = (el) =>\n          new MDCTextFieldCharacterCounter(el),\n      iconFactory: MDCTextFieldIconFactory = (el) => new MDCTextFieldIcon(el),\n      labelFactory: MDCFloatingLabelFactory = (el) => new MDCFloatingLabel(el),\n      outlineFactory:\n          MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),\n  ) {\n    this.input =\n        this.root.querySelector<HTMLInputElement>(strings.INPUT_SELECTOR)!;\n\n    const labelElement =\n        this.root.querySelector<HTMLElement>(strings.LABEL_SELECTOR);\n    this.label = labelElement ? labelFactory(labelElement) : null;\n\n    const lineRippleElement =\n        this.root.querySelector<HTMLElement>(strings.LINE_RIPPLE_SELECTOR);\n    this.lineRipple =\n        lineRippleElement ? lineRippleFactory(lineRippleElement) : null;\n\n    const outlineElement =\n        this.root.querySelector<HTMLElement>(strings.OUTLINE_SELECTOR);\n    this.outline = outlineElement ? outlineFactory(outlineElement) : null;\n\n    // Helper text\n    const helperTextStrings = MDCTextFieldHelperTextFoundation.strings;\n    const nextElementSibling = this.root.nextElementSibling;\n    const hasHelperLine =\n        (nextElementSibling &&\n         nextElementSibling.classList.contains(cssClasses.HELPER_LINE));\n    const helperTextEl = hasHelperLine && nextElementSibling &&\n        nextElementSibling.querySelector<HTMLElement>(\n            helperTextStrings.ROOT_SELECTOR);\n    this.helperText = helperTextEl ? helperTextFactory(helperTextEl) : null;\n\n    // Character counter\n    const characterCounterStrings =\n        MDCTextFieldCharacterCounterFoundation.strings;\n    let characterCounterEl = this.root.querySelector<HTMLElement>(\n        characterCounterStrings.ROOT_SELECTOR);\n    // If character counter is not found in root element search in sibling\n    // element.\n    if (!characterCounterEl && hasHelperLine && nextElementSibling) {\n      characterCounterEl = nextElementSibling.querySelector<HTMLElement>(\n          characterCounterStrings.ROOT_SELECTOR);\n    }\n    this.characterCounter =\n        characterCounterEl ? characterCounterFactory(characterCounterEl) : null;\n\n    // Leading icon\n    const leadingIconEl =\n        this.root.querySelector<HTMLElement>(strings.LEADING_ICON_SELECTOR);\n    this.leadingIcon = leadingIconEl ? iconFactory(leadingIconEl) : null;\n\n    // Trailing icon\n    const trailingIconEl =\n        this.root.querySelector<HTMLElement>(strings.TRAILING_ICON_SELECTOR);\n    this.trailingIcon = trailingIconEl ? iconFactory(trailingIconEl) : null;\n\n    // Prefix and Suffix\n    this.prefix = this.root.querySelector<HTMLElement>(strings.PREFIX_SELECTOR);\n    this.suffix = this.root.querySelector<HTMLElement>(strings.SUFFIX_SELECTOR);\n\n    this.ripple = this.createRipple(rippleFactory);\n  }\n\n  override destroy() {\n    if (this.ripple) {\n      this.ripple.destroy();\n    }\n    if (this.lineRipple) {\n      this.lineRipple.destroy();\n    }\n    if (this.helperText) {\n      this.helperText.destroy();\n    }\n    if (this.characterCounter) {\n      this.characterCounter.destroy();\n    }\n    if (this.leadingIcon) {\n      this.leadingIcon.destroy();\n    }\n    if (this.trailingIcon) {\n      this.trailingIcon.destroy();\n    }\n    if (this.label) {\n      this.label.destroy();\n    }\n    if (this.outline) {\n      this.outline.destroy();\n    }\n    super.destroy();\n  }\n\n  /**\n   * Initializes the Text Field's internal state based on the environment's\n   * state.\n   */\n  override initialSyncWithDOM() {\n    this.disabled = this.input.disabled;\n  }\n\n  get value(): string {\n    return this.foundation.getValue();\n  }\n\n  /**\n   * @param value The value to set on the input.\n   */\n  set value(value: string) {\n    this.foundation.setValue(value);\n  }\n\n  get disabled(): boolean {\n    return this.foundation.isDisabled();\n  }\n\n  /**\n   * @param disabled Sets the Text Field disabled or enabled.\n   */\n  set disabled(disabled: boolean) {\n    this.foundation.setDisabled(disabled);\n  }\n\n  get valid(): boolean {\n    return this.foundation.isValid();\n  }\n\n  /**\n   * @param valid Sets the Text Field valid or invalid.\n   */\n  set valid(valid: boolean) {\n    this.foundation.setValid(valid);\n  }\n\n  get required(): boolean {\n    return this.input.required;\n  }\n\n  /**\n   * @param required Sets the Text Field to required.\n   */\n  set required(required: boolean) {\n    this.input.required = required;\n  }\n\n  get pattern(): string {\n    return this.input.pattern;\n  }\n\n  /**\n   * @param pattern Sets the input element's validation pattern.\n   */\n  set pattern(pattern: string) {\n    this.input.pattern = pattern;\n  }\n\n  get minLength(): number {\n    return this.input.minLength;\n  }\n\n  /**\n   * @param minLength Sets the input element's minLength.\n   */\n  set minLength(minLength: number) {\n    this.input.minLength = minLength;\n  }\n\n  get maxLength(): number {\n    return this.input.maxLength;\n  }\n\n  /**\n   * @param maxLength Sets the input element's maxLength.\n   */\n  set maxLength(maxLength: number) {\n    // Chrome throws exception if maxLength is set to a value less than zero\n    if (maxLength < 0) {\n      this.input.removeAttribute('maxLength');\n    } else {\n      this.input.maxLength = maxLength;\n    }\n  }\n\n  get min(): string {\n    return this.input.min;\n  }\n\n  /**\n   * @param min Sets the input element's min.\n   */\n  set min(min: string) {\n    this.input.min = min;\n  }\n\n  get max(): string {\n    return this.input.max;\n  }\n\n  /**\n   * @param max Sets the input element's max.\n   */\n  set max(max: string) {\n    this.input.max = max;\n  }\n\n  get step(): string {\n    return this.input.step;\n  }\n\n  /**\n   * @param step Sets the input element's step.\n   */\n  set step(step: string) {\n    this.input.step = step;\n  }\n\n  /**\n   * Sets the helper text element content.\n   */\n  set helperTextContent(content: string) {\n    this.foundation.setHelperTextContent(content);\n  }\n\n  /**\n   * Sets the aria label of the leading icon.\n   */\n  set leadingIconAriaLabel(label: string) {\n    this.foundation.setLeadingIconAriaLabel(label);\n  }\n\n  /**\n   * Sets the text content of the leading icon.\n   */\n  set leadingIconContent(content: string) {\n    this.foundation.setLeadingIconContent(content);\n  }\n\n  /**\n   * Sets the aria label of the trailing icon.\n   */\n  set trailingIconAriaLabel(label: string) {\n    this.foundation.setTrailingIconAriaLabel(label);\n  }\n\n  /**\n   * Sets the text content of the trailing icon.\n   */\n  set trailingIconContent(content: string) {\n    this.foundation.setTrailingIconContent(content);\n  }\n\n  /**\n   * Enables or disables the use of native validation. Use this for custom\n   * validation.\n   * @param useNativeValidation Set this to false to ignore native input\n   *     validation.\n   */\n  set useNativeValidation(useNativeValidation: boolean) {\n    this.foundation.setUseNativeValidation(useNativeValidation);\n  }\n\n  /**\n   * Gets the text content of the prefix, or null if it does not exist.\n   */\n  get prefixText(): string|null {\n    return this.prefix ? this.prefix.textContent : null;\n  }\n\n  /**\n   * Sets the text content of the prefix, if it exists.\n   */\n  set prefixText(prefixText: string|null) {\n    if (this.prefix) {\n      this.prefix.textContent = prefixText;\n    }\n  }\n\n  /**\n   * Gets the text content of the suffix, or null if it does not exist.\n   */\n  get suffixText(): string|null {\n    return this.suffix ? this.suffix.textContent : null;\n  }\n\n  /**\n   * Sets the text content of the suffix, if it exists.\n   */\n  set suffixText(suffixText: string|null) {\n    if (this.suffix) {\n      this.suffix.textContent = suffixText;\n    }\n  }\n\n  /**\n   * Focuses the input element.\n   */\n  focus() {\n    this.input.focus();\n  }\n\n  /**\n   * Recomputes the outline SVG path for the outline element.\n   */\n  layout() {\n    const openNotch = this.foundation.shouldFloat;\n    this.foundation.notchOutline(openNotch);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTextFieldAdapter = {\n      ...this.getRootAdapterMethods(),\n      ...this.getInputAdapterMethods(),\n      ...this.getLabelAdapterMethods(),\n      ...this.getLineRippleAdapterMethods(),\n      ...this.getOutlineAdapterMethods(),\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTextFieldFoundation(adapter, this.getFoundationMap());\n  }\n\n  private getRootAdapterMethods(): MDCTextFieldRootAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      registerTextFieldInteractionHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterTextFieldInteractionHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n      registerValidationAttributeChangeHandler: (handler) => {\n        const getAttributesList =\n            (mutationsList: MutationRecord[]): string[] => {\n              return mutationsList.map((mutation) => mutation.attributeName)\n                         .filter((attributeName) => attributeName) as string[];\n            };\n        const observer = new MutationObserver((mutationsList) => {\n          handler(getAttributesList(mutationsList));\n        });\n        const config = {attributes: true};\n        observer.observe(this.input, config);\n        return observer;\n      },\n      deregisterValidationAttributeChangeHandler: (observer) => {\n        observer.disconnect();\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private getInputAdapterMethods(): MDCTextFieldInputAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      getNativeInput: () => this.input,\n      setInputAttr: (attr, value) => {\n        this.safeSetAttribute(this.input, attr, value);\n      },\n      removeInputAttr: (attr) => {\n        this.input.removeAttribute(attr);\n      },\n      isFocused: () => document.activeElement === this.input,\n      registerInputInteractionHandler: (eventType, handler) => {\n        this.input.addEventListener(eventType, handler, applyPassive());\n      },\n      deregisterInputInteractionHandler: (eventType, handler) => {\n        this.input.removeEventListener(eventType, handler, applyPassive());\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private getLabelAdapterMethods(): MDCTextFieldLabelAdapter {\n    return {\n      floatLabel: (shouldFloat) => {\n        this.label && this.label.float(shouldFloat);\n      },\n      getLabelWidth: () => this.label ? this.label.getWidth() : 0,\n      hasLabel: () => Boolean(this.label),\n      shakeLabel: (shouldShake) => {\n        this.label && this.label.shake(shouldShake);\n      },\n      setLabelRequired: (isRequired) => {\n        this.label && this.label.setRequired(isRequired);\n      },\n    };\n  }\n\n  private getLineRippleAdapterMethods(): MDCTextFieldLineRippleAdapter {\n    return {\n      activateLineRipple: () => {\n        if (this.lineRipple) {\n          this.lineRipple.activate();\n        }\n      },\n      deactivateLineRipple: () => {\n        if (this.lineRipple) {\n          this.lineRipple.deactivate();\n        }\n      },\n      setLineRippleTransformOrigin: (normalizedX) => {\n        if (this.lineRipple) {\n          this.lineRipple.setRippleCenter(normalizedX);\n        }\n      },\n    };\n  }\n\n  private getOutlineAdapterMethods(): MDCTextFieldOutlineAdapter {\n    return {\n      closeOutline: () => {\n        this.outline && this.outline.closeNotch();\n      },\n      hasOutline: () => Boolean(this.outline),\n      notchOutline: (labelWidth) => {\n        this.outline && this.outline.notch(labelWidth);\n      },\n    };\n  }\n\n  /**\n   * @return A map of all subcomponents to subfoundations.\n   */\n  private getFoundationMap(): Partial<MDCTextFieldFoundationMap> {\n    return {\n      characterCounter: this.characterCounter ?\n          this.characterCounter.foundationForTextField :\n          undefined,\n      helperText: this.helperText ? this.helperText.foundationForTextField :\n                                    undefined,\n      leadingIcon: this.leadingIcon ? this.leadingIcon.foundationForTextField :\n                                      undefined,\n      trailingIcon: this.trailingIcon ?\n          this.trailingIcon.foundationForTextField :\n          undefined,\n    };\n  }\n\n  private createRipple(rippleFactory: MDCRippleFactory): MDCRipple|null {\n    const isTextArea = this.root.classList.contains(cssClasses.TEXTAREA);\n    const isOutlined = this.root.classList.contains(cssClasses.OUTLINED);\n\n    if (isTextArea || isOutlined) {\n      return null;\n    }\n\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCRippleAdapter = {\n      ...MDCRipple.createAdapter(this),\n      isSurfaceActive: () => ponyfill.matches(this.input, ':active'),\n      registerInteractionHandler: (eventType, handler) => {\n        this.input.addEventListener(eventType, handler, applyPassive());\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.input.removeEventListener(eventType, handler, applyPassive());\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return rippleFactory(this.root, new MDCRippleFoundation(adapter));\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  ARIA_CONTROLS: 'aria-controls',\n  ARIA_DESCRIBEDBY: 'aria-describedby',\n  INPUT_SELECTOR: '.mdc-text-field__input',\n  LABEL_SELECTOR: '.mdc-floating-label',\n  LEADING_ICON_SELECTOR: '.mdc-text-field__icon--leading',\n  LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',\n  OUTLINE_SELECTOR: '.mdc-notched-outline',\n  PREFIX_SELECTOR: '.mdc-text-field__affix--prefix',\n  SUFFIX_SELECTOR: '.mdc-text-field__affix--suffix',\n  TRAILING_ICON_SELECTOR: '.mdc-text-field__icon--trailing'\n};\n\nconst cssClasses = {\n  DISABLED: 'mdc-text-field--disabled',\n  FOCUSED: 'mdc-text-field--focused',\n  HELPER_LINE: 'mdc-text-field-helper-line',\n  INVALID: 'mdc-text-field--invalid',\n  LABEL_FLOATING: 'mdc-text-field--label-floating',\n  NO_LABEL: 'mdc-text-field--no-label',\n  OUTLINED: 'mdc-text-field--outlined',\n  ROOT: 'mdc-text-field',\n  TEXTAREA: 'mdc-text-field--textarea',\n  WITH_LEADING_ICON: 'mdc-text-field--with-leading-icon',\n  WITH_TRAILING_ICON: 'mdc-text-field--with-trailing-icon',\n  WITH_INTERNAL_COUNTER: 'mdc-text-field--with-internal-counter',\n};\n\nconst numbers = {\n  LABEL_SCALE: 0.75,\n};\n\n/**\n * Whitelist based off of\n * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * under the \"Validation-related attributes\" section.\n */\nconst VALIDATION_ATTR_WHITELIST = [\n  'pattern',\n  'min',\n  'max',\n  'required',\n  'step',\n  'minlength',\n  'maxlength',\n];\n\n/**\n * Label should always float for these types as they show some UI even if value\n * is empty.\n */\nconst ALWAYS_FLOAT_TYPES = [\n  'color',\n  'date',\n  'datetime-local',\n  'month',\n  'range',\n  'time',\n  'week',\n];\n\nexport {\n  cssClasses,\n  strings,\n  numbers,\n  VALIDATION_ATTR_WHITELIST,\n  ALWAYS_FLOAT_TYPES\n};\n"
  },
  {
    "path": "packages/mdc-textfield/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCTextFieldAdapter} from './adapter';\nimport {MDCTextFieldCharacterCounterFoundation} from './character-counter/foundation';\nimport {ALWAYS_FLOAT_TYPES, cssClasses, numbers, strings, VALIDATION_ATTR_WHITELIST} from './constants';\nimport {MDCTextFieldHelperTextFoundation} from './helper-text/foundation';\nimport {MDCTextFieldIconFoundation} from './icon/foundation';\nimport {MDCTextFieldFoundationMap, MDCTextFieldNativeInputElement} from './types';\n\ntype PointerDownEventType = 'mousedown'|'touchstart';\ntype InteractionEventType = 'click'|'keydown';\n\nconst POINTERDOWN_EVENTS: PointerDownEventType[] = ['mousedown', 'touchstart'];\nconst INTERACTION_EVENTS: InteractionEventType[] = ['click', 'keydown'];\n\n/** MDC Text Field Foundation */\nexport class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  private get shouldAlwaysFloat(): boolean {\n    const type = this.getNativeInput().type;\n    return ALWAYS_FLOAT_TYPES.indexOf(type) >= 0;\n  }\n\n  get shouldFloat(): boolean {\n    return this.shouldAlwaysFloat || this.isFocused || !!this.getValue() ||\n        this.isBadInput();\n  }\n\n  get shouldShake(): boolean {\n    return !this.isFocused && !this.isValid() && !!this.getValue();\n  }\n\n  /**\n   * See {@link MDCTextFieldAdapter} for typing information on parameters and\n   * return types.\n   */\n  static override get defaultAdapter(): MDCTextFieldAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => true,\n      setInputAttr: () => undefined,\n      removeInputAttr: () => undefined,\n      registerTextFieldInteractionHandler: () => undefined,\n      deregisterTextFieldInteractionHandler: () => undefined,\n      registerInputInteractionHandler: () => undefined,\n      deregisterInputInteractionHandler: () => undefined,\n      registerValidationAttributeChangeHandler: () =>\n          new MutationObserver(() => undefined),\n      deregisterValidationAttributeChangeHandler: () => undefined,\n      getNativeInput: () => null,\n      isFocused: () => false,\n      activateLineRipple: () => undefined,\n      deactivateLineRipple: () => undefined,\n      setLineRippleTransformOrigin: () => undefined,\n      shakeLabel: () => undefined,\n      floatLabel: () => undefined,\n      setLabelRequired: () => undefined,\n      hasLabel: () => false,\n      getLabelWidth: () => 0,\n      hasOutline: () => false,\n      notchOutline: () => undefined,\n      closeOutline: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private isFocused = false;\n  private receivedUserInput = false;\n  private useNativeValidation = true;\n  private validateOnValueChange = true;\n  private valid: boolean;\n\n  private readonly inputFocusHandler: () => void;\n  private readonly inputBlurHandler: SpecificEventListener<'blur'>;\n  private readonly inputInputHandler: SpecificEventListener<'input'>;\n  private readonly setPointerXOffset:\n      SpecificEventListener<PointerDownEventType>;\n  private readonly textFieldInteractionHandler:\n      SpecificEventListener<InteractionEventType>;\n  private readonly validationAttributeChangeHandler:\n      (attributesList: string[]) => void;\n  private validationObserver!: MutationObserver;  // assigned in init()\n\n  private readonly helperText?: MDCTextFieldHelperTextFoundation;\n  private readonly characterCounter?: MDCTextFieldCharacterCounterFoundation;\n  private readonly leadingIcon?: MDCTextFieldIconFoundation;\n  private readonly trailingIcon?: MDCTextFieldIconFoundation;\n\n  /**\n   * @param adapter\n   * @param foundationMap Map from subcomponent names to their subfoundations.\n   */\n  constructor(\n      adapter?: Partial<MDCTextFieldAdapter>,\n      foundationMap: Partial<MDCTextFieldFoundationMap> = {}) {\n    super({...MDCTextFieldFoundation.defaultAdapter, ...adapter});\n\n    this.helperText = foundationMap.helperText;\n    this.characterCounter = foundationMap.characterCounter;\n    this.leadingIcon = foundationMap.leadingIcon;\n    this.trailingIcon = foundationMap.trailingIcon;\n    this.valid =\n        !this.adapter.hasClass(MDCTextFieldFoundation.cssClasses.INVALID);\n\n    this.inputFocusHandler = () => {\n      this.activateFocus();\n    };\n    this.inputBlurHandler = () => {\n      this.deactivateFocus();\n    };\n    this.inputInputHandler = () => {\n      this.handleInput();\n    };\n    this.setPointerXOffset = (event) => {\n      this.setTransformOrigin(event);\n    };\n    this.textFieldInteractionHandler = () => {\n      this.handleTextFieldInteraction();\n    };\n    this.validationAttributeChangeHandler = (attributesList) => {\n      this.handleValidationAttributeChange(attributesList);\n    };\n  }\n\n  override init() {\n    if (this.adapter.hasLabel() && this.getNativeInput().required) {\n      this.adapter.setLabelRequired(true);\n    }\n\n    if (this.adapter.isFocused()) {\n      this.inputFocusHandler();\n    } else if (this.adapter.hasLabel() && this.shouldFloat) {\n      this.notchOutline(true);\n      this.adapter.floatLabel(true);\n      this.styleFloating(true);\n    }\n\n    this.adapter.registerInputInteractionHandler(\n        'focus', this.inputFocusHandler);\n    this.adapter.registerInputInteractionHandler('blur', this.inputBlurHandler);\n    this.adapter.registerInputInteractionHandler(\n        'input', this.inputInputHandler);\n    for (const eventType of POINTERDOWN_EVENTS) {\n      this.adapter.registerInputInteractionHandler(\n          eventType, this.setPointerXOffset);\n    }\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.registerTextFieldInteractionHandler(\n          eventType, this.textFieldInteractionHandler);\n    }\n    this.validationObserver =\n        this.adapter.registerValidationAttributeChangeHandler(\n            this.validationAttributeChangeHandler);\n    this.setcharacterCounter(this.getValue().length);\n  }\n\n  override destroy() {\n    this.adapter.deregisterInputInteractionHandler(\n        'focus', this.inputFocusHandler);\n    this.adapter.deregisterInputInteractionHandler(\n        'blur', this.inputBlurHandler);\n    this.adapter.deregisterInputInteractionHandler(\n        'input', this.inputInputHandler);\n    for (const eventType of POINTERDOWN_EVENTS) {\n      this.adapter.deregisterInputInteractionHandler(\n          eventType, this.setPointerXOffset);\n    }\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.deregisterTextFieldInteractionHandler(\n          eventType, this.textFieldInteractionHandler);\n    }\n    this.adapter.deregisterValidationAttributeChangeHandler(\n        this.validationObserver);\n  }\n\n  /**\n   * Handles user interactions with the Text Field.\n   */\n  handleTextFieldInteraction() {\n    const nativeInput = this.adapter.getNativeInput();\n    if (nativeInput && nativeInput.disabled) {\n      return;\n    }\n    this.receivedUserInput = true;\n  }\n\n  /**\n   * Handles validation attribute changes\n   */\n  handleValidationAttributeChange(attributesList: string[]): void {\n    attributesList.some((attributeName) => {\n      if (VALIDATION_ATTR_WHITELIST.indexOf(attributeName) > -1) {\n        this.styleValidity(true);\n        this.adapter.setLabelRequired(this.getNativeInput().required);\n        return true;\n      }\n      return false;\n    });\n\n    if (attributesList.indexOf('maxlength') > -1) {\n      this.setcharacterCounter(this.getValue().length);\n    }\n  }\n\n  /**\n   * Opens/closes the notched outline.\n   */\n  notchOutline(openNotch: boolean) {\n    if (!this.adapter.hasOutline() || !this.adapter.hasLabel()) {\n      return;\n    }\n\n    if (openNotch) {\n      const labelWidth = this.adapter.getLabelWidth() * numbers.LABEL_SCALE;\n      this.adapter.notchOutline(labelWidth);\n    } else {\n      this.adapter.closeOutline();\n    }\n  }\n\n  /**\n   * Activates the text field focus state.\n   */\n  activateFocus() {\n    this.isFocused = true;\n    this.styleFocused(this.isFocused);\n    this.adapter.activateLineRipple();\n    if (this.adapter.hasLabel()) {\n      this.notchOutline(this.shouldFloat);\n      this.adapter.floatLabel(this.shouldFloat);\n      this.styleFloating(this.shouldFloat);\n      this.adapter.shakeLabel(this.shouldShake);\n    }\n    if (this.helperText &&\n        (this.helperText.isPersistent() || !this.helperText.isValidation() ||\n         !this.valid)) {\n      this.helperText.showToScreenReader();\n    }\n  }\n\n  /**\n   * Sets the line ripple's transform origin, so that the line ripple activate\n   * animation will animate out from the user's click location.\n   */\n  setTransformOrigin(event: TouchEvent|MouseEvent): void {\n    if (this.isDisabled() || this.adapter.hasOutline()) {\n      return;\n    }\n\n    const touches = (event as TouchEvent).touches;\n    const targetEvent = touches ? touches[0] : event;\n    const targetClientRect =\n        (targetEvent.target as Element).getBoundingClientRect();\n    const normalizedX =\n        (targetEvent as MouseEvent).clientX - targetClientRect.left;\n    this.adapter.setLineRippleTransformOrigin(normalizedX);\n  }\n\n  /**\n   * Handles input change of text input and text area.\n   */\n  handleInput() {\n    this.autoCompleteFocus();\n    this.setcharacterCounter(this.getValue().length);\n  }\n\n  /**\n   * Activates the Text Field's focus state in cases when the input value\n   * changes without user input (e.g. programmatically).\n   */\n  autoCompleteFocus() {\n    if (!this.receivedUserInput) {\n      this.activateFocus();\n    }\n  }\n\n  /**\n   * Deactivates the Text Field's focus state.\n   */\n  deactivateFocus() {\n    this.isFocused = false;\n    this.adapter.deactivateLineRipple();\n    const isValid = this.isValid();\n    this.styleValidity(isValid);\n    this.styleFocused(this.isFocused);\n    if (this.adapter.hasLabel()) {\n      this.notchOutline(this.shouldFloat);\n      this.adapter.floatLabel(this.shouldFloat);\n      this.styleFloating(this.shouldFloat);\n      this.adapter.shakeLabel(this.shouldShake);\n    }\n    if (!this.shouldFloat) {\n      this.receivedUserInput = false;\n    }\n  }\n\n  getValue(): string {\n    return this.getNativeInput().value;\n  }\n\n  /**\n   * @param value The value to set on the input Element.\n   */\n  setValue(value: string): void {\n    // Prevent Safari from moving the caret to the end of the input when the\n    // value has not changed.\n    if (this.getValue() !== value) {\n      this.getNativeInput().value = value;\n    }\n    this.setcharacterCounter(value.length);\n    if (this.validateOnValueChange) {\n      const isValid = this.isValid();\n      this.styleValidity(isValid);\n    }\n    if (this.adapter.hasLabel()) {\n      this.notchOutline(this.shouldFloat);\n      this.adapter.floatLabel(this.shouldFloat);\n      this.styleFloating(this.shouldFloat);\n      if (this.validateOnValueChange) {\n        this.adapter.shakeLabel(this.shouldShake);\n      }\n    }\n  }\n\n  /**\n   * @return The custom validity state, if set; otherwise, the result of a\n   *     native validity check.\n   */\n  isValid(): boolean {\n    return this.useNativeValidation ? this.isNativeInputValid() : this.valid;\n  }\n\n  /**\n   * @param isValid Sets the custom validity state of the Text Field.\n   */\n  setValid(isValid: boolean): void {\n    this.valid = isValid;\n    this.styleValidity(isValid);\n\n    const shouldShake = !isValid && !this.isFocused && !!this.getValue();\n    if (this.adapter.hasLabel()) {\n      this.adapter.shakeLabel(shouldShake);\n    }\n  }\n\n  /**\n   * @param shouldValidate Whether or not validity should be updated on\n   *     value change.\n   */\n  setValidateOnValueChange(shouldValidate: boolean): void {\n    this.validateOnValueChange = shouldValidate;\n  }\n\n  /**\n   * @return Whether or not validity should be updated on value change. `true`\n   *     by default.\n   */\n  getValidateOnValueChange(): boolean {\n    return this.validateOnValueChange;\n  }\n\n  /**\n   * Enables or disables the use of native validation. Use this for custom\n   * validation.\n   * @param useNativeValidation Set this to false to ignore native input\n   *     validation.\n   */\n  setUseNativeValidation(useNativeValidation: boolean): void {\n    this.useNativeValidation = useNativeValidation;\n  }\n\n  isDisabled(): boolean {\n    return this.getNativeInput().disabled;\n  }\n\n  /**\n   * @param disabled Sets the text-field disabled or enabled.\n   */\n  setDisabled(disabled: boolean): void {\n    this.getNativeInput().disabled = disabled;\n    this.styleDisabled(disabled);\n  }\n\n  /**\n   * @param content Sets the content of the helper text.\n   */\n  setHelperTextContent(content: string): void {\n    if (this.helperText) {\n      this.helperText.setContent(content);\n    }\n  }\n\n  /**\n   * Sets the aria label of the leading icon.\n   */\n  setLeadingIconAriaLabel(label: string): void {\n    if (this.leadingIcon) {\n      this.leadingIcon.setAriaLabel(label);\n    }\n  }\n\n  /**\n   * Sets the text content of the leading icon.\n   */\n  setLeadingIconContent(content: string): void {\n    if (this.leadingIcon) {\n      this.leadingIcon.setContent(content);\n    }\n  }\n\n  /**\n   * Sets the aria label of the trailing icon.\n   */\n  setTrailingIconAriaLabel(label: string): void {\n    if (this.trailingIcon) {\n      this.trailingIcon.setAriaLabel(label);\n    }\n  }\n\n  /**\n   * Sets the text content of the trailing icon.\n   */\n  setTrailingIconContent(content: string): void {\n    if (this.trailingIcon) {\n      this.trailingIcon.setContent(content);\n    }\n  }\n\n  /**\n   * Sets character counter values that shows characters used and the total\n   * character limit.\n   */\n  private setcharacterCounter(currentLength: number): void {\n    if (!this.characterCounter) {\n      return;\n    }\n\n    const maxLength = this.getNativeInput().maxLength;\n    if (maxLength === -1) {\n      throw new Error(\n          'MDCTextFieldFoundation: Expected maxlength html property on text input or textarea.');\n    }\n\n    this.characterCounter.setCounterValue(currentLength, maxLength);\n  }\n\n  /**\n   * @return True if the Text Field input fails in converting the user-supplied\n   *     value.\n   */\n  private isBadInput(): boolean {\n    // The badInput property is not supported in IE 11 💩.\n    return this.getNativeInput().validity.badInput || false;\n  }\n\n  /**\n   * @return The result of native validity checking (ValidityState.valid).\n   */\n  private isNativeInputValid(): boolean {\n    return this.getNativeInput().validity.valid;\n  }\n\n  /**\n   * Styles the component based on the validity state.\n   */\n  private styleValidity(isValid: boolean): void {\n    const {INVALID} = MDCTextFieldFoundation.cssClasses;\n    if (isValid) {\n      this.adapter.removeClass(INVALID);\n    } else {\n      this.adapter.addClass(INVALID);\n    }\n    if (this.helperText) {\n      this.helperText.setValidity(isValid);\n\n      // We dynamically set or unset aria-describedby for validation helper text\n      // only, based on whether the field is valid\n      const helperTextValidation = this.helperText.isValidation();\n      if (!helperTextValidation) {\n        return;\n      }\n\n      const helperTextVisible = this.helperText.isVisible();\n      const helperTextId = this.helperText.getId();\n\n      if (helperTextVisible && helperTextId) {\n        this.adapter.setInputAttr(strings.ARIA_DESCRIBEDBY, helperTextId);\n      } else {\n        this.adapter.removeInputAttr(strings.ARIA_DESCRIBEDBY);\n      }\n    }\n  }\n\n  /**\n   * Styles the component based on the focused state.\n   */\n  private styleFocused(isFocused: boolean): void {\n    const {FOCUSED} = MDCTextFieldFoundation.cssClasses;\n    if (isFocused) {\n      this.adapter.addClass(FOCUSED);\n    } else {\n      this.adapter.removeClass(FOCUSED);\n    }\n  }\n\n  /**\n   * Styles the component based on the disabled state.\n   */\n  private styleDisabled(isDisabled: boolean): void {\n    const {DISABLED, INVALID} = MDCTextFieldFoundation.cssClasses;\n    if (isDisabled) {\n      this.adapter.addClass(DISABLED);\n      this.adapter.removeClass(INVALID);\n    } else {\n      this.adapter.removeClass(DISABLED);\n    }\n\n    if (this.leadingIcon) {\n      this.leadingIcon.setDisabled(isDisabled);\n    }\n\n    if (this.trailingIcon) {\n      this.trailingIcon.setDisabled(isDisabled);\n    }\n  }\n\n  /**\n   * Styles the component based on the label floating state.\n   */\n  private styleFloating(isFloating: boolean): void {\n    const {LABEL_FLOATING} = MDCTextFieldFoundation.cssClasses;\n    if (isFloating) {\n      this.adapter.addClass(LABEL_FLOATING);\n    } else {\n      this.adapter.removeClass(LABEL_FLOATING);\n    }\n  }\n\n  /**\n   * @return The native text input element from the host environment, or an\n   *     object with the same shape for unit tests.\n   */\n  private getNativeInput(): MDCTextFieldNativeInputElement {\n    // this.adapter may be undefined in foundation unit tests. This happens when\n    // testdouble is creating a mock object and invokes the\n    // shouldShake/shouldFloat getters (which in turn call getValue(), which\n    // calls this method) before init() has been called from the MDCTextField\n    // constructor. To work around that issue, we return a dummy object.\n    const nativeInput = this.adapter ? this.adapter.getNativeInput() : null;\n    return nativeInput || {\n      disabled: false,\n      maxLength: -1,\n      required: false,\n      type: 'input',\n      validity: {\n        badInput: false,\n        valid: true,\n      },\n      value: '',\n    };\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTextFieldFoundation;\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/README.md",
    "content": "<!--docs:\ntitle: \"Text field helper text\"\nlayout: detail\nsection: components\nexcerpt: \"The helper text provides supplemental information and/or validation messages to users\"\niconId: text_field\npath: /catalog/input-controls/text-field/helper-text/\n-->\n\n# Text field helper text\n\nHelper text gives context about a field’s input, such as how the input will be used. It should be visible either persistently or only on focus.\n\n## Basic usage\n\n### HTML structure\n\n```html\n<div class=\"mdc-text-field-helper-text\" aria-hidden=\"true\">helper text</div>\n```\n\n> NOTE: Place this inside `.mdc-text-field-helper-line` element which is an immediate sibling of `.mdc-text-field`.\n\n### Styles\n\n```scss\n@use \"@material/textfield/helper-text\";\n\n@include helper-text.helper-text-core-styles;\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCTextFieldHelperText} from '@material/textfield/helper-text';\n\nconst helperText = new MDCTextFieldHelperText(document.querySelector('.mdc-text-field-helper-text'));\n```\n\n#### Accessibility\n\nNote that in every example where the helper text is dependent on the state of the input element, we\nassign an id to the `mdc-text-field-helper-text` element and set that id to the value of the\n`aria-controls` and `aria-describedby` attributes on the input element. We recommend doing this as well as it will help\nindicate to assistive devices that the display of the helper text is dependent on the interaction with\nthe input element.\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Username</span>\n  <input class=\"mdc-text-field__input\" type=\"text\"\n         aria-labelledby=\"my-label-id\"\n         aria-controls=\"username-helper-text\"\n         aria-describedby=\"username-helper-text\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n<div class=\"mdc-text-field-helper-line\">\n  <div id=\"username-helper-text\" class=\"mdc-text-field-helper-text\" aria-hidden=\"true\">\n    This will be displayed on your public profile\n  </div>\n</div>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-text-field-helper-text` | Mandatory.\n`mdc-text-field-helper-text--persistent` | Makes the helper text permanently visible.\n`mdc-text-field-helper-text--validation-msg` | Indicates the helper text is a validation message.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`helper-text-color($color)` | Customizes the color of the helper text following an enabled text-field.\n`disabled-helper-text-color($color)` | Customizes the color of the helper text following a disabled text-field.\n`helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.\n\n## `MDCTextFieldHelperText` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`foundation` | `MDCTextFieldHelperTextFoundation` | Returns the helper text's foundation. This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldHelperTextFoundation` class.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Helper Text for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### `MDCTextFieldHelperTextAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the helper text element.\n`removeClass(className: string) => void` | Removes a class from the helper text element.\n`hasClass(className: string) => boolean` | Returns true if classname exists for the helper text element.\n`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the helper text element.\n`removeAttr(attr: string) => void` | Removes an attribute on the helper text element.\n`setContent(attr: string) => void` | Sets the text content for the helper text element.\n\n### `MDCTextFieldHelperTextFoundation`\n\nMethod Signature | Description\n--- | ---\n`setContent(content: string) => void` | Sets the content of the helper text.\n`setPersistent(isPersistent: boolean) => void` | Sets the helper text as persistent.\n`setValidation(isValidation: boolean) => void` | Sets the helper text as a validation message.\n`showToScreenReader() => void` | Makes the helper text visible to the screen reader.\n`setValidity(inputIsValid: boolean) => void` | Sets the validity of the helper text based on the input validity.\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/_index.scss",
    "content": "@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"./index\" as mdc-text-field-*;\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/animation';\n@use '@material/animation/variables';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n\n// Public mixins\n\n@mixin helper-text-core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // postcss-bem-linter: define text-field-helper-text\n\n  .mdc-text-field-helper-text {\n    @include typography.typography(caption, $query: $query);\n    @include typography.text-baseline($top: 16px, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: 0;\n      opacity: 0;\n      will-change: opacity;\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      transition: animation.standard(opacity, 150ms);\n    }\n  }\n\n  .mdc-text-field-helper-text--persistent {\n    @include feature-targeting.targets($feat-animation) {\n      transition: none;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 1;\n      will-change: initial;\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n///\n/// Customizes the color of the helper text following an enabled text-field.\n/// @param {Color} $color - The desired helper text color.\n///\n@mixin helper-text-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include helper-text-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color of the helper text following a disabled text-field.\n/// @param {Color} $color - The desired helper text color.\n///\n@mixin disabled-helper-text-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include helper-text-color_($color, $query);\n  }\n}\n\n@mixin helper-text-validation-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include helper-text-validation-color_($color, $query);\n  }\n}\n\n// Private mixins\n\n@mixin helper-text-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  + .mdc-text-field-helper-line .mdc-text-field-helper-text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin helper-text-validation-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-text-field--invalid\n    + .mdc-text-field-helper-line\n    .mdc-text-field-helper-text--validation-msg {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTextFieldHelperTextAdapter {\n  /**\n   * Adds a class to the helper text element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the helper text element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns whether or not the helper text element contains the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * @return the specified attribute's value on the helper text element.\n   */\n  getAttr(attr: string): string|null;\n\n  /**\n   * Sets an attribute with a given value on the helper text element.\n   */\n  setAttr(attr: string, value: string): void;\n\n  /**\n   * Removes an attribute from the helper text element.\n   */\n  removeAttr(attr: string): void;\n\n  /**\n   * Sets the text content for the helper text element.\n   */\n  setContent(content: string): void;\n}\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCTextFieldHelperTextAdapter} from './adapter';\nimport {MDCTextFieldHelperTextFoundation} from './foundation';\n\n/** MDC Text Field Helper Text Factory */\nexport type MDCTextFieldHelperTextFactory =\n    (el: HTMLElement, foundation?: MDCTextFieldHelperTextFoundation) =>\n        MDCTextFieldHelperText;\n\n/** MDC Text Field Helper Text */\nexport class MDCTextFieldHelperText extends\n    MDCComponent<MDCTextFieldHelperTextFoundation> {\n  static override attachTo(root: HTMLElement): MDCTextFieldHelperText {\n    return new MDCTextFieldHelperText(root);\n  }\n\n  // Provided for access by MDCTextField component\n  get foundationForTextField(): MDCTextFieldHelperTextFoundation {\n    return this.foundation;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTextFieldHelperTextAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      getAttr: (attr) => this.root.getAttribute(attr),\n      setAttr: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n      removeAttr: (attr) => {\n        this.root.removeAttribute(attr);\n      },\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTextFieldHelperTextFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  HELPER_TEXT_PERSISTENT: 'mdc-text-field-helper-text--persistent',\n  HELPER_TEXT_VALIDATION_MSG: 'mdc-text-field-helper-text--validation-msg',\n  ROOT: 'mdc-text-field-helper-text',\n};\n\nconst strings = {\n  ARIA_HIDDEN: 'aria-hidden',\n  ROLE: 'role',\n  ROOT_SELECTOR: `.${cssClasses.ROOT}`,\n};\n\nexport {strings, cssClasses};\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTextFieldHelperTextAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\n/** MDC Text Field Helper Text Foundation */\nexport class MDCTextFieldHelperTextFoundation extends\n    MDCFoundation<MDCTextFieldHelperTextAdapter> {\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get strings() {\n    return strings;\n  }\n\n  /**\n   * See {@link MDCTextFieldHelperTextAdapter} for typing information on\n   * parameters and return types.\n   */\n  static override get defaultAdapter(): MDCTextFieldHelperTextAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      getAttr: () => null,\n      setAttr: () => undefined,\n      removeAttr: () => undefined,\n      setContent: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  constructor(adapter?: Partial<MDCTextFieldHelperTextAdapter>) {\n    super({...MDCTextFieldHelperTextFoundation.defaultAdapter, ...adapter});\n  }\n\n\n  getId(): string|null {\n    return this.adapter.getAttr('id');\n  }\n\n  isVisible(): boolean {\n    return this.adapter.getAttr(strings.ARIA_HIDDEN) !== 'true';\n  }\n\n  /**\n   * Sets the content of the helper text field.\n   */\n  setContent(content: string) {\n    this.adapter.setContent(content);\n  }\n\n  isPersistent(): boolean {\n    return this.adapter.hasClass(cssClasses.HELPER_TEXT_PERSISTENT);\n  }\n\n  /**\n   * @param isPersistent Sets the persistency of the helper text.\n   */\n  setPersistent(isPersistent: boolean) {\n    if (isPersistent) {\n      this.adapter.addClass(cssClasses.HELPER_TEXT_PERSISTENT);\n    } else {\n      this.adapter.removeClass(cssClasses.HELPER_TEXT_PERSISTENT);\n    }\n  }\n\n  /**\n   * @return whether the helper text acts as an error validation message.\n   */\n  isValidation(): boolean {\n    return this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n  }\n\n  /**\n   * @param isValidation True to make the helper text act as an error validation\n   *     message.\n   */\n  setValidation(isValidation: boolean) {\n    if (isValidation) {\n      this.adapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    } else {\n      this.adapter.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    }\n  }\n\n  /**\n   * Makes the helper text visible to the screen reader.\n   */\n  showToScreenReader() {\n    this.adapter.removeAttr(strings.ARIA_HIDDEN);\n  }\n\n  /**\n   * Sets the validity of the helper text based on the input validity.\n   */\n  setValidity(inputIsValid: boolean) {\n    const helperTextIsPersistent =\n        this.adapter.hasClass(cssClasses.HELPER_TEXT_PERSISTENT);\n    const helperTextIsValidationMsg =\n        this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    const validationMsgNeedsDisplay =\n        helperTextIsValidationMsg && !inputIsValid;\n\n    if (validationMsgNeedsDisplay) {\n      this.showToScreenReader();\n      // If role is already alert, refresh it to trigger another announcement\n      // from screenreader.\n      if (this.adapter.getAttr(strings.ROLE) === 'alert') {\n        this.refreshAlertRole();\n      } else {\n        this.adapter.setAttr(strings.ROLE, 'alert');\n      }\n    } else {\n      this.adapter.removeAttr(strings.ROLE);\n    }\n\n    if (!helperTextIsPersistent && !validationMsgNeedsDisplay) {\n      this.hide();\n    }\n  }\n\n  /**\n   * Hides the help text from screen readers.\n   */\n  private hide() {\n    this.adapter.setAttr(strings.ARIA_HIDDEN, 'true');\n  }\n\n  private refreshAlertRole() {\n    this.adapter.removeAttr(strings.ROLE);\n    requestAnimationFrame(() => {\n      this.adapter.setAttr(strings.ROLE, 'alert');\n    });\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTextFieldHelperTextFoundation;\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {cssClasses as helperTextCssClasses, strings as helperTextStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {MDCTextFieldHelperText} from '../../../mdc-textfield/helper-text/index';\n\nconst getFixture = () => {\n  return createFixture(html`\n  <div class=\"mdc-textfield__helper-text\"></div>\n`);\n};\n\ndescribe('MDCTextFieldHelperText', () => {\n  it('attachTo returns an MDCTextFieldHelperText instance', () => {\n    expect(\n        MDCTextFieldHelperText.attachTo(getFixture()) instanceof\n        MDCTextFieldHelperText)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCTextFieldHelperText(root);\n    return {root, component};\n  }\n\n  it('#adapter.addClass adds a class to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('#adapter.removeClass removes a class from the element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.hasClass returns whether or not the element contains a certain class',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBeTruthy();\n       root.classList.remove('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBeFalsy();\n     });\n\n  it('#adapter.getAttr retrieves a given attribute from the element', () => {\n    const {root, component} = setupTest();\n    root.setAttribute('foobar', 'baz');\n    expect(component.getDefaultFoundation()['adapter'].getAttr('foobar'))\n        .toEqual('baz');\n  });\n\n  it('#adapter.setAttr adds a given attribute to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.setAttr('aria-label', 'foo');\n    expect(root.getAttribute('aria-label')).toEqual('foo');\n  });\n\n  it('#adapter.removeAttr removes a given attribute from the element', () => {\n    const {root, component} = setupTest();\n    root.setAttribute('aria-label', 'foo');\n    (component.getDefaultFoundation() as any)\n        .adapter.removeAttr('aria-label', 'foo');\n    expect(root.hasAttribute('aria-label')).toBeFalsy();\n  });\n\n  it('#adapter.setContent sets the text content of the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.setContent('foo');\n    expect(root.textContent).toEqual('foo');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/helper-text/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {MDCTextFieldHelperTextFoundation} from '../../../mdc-textfield/helper-text/foundation';\n\nconst {cssClasses, strings} = MDCTextFieldHelperTextFoundation;\n\ndescribe('MDCTextFieldHelperTextFoundation', () => {\n  setUpMdcTestEnvironment();\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTextFieldHelperTextFoundation).toBeTruthy();\n  });\n\n  it('exports strings', () => {\n    expect('strings' in MDCTextFieldHelperTextFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTextFieldHelperTextFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'getAttr',\n      'setAttr',\n      'removeAttr',\n      'setContent',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCTextFieldHelperTextFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('istanbul code coverage', () => {\n    expect(() => new MDCTextFieldHelperTextFoundation).not.toThrow();\n  });\n\n  it('#getId retrieves ID', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttr.and.returnValue('bar');\n\n    expect(foundation.getId()).toEqual('bar');\n  });\n\n  it('#isPersistent retrieves correct value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n        .and.returnValue(true);\n\n    expect(foundation.isPersistent()).toEqual(true);\n\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n        .and.returnValue(false);\n\n    expect(foundation.isPersistent()).toEqual(false);\n  });\n\n  it('#isValidation retrieves correct value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(true);\n\n    expect(foundation.isValidation()).toEqual(true);\n\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(false);\n\n    expect(foundation.isValidation()).toEqual(false);\n  });\n\n  it('#isVisible retrieves correct value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getAttr.withArgs(strings.ARIA_HIDDEN).and.returnValue('true');\n\n    expect(foundation.isVisible()).toEqual(false);\n\n    mockAdapter.getAttr.withArgs(strings.ARIA_HIDDEN).and.returnValue('false');\n\n    expect(foundation.isVisible()).toEqual(true);\n  });\n\n  it('#setContent sets the content of the helper text element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setContent('foo');\n    expect(mockAdapter.setContent).toHaveBeenCalledWith('foo');\n  });\n\n  it('#setPersistent toggles the persistent class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setPersistent(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_PERSISTENT);\n    foundation.setPersistent(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_PERSISTENT);\n  });\n\n  it('#setValidation toggles the validation class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setValidation(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n    foundation.setValidation(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.HELPER_TEXT_VALIDATION_MSG);\n  });\n\n  it('#showToScreenReader removes aria-hidden from helperText', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.showToScreenReader();\n    expect(mockAdapter.removeAttr).toHaveBeenCalledWith('aria-hidden');\n  });\n\n  it('#setValidity adds role=\"alert\" to helper text if input is invalid and helper text is being used ' +\n         'as a validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = false;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('role', 'alert');\n     });\n\n  it('#setValidity invalid when already invalid refreshes role=\"alert\" if ' +\n         'helper text is being used as a validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = false;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       mockAdapter.getAttr.withArgs(strings.ROLE).and.returnValue('alert');\n       foundation.setValidity(inputIsValid);\n\n       mockAdapter.setAttr.calls.reset();\n       mockAdapter.removeAttr.calls.reset();\n\n       foundation.setValidity(inputIsValid);\n       jasmine.clock().tick(1);\n       expect(mockAdapter.removeAttr).toHaveBeenCalledWith(strings.ROLE);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith(strings.ROLE, 'alert');\n     });\n\n  it('#setValidity removes role=\"alert\" if input is valid', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const inputIsValid = true;\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n        .and.returnValue(false);\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(true);\n    foundation.setValidity(inputIsValid);\n    expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');\n  });\n\n  it('#setValidity sets aria-hidden=\"true\" on helper text by default', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const inputIsValid = true;\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n        .and.returnValue(false);\n    mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n        .and.returnValue(false);\n    foundation.setValidity(inputIsValid);\n    expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-hidden', 'true');\n  });\n\n  it('#setValidity does not set aria-hidden on helper text when it is persistent',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n           .and.returnValue(true);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(false);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n\n  it('#setValidity does not set aria-hidden if input is invalid and helper text is validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = false;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n\n  it('#setValidity sets aria-hidden=true if input is valid and helper text is validation message',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const inputIsValid = true;\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_PERSISTENT)\n           .and.returnValue(false);\n       mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)\n           .and.returnValue(true);\n       foundation.setValidity(inputIsValid);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-hidden', 'true');\n     });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/icon/README.md",
    "content": "<!--docs:\ntitle: \"Text field icon\"\nlayout: detail\nsection: components\nexcerpt: \"Icons describe the type of input a text field requires\"\niconId: text_field\npath: /catalog/input-controls/text-field/icon/\n-->\n\n# Text field icon\n\nIcons describe the type of input a text field requires. They can also be interaction targets.\n\n## Basic usage\n\n### HTML structure\n\n```html\n<i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\" tabindex=\"0\" role=\"button\">event</i>\n```\n\n#### Icon set\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/textfield/icon\";\n\n@include icon.icon-core-styles;\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCTextFieldIcon} from '@material/textfield/icon';\n\nconst icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon'));\n```\n\n## Variants\n\nLeading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon` with the modifier `mdc-text-field__icon--leading` or `mdc-text-field__icon--trailing`.\n\n> **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex=\"0\"` and `role=\"button\"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.\n\n### Leading icon\n\nIn text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--with-leading-icon\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name</span>\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\" tabindex=\"0\" role=\"button\">event</i>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\nIn outlined text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\" tabindex=\"0\" role=\"button\">event</i>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n</label>\n```\n\n### Trailing icon\n\nIn text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--with-trailing-icon\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name</span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\" tabindex=\"0\" role=\"button\">event</i>\n  <span class=\"mdc-line-ripple\"></span>\n</label>\n```\n\nIn outlined text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon\">\n  <span class=\"mdc-notched-outline\">\n    <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Your Name</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\" tabindex=\"0\" role=\"button\">event</i>\n</label>\n```\n\n### Leading and trailing icons\n\nIn text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon\">\n  <span class=\"mdc-text-field__ripple\"></span>\n  <span class=\"mdc-floating-label\" id=\"my-label-id\">Phone Number</span>\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\">phone</i>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\" tabindex=\"0\" role=\"button\">event</i>\n  <div class=\"mdc-line-ripple\"></div>\n</label>\n```\n\nIn outlined text field:\n\n```html\n<label class=\"mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon\">\n  <span class=\"mdc-notched-outline\">\n   <span class=\"mdc-notched-outline__leading\"></span>\n    <span class=\"mdc-notched-outline__notch\">\n      <span class=\"mdc-floating-label\" id=\"my-label-id\">Phone Number</span>\n    </span>\n    <span class=\"mdc-notched-outline__trailing\"></span>\n  </span>\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\">phone</i>\n  <input class=\"mdc-text-field__input\" type=\"text\" aria-labelledby=\"my-label-id\">\n  <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--trailing\" tabindex=\"0\" role=\"button\">clear</i>\n</label>\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-text-field__icon` | Mandatory.\n`mdc-text-field__icon--leading` | Mandatory for leading icons.\n`mdc-text-field__icon--trailing` | Mandatory for trailing icons.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`leading-icon-color($color)` | Customizes the color for the leading icon in an enabled text-field.\n`trailing-icon-color($color)` | Customizes the color for the trailing icon in an enabled text-field.\n`disabled-icon-color($color)` | Customizes the color for the leading/trailing icons in a disabled text-field.\n`size($size)` | Sets the size of the leading and trailing icons.\n\n## `MDCTextFieldIcon` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`foundation` | `MDCTextFieldIconFoundation` | Returns the icon's foundation. This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldIconFoundation` class.\n\n## Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Text Field Icon for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).\n\n### `MDCTextFieldIconAdapter`\n\nMethod Signature | Description\n--- | ---\n`getAttr(attr: string) => string` | Gets the value of an attribute on the icon element.\n`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the icon element.\n`removeAttr(attr: string) => void` | Removes an attribute from the icon element.\n`setContent(content: string) => void` | Sets the text content of the icon element.\n`registerInteractionHandler(eventType: string, handler: EventListener) => void` | Registers an event listener for a given event.\n`deregisterInteractionHandler(eventType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.\n`notifyIconAction() => void` | Emits a custom event \"MDCTextField:icon\" denoting a user has clicked the icon, which bubbles to the top-level text field element.\n\n### `MDCTextFieldIconFoundation`\n\nMethod Signature | Description\n--- | ---\n`setDisabled(disabled: boolean) => void` | Updates the icon's disabled state.\n`setAriaLabel(label: string) => void` | Updates the icon's aria-label.\n`setContent(content: string) => void` | Updates the icon's text content.\n`handleInteraction(event: Event) => void` | Handles a text field interaction event.\n"
  },
  {
    "path": "packages/mdc-textfield/icon/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-textfield/icon/_mixins.import.scss",
    "content": "@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"./index\" as mdc-text-field-* hide $mdc-text-field-icon-position, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-dense-icon-position;\n"
  },
  {
    "path": "packages/mdc-textfield/icon/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n\n// Public mixins\n\n@mixin icon-core-styles($query: feature-targeting.all()) {\n  .mdc-text-field__icon {\n    @include icon_($query: $query);\n\n    svg {\n      @include _icon-svg($query: $query);\n    }\n  }\n\n  .mdc-text-field__icon--leading {\n    @include leading-icon_($query: $query);\n  }\n\n  .mdc-text-field__icon--trailing {\n    @include trailing-icon_($query: $query);\n  }\n}\n\n///\n/// Customizes the color for the leading icon in an enabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin leading-icon-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include leading-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the trailing icon in an enabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin trailing-icon-color($color, $query: feature-targeting.all()) {\n  &:not(.mdc-text-field--disabled) {\n    @include trailing-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the leading icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-leading-icon-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include leading-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the trailing icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-trailing-icon-color($color, $query: feature-targeting.all()) {\n  &.mdc-text-field--disabled {\n    @include trailing-icon-color_($color, $query);\n  }\n}\n\n///\n/// Customizes the color for the leading/trailing icons in a disabled text-field.\n/// @param {Color} $color - The desired icon color.\n///\n@mixin disabled-icon-color($color, $query: feature-targeting.all()) {\n  @include disabled-leading-icon-color($color, $query);\n  @include disabled-trailing-icon-color($color, $query);\n}\n\n/// Sets the size of the leading and trailing icons.\n///\n/// @param {Number} $size - the size of the icon in px\n@mixin size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-text-field__icon {\n      font-size: $size;\n    }\n  }\n}\n\n// Private mixins\n\n@mixin icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-structure) {\n    align-self: center;\n    cursor: pointer;\n  }\n\n  &:not([tabindex]),\n  &[tabindex='-1'] {\n    @include feature-targeting.targets($feat-color) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n}\n\n@mixin _icon-svg($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // SVG children can cause misalignment when displayed as inline since\n    // line-height will be inherited and cause additional vertical space.\n    // Setting the display to block prevents this.\n    display: block;\n  }\n}\n\n@mixin leading-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include rtl.reflexive-property(\n      margin,\n      variables.$leading-icon-padding-left,\n      variables.$leading-icon-padding-right\n    );\n  }\n}\n\n@mixin trailing-icon_($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    $padding: math.div(variables.$touch-target-size - variables.$icon-size, 2);\n    $left-margin: variables.$trailing-icon-padding-left - $padding;\n    $right-margin: variables.$trailing-icon-padding-right - $padding;\n\n    padding: $padding;\n    @include rtl.reflexive-property(margin, $left-margin, $right-margin);\n  }\n}\n\n@mixin leading-icon-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__icon--leading {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin trailing-icon-color_($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-text-field__icon--trailing {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/icon/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-text-field-* hide mdc-text-field-icon-core-styles, mdc-text-field-leading-icon-color, mdc-text-field-trailing-icon-color, mdc-text-field-disabled-icon-color, mdc-text-field-leading-icon-horizontal-position-, mdc-text-field-trailing-icon-horizontal-position-, mdc-text-field-icon-horizontal-position-two-icons-, mdc-text-field-icon-, mdc-text-field-leading-icon-color-, mdc-text-field-trailing-icon-color-;\n"
  },
  {
    "path": "packages/mdc-textfield/icon/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$icon-size: 24px !default;\n$dense-icon-size: 20px !default;\n$touch-target-size: 48px !default;\n\n$leading-icon-padding-left: 16px !default;\n$leading-icon-padding-right: 8px !default;\n$trailing-icon-padding-left: 12px !default;\n$trailing-icon-padding-right: 12px !default;\n"
  },
  {
    "path": "packages/mdc-textfield/icon/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTextFieldIconAdapter {\n  /**\n   * Gets the value of an attribute on the icon element.\n   */\n  getAttr(attr: string): string|null;\n\n  /**\n   * Sets an attribute on the icon element.\n   */\n  setAttr(attr: string, value: string): void;\n\n  /**\n   * Removes an attribute from the icon element.\n   */\n  removeAttr(attr: string): void;\n\n  /**\n   * Sets the text content of the icon element.\n   */\n  setContent(content: string): void;\n\n  /**\n   * Registers an event listener on the icon element for a given event.\n   */\n  registerInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener on the icon element for a given event.\n   */\n  deregisterInteractionHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Emits a custom event \"MDCTextField:icon\" denoting a user has clicked the\n   * icon.\n   */\n  notifyIconAction(): void;\n}\n"
  },
  {
    "path": "packages/mdc-textfield/icon/component.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\n\nimport {MDCTextFieldIconAdapter} from './adapter';\nimport {MDCTextFieldIconFoundation} from './foundation';\n\n/** MDC Text Field Icon Factory */\nexport type MDCTextFieldIconFactory =\n    (el: HTMLElement, foundation?: MDCTextFieldIconFoundation) =>\n        MDCTextFieldIcon;\n\n/** MDC Text Field Icon */\nexport class MDCTextFieldIcon extends MDCComponent<MDCTextFieldIconFoundation> {\n  static override attachTo(root: HTMLElement): MDCTextFieldIcon {\n    return new MDCTextFieldIcon(root);\n  }\n\n  // Provided for access by MDCTextField component\n  get foundationForTextField(): MDCTextFieldIconFoundation {\n    return this.foundation;\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTextFieldIconAdapter = {\n      getAttr: (attr) => this.root.getAttribute(attr),\n      setAttr: (attr, value) => {\n        this.safeSetAttribute(this.root, attr, value);\n      },\n      removeAttr: (attr) => {\n        this.root.removeAttribute(attr);\n      },\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n      registerInteractionHandler: (eventType, handler) => {\n        this.listen(eventType, handler);\n      },\n      deregisterInteractionHandler: (eventType, handler) => {\n        this.unlisten(eventType, handler);\n      },\n      notifyIconAction: () => {\n        this.emit(\n            MDCTextFieldIconFoundation.strings.ICON_EVENT, {} /* eventData */,\n            true /* shouldBubble */);\n      },\n    };\n    // tslint:enable:object-literal-sort-keys\n    return new MDCTextFieldIconFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/icon/constants.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst strings = {\n  ICON_EVENT: 'MDCTextField:icon',\n  ICON_ROLE: 'button',\n};\n\nconst cssClasses = {\n  ROOT: 'mdc-text-field__icon',\n};\n\nexport {strings, cssClasses};\n"
  },
  {
    "path": "packages/mdc-textfield/icon/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\nimport {SpecificEventListener} from '@material/base/types';\n\nimport {MDCTextFieldIconAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\n\ntype InteractionEventType = 'click'|'keydown';\n\nconst INTERACTION_EVENTS: InteractionEventType[] = ['click', 'keydown'];\n\n/** MDC Text Field Icon Foundation */\nexport class MDCTextFieldIconFoundation extends\n    MDCFoundation<MDCTextFieldIconAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  /**\n   * See {@link MDCTextFieldIconAdapter} for typing information on parameters\n   * and return types.\n   */\n  static override get defaultAdapter(): MDCTextFieldIconAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      getAttr: () => null,\n      setAttr: () => undefined,\n      removeAttr: () => undefined,\n      setContent: () => undefined,\n      registerInteractionHandler: () => undefined,\n      deregisterInteractionHandler: () => undefined,\n      notifyIconAction: () => undefined,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  private savedTabIndex: string|null = null;\n  private readonly interactionHandler:\n      SpecificEventListener<InteractionEventType>;\n\n  constructor(adapter?: Partial<MDCTextFieldIconAdapter>) {\n    super({...MDCTextFieldIconFoundation.defaultAdapter, ...adapter});\n\n    this.interactionHandler = (event) => {\n      this.handleInteraction(event);\n    };\n  }\n\n  override init() {\n    this.savedTabIndex = this.adapter.getAttr('tabindex');\n\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.registerInteractionHandler(eventType, this.interactionHandler);\n    }\n  }\n\n  override destroy() {\n    for (const eventType of INTERACTION_EVENTS) {\n      this.adapter.deregisterInteractionHandler(\n          eventType, this.interactionHandler);\n    }\n  }\n\n  setDisabled(disabled: boolean) {\n    if (!this.savedTabIndex) {\n      return;\n    }\n\n    if (disabled) {\n      this.adapter.setAttr('tabindex', '-1');\n      this.adapter.removeAttr('role');\n    } else {\n      this.adapter.setAttr('tabindex', this.savedTabIndex);\n      this.adapter.setAttr('role', strings.ICON_ROLE);\n    }\n  }\n\n  setAriaLabel(label: string) {\n    this.adapter.setAttr('aria-label', label);\n  }\n\n  setContent(content: string) {\n    this.adapter.setContent(content);\n  }\n\n  handleInteraction(event: MouseEvent|KeyboardEvent) {\n    const isEnterKey = (event as KeyboardEvent).key === 'Enter' ||\n        (event as KeyboardEvent).keyCode === 13;\n    const isSpaceKey = (event as KeyboardEvent).key === ' ';\n    if (event.type === 'click' || isEnterKey || isSpaceKey) {\n      event.preventDefault();  // stop click from causing host label to focus\n                             // input\n      this.adapter.notifyIconAction();\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTextFieldIconFoundation;\n"
  },
  {
    "path": "packages/mdc-textfield/icon/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport {cssClasses as iconCssClasses, strings as iconStrings} from './constants';\n"
  },
  {
    "path": "packages/mdc-textfield/icon/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {createFixture, html} from '../../../../testing/dom';\nimport {emitEvent} from '../../../../testing/dom/events';\nimport {MDCTextFieldIcon, MDCTextFieldIconFoundation} from '../../../mdc-textfield/icon/index';\n\nconst getFixture = () => {\n  return createFixture(html`\n    <div class=\"mdc-text-field__icon mdc-text-field__icon--leading\"></div>\n  `);\n};\n\ndescribe('MDCTextFieldIcon', () => {\n  it('attachTo returns an MDCTextFieldIcon instance', () => {\n    expect(MDCTextFieldIcon.attachTo(getFixture()) instanceof MDCTextFieldIcon)\n        .toBeTruthy();\n  });\n\n  function setupTest() {\n    const root = getFixture();\n    const component = new MDCTextFieldIcon(root);\n    return {root, component};\n  }\n\n  it('#adapter.getAttr returns the value of a given attribute on the element',\n     () => {\n       const {root, component} = setupTest();\n       const expectedAttr = 'tabindex';\n       const expectedValue = '0';\n       root.setAttribute(expectedAttr, expectedValue);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getAttr(expectedAttr))\n           .toEqual(expectedValue);\n     });\n\n  it('#adapter.setAttr adds a given attribute to the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any)\n        .adapter.setAttr('aria-label', 'foo');\n    expect(root.getAttribute('aria-label')).toEqual('foo');\n  });\n\n  it('#adapter.removeAttr removes a given attribute from the element', () => {\n    const {root, component} = setupTest();\n    root.setAttribute('role', 'button');\n    (component.getDefaultFoundation() as any).adapter.removeAttr('role');\n    expect(root.hasAttribute('role')).toBe(false);\n  });\n\n  it('#adapter.setContent sets the text content of the element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.setContent('foo');\n    expect(root.textContent).toEqual('foo');\n  });\n\n  it('#adapter.registerInteractionHandler adds event listener for a given event to the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('keydown handler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerInteractionHandler('keydown', handler);\n       emitEvent(root, 'keydown');\n\n       expect(handler).toHaveBeenCalled();\n     });\n\n  it('#adapter.deregisterInteractionHandler removes event listener for a given event from the element',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('keydown handler');\n\n       root.addEventListener('keydown', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterInteractionHandler('keydown', handler);\n       emitEvent(root, 'keydown');\n\n       expect(handler).not.toHaveBeenCalled();\n     });\n\n  it('#adapter.notifyIconAction emits ' +\n         `${MDCTextFieldIconFoundation.strings.ICON_EVENT}`,\n     () => {\n       const {component} = setupTest();\n       const handler = jasmine.createSpy('handler');\n\n       component.listen(MDCTextFieldIconFoundation.strings.ICON_EVENT, handler);\n       (component.getDefaultFoundation() as any).adapter.notifyIconAction();\n\n       expect(handler).toHaveBeenCalled();\n     });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/icon/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../../testing/helpers/setup';\nimport {strings} from '../../../mdc-textfield/icon/constants';\nimport {MDCTextFieldIconFoundation} from '../../../mdc-textfield/icon/foundation';\n\ndescribe('MDCTextFieldIconFoundation', () => {\n  it('exports strings', () => {\n    expect(MDCTextFieldIconFoundation.strings).toEqual(strings);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTextFieldIconFoundation, [\n      'getAttr',\n      'setAttr',\n      'removeAttr',\n      'setContent',\n      'registerInteractionHandler',\n      'deregisterInteractionHandler',\n      'notifyIconAction',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCTextFieldIconFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('istanbul code coverage', () => {\n    expect(() => new MDCTextFieldIconFoundation).not.toThrow();\n  });\n\n  it('#init adds event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.registerInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n  });\n\n  it('#destroy removes event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n  });\n\n  it('#setDisabled sets icon tabindex to -1 and removes role when set to true if icon initially had a tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue('1');\n       foundation.init();\n\n       foundation.setDisabled(true);\n       expect(mockAdapter.setAttr).toHaveBeenCalledWith('tabindex', '-1');\n       expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');\n     });\n\n  it('#setDisabled does not change icon tabindex or role when set to true if icon initially had no tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue(null);\n       foundation.init();\n\n       foundation.setDisabled(true);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('tabindex', jasmine.any(String));\n       expect(mockAdapter.removeAttr).not.toHaveBeenCalledWith('role');\n     });\n\n  it('#setDisabled restores icon tabindex and role when set to false if icon initially had a tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const expectedTabIndex = '1';\n       mockAdapter.getAttr.withArgs('tabindex')\n           .and.returnValue(expectedTabIndex);\n       foundation.init();\n\n       foundation.setDisabled(false);\n       expect(mockAdapter.setAttr)\n           .toHaveBeenCalledWith('tabindex', expectedTabIndex);\n       expect(mockAdapter.setAttr)\n           .toHaveBeenCalledWith('role', strings.ICON_ROLE);\n     });\n\n  it('#setDisabled does not change icon tabindex or role when set to false if icon initially had no tabindex',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getAttr.withArgs('tabindex').and.returnValue(null);\n       foundation.init();\n\n       foundation.setDisabled(false);\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('tabindex', jasmine.any(String));\n       expect(mockAdapter.setAttr)\n           .not.toHaveBeenCalledWith('role', jasmine.any(String));\n     });\n\n  it('#setAriaLabel updates the aria-label', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const ariaLabel = 'Test label';\n    foundation.init();\n\n    foundation.setAriaLabel(ariaLabel);\n    expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-label', ariaLabel);\n  });\n\n  it('#setContent updates the text content', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const content = 'test';\n    foundation.init();\n\n    foundation.setContent(content);\n    expect(mockAdapter.setContent).toHaveBeenCalledWith(content);\n  });\n\n  it('on click notifies custom icon event', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const event = {\n      target: {},\n      type: 'click',\n      preventDefault: () => {},\n    };\n    let click: Function|undefined;\n\n    mockAdapter.registerInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'click') {\n            click = handler;\n          }\n        });\n\n    foundation.init();\n    if (click !== undefined) {\n      click(event);\n    }\n    expect(mockAdapter.notifyIconAction).toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './types';\nexport * from './character-counter/index';\nexport * from './helper-text/index';\nexport * from './icon/index';\n"
  },
  {
    "path": "packages/mdc-textfield/mdc-text-field.import.scss",
    "content": "@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/floating-label/variables\" as mdc-floating-label-*;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"@material/notched-outline/variables\" as mdc-notched-outline-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/density/variables\" as mdc-density-*;\n@forward \"icon/variables\" as mdc-text-field-*;\n@forward \"variables\" as mdc-text-field-*;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/floating-label/mixins\" as mdc-floating-label-*;\n@forward \"@material/line-ripple/mixins\" as mdc-line-ripple-*;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"@material/notched-outline/mixins\" as mdc-notched-outline-*;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"icon/mixins\" as mdc-text-field-*;\n@forward \"helper-text/mixins\" as mdc-text-field-*;\n@forward \"character-counter/mixins\" as mdc-text-field-*;\n@forward \"mixins\" as mdc-text-field-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/line-ripple/functions\" as mdc-line-ripple-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/animation\" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard;\n@forward \"./index\" as mdc-text-field-* hide $mdc-text-field-error, $mdc-text-field-fullwidth-bottom-line-color, $mdc-text-field-disabled-border, $mdc-text-field-disabled-icon, $mdc-text-field-bottom-line-hover, $mdc-text-field-bottom-line-idle, $mdc-text-field-label, $mdc-text-field-ink-color, $mdc-text-field-helper-text-color, $mdc-text-field-icon-color, $mdc-text-field-focused-label-color, $mdc-text-field-placeholder-ink-color, $mdc-text-field-disabled-label-color, $mdc-text-field-disabled-ink-color, $mdc-text-field-disabled-placeholder-ink-color, $mdc-text-field-disabled-helper-text-color, $mdc-text-field-background, $mdc-text-field-disabled-background, $mdc-text-field-secondary-text, $mdc-text-field-outlined-idle-border, $mdc-text-field-outlined-disabled-border, $mdc-text-field-outlined-hover-border, $mdc-text-field-textarea-border, $mdc-text-field-textarea-background, $mdc-text-field-textarea-disabled-border-color, $mdc-text-field-textarea-disabled-background, $mdc-text-field-outlined-stroke-width, $mdc-text-field-height, $mdc-text-field-minimum-height, $mdc-text-field-maximum-height, $mdc-text-field-density-scale, $mdc-text-field-density-config, $mdc-text-field-label-position-y, $mdc-text-field-label-offset, $mdc-text-field-dense-label-position-y, $mdc-text-field-dense-label-scale, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-textarea-label-position-y, $mdc-text-field-helper-line-padding, $mdc-text-field-input-padding, $mdc-text-field-input-padding-top, $mdc-text-field-input-padding-bottom, $mdc-text-field-input-border-bottom, mdc-text-field-get-outlined-label-position-y, mdc-text-field-core-styles, mdc-text-field-without-ripple, mdc-text-field-ripple, mdc-text-field-density, mdc-text-field-outlined-density, mdc-text-field-outlined-with-leading-icon-density, mdc-text-field-height, mdc-text-field-outlined-height, mdc-text-field-outlined-with-leading-icon-height, mdc-text-field-shape-radius, mdc-text-field-textarea-shape-radius, mdc-text-field-ink-color, mdc-text-field-disabled-ink-color, mdc-text-field-placeholder-color, mdc-text-field-disabled-placeholder-color, mdc-text-field-fill-color, mdc-text-field-disabled-fill-color, mdc-text-field-bottom-line-color, mdc-text-field-disabled-bottom-line-color, mdc-text-field-hover-bottom-line-color, mdc-text-field-line-ripple-color, mdc-text-field-label-color, mdc-text-field-disabled-label-color, mdc-text-field-outline-color, mdc-text-field-hover-outline-color, mdc-text-field-focused-outline-color, mdc-text-field-disabled-outline-color, mdc-text-field-caret-color, mdc-text-field-disabled-, mdc-text-field-invalid-, mdc-text-field-focused-, mdc-text-field-dense-, mdc-text-field-required-label-asterisk-, mdc-text-field-outline-shape-radius, mdc-text-field-floating-label-, mdc-text-field-outlined-disabled-, mdc-text-field-outlined-invalid-, mdc-text-field-outlined-focused-, mdc-text-field-outlined-dense-, mdc-text-field-outlined-, mdc-text-field-hover-outline-color-, mdc-text-field-focused-outline-color-, mdc-text-field-with-leading-icon-, mdc-text-field-dense-with-leading-icon-, mdc-text-field-outlined-with-leading-icon-, mdc-text-field-outlined-dense-with-leading-icon-, mdc-text-field-with-trailing-icon-, mdc-text-field-dense-with-trailing-icon-, mdc-text-field-with-both-icons-, mdc-text-field-dense-with-both-icons-, mdc-text-field-fullwidth-, mdc-text-field-fullwidth-invalid-, mdc-text-field-textarea-disabled-, mdc-text-field-textarea-invalid-, mdc-text-field-textarea-, mdc-text-field-end-aligned-, mdc-text-field-ink-color-, mdc-text-field-placeholder-color-, mdc-text-field-fill-color-, mdc-text-field-bottom-line-color-, mdc-text-field-hover-bottom-line-color-, mdc-text-field-line-ripple-color-, mdc-text-field-label-ink-color-, mdc-text-field-if-enabled-, mdc-text-field-if-disabled-;\n@forward \"@material/density/functions\" as mdc-density-*;\n@forward \"mdc-text-field\";\n"
  },
  {
    "path": "packages/mdc-textfield/mdc-text-field.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './mixins';\n@use '@material/floating-label/mdc-floating-label'; // COPYBARA_COMMENT_THIS_LINE\n@use '@material/line-ripple/mdc-line-ripple'; // COPYBARA_COMMENT_THIS_LINE\n@use '@material/notched-outline/mdc-notched-outline'; // COPYBARA_COMMENT_THIS_LINE\n@include mixins.core-styles;\n"
  },
  {
    "path": "packages/mdc-textfield/package.json",
    "content": "{\n  \"name\": \"@material/textfield\",\n  \"description\": \"The Material Components for the web text field component\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"textfield\",\n    \"text field\"\n  ],\n  \"main\": \"dist/mdc.textfield.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-textfield\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/density\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/floating-label\": \"^14.0.0\",\n    \"@material/line-ripple\": \"^14.0.0\",\n    \"@material/notched-outline\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-textfield/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFloatingLabel} from '../../mdc-floating-label/index';\nimport {MDCLineRipple} from '../../mdc-line-ripple/index';\nimport {MDCNotchedOutline} from '../../mdc-notched-outline/index';\nimport {MDCRipple} from '../../mdc-ripple/index';\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {cssClasses as characterCounterCssClasses} from '../../mdc-textfield/character-counter/constants';\nimport {cssClasses as helperTextCssClasses} from '../../mdc-textfield/helper-text/constants';\nimport {MDCTextField, MDCTextFieldCharacterCounter, MDCTextFieldFoundation, MDCTextFieldHelperText, MDCTextFieldIcon} from '../../mdc-textfield/index';\n\nconst {cssClasses, strings} = MDCTextFieldFoundation;\n\nfunction getFixture() {\n  return createFixture(html`\n    <label class=\"mdc-text-field mdc-text-field--filled mdc-text-field--with-leading-icon\">\n      <span class=\"mdc-floating-label\" id=\"my-label\">My Label</span>\n      <i class=\"material-icons mdc-text-field__icon mdc-text-field__icon--leading\" tabindex=\"0\" role=\"button\">event</i>\n      <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n      <span class=\"mdc-line-ripple\"></span>\n    </label>\n  `);\n}\n\nfunction getHelperLineWithHelperText() {\n  return createFixture(html`\n    <div class=\"${cssClasses.HELPER_LINE}\">\n      <div class=\"${helperTextCssClasses.ROOT}\">helper text</div>\n    </div>\n  `);\n}\n\nfunction getHelperLineWithCharacterCounter() {\n  return createFixture(html`\n    <div class=\"${cssClasses.HELPER_LINE}\">\n      <div class=\"${characterCounterCssClasses.ROOT}\">helper text</div>\n    </div>\n  `);\n}\n\nfunction getFixtureWithPrefix() {\n  return createFixture(html`\n    <label class=\"mdc-text-field mdc-text-field--filled\">\n      <span class=\"mdc-floating-label\" id=\"my-label\">My Label</span>\n      <span class=\"mdc-text-field__affix mdc-text-field__affix--prefix\">$</span>\n      <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n      <span class=\"mdc-line-ripple\"></span>\n    </label>\n  `);\n}\n\nfunction getFixtureWithSuffix() {\n  return createFixture(html`\n    <label class=\"mdc-text-field mdc-text-field--filled\">\n      <span class=\"mdc-floating-label\" id=\"my-label\">My Label</span>\n      <input type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\">\n      <span class=\"mdc-text-field__affix mdc-text-field__affix--suffix\">/100</span>\n      <span class=\"mdc-line-ripple\"></span>\n    </label>\n  `);\n}\n\ndescribe('MDCTextField', () => {\n  it('attachTo returns an MDCTextField instance', () => {\n    expect(MDCTextField.attachTo(getFixture()) instanceof MDCTextField)\n        .toBeTruthy();\n  });\n\n  class FakeRipple {\n    readonly destroy: jasmine.Spy;\n\n    constructor(readonly root: HTMLElement) {\n      this.destroy = jasmine.createSpy('.destroy');\n    }\n  }\n\n  class FakeLineRipple {\n    readonly listen: jasmine.Spy;\n    readonly unlisten: jasmine.Spy;\n    readonly destroy: jasmine.Spy;\n    readonly activate: jasmine.Spy;\n    readonly deactivate: jasmine.Spy;\n    readonly setRippleCenter: jasmine.Spy;\n\n    constructor() {\n      this.listen = jasmine.createSpy('.listen');\n      this.unlisten = jasmine.createSpy('.unlisten');\n      this.destroy = jasmine.createSpy('.destroy');\n      this.activate = jasmine.createSpy('.activate');\n      this.deactivate = jasmine.createSpy('.deactivate');\n      this.setRippleCenter = jasmine.createSpy('.setRippleCenter');\n    }\n  }\n\n  class FakeHelperText {\n    readonly destroy: jasmine.Spy;\n    constructor() {\n      this.destroy = jasmine.createSpy('.destroy');\n    }\n  }\n\n  class FakeCharacterCounter {\n    readonly destroy: jasmine.Spy;\n    constructor() {\n      this.destroy = jasmine.createSpy('.destroy');\n    }\n  }\n\n  class FakeIcon {\n    readonly destroy: jasmine.Spy;\n    constructor() {\n      this.destroy = jasmine.createSpy('.destroy');\n    }\n  }\n\n  class FakeLabel {\n    readonly destroy: jasmine.Spy;\n    readonly shake: jasmine.Spy;\n    readonly setRequired: jasmine.Spy;\n    constructor() {\n      this.destroy = jasmine.createSpy('.destroy');\n      this.shake = jasmine.createSpy('.shake');\n      this.setRequired = jasmine.createSpy('.setRequired');\n    }\n  }\n\n  class FakeOutline {\n    readonly destroy: jasmine.Spy;\n    constructor() {\n      this.destroy = jasmine.createSpy('.destroy');\n    }\n  }\n\n  it('#constructor instantiates a ripple on the root element by default',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(\n           root, undefined, (el: HTMLElement) => new FakeRipple(el));\n       expect(component.root).toEqual(root);\n     });\n\n  it('#constructor does not instantiate a ripple when ${cssClasses.OUTLINED} class is present',\n     () => {\n       const root = getFixture();\n       root.classList.add(cssClasses.OUTLINED);\n       const component = new MDCTextField(root);\n       expect(component.ripple).toEqual(null);\n     });\n\n  it('#constructor does not instantiate a ripple when ${cssClasses.TEXTAREA} class is present',\n     () => {\n       const root = getFixture();\n       root.classList.add(cssClasses.TEXTAREA);\n       const component = new MDCTextField(root);\n       expect(component.ripple).toEqual(null);\n     });\n\n  it('#constructor when given a `mdc-text-field--filled` element, initializes a default ripple when no ' +\n         'ripple factory given',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component.ripple).toEqual(jasmine.any(MDCRipple));\n     });\n\n  it('#constructor instantiates a line ripple on the `.mdc-line-ripple` element if present',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component['lineRipple']).toEqual(jasmine.any(MDCLineRipple));\n     });\n\n  it('#constructor instantiates a helper text if present', () => {\n    const root = getFixture();\n    const helperText = getHelperLineWithHelperText();\n    document.body.appendChild(root);\n    document.body.appendChild(helperText);\n    const component = new MDCTextField(root);\n    expect(component['helperText'])\n        .toEqual(jasmine.any(MDCTextFieldHelperText));\n    document.body.removeChild(root);\n    document.body.removeChild(helperText);\n  });\n\n  it('#constructor instantiates a character counter if present', () => {\n    const root = getFixture();\n    const characterCounter = getHelperLineWithCharacterCounter();\n    document.body.appendChild(root);\n    root.querySelector('input')!.maxLength = 12;\n    document.body.appendChild(characterCounter);\n    const component = new MDCTextField(root);\n    expect(component['characterCounter'])\n        .toEqual(jasmine.any(MDCTextFieldCharacterCounter));\n    document.body.removeChild(root);\n    document.body.removeChild(characterCounter);\n  });\n\n  it('#constructor instantiates a leading icon if an icon element is present',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component['leadingIcon']).toEqual(jasmine.any(MDCTextFieldIcon));\n       expect(component['trailingIcon']).toEqual(null);\n     });\n\n  it('#constructor instantiates an icon for both icon elements if present', () => {\n    const root = getFixture();\n    root.classList.add('mdc-text-field--with-trailing-icon');\n\n    const el = createFixture(\n        html`<i class=\"mdc-text-field__icon mdc-text-field__icon--trailing material-icons\">3d_rotations</i>`);\n    root.appendChild(el);\n    const component = new MDCTextField(root);\n    expect(component['leadingIcon']).toEqual(jasmine.any(MDCTextFieldIcon));\n    expect(component['trailingIcon']).toEqual(jasmine.any(MDCTextFieldIcon));\n  });\n\n  it('#constructor instantiates a trailing icon if the icon is present', () => {\n    const root = getFixture();\n    const leadingIcon =\n        root.querySelector<HTMLElement>('.mdc-text-field__icon');\n    root.removeChild(leadingIcon as HTMLElement);\n    const trailingIcon = createFixture(\n        html`<i class=\"mdc-text-field__icon mdc-text-field__icon--trailing material-icons\">3d_rotations</i>`);\n    root.appendChild(trailingIcon);\n    root.classList.add('mdc-text-field--with-trailing-icon');\n    root.classList.remove('mdc-text-field--with-leading-icon');\n    const component = new MDCTextField(root);\n    expect(component['leadingIcon']).toEqual(null);\n    expect(component['trailingIcon']).toEqual(jasmine.any(MDCTextFieldIcon));\n  });\n\n  it('#constructor instantiates a label on the `.mdc-floating-label` element if present',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component['label']).toEqual(jasmine.any(MDCFloatingLabel));\n     });\n\n  it('#constructor instantiates an outline on the `.mdc-notched-outline` element if present',\n     () => {\n       const child =\n           createFixture(html`<span class=\"mdc-notched-outline\"></span>`);\n\n       const root = getFixture();\n       root.appendChild(child);\n       const component = new MDCTextField(root);\n       expect(component['outline']).toEqual(jasmine.any(MDCNotchedOutline));\n     });\n\n  it('#constructor handles undefined optional sub-elements gracefully', () => {\n    const root = createFixture(`\n      <label class=\"mdc-text-field mdc-text-field--filled\">\n        <input type=\"text\" class=\"mdc-text-field__input\" id=\"my-text-field\">\n      </label>\n    `);\n\n    expect(() => new MDCTextField(root)).not.toThrow();\n  });\n\n  it('default adapter methods handle sub-elements when present', () => {\n    const root = getFixture();\n    const component = new MDCTextField(root);\n    const adapter = (component.getDefaultFoundation() as any).adapter;\n    expect(adapter.hasClass('foo')).toBe(false);\n    expect(adapter.getLabelWidth()).toBeGreaterThan(0);\n    expect(() => adapter.floatLabel).not.toThrow();\n  });\n\n  it('default adapter methods handle undefined optional sub-elements gracefully',\n     () => {\n       const root = createFixture(html`\n         <label class=\"mdc-text-field mdc-text-field--filled\">\n           <input type=\"text\" class=\"mdc-text-field__input\" id=\"my-text-field\">\n         </label>\n       `);\n\n       const component = new MDCTextField(root);\n       const adapter = (component.getDefaultFoundation() as any).adapter;\n       expect(adapter.getLabelWidth()).toEqual(0);\n       expect(adapter.hasLabel()).toBe(false);\n       expect(adapter.hasOutline()).toBe(false);\n       expect(() => adapter.floatLabel).not.toThrow();\n       expect(() => adapter.shakeLabel).not.toThrow();\n       expect(() => adapter.activateLineRipple).not.toThrow();\n       expect(() => adapter.deactivateLineRipple).not.toThrow();\n       expect(() => adapter.setLineRippleTransformOrigin).not.toThrow();\n       expect(() => adapter.closeOutline).not.toThrow();\n       expect(() => adapter.notchOutline).not.toThrow();\n     });\n\n  /**\n   * @param {!HTMLElement=} root\n   * @return {{\n   *   root: HTMLElement,\n   *   component: MDCTextField,\n   *   foundation: MDCTextFieldFoundation,\n   *   adapter: MDCTextFieldAdapter,\n   *   outline: MDCNotchedOutline,\n   *   icon: MDCTextFieldIcon,\n   *   lineRipple: MDCLineRipple,\n   *   label: MDCFloatingLabel,\n   *   helperText: MDCTextFieldHelperText,\n   *   characterCounter: MDCTextFieldCharacterCounter,\n   * }}\n   */\n  function setupTest(root = getFixture()) {\n    const lineRipple = new FakeLineRipple();\n    const helperText = new FakeHelperText();\n    const characterCounter = new FakeCharacterCounter();\n    const icon = new FakeIcon();\n    const label = new FakeLabel();\n    const outline = new FakeOutline();\n\n    const component = new MDCTextField(\n        root, undefined, (el: HTMLElement) => new FakeRipple(el),\n        () => lineRipple, () => helperText, () => characterCounter, () => icon,\n        () => label, () => outline);\n\n    const foundation = component['foundation'];\n    const adapter = foundation['adapter'];\n\n    return {\n      root,\n      component,\n      foundation,\n      adapter,\n      lineRipple,\n      helperText,\n      characterCounter,\n      icon,\n      label,\n      outline\n    };\n  }\n\n  it('#destroy cleans up the ripple if present', () => {\n    const root = getFixture();\n    const component = new MDCTextField(\n        root, undefined, (el: HTMLElement) => new FakeRipple(el));\n    component.destroy();\n    expect(component.ripple!.destroy).toHaveBeenCalled();\n  });\n\n  it('#destroy cleans up the line ripple if present', () => {\n    const {component, lineRipple} = setupTest();\n    component.destroy();\n    expect(lineRipple.destroy).toHaveBeenCalled();\n  });\n\n  it('#destroy cleans up the helper text if present', () => {\n    const root = getFixture();\n    const helperTextElement = getHelperLineWithHelperText();\n    document.body.appendChild(root);\n    document.body.appendChild(helperTextElement);\n    const {component, helperText} = setupTest(root);\n    component.destroy();\n    expect(helperText.destroy).toHaveBeenCalled();\n    document.body.removeChild(root);\n    document.body.removeChild(helperTextElement);\n  });\n\n  it('#destroy cleans up the character counter if present', () => {\n    const root = getFixture();\n    const characterCounterElement = getHelperLineWithCharacterCounter();\n    document.body.appendChild(root);\n    document.body.appendChild(characterCounterElement);\n    const {component, characterCounter} = setupTest(root);\n    component.destroy();\n    expect(characterCounter.destroy).toHaveBeenCalled();\n    document.body.removeChild(root);\n    document.body.removeChild(characterCounterElement);\n  });\n\n  it('#destroy cleans up the icon if present', () => {\n    const {component, icon} = setupTest();\n    component.destroy();\n    expect(icon.destroy).toHaveBeenCalled();\n  });\n\n  it('#destroy cleans up the label if present', () => {\n    const {component, label} = setupTest();\n    component.destroy();\n    expect(label.destroy).toHaveBeenCalled();\n  });\n\n  it('#destroy cleans up the outline if present', () => {\n    const child = createFixture(`<span class=\"mdc-notched-outline\"></span>`);\n\n    const root = getFixture();\n    root.appendChild(child);\n    const {component, outline} = setupTest(root);\n    component.destroy();\n    expect(outline.destroy).toHaveBeenCalled();\n  });\n\n  it('#destroy handles undefined optional sub-elements gracefully', () => {\n    const root = createFixture(`\n      <label class=\"mdc-text-field mdc-text-field--filled\">\n        <input type=\"text\" class=\"mdc-text-field__input\" id=\"my-text-field\">\n      </label>\n    `);\n\n    const component = new MDCTextField(root);\n    expect(() => component.destroy).not.toThrow();\n  });\n\n  it('#destroy handles undefined optional ripple gracefully', () => {\n    const root = getFixture();\n    const component = new MDCTextField(root);\n    component.ripple = null;\n    expect(() => component.destroy).not.toThrow();\n  });\n\n  it('#destroy calls destroy for both icon elements if present', () => {\n    const root = getFixture();\n    root.classList.add('mdc-text-field--with-trailing-icon');\n\n    const child = createFixture(\n        `<i class=\"mdc-text-field__icon mdc-text-field__icon--trailing material-icons\">3d_rotations</i>`);\n    root.appendChild(child);\n\n    const component = new MDCTextField(root);\n    // The non-null assertion is deemed unnecessary, but without it tests on\n    // GitHub side fail to compile with error `Object is possibly 'null'`\n    // tslint:disable:no-unnecessary-type-assertion\n    component['leadingIcon']!.destroy =\n        jasmine.createSpy('leadingIcon_.destroy');\n    component['trailingIcon']!.destroy =\n        jasmine.createSpy('trailingIcon_.destroy');\n    component.destroy();\n    expect(component['leadingIcon']!.destroy).toHaveBeenCalled();\n    expect(component['trailingIcon']!.destroy).toHaveBeenCalled();\n    // tslint:enable:no-unnecessary-type-assertion\n  });\n\n  it('#initialSyncWithDOM sets disabled if input element is not disabled',\n     () => {\n       const {component} = setupTest();\n       component.initialSyncWithDOM();\n       expect(component.disabled).toBeFalsy();\n     });\n\n  it('#focus calls focus on the input element', () => {\n    const {root, component} = setupTest();\n    const input =\n        root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n    input.focus = jasmine.createSpy('focus');\n    component.focus();\n\n    expect(input.focus).toHaveBeenCalledTimes(1);\n  });\n\n  it('get/set disabled updates the input element', () => {\n    const {root, component} = setupTest();\n    const input =\n        root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n    component.disabled = true;\n    expect(input.disabled).toBeTruthy();\n    component.disabled = false;\n    expect(input.disabled).toBeFalsy();\n  });\n\n  it('get/set disabled updates the component styles', () => {\n    const {root, component} = setupTest();\n    component.disabled = true;\n    expect(root).toHaveClass(cssClasses.DISABLED);\n    component.disabled = false;\n    expect(root).not.toHaveClass(cssClasses.DISABLED);\n  });\n\n  it('set valid updates the component styles', () => {\n    const {root, component} = setupTest();\n    component.valid = false;\n    expect(root).toHaveClass(cssClasses.INVALID);\n    component.valid = true;\n    expect(root).not.toHaveClass(cssClasses.INVALID);\n  });\n\n  it('set helperTextContent has no effect when no helper text element is present',\n     () => {\n       const {component} = setupTest();\n       expect(() => {\n         component.helperTextContent = 'foo';\n       }).not.toThrow();\n     });\n\n  it('set leadingIconAriaLabel has no effect when no icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(() => {\n         component.leadingIconAriaLabel = 'foo';\n       }).not.toThrow();\n     });\n\n  it('set trailingIconAriaLabel has no effect when no icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(() => {\n         component.trailingIconAriaLabel = 'foo';\n       }).not.toThrow();\n     });\n\n  it('set leadingIconContent has no effect when no icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(() => {\n         component.leadingIconContent = 'foo';\n       }).not.toThrow();\n     });\n\n  it('set trailingIconContent has no effect when no icon element is present',\n     () => {\n       const {component} = setupTest();\n       expect(() => {\n         component.trailingIconContent = 'foo';\n       }).not.toThrow();\n     });\n\n  it('#adapter.addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('layout calls foundation notchOutline', () => {\n    const {component, foundation} = setupTest();\n    foundation.notchOutline = jasmine.createSpy('notchOutline');\n    component.layout();\n    expect(foundation.notchOutline).toHaveBeenCalledWith(false);\n  });\n\n  it('#adapter.removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('#adapter.setInputAttr sets attribute on input element', () => {\n    const {root, component} = setupTest();\n    const input =\n        root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n\n    (component.getDefaultFoundation() as any)\n        .adapter.setInputAttr('data-foo', 'bar');\n    expect(input.getAttribute('data-foo')).toEqual('bar');\n  });\n\n  it('#adapter.removeInputAttr removes attribute on input element', () => {\n    const {root, component} = setupTest();\n    const input =\n        root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n\n    input.setAttribute('foo', 'bar!');\n    (component.getDefaultFoundation() as any).adapter.removeInputAttr('foo');\n    expect(input.getAttribute('foo')).toBe(null);\n  });\n\n  it('#adapter.registerInputInteractionHandler adds a handler to the input element for a given event',\n     () => {\n       const {root, component} = setupTest();\n       const input =\n           root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n       const handler = jasmine.createSpy('eventHandler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerInputInteractionHandler('click', handler);\n       emitEvent(input, 'click');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.deregisterInputInteractionHandler removes a handler from the input element for a given event',\n     () => {\n       const {root, component} = setupTest();\n       const input =\n           root.querySelector<HTMLInputElement>('.mdc-text-field__input')!;\n       const handler = jasmine.createSpy('eventHandler');\n\n       input.addEventListener('click', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.deregisterInputInteractionHandler('click', handler);\n       emitEvent(input, 'click');\n       expect(handler).not.toHaveBeenCalled();\n     });\n\n  it('#adapter.registerTextFieldInteractionHandler adds an event handler for a given event on the root',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('TextFieldInteractionHandler');\n       (component.getDefaultFoundation() as any)\n           .adapter.registerTextFieldInteractionHandler('click', handler);\n       emitEvent(root, 'click');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.deregisterTextFieldInteractionHandler removes an event handler for a given event from the root',\n     () => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('TextFieldInteractionHandler');\n       root.addEventListener('click', handler);\n       (component.getDefaultFoundation() as any)\n           .adapter.registerTextFieldInteractionHandler('click', handler);\n       emitEvent(root, 'click');\n       expect(handler).toHaveBeenCalledWith(jasmine.anything());\n     });\n\n  it('#adapter.registerValidationAttributeChangeHandler creates a working mutation observer',\n     (done) => {\n       const {root, component} = setupTest();\n       const handler = jasmine.createSpy('ValidationAttributeChangeHandler');\n       handler.withArgs(jasmine.any(Array)).and.callFake((arr: string[]) => {\n         if (arr.indexOf('required') !== -1) {\n           done();\n         }\n       });\n\n       component['foundation']['adapter']\n           .registerValidationAttributeChangeHandler(handler);\n       (root.querySelector<HTMLInputElement>('.mdc-text-field__input')!\n        ).required = true;\n     });\n\n  it('#adapter.deregisterValidationAttributeChangeHandler disconnects the passed observer',\n     () => {\n       const {component} = setupTest();\n       const disconnect = jasmine.createSpy('ValidationDisconnect');\n       const observer = new MutationObserver(() => undefined);\n       observer.disconnect = disconnect;\n\n       component['foundation']['adapter']\n           .deregisterValidationAttributeChangeHandler(observer);\n       expect(disconnect).toHaveBeenCalled();\n     });\n\n  it('#adapter.getNativeInput returns the component input element', () => {\n    const {root, component} = setupTest();\n    expect((component.getDefaultFoundation() as any).adapter.getNativeInput())\n        .toEqual(root.querySelector<HTMLElement>('.mdc-text-field__input'));\n  });\n\n  it('#adapter.activateLineRipple calls the activate method on the line ripple',\n     () => {\n       const {component, lineRipple} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.activateLineRipple();\n       expect(lineRipple.activate).toHaveBeenCalled();\n     });\n\n  it('#adapter.deactivateLineRipple calls the deactivate method on the line ripple',\n     () => {\n       const {component, lineRipple} = setupTest();\n       (component.getDefaultFoundation() as any).adapter.deactivateLineRipple();\n       expect(lineRipple.deactivate).toHaveBeenCalled();\n     });\n\n  it('#adapter.setLineRippleTransformOrigin calls the setRippleCenter method on the line ripple',\n     () => {\n       const {component, lineRipple} = setupTest();\n       (component.getDefaultFoundation() as any)\n           .adapter.setLineRippleTransformOrigin(100);\n       expect(lineRipple.setRippleCenter).toHaveBeenCalledWith(100);\n     });\n\n  it('should not focus input when clicking icon', () => {\n    const root = getFixture();\n    const icon = root.querySelector<HTMLElement>('.mdc-text-field__icon')!;\n    const component = new MDCTextField(root);\n    document.body.appendChild(root);\n    root.click();\n    const input = (component as any).input as HTMLInputElement;\n    expect(document.activeElement)\n        .withContext('input should be focused')\n        .toBe(input);\n    input.blur();\n    expect(document.activeElement)\n        .withContext('ensure input was blurred')\n        .not.toBe(input);\n    icon.click();\n    expect(document.activeElement)\n        .withContext('input should not be focused')\n        .not.toBe(input);\n    document.body.removeChild(root);\n  });\n\n  function setupMockFoundationTest(root = getFixture()) {\n    const mockFoundation = createMockFoundation(MDCTextFieldFoundation);\n    const component = new MDCTextField(root, mockFoundation);\n    return {root, component, mockFoundation};\n  }\n\n  it('get/set value', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.value;\n    expect(mockFoundation.getValue).toHaveBeenCalled();\n    component.value = 'foo';\n    expect(mockFoundation.setValue).toHaveBeenCalledWith('foo');\n  });\n\n  it('set leadingIconAriaLabel', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.leadingIconAriaLabel = 'label';\n    expect(mockFoundation.setLeadingIconAriaLabel)\n        .toHaveBeenCalledWith('label');\n  });\n\n  it('set leadingIconContent', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.leadingIconContent = 'label';\n    expect(mockFoundation.setLeadingIconContent).toHaveBeenCalledWith('label');\n  });\n\n  it('set trailingIconAriaLabel', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.trailingIconAriaLabel = 'label';\n    expect(mockFoundation.setTrailingIconAriaLabel)\n        .toHaveBeenCalledWith('label');\n  });\n\n  it('set trailingIconContent', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.trailingIconContent = 'label';\n    expect(mockFoundation.setTrailingIconContent).toHaveBeenCalledWith('label');\n  });\n\n  it('get/set valid', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.valid;\n    expect(mockFoundation.isValid).toHaveBeenCalled();\n    component.valid = true;\n    expect(mockFoundation.setValid).toHaveBeenCalledWith(true);\n  });\n\n  it('get/set required', () => {\n    const {component} = setupMockFoundationTest();\n    component.required = true;\n    expect(component.required).toBe(true);\n    component.required = false;\n    expect(component.required).toBe(false);\n  });\n\n  it('set useNativeValidation', () => {\n    const {component, mockFoundation} = setupMockFoundationTest();\n    component.useNativeValidation = true;\n    expect(mockFoundation.setUseNativeValidation).toHaveBeenCalledWith(true);\n  });\n\n  it('get/set pattern', () => {\n    const {component} = setupMockFoundationTest();\n    component.pattern = '.{8,}';\n    expect(component.pattern).toEqual('.{8,}');\n    component.pattern = '.*';\n    expect(component.pattern).toEqual('.*');\n  });\n\n  it('get/set minLength', () => {\n    const {component} = setupMockFoundationTest();\n    component.minLength = 8;\n    expect(component.minLength).toEqual(8);\n    component.minLength = 0;\n    expect(component.minLength).toEqual(0);\n  });\n\n  it('get/set maxLength', () => {\n    const {component} = setupMockFoundationTest();\n    component.maxLength = 10;\n    expect(component.maxLength).toEqual(10);\n    component.maxLength = -1;\n    // IE11 has a different value for no maxLength property\n    expect(component.maxLength).not.toEqual(10);\n  });\n\n  it('get/set min', () => {\n    const {component} = setupMockFoundationTest();\n    component.min = '8';\n    expect(component.min).toEqual('8');\n    component.min = '0';\n    expect(component.min).toEqual('0');\n  });\n\n  it('get/set max', () => {\n    const {component} = setupMockFoundationTest();\n    expect(component.max).toEqual('');\n    component.max = '10';\n    expect(component.max).toEqual('10');\n    component.max = '';\n    expect(component.max).toEqual('');\n  });\n\n  it('get/set step', () => {\n    const {component} = setupMockFoundationTest();\n    component.step = '8';\n    expect(component.step).toEqual('8');\n    component.step = '10';\n    expect(component.step).toEqual('10');\n  });\n\n  it('get prefixText returns prefix textContent, or null without a prefix',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component.prefixText).toEqual(null);\n       const prefixRoot = getFixtureWithPrefix();\n       const prefixComponent = new MDCTextField(prefixRoot);\n       expect(prefixComponent.prefixText).toEqual('$');\n     });\n\n  it('set prefixText changes prefix textContent, if it exists', () => {\n    const root = getFixture();\n    const component = new MDCTextField(root);\n    component.prefixText = 'foo' as string | null;\n    expect(component.prefixText).toEqual(null);\n    const prefixRoot = getFixtureWithPrefix();\n    const prefixComponent = new MDCTextField(prefixRoot);\n    prefixComponent.prefixText = 'foo';\n    expect(prefixComponent.prefixText).toEqual('foo');\n    const prefixEl =\n        prefixRoot.querySelector<HTMLElement>(strings.PREFIX_SELECTOR)!;\n    expect(prefixEl.textContent).toEqual('foo');\n  });\n\n  it('get suffixText returns suffix textContent, or null without a suffix',\n     () => {\n       const root = getFixture();\n       const component = new MDCTextField(root);\n       expect(component.suffixText).toEqual(null);\n       const suffixRoot = getFixtureWithSuffix();\n       const suffixComponent = new MDCTextField(suffixRoot);\n       expect(suffixComponent.suffixText).toEqual('/100');\n     });\n\n  it('set suffixText changes suffix textContent, if it exists', () => {\n    const root = getFixture();\n    const component = new MDCTextField(root);\n    component.suffixText = 'foo' as string | null;\n    expect(component.suffixText).toEqual(null);\n    const suffixRoot = getFixtureWithSuffix();\n    const suffixComponent = new MDCTextField(suffixRoot);\n    suffixComponent.suffixText = 'foo';\n    expect(suffixComponent.suffixText).toEqual('foo');\n    const suffixEl =\n        suffixRoot.querySelector<HTMLElement>(strings.SUFFIX_SELECTOR)!;\n    expect(suffixEl.textContent).toEqual('foo');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as text-field;\n@use '../character-counter/mixins' as character-counter;\n@use '../helper-text/mixins' as helper-text;\n@use '../icon/mixins' as icon;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include text-field.core-styles($query: $query);\n    @include text-field.without-ripple($query: $query);\n    @include text-field.ripple($query: $query);\n    @include text-field.density(0, $query: $query);\n    @include text-field.outlined-density(0, $query: $query);\n    @include text-field.outlined-with-leading-icon-density(0, $query: $query);\n    @include text-field.height(42px, $query: $query);\n    @include text-field.outlined-height(42px, $query: $query);\n    @include text-field.outlined-with-leading-icon-height(42px, $query: $query);\n    @include text-field.shape-radius(42px, $query: $query);\n    @include text-field.textarea-shape-radius(42px, $query: $query);\n    @include text-field.ink-color(red, $query: $query);\n    @include text-field.disabled-ink-color(red, $query: $query);\n    @include text-field.placeholder-color(red, $query: $query);\n    @include text-field.disabled-placeholder-color(red, $query: $query);\n    @include text-field.fill-color(red, $query: $query);\n    @include text-field.disabled-fill-color(red, $query: $query);\n    @include text-field.bottom-line-color(red, $query: $query);\n    @include text-field.disabled-bottom-line-color(red, $query: $query);\n    @include text-field.hover-bottom-line-color(red, $query: $query);\n    @include text-field.line-ripple-color(red, $query: $query);\n    @include text-field.label-color(red, $query: $query);\n    @include text-field.disabled-label-color(red, $query: $query);\n    @include text-field.outline-color(red, $query: $query);\n    @include text-field.hover-outline-color(red, $query: $query);\n    @include text-field.focused-outline-color(red, $query: $query);\n    @include text-field.disabled-outline-color(red, $query: $query);\n    @include text-field.caret-color(red, $query: $query);\n    @include text-field.floating-label-float-transition(\n      250ms,\n      linear,\n      $query: $query\n    );\n\n    @include character-counter.character-counter-core-styles($query: $query);\n    @include character-counter.character-counter-color(red, $query: $query);\n    @include character-counter.disabled-character-counter-color(\n      red,\n      $query: $query\n    );\n    @include character-counter.character-counter-position(\n      100%,\n      100%,\n      $query: $query\n    );\n\n    @include helper-text.helper-text-core-styles($query: $query);\n    @include helper-text.helper-text-color(red, $query: $query);\n    @include helper-text.disabled-helper-text-color(red, $query: $query);\n    @include helper-text.helper-text-validation-color(red, $query: $query);\n\n    @include icon.icon-core-styles($query: $query);\n    @include icon.leading-icon-color(red, $query: $query);\n    @include icon.trailing-icon-color(red, $query: $query);\n    @include icon.disabled-icon-color(red, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-textfield/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {MDCTextFieldFoundation} from '../foundation';\nimport {MDCTextFieldNativeInputElement} from '../types';\n\nconst LABEL_WIDTH = 100;\nconst {cssClasses, numbers, strings} = MDCTextFieldFoundation;\n\ndescribe('MDCTextFieldFoundation', () => {\n  it('exports strings', () => {\n    expect(MDCTextFieldFoundation.strings).toBeTruthy();\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTextFieldFoundation).toBeTruthy();\n  });\n\n  it('exports numbers', () => {\n    expect('numbers' in MDCTextFieldFoundation).toBeTruthy();\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTextFieldFoundation, [\n      'addClass',\n      'removeClass',\n      'hasClass',\n      'setInputAttr',\n      'removeInputAttr',\n      'registerTextFieldInteractionHandler',\n      'deregisterTextFieldInteractionHandler',\n      'registerInputInteractionHandler',\n      'deregisterInputInteractionHandler',\n      'getNativeInput',\n      'isFocused',\n      'activateLineRipple',\n      'deactivateLineRipple',\n      'setLineRippleTransformOrigin',\n      'shakeLabel',\n      'floatLabel',\n      'setLabelRequired',\n      'hasLabel',\n      'getLabelWidth',\n      'registerValidationAttributeChangeHandler',\n      'deregisterValidationAttributeChangeHandler',\n      'hasOutline',\n      'notchOutline',\n      'closeOutline',\n    ]);\n  });\n\n  const setupTest = ({\n    useCharacterCounter = false,\n    useHelperText = false,\n    useLeadingIcon = false,\n    useTrailingIcon = false,\n    optIsValid = true,\n  } = {}) => {\n    const {mockAdapter} = setUpFoundationTest(MDCTextFieldFoundation);\n    mockAdapter.hasClass.withArgs('mdc-text-field--invalid')\n        .and.returnValue(!optIsValid);\n\n    const helperText = useHelperText ?\n        jasmine.createSpyObj(\n            'helperText',\n            [\n              'getId', 'isVisible', 'isPersistent', 'isValidation',\n              'setContent', 'showToScreenReader', 'setValidity'\n            ]) :\n        undefined;\n\n    const characterCounter = useCharacterCounter ?\n        jasmine.createSpyObj('characterCounter', ['setCounterValue']) :\n        undefined;\n\n    const leadingIcon = useLeadingIcon ?\n        jasmine.createSpyObj(\n            'leadingIcon',\n            [\n              'setDisabled', 'setAriaLabel', 'setContent',\n              'registerInteractionHandler', 'deregisterInteractionHandler',\n              'handleInteraction'\n            ]) :\n        undefined;\n\n    const trailingIcon = useTrailingIcon ?\n        jasmine.createSpyObj(\n            'trailingIcon',\n            [\n              'setDisabled', 'setAriaLabel', 'setContent',\n              'registerInteractionHandler', 'deregisterInteractionHandler',\n              'handleInteraction'\n            ]) :\n        undefined;\n\n    const foundationMap = {\n      helperText,\n      characterCounter,\n      leadingIcon,\n      trailingIcon,\n    };\n    const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);\n\n    return {\n      foundation,\n      mockAdapter,\n      helperText,\n      characterCounter,\n      leadingIcon,\n      trailingIcon\n    };\n  };\n\n  it('#constructor sets disabled to false', () => {\n    const {foundation} = setupTest();\n    expect(foundation.isDisabled()).toBeFalsy();\n  });\n\n  const setupValueTest = ({\n    value = '',\n    optIsRequired = false,\n    optIsValid = true,\n    optIsBadInput = false,\n    hasLabel = false,\n    useCharacterCounter = false,\n    useHelperText = false,\n    useLeadingIcon = false,\n    useTrailingIcon = false,\n  } = {}) => {\n    const {foundation, mockAdapter, helperText} = setupTest({\n      useCharacterCounter,\n      useHelperText,\n      useLeadingIcon,\n      useTrailingIcon,\n      optIsValid,\n    });\n    const nativeInput = {\n      value,\n      required: optIsRequired,\n      validity: {\n        valid: optIsValid,\n        badInput: optIsBadInput,\n      },\n    };\n    if (hasLabel) {\n      mockAdapter.hasLabel.and.returnValue(true);\n    }\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ value:\n    //  string; required: boolean; validity: { valid: boolean; badInput:\n    //  boolean; }; }' is not assignable to parameter of type\n    //  'MDCTextFieldNativeInputElement'.\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n    foundation.init();\n\n    return {foundation, mockAdapter, helperText, nativeInput};\n  };\n\n  it('#getValue returns the field\\'s value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getNativeInput.and.returnValue({\n      value: 'initValue',\n    } as MDCTextFieldNativeInputElement);\n    expect('initValue')\n        .withContext('getValue does not match input value.')\n        .toEqual(foundation.getValue());\n  });\n\n  it(`initializes 'valid' property to false when field is invalid`, () => {\n    const {foundation} = setupTest({optIsValid: false});\n    foundation.setUseNativeValidation(false);\n    expect(foundation.isValid()).toBe(false);\n  });\n\n  it(`initializes 'valid' property to true when field is valid`, () => {\n    const {foundation} = setupTest({optIsValid: true});\n    foundation.setUseNativeValidation(false);\n    expect(foundation.isValid()).toBe(true);\n  });\n\n  it('#setValue with non-empty value styles the label', () => {\n    const value = 'new value';\n    const {foundation, nativeInput, mockAdapter} =\n        setupValueTest({value: '', hasLabel: true});\n    // Initial empty value should not float label.\n    expect(mockAdapter.floatLabel).not.toHaveBeenCalledWith(false);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n    nativeInput.value = value;\n    foundation.setValue(value);\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#setValue with empty value styles the label', () => {\n    const {foundation, nativeInput, mockAdapter} =\n        setupValueTest({value: 'old value', hasLabel: true});\n    // Initial value should float the label.\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n    nativeInput.value = '';\n    foundation.setValue('');\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(false);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#setValue valid and invalid input', () => {\n    const {foundation, mockAdapter, nativeInput, helperText} = setupValueTest(\n        {value: '', optIsValid: false, hasLabel: true, useHelperText: true});\n\n    foundation.setValue('invalid');\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).toHaveBeenCalledWith(false);\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n\n    nativeInput.validity.valid = true;\n    foundation.setValue('valid');\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).toHaveBeenCalledWith(true);\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#setValue valid and invalid input without autovalidation', () => {\n    const {foundation, mockAdapter, nativeInput, helperText} = setupValueTest(\n        {value: '', optIsValid: false, hasLabel: true, useHelperText: true});\n\n    expect(foundation.getValidateOnValueChange()).toBeTrue();\n    foundation.setValidateOnValueChange(false);\n    expect(foundation.getValidateOnValueChange()).toBeFalse();\n\n    foundation.setValue('invalid');\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).not.toHaveBeenCalledWith(false);\n    expect(mockAdapter.shakeLabel).not.toHaveBeenCalledWith(true);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n\n    nativeInput.validity.valid = true;\n    foundation.setValue('valid');\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).not.toHaveBeenCalledWith(true);\n    expect(mockAdapter.shakeLabel).not.toHaveBeenCalledWith(false);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#setValue with invalid status and empty value does not shake the label',\n     () => {\n       const {foundation, mockAdapter, helperText} = setupValueTest(\n           {value: '', optIsValid: false, hasLabel: true, useHelperText: true});\n\n       foundation.setValue('');\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n       expect(helperText.setValidity).toHaveBeenCalledWith(false);\n       expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('#setValue does not affect focused state', () => {\n    const {foundation, mockAdapter} = setupValueTest({value: ''});\n    foundation.setValue('');\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n  });\n\n  it('#setValue does not affect disabled state', () => {\n    const {foundation, mockAdapter} = setupValueTest({value: ''});\n    foundation.setValue('');\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.DISABLED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n    // Called once initially because the field is valid, should not be called\n    // twice.\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n  });\n\n  it('#setValue updates character counter when present', () => {\n    const {foundation, mockAdapter, characterCounter} =\n        setupTest({useCharacterCounter: true});\n    const nativeInput = {\n      type: 'text',\n      value: '',\n      maxLength: 4,\n      validity: {\n        valid: true,\n      },\n    };\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type: string;\n    //  value: string; maxLength: number; validity: { valid: boolean; }; }' is\n    //  not assignable to parameter of type 'MDCTextFieldNativeInputElement'.\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n\n    foundation.setValue('ok');\n    expect(characterCounter.setCounterValue).toHaveBeenCalledWith(2, 4);\n    expect(characterCounter.setCounterValue).toHaveBeenCalledTimes(1);\n  });\n\n  it('#setValue forces the character counter to update if value was updated independently',\n     () => {\n       const {foundation, mockAdapter, characterCounter} =\n           setupTest({useCharacterCounter: true});\n       const nativeInput = {\n         type: 'text',\n         value: '',\n         maxLength: 4,\n         validity: {\n           valid: true,\n         },\n       };\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type:\n       //  string; value: string; maxLength: number; validity: { valid: boolean;\n       //  }; }' is not assignable to parameter of type\n       //  'MDCTextFieldNativeInputElement'.\n       mockAdapter.getNativeInput.and.returnValue(nativeInput);\n       nativeInput.value = 'ok';\n       foundation.setValue('ok');\n       expect(characterCounter.setCounterValue).toHaveBeenCalledWith(2, 4);\n       expect(characterCounter.setCounterValue).toHaveBeenCalledTimes(1);\n     });\n\n  it('#isValid for native validation', () => {\n    const {foundation, nativeInput} =\n        setupValueTest({value: '', optIsValid: true});\n    expect(foundation.isValid()).toBeTruthy();\n\n    nativeInput.validity.valid = false;\n    expect(foundation.isValid()).toBeFalsy();\n  });\n\n  it('#setValid overrides native validation when useNativeValidation set to false',\n     () => {\n       const {foundation, nativeInput} =\n           setupValueTest({value: '', optIsValid: false});\n       foundation.setUseNativeValidation(false);\n       foundation.setValid(true);\n       expect(foundation.isValid()).toBeTruthy();\n\n       nativeInput.validity.valid = true;\n       foundation.setValid(false);\n       expect(foundation.isValid()).toBeFalsy();\n     });\n\n  it('#setValid updates classes', () => {\n    const {foundation, mockAdapter, helperText} =\n        setupTest({useHelperText: true});\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.getNativeInput.and.returnValue({\n      value: 'test',\n    } as MDCTextFieldNativeInputElement);\n\n    foundation.setValid(false);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).toHaveBeenCalledWith(false);\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(true);\n\n    foundation.setValid(true);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).toHaveBeenCalledWith(true);\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n\n    // None of these is affected by setValid.\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.DISABLED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('#setValid sets aria-describedby if validation helper text is visible',\n     () => {\n       const {foundation, mockAdapter, helperText} =\n           setupTest({useHelperText: true});\n       helperText.isValidation.and.returnValue(true);\n       helperText.isVisible.and.returnValue(true);\n       helperText.getId.and.returnValue('foooo');\n\n       foundation.setValid(true);\n       expect(mockAdapter.setInputAttr)\n           .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY, 'foooo');\n     });\n\n  it('#setValid removes aria-describedby if validation helper text is hidden',\n     () => {\n       const {foundation, mockAdapter, helperText} =\n           setupTest({useHelperText: true});\n       helperText.isValidation.and.returnValue(true);\n       helperText.isVisible.and.returnValue(false);\n       helperText.getId.and.returnValue('foooo');\n\n       foundation.setValid(true);\n       expect(mockAdapter.removeInputAttr)\n           .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY);\n     });\n\n  it('#setValid updates classes, but not label methods when hasLabel is false',\n     () => {\n       const {foundation, mockAdapter, helperText} =\n           setupTest({useHelperText: true});\n\n       foundation.setValid(false);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n       expect(helperText.setValidity).toHaveBeenCalledWith(false);\n       expect(mockAdapter.shakeLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n\n       foundation.setValid(true);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n       expect(helperText.setValidity).toHaveBeenCalledWith(true);\n       expect(mockAdapter.shakeLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n     });\n\n  it('#setDisabled flips disabled when a native input is given', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const nativeInput = {disabled: false} as MDCTextFieldNativeInputElement;\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n    foundation.setDisabled(true);\n    expect(foundation.isDisabled()).toBeTruthy();\n  });\n\n  it('#setDisabled has no effect when no native input is provided', () => {\n    const {foundation} = setupTest();\n    foundation.setDisabled(true);\n    expect(foundation.isDisabled()).toBeFalsy();\n  });\n\n  it('#setDisabled set the disabled property on the native input when there is one',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       const nativeInput = {disabled: false} as MDCTextFieldNativeInputElement;\n       mockAdapter.getNativeInput.and.returnValue(nativeInput);\n       foundation.setDisabled(true);\n       expect(nativeInput.disabled).toBeTruthy();\n     });\n\n  it('#setDisabled handles no native input being returned gracefully', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getNativeInput.and.returnValue(null);\n    expect(() => foundation.setDisabled).not.toThrow();\n  });\n\n  it('#setDisabled adds mdc-text-field--disabled when set to true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('#setDisabled removes mdc-text-field--invalid when set to true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(true);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n  });\n\n  it('#setDisabled removes mdc-text-field--disabled when set to false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setDisabled(false);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('#setDisabled sets disabled on leading icon', () => {\n    const {foundation, leadingIcon} = setupTest({useLeadingIcon: true});\n    foundation.setDisabled(true);\n    expect(leadingIcon.setDisabled).toHaveBeenCalledWith(true);\n  });\n\n  it('#setDisabled sets disabled on trailing icon', () => {\n    const {foundation, trailingIcon} = setupTest({useTrailingIcon: true});\n    foundation.setDisabled(true);\n    expect(trailingIcon.setDisabled).toHaveBeenCalledWith(true);\n  });\n\n  it('#setValid adds mdc-textfied--invalid when set to false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setValid(false);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n  });\n\n  it('#setValid removes mdc-textfied--invalid when set to true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.setValid(true);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n  });\n\n  it('#setValid should not trigger shake animation when text field is empty',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasLabel.and.returnValue(true);\n       mockAdapter.getNativeInput.and.returnValue({\n         value: '',\n       } as MDCTextFieldNativeInputElement);\n       foundation.setValid(false);\n       expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n     });\n\n  it('#init focuses on input if adapter.isFocused is true', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isFocused.and.returnValue(true);\n    foundation.activateFocus = jasmine.createSpy('activateFocus');\n    foundation.init();\n    expect(foundation.activateFocus).toHaveBeenCalledTimes(1);\n  });\n\n  it('#init does not focus if adapter.isFocused is false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.isFocused.and.returnValue(false);\n    foundation.init();\n    foundation.activateFocus = jasmine.createSpy('activateFocus');\n    expect(foundation.activateFocus).not.toHaveBeenCalled();\n  });\n\n  it('#init adds event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n\n    expect(mockAdapter.registerInputInteractionHandler)\n        .toHaveBeenCalledWith('focus', jasmine.any(Function));\n    expect(mockAdapter.registerInputInteractionHandler)\n        .toHaveBeenCalledWith('blur', jasmine.any(Function));\n    expect(mockAdapter.registerInputInteractionHandler)\n        .toHaveBeenCalledWith('input', jasmine.any(Function));\n    expect(mockAdapter.registerInputInteractionHandler)\n        .toHaveBeenCalledWith('mousedown', jasmine.any(Function));\n    expect(mockAdapter.registerInputInteractionHandler)\n        .toHaveBeenCalledWith('touchstart', jasmine.any(Function));\n    expect(mockAdapter.registerTextFieldInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.registerTextFieldInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n    expect(mockAdapter.registerValidationAttributeChangeHandler)\n        .toHaveBeenCalledWith(jasmine.any(Function));\n  });\n\n  it('#destroy removes event listeners', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation['validationObserver'] = new MutationObserver(() => {});\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterInputInteractionHandler)\n        .toHaveBeenCalledWith('focus', jasmine.any(Function));\n    expect(mockAdapter.deregisterInputInteractionHandler)\n        .toHaveBeenCalledWith('blur', jasmine.any(Function));\n    expect(mockAdapter.deregisterInputInteractionHandler)\n        .toHaveBeenCalledWith('input', jasmine.any(Function));\n    expect(mockAdapter.deregisterInputInteractionHandler)\n        .toHaveBeenCalledWith('mousedown', jasmine.any(Function));\n    expect(mockAdapter.deregisterInputInteractionHandler)\n        .toHaveBeenCalledWith('touchstart', jasmine.any(Function));\n    expect(mockAdapter.deregisterTextFieldInteractionHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterTextFieldInteractionHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n    expect(mockAdapter.deregisterValidationAttributeChangeHandler)\n        .toHaveBeenCalledWith(foundation['validationObserver']);\n  });\n\n  it('#init floats label if the input contains a value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.getNativeInput.and.returnValue({\n      value: 'Pre-filled value',\n      disabled: false,\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Property 'valid' is missing in\n      //  type '{ badInput: false; }' but required in type 'Pick<ValidityState,\n      //  \"valid\" | \"badInput\">'.\n      validity: {\n        badInput: false,\n      },\n    });\n    foundation.init();\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#init does not call floatLabel if there is no label and the input contains a value',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getNativeInput.and.returnValue({\n         value: 'Pre-filled value',\n         disabled: false,\n         // TODO: Wait until b/208710526 is fixed, then remove this\n         // autogenerated error suppression.\n         //  @ts-ignore(go/unfork-jasmine-typings): Property 'valid' is missing\n         //  in type '{ badInput: false; }' but required in type\n         //  'Pick<ValidityState, \"valid\" | \"badInput\">'.\n         validity: {\n           badInput: false,\n         },\n       });\n       foundation.init();\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('#init does not float label if the input does not contain a value', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getNativeInput.and.returnValue({\n      value: '',\n      disabled: false,\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Property 'valid' is missing in\n      //  type '{ badInput: false; }' but required in type 'Pick<ValidityState,\n      //  \"valid\" | \"badInput\">'.\n      validity: {\n        badInput: false,\n      },\n    });\n    foundation.init();\n    expect(mockAdapter.floatLabel)\n        .not.toHaveBeenCalledWith(\n            // TODO: Wait until b/208710526 is fixed, then remove this\n            // autogenerated error suppression.\n            //  @ts-ignore(go/unfork-jasmine-typings): Expected 1 arguments, but\n            //  got 3.\n            /* value */ '', /* isFocused */ false, /* isBadInput */ false);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#setHelperTextContent sets the content of the helper text element',\n     () => {\n       const {foundation, helperText} = setupTest({useHelperText: true});\n       foundation.setHelperTextContent('foo');\n       expect(helperText.setContent).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setLeadingIconAriaLabel sets the aria-label of the leading icon element',\n     () => {\n       const {foundation, leadingIcon} = setupTest({useLeadingIcon: true});\n       foundation.setLeadingIconAriaLabel('foo');\n       expect(leadingIcon.setAriaLabel).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setLeadingIconAriaLabel does nothing if element is not present', () => {\n    const {foundation} = setupTest({useLeadingIcon: false});\n    expect(() => foundation.setLeadingIconAriaLabel).not.toThrow();\n  });\n\n  it('#setLeadingIconContent sets the content of the leading icon element',\n     () => {\n       const {foundation, leadingIcon} = setupTest({useLeadingIcon: true});\n       foundation.setLeadingIconContent('foo');\n       expect(leadingIcon.setContent).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setLeadingIconContent does nothing if element is not present', () => {\n    const {foundation} = setupTest({useLeadingIcon: false});\n    expect(() => foundation.setLeadingIconContent).not.toThrow();\n  });\n\n  it('#setTrailingIconAriaLabel sets the aria-label of the trailing icon element',\n     () => {\n       const {foundation, trailingIcon} = setupTest({useTrailingIcon: true});\n       foundation.setTrailingIconAriaLabel('foo');\n       expect(trailingIcon.setAriaLabel).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setTrailingIconAriaLabel does nothing if element is not present', () => {\n    const {foundation} = setupTest({useTrailingIcon: false});\n    expect(() => foundation.setTrailingIconAriaLabel).not.toThrow();\n  });\n\n  it('#setTrailingIconContent sets the content of the trailing icon element',\n     () => {\n       const {foundation, trailingIcon} = setupTest({useTrailingIcon: true});\n       foundation.setTrailingIconContent('foo');\n       expect(trailingIcon.setContent).toHaveBeenCalledWith('foo');\n     });\n\n  it('#setTrailingIconContent does nothing if element is not present', () => {\n    const {foundation} = setupTest({useTrailingIcon: false});\n    expect(() => foundation.setTrailingIconContent).not.toThrow();\n  });\n\n  it('#notchOutline updates the width of the outline element', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getLabelWidth.and.returnValue(LABEL_WIDTH);\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.hasOutline.and.returnValue(true);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline)\n        .toHaveBeenCalledWith(LABEL_WIDTH * numbers.LABEL_SCALE);\n  });\n\n  const setupBareBonesTest = () => {\n    const {mockAdapter} = setUpFoundationTest(MDCTextFieldFoundation);\n    const foundationMap = {};\n    const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);\n    return {foundation, mockAdapter};\n  };\n\n  it('#notchOutline does nothing if no outline is present', () => {\n    const {foundation, mockAdapter} = setupBareBonesTest();\n    mockAdapter.hasOutline.and.returnValue(false);\n    mockAdapter.hasLabel.and.returnValue(true);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#notchOutline does nothing if no label is present', () => {\n    const {foundation, mockAdapter} = setupBareBonesTest();\n    mockAdapter.hasOutline.and.returnValue(true);\n    mockAdapter.hasLabel.and.returnValue(false);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline)\n        .not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('#notchOutline width is set to 0 if no label text is present', () => {\n    const {foundation, mockAdapter} = setupBareBonesTest();\n    mockAdapter.hasOutline.and.returnValue(true);\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.getLabelWidth.and.returnValue(0);\n\n    foundation.notchOutline(true);\n    expect(mockAdapter.notchOutline).toHaveBeenCalledWith(0);\n    expect(mockAdapter.notchOutline).toHaveBeenCalledTimes(1);\n  });\n\n  it('#notchOutline(false) closes the outline', () => {\n    const {foundation, mockAdapter} = setupBareBonesTest();\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.hasOutline.and.returnValue(true);\n\n    foundation.notchOutline(false);\n    expect(mockAdapter.closeOutline).toHaveBeenCalled();\n  });\n\n  it('on input styles label if input event occurs without any other events',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       let input: Function|undefined;\n       mockAdapter.hasLabel.and.returnValue(true);\n       mockAdapter.registerInputInteractionHandler\n           .withArgs(jasmine.any(String), jasmine.any(Function))\n           .and.callFake((eventType: string, handler: Function) => {\n             if (eventType === 'input') {\n               input = handler;\n             }\n           });\n       foundation.init();\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n       if (input !== undefined) {\n         input();\n       }\n       expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('on input doesnot styles label if input event occurs without any other events but hasLabel is false',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       let input: Function|undefined;\n       mockAdapter.registerInputInteractionHandler\n           .withArgs(jasmine.any(String), jasmine.any(Function))\n           .and.callFake((eventType: string, handler: Function) => {\n             if (eventType === 'input') {\n               input = handler;\n             }\n           });\n       foundation.init();\n       if (input !== undefined) {\n         input();\n       }\n       expect(mockAdapter.shakeLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('on input does nothing if input event preceded by keydown event', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      type: 'keydown',\n      key: 'Enter',\n    };\n    const mockInput = {\n      disabled: false,\n      value: '',\n    } as MDCTextFieldNativeInputElement;\n    let keydown: Function|undefined;\n    let input: Function|undefined;\n\n    mockAdapter.getNativeInput.and.returnValue(mockInput);\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'input') {\n            input = handler;\n          } else if (eventType === 'keydown') {\n            keydown = handler;\n          }\n        });\n    foundation.init();\n    if (keydown !== undefined) {\n      keydown(mockevent);\n    }\n    if (input !== undefined) {\n      input();\n    }\n    expect(mockAdapter.shakeLabel).not.toHaveBeenCalled();\n    expect(mockAdapter.floatLabel).not.toHaveBeenCalled();\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('on focus adds mdc-text-field--focused class', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let focus: Function|undefined;\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'focus') {\n            focus = handler;\n          }\n        });\n    foundation.init();\n    if (focus !== undefined) {\n      focus();\n    }\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.FOCUSED);\n  });\n\n  it('on focus activates line ripple', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let focus: Function|undefined;\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'focus') {\n            focus = handler;\n          }\n        });\n    foundation.init();\n    if (focus !== undefined) {\n      focus();\n    }\n    expect(mockAdapter.activateLineRipple).toHaveBeenCalled();\n  });\n\n  it('on focus styles label', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let focus: Function|undefined;\n    mockAdapter.hasLabel.and.returnValue(true);\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'focus') {\n            focus = handler;\n          }\n        });\n    foundation.init();\n    expect(mockAdapter.floatLabel).not.toHaveBeenCalledWith(jasmine.anything());\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n    if (focus !== undefined) {\n      focus();\n    }\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n  });\n\n  it('on focus do not styles label if hasLabel is false', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let focus: Function|undefined;\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'focus') {\n            focus = handler;\n          }\n        });\n    foundation.init();\n    if (focus !== undefined) {\n      focus();\n    }\n    expect(mockAdapter.floatLabel).not.toHaveBeenCalledWith(jasmine.anything());\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n    expect(mockAdapter.shakeLabel).not.toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('on focus makes helper text visible to the screen reader', () => {\n    const {foundation, mockAdapter, helperText} =\n        setupTest({useHelperText: true});\n    let focus: Function|undefined;\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'focus') {\n            focus = handler;\n          }\n        });\n    foundation.init();\n    if (focus !== undefined) {\n      focus();\n    }\n    expect(helperText.showToScreenReader).toHaveBeenCalled();\n  });\n\n  const setupBlurTest = () => {\n    const {foundation, mockAdapter, helperText} =\n        setupTest({useHelperText: true});\n    let blur: Function|undefined;\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'blur') {\n            blur = handler;\n          }\n        });\n    const nativeInput = {\n      value: '',\n      validity: {\n        valid: true,\n        badInput: false,\n      },\n      checkValidity: () => false,\n    };\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ value:\n    //  string; validity: { valid: boolean; badInput: boolean; }; checkValidity:\n    //  () => boolean; }' is not assignable to parameter of type\n    //  'MDCTextFieldNativeInputElement'.\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n    foundation.init();\n\n    return {foundation, mockAdapter, blur, nativeInput, helperText};\n  };\n\n  it('on blur removes mdc-text-field--focused class', () => {\n    const {mockAdapter, blur} = setupBlurTest();\n    if (blur !== undefined) {\n      blur();\n    }\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.FOCUSED);\n  });\n\n  it('on blur styles label when no input value present and validity checks pass',\n     () => {\n       const {blur, mockAdapter} = setupBlurTest();\n       mockAdapter.hasLabel.and.returnValue(true);\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.floatLabel).toHaveBeenCalledWith(false);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('does not style label on blur when no input value present and validity checks pass and hasLabel is false',\n     () => {\n       const {blur, mockAdapter} = setupBlurTest();\n       expect(mockAdapter.floatLabel)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Expected 1 arguments, but\n           //  got 2.\n           .not.toHaveBeenCalledWith(/* value */ '', /* isFocused */ false);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.shakeLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('on blur styles label if input has a value', () => {\n    const {blur, nativeInput, mockAdapter} = setupBlurTest();\n    mockAdapter.hasLabel.and.returnValue(true);\n    expect(mockAdapter.floatLabel).not.toHaveBeenCalledWith(jasmine.anything());\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n    nativeInput.value = 'non-empty value';\n    if (blur !== undefined) {\n      blur();\n    }\n    expect(mockAdapter.shakeLabel).toHaveBeenCalledWith(false);\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('does not style label on blur if input has a value and hasLabel is false',\n     () => {\n       const {blur, nativeInput, mockAdapter} = setupBlurTest();\n       expect(mockAdapter.floatLabel)\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Expected 1 arguments, but\n           //  got 2.\n           .not.toHaveBeenCalledWith(/* value */ '', /* isFocused */ false);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n       nativeInput.value = 'non-empty value';\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.shakeLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.floatLabel)\n           .not.toHaveBeenCalledWith(jasmine.anything());\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n     });\n\n  it('on blur removes mdc-text-field--invalid if useNativeValidation is true and' +\n         'input.checkValidity() returns true',\n     () => {\n       const {mockAdapter, blur} = setupBlurTest();\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n     });\n\n  it('on blur adds mdc-textfied--invalid if useNativeValidation is true and' +\n         'input.checkValidity() returns false',\n     () => {\n       const {mockAdapter, blur, nativeInput} = setupBlurTest();\n       nativeInput.validity.valid = false;\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.INVALID);\n     });\n\n  it('on blur does not remove mdc-text-field--invalid if useNativeValidation is false and' +\n         'input.checkValidity() returns true',\n     () => {\n       const {foundation, mockAdapter, blur} = setupBlurTest();\n       foundation.setUseNativeValidation(false);\n       foundation.setValid(false);\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.INVALID);\n     });\n\n  it('on blur does not add mdc-textfied--invalid if custom validity is true and' +\n         'input.checkValidity() returns false',\n     () => {\n       const {foundation, mockAdapter, blur, nativeInput} = setupBlurTest();\n       nativeInput.checkValidity = () => false;\n       foundation.setValid(true);\n       if (blur !== undefined) {\n         blur();\n       }\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.INVALID);\n     });\n\n  it('on blur set validity of helper text', () => {\n    const {blur, nativeInput, helperText} = setupBlurTest();\n    nativeInput.validity.valid = false;\n    if (blur !== undefined) {\n      blur();\n    }\n    expect(helperText.setValidity).toHaveBeenCalledWith(false);\n  });\n\n  it('on blur handles getNativeInput() not returning anything gracefully',\n     () => {\n       const {mockAdapter, blur} = setupBlurTest();\n       mockAdapter.getNativeInput.and.returnValue(null);\n       expect(blur).not.toThrow();\n     });\n\n  it('on keydown sets receivedUserInput to true when input is enabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let keydown: Function|undefined;\n    mockAdapter.registerTextFieldInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'keydown') {\n            keydown = handler;\n          }\n        });\n    mockAdapter.getNativeInput.and.returnValue({\n      disabled: false,\n      value: '',\n    } as MDCTextFieldNativeInputElement);\n    foundation.init();\n    expect(foundation['receivedUserInput']).toEqual(false);\n    if (keydown !== undefined) {\n      keydown();\n    }\n    expect(foundation['receivedUserInput']).toEqual(true);\n  });\n\n  it('on click does not set receivedUserInput if input is disabled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      type: 'click',\n    };\n    const mockInput = {\n      disabled: true,\n      value: '',\n    } as MDCTextFieldNativeInputElement;\n    let click: Function|undefined;\n\n    mockAdapter.getNativeInput.and.returnValue(mockInput);\n    mockAdapter.registerTextFieldInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'click') {\n            click = handler;\n          }\n        });\n    foundation.init();\n    expect(foundation['receivedUserInput']).toEqual(false);\n    if (click !== undefined) {\n      click(mockevent);\n    }\n    expect(foundation['receivedUserInput']).toEqual(false);\n  });\n\n  it('mousedown on the input sets the line ripple origin', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const mockevent = {\n      target: {\n        getBoundingClientRect: () => {\n          return {};\n        },\n      },\n      clientX: 200,\n      clientY: 200,\n    };\n\n    let clickHandler: Function|undefined;\n\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'mousedown') {\n            clickHandler = handler;\n          }\n        });\n\n    foundation.init();\n    if (clickHandler !== undefined) {\n      clickHandler(mockevent);\n    }\n\n    expect(mockAdapter.setLineRippleTransformOrigin)\n        .toHaveBeenCalledWith(jasmine.anything());\n  });\n\n  it('touchstart on the input sets the line ripple origin', () => {\n    const {foundation, mockAdapter} = setupTest();\n    const clientRectLeft = 50;\n    const clientX = 200;\n    const mockTouchStartEvent = {\n      touches: [{\n        target: {\n          getBoundingClientRect: () => {\n            return {left: clientRectLeft};\n          },\n        },\n        clientX: clientX,\n        clientY: 200,\n      }],\n    };\n\n    let clickHandler: Function|undefined;\n\n    mockAdapter.registerInputInteractionHandler\n        .withArgs(jasmine.any(String), jasmine.any(Function))\n        .and.callFake((eventType: string, handler: Function) => {\n          if (eventType === 'touchstart') {\n            clickHandler = handler;\n          }\n        });\n\n    foundation.init();\n    if (clickHandler !== undefined) {\n      clickHandler(mockTouchStartEvent);\n    }\n\n    expect(mockAdapter.setLineRippleTransformOrigin)\n        .toHaveBeenCalledWith(clientX - clientRectLeft);\n  });\n\n  it('on validation attribute change calls styleValidity', () => {\n    const {foundation, mockAdapter, helperText} =\n        setupTest({useHelperText: true});\n    let attributeChange: Function|undefined;\n    mockAdapter.registerValidationAttributeChangeHandler\n        .withArgs(jasmine.any(Function))\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(handler:\n        //  Function) => Function' is not assignable to parameter of type\n        //  '(handler: (attributeNames: string[]) => void) => MutationObserver'.\n        .and.callFake((handler: Function) => attributeChange = handler);\n    foundation.init();\n\n    if (attributeChange !== undefined) {\n      attributeChange(['required']);\n    }\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(cssClasses.INVALID);\n    expect(helperText.setValidity).toHaveBeenCalledWith(true);\n\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.DISABLED);\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n  });\n\n  it('should not call styleValidity on non-whitelisted attribute change',\n     () => {\n       const {foundation, mockAdapter, helperText} =\n           setupTest({useHelperText: true});\n       let attributeChange: Function|undefined;\n       mockAdapter.registerValidationAttributeChangeHandler\n           .withArgs(jasmine.any(Function))\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type\n           //  '(handler: Function) => Function' is not assignable to parameter\n           //  of type '(handler: (attributeNames: string[]) => void) =>\n           //  MutationObserver'.\n           .and.callFake((handler: Function) => attributeChange = handler);\n       foundation.init();\n       if (attributeChange !== undefined) {\n         attributeChange([{attributeName: 'form'}]);\n       }\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.INVALID);\n       expect(helperText.setValidity)\n           .not.toHaveBeenCalledWith(jasmine.any(Boolean));\n\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.FOCUSED);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(cssClasses.DISABLED);\n     });\n\n  it('label floats on invalid input even if value is empty', () => {\n    const {mockAdapter} = setupValueTest(\n        {value: '', optIsValid: false, optIsBadInput: true, hasLabel: true});\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('label floats when type is date even if value is empty', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasLabel.and.returnValue(true);\n    const nativeInput = {\n      type: 'date',\n      value: '',\n      validity: {\n        valid: true,\n        badInput: false,\n      },\n    };\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type: string;\n    //  value: string; validity: { valid: boolean; badInput: boolean; }; }' is\n    //  not assignable to parameter of type 'MDCTextFieldNativeInputElement'.\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n    foundation.init();\n    expect(mockAdapter.floatLabel).toHaveBeenCalledWith(true);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(cssClasses.LABEL_FLOATING);\n  });\n\n  it('#handleInput activates focus state', () => {\n    const {foundation, mockAdapter} = setupTest();\n\n    foundation.handleInput();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.FOCUSED);\n    expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n  });\n\n  it('#handleInput updates character counter on text input', () => {\n    const {foundation, mockAdapter, characterCounter} =\n        setupTest({useCharacterCounter: true});\n\n    const nativeInput = {\n      type: 'text',\n      value: '12345678',\n      maxLength: 10,\n      validity: {\n        valid: true,\n      },\n    };\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type: string;\n    //  value: string; maxLength: number; validity: { valid: boolean; }; }' is\n    //  not assignable to parameter of type 'MDCTextFieldNativeInputElement'.\n    mockAdapter.getNativeInput.and.returnValue(nativeInput);\n\n    foundation.handleInput();\n    expect(characterCounter.setCounterValue).toHaveBeenCalledWith(8, 10);\n    expect(characterCounter.setCounterValue).toHaveBeenCalledTimes(1);\n  });\n\n\n  it('#handleInput throws error when maxLength HTML attribute is not found in input element',\n     () => {\n       const {foundation, mockAdapter} = setupTest({useCharacterCounter: true});\n\n       const nativeInput = {\n         type: 'text',\n         value: '12345678',\n         validity: {\n           valid: true,\n         },\n         maxLength: -1,\n       };\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type:\n       //  string; value: string; validity: { valid: boolean; }; maxLength:\n       //  number; }' is not assignable to parameter of type\n       //  'MDCTextFieldNativeInputElement'.\n       mockAdapter.getNativeInput.and.returnValue(nativeInput);\n\n       expect(() => {foundation.handleInput()}).toThrow();\n     });\n\n  it('#handleValidationAttributeChange sets character counter when maxlength attribute value is changed in input ' +\n         'element',\n     () => {\n       const {foundation, mockAdapter, characterCounter} =\n           setupTest({useCharacterCounter: true});\n\n       const nativeInput = {\n         type: 'text',\n         value: '12345678',\n         maxLength: 10,\n         validity: {\n           valid: true,\n         },\n       };\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ type:\n       //  string; value: string; maxLength: number; validity: { valid: boolean;\n       //  }; }' is not assignable to parameter of type\n       //  'MDCTextFieldNativeInputElement'.\n       mockAdapter.getNativeInput.and.returnValue(nativeInput);\n\n       foundation.handleValidationAttributeChange(['maxlength']);\n       expect(characterCounter.setCounterValue).toHaveBeenCalledWith(8, 10);\n       expect(characterCounter.setCounterValue).toHaveBeenCalledTimes(1);\n     });\n\n  it('on required attribute change calls setLabelRequired', () => {\n    const {foundation, mockAdapter} = setupTest();\n    let attributeChange: Function|undefined;\n    mockAdapter.registerValidationAttributeChangeHandler\n        .withArgs(jasmine.any(Function))\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(handler:\n        //  Function) => Function' is not assignable to parameter of type\n        //  '(handler: (attributeNames: string[]) => void) => MutationObserver'.\n        .and.callFake((handler: Function) => attributeChange = handler);\n    foundation.init();\n\n    mockAdapter.getNativeInput.and.returnValue(\n        {required: true} as MDCTextFieldNativeInputElement);\n\n    if (attributeChange !== undefined) {\n      attributeChange(['required']);\n    }\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(true);\n\n    mockAdapter.getNativeInput.and.returnValue(\n        {required: false} as MDCTextFieldNativeInputElement);\n\n    if (attributeChange !== undefined) {\n      attributeChange(['required']);\n    }\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(false);\n  });\n\n  it('#init sets label required if native input is required', () => {\n    const {foundation, mockAdapter} =\n        setupValueTest({value: '', hasLabel: true, optIsRequired: true});\n    foundation.init();\n    expect(mockAdapter.setLabelRequired).toHaveBeenCalledWith(true);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-textfield/test/mdc-text-field.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-textfield.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-textfield/types.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTextFieldCharacterCounterFoundation} from './character-counter/foundation';\nimport {MDCTextFieldHelperTextFoundation} from './helper-text/foundation';\nimport {MDCTextFieldIconFoundation} from './icon/foundation';\n\nexport type MDCTextFieldNativeInputElement =\n    Pick<HTMLInputElement, 'disabled'|'maxLength'|'type'|'value'|'required'>&{\n  validity: Pick<ValidityState, 'badInput'|'valid'>;\n};\n\nexport interface MDCTextFieldFoundationMap {\n  helperText: MDCTextFieldHelperTextFoundation;\n  characterCounter: MDCTextFieldCharacterCounterFoundation;\n  leadingIcon: MDCTextFieldIconFoundation;\n  trailingIcon: MDCTextFieldIconFoundation;\n}\n"
  },
  {
    "path": "packages/mdc-theme/README.md",
    "content": "<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n"
  },
  {
    "path": "packages/mdc-theme/_all-theme-deprecated.scss",
    "content": "@forward './color-palette';\n@forward './functions';\n@forward './mixins';\n@forward './variables';\n"
  },
  {
    "path": "packages/mdc-theme/_color-custom-properties.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$secondary: --mdc-theme-secondary;\n"
  },
  {
    "path": "packages/mdc-theme/_color-palette.import.scss",
    "content": "@forward \"./all-theme-deprecated\" as material-color-* hide $material-color-primary, $material-color-on-primary, $material-color-accent, $material-color-secondary, $material-color-on-secondary, $material-color-background, $material-color-surface, $material-color-on-surface, $material-color-error, $material-color-on-error, $material-color-text-colors, $material-color-text-emphasis, $material-color-property-values, material-color-ink-color-for-fill-, material-color-prop-value, material-color-accessible-ink-color, material-color-is-valid-theme-prop-value-, material-color-text-emphasis, material-color-core-styles, material-color-prop, material-color-luminance, material-color-contrast, material-color-tone, material-color-contrast-tone, material-color-is-var-with-fallback-, material-color-get-var-fallback-, material-color-var-, material-color-color-hash, material-color-is-css-var-, material-color-get-css-varname-;\n"
  },
  {
    "path": "packages/mdc-theme/_color-palette.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$red-50: #ffebee;\n$red-100: #ffcdd2;\n$red-200: #ef9a9a;\n$red-300: #e57373;\n$red-400: #ef5350;\n$red-500: #f44336;\n$red-600: #e53935;\n$red-700: #d32f2f;\n$red-800: #c62828;\n$red-900: #b71c1c;\n$red-a100: #ff8a80;\n$red-a200: #ff5252;\n$red-a400: #ff1744;\n$red-a700: #d50000;\n\n$pink-50: #fce4ec;\n$pink-100: #f8bbd0;\n$pink-200: #f48fb1;\n$pink-300: #f06292;\n$pink-400: #ec407a;\n$pink-500: #e91e63;\n$pink-600: #d81b60;\n$pink-700: #c2185b;\n$pink-800: #ad1457;\n$pink-900: #880e4f;\n$pink-a100: #ff80ab;\n$pink-a200: #ff4081;\n$pink-a400: #f50057;\n$pink-a700: #c51162;\n\n$purple-50: #f3e5f5;\n$purple-100: #e1bee7;\n$purple-200: #ce93d8;\n$purple-300: #ba68c8;\n$purple-400: #ab47bc;\n$purple-500: #9c27b0;\n$purple-600: #8e24aa;\n$purple-700: #7b1fa2;\n$purple-800: #6a1b9a;\n$purple-900: #4a148c;\n$purple-a100: #ea80fc;\n$purple-a200: #e040fb;\n$purple-a400: #d500f9;\n$purple-a700: #a0f;\n\n$deep-purple-50: #ede7f6;\n$deep-purple-100: #d1c4e9;\n$deep-purple-200: #b39ddb;\n$deep-purple-300: #9575cd;\n$deep-purple-400: #7e57c2;\n$deep-purple-500: #673ab7;\n$deep-purple-600: #5e35b1;\n$deep-purple-700: #512da8;\n$deep-purple-800: #4527a0;\n$deep-purple-900: #311b92;\n$deep-purple-a100: #b388ff;\n$deep-purple-a200: #7c4dff;\n$deep-purple-a400: #651fff;\n$deep-purple-a700: #6200ea;\n\n$indigo-50: #e8eaf6;\n$indigo-100: #c5cae9;\n$indigo-200: #9fa8da;\n$indigo-300: #7986cb;\n$indigo-400: #5c6bc0;\n$indigo-500: #3f51b5;\n$indigo-600: #3949ab;\n$indigo-700: #303f9f;\n$indigo-800: #283593;\n$indigo-900: #1a237e;\n$indigo-a100: #8c9eff;\n$indigo-a200: #536dfe;\n$indigo-a400: #3d5afe;\n$indigo-a700: #304ffe;\n\n$blue-50: #e3f2fd;\n$blue-100: #bbdefb;\n$blue-200: #90caf9;\n$blue-300: #64b5f6;\n$blue-400: #42a5f5;\n$blue-500: #2196f3;\n$blue-600: #1e88e5;\n$blue-700: #1976d2;\n$blue-800: #1565c0;\n$blue-900: #0d47a1;\n$blue-a100: #82b1ff;\n$blue-a200: #448aff;\n$blue-a400: #2979ff;\n$blue-a700: #2962ff;\n\n$light-blue-50: #e1f5fe;\n$light-blue-100: #b3e5fc;\n$light-blue-200: #81d4fa;\n$light-blue-300: #4fc3f7;\n$light-blue-400: #29b6f6;\n$light-blue-500: #03a9f4;\n$light-blue-600: #039be5;\n$light-blue-700: #0288d1;\n$light-blue-800: #0277bd;\n$light-blue-900: #01579b;\n$light-blue-a100: #80d8ff;\n$light-blue-a200: #40c4ff;\n$light-blue-a400: #00b0ff;\n$light-blue-a700: #0091ea;\n\n$cyan-50: #e0f7fa;\n$cyan-100: #b2ebf2;\n$cyan-200: #80deea;\n$cyan-300: #4dd0e1;\n$cyan-400: #26c6da;\n$cyan-500: #00bcd4;\n$cyan-600: #00acc1;\n$cyan-700: #0097a7;\n$cyan-800: #00838f;\n$cyan-900: #006064;\n$cyan-a100: #84ffff;\n$cyan-a200: #18ffff;\n$cyan-a400: #00e5ff;\n$cyan-a700: #00b8d4;\n\n$teal-50: #e0f2f1;\n$teal-100: #b2dfdb;\n$teal-200: #80cbc4;\n$teal-300: #4db6ac;\n$teal-400: #26a69a;\n$teal-500: #009688;\n$teal-600: #00897b;\n$teal-700: #00796b;\n$teal-800: #00695c;\n$teal-900: #004d40;\n$teal-a100: #a7ffeb;\n$teal-a200: #64ffda;\n$teal-a400: #1de9b6;\n$teal-a700: #00bfa5;\n\n$green-50: #e8f5e9;\n$green-100: #c8e6c9;\n$green-200: #a5d6a7;\n$green-300: #81c784;\n$green-400: #66bb6a;\n$green-500: #4caf50;\n$green-600: #43a047;\n$green-700: #388e3c;\n$green-800: #2e7d32;\n$green-900: #1b5e20;\n$green-a100: #b9f6ca;\n$green-a200: #69f0ae;\n$green-a400: #00e676;\n$green-a700: #00c853;\n\n$light-green-50: #f1f8e9;\n$light-green-100: #dcedc8;\n$light-green-200: #c5e1a5;\n$light-green-300: #aed581;\n$light-green-400: #9ccc65;\n$light-green-500: #8bc34a;\n$light-green-600: #7cb342;\n$light-green-700: #689f38;\n$light-green-800: #558b2f;\n$light-green-900: #33691e;\n$light-green-a100: #ccff90;\n$light-green-a200: #b2ff59;\n$light-green-a400: #76ff03;\n$light-green-a700: #64dd17;\n\n$lime-50: #f9fbe7;\n$lime-100: #f0f4c3;\n$lime-200: #e6ee9c;\n$lime-300: #dce775;\n$lime-400: #d4e157;\n$lime-500: #cddc39;\n$lime-600: #c0ca33;\n$lime-700: #afb42b;\n$lime-800: #9e9d24;\n$lime-900: #827717;\n$lime-a100: #f4ff81;\n$lime-a200: #eeff41;\n$lime-a400: #c6ff00;\n$lime-a700: #aeea00;\n\n$yellow-50: #fffde7;\n$yellow-100: #fff9c4;\n$yellow-200: #fff59d;\n$yellow-300: #fff176;\n$yellow-400: #ffee58;\n$yellow-500: #ffeb3b;\n$yellow-600: #fdd835;\n$yellow-700: #fbc02d;\n$yellow-800: #f9a825;\n$yellow-900: #f57f17;\n$yellow-a100: #ffff8d;\n$yellow-a200: #ff0;\n$yellow-a400: #ffea00;\n$yellow-a700: #ffd600;\n\n$amber-50: #fff8e1;\n$amber-100: #ffecb3;\n$amber-200: #ffe082;\n$amber-300: #ffd54f;\n$amber-400: #ffca28;\n$amber-500: #ffc107;\n$amber-600: #ffb300;\n$amber-700: #ffa000;\n$amber-800: #ff8f00;\n$amber-900: #ff6f00;\n$amber-a100: #ffe57f;\n$amber-a200: #ffd740;\n$amber-a400: #ffc400;\n$amber-a700: #ffab00;\n\n$orange-50: #fff3e0;\n$orange-100: #ffe0b2;\n$orange-200: #ffcc80;\n$orange-300: #ffb74d;\n$orange-400: #ffa726;\n$orange-500: #ff9800;\n$orange-600: #fb8c00;\n$orange-700: #f57c00;\n$orange-800: #ef6c00;\n$orange-900: #e65100;\n$orange-a100: #ffd180;\n$orange-a200: #ffab40;\n$orange-a400: #ff9100;\n$orange-a700: #ff6d00;\n\n$deep-orange-50: #fbe9e7;\n$deep-orange-100: #ffccbc;\n$deep-orange-200: #ffab91;\n$deep-orange-300: #ff8a65;\n$deep-orange-400: #ff7043;\n$deep-orange-500: #ff5722;\n$deep-orange-600: #f4511e;\n$deep-orange-700: #e64a19;\n$deep-orange-800: #d84315;\n$deep-orange-900: #bf360c;\n$deep-orange-a100: #ff9e80;\n$deep-orange-a200: #ff6e40;\n$deep-orange-a400: #ff3d00;\n$deep-orange-a700: #dd2c00;\n\n$brown-50: #efebe9;\n$brown-100: #d7ccc8;\n$brown-200: #bcaaa4;\n$brown-300: #a1887f;\n$brown-400: #8d6e63;\n$brown-500: #795548;\n$brown-600: #6d4c41;\n$brown-700: #5d4037;\n$brown-800: #4e342e;\n$brown-900: #3e2723;\n\n$grey-50: #fafafa;\n$grey-100: #f5f5f5;\n$grey-200: #eee;\n$grey-300: #e0e0e0;\n$grey-400: #bdbdbd;\n$grey-500: #9e9e9e;\n$grey-600: #757575;\n$grey-700: #616161;\n$grey-800: #424242;\n$grey-900: #212121;\n\n$blue-grey-50: #eceff1;\n$blue-grey-100: #cfd8dc;\n$blue-grey-200: #b0bec5;\n$blue-grey-300: #90a4ae;\n$blue-grey-400: #78909c;\n$blue-grey-500: #607d8b;\n$blue-grey-600: #546e7a;\n$blue-grey-700: #455a64;\n$blue-grey-800: #37474f;\n$blue-grey-900: #263238;\n"
  },
  {
    "path": "packages/mdc-theme/_css.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n///     resolved by other theme functions first (i.e. custom property Maps and\n///     Material theme keys are not supported in this mixin). If the value is\n///     null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n///     provided, a second property/value declaration will be added before the\n///     main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n  $property,\n  $value,\n  $fallback-value: null,\n  $gss: (),\n  $important: false\n) {\n  // Normally setting a null value to a property will not emit CSS, so mixins\n  // wouldn't need to check this. However, Sass will throw an error if the\n  // interpolated property is a custom property.\n  @if $value != null {\n    $important-rule: if($important, ' !important', '');\n\n    @if $fallback-value and $enable-fallback-declarations {\n      @include gss.annotate($gss);\n      #{$property}: #{$fallback-value} #{$important-rule};\n\n      // Add @alternate to annotations.\n      $gss: map.merge(\n        $gss,\n        (\n          alternate: true,\n        )\n      );\n    }\n\n    @include gss.annotate($gss);\n    #{$property}: #{$value}#{$important-rule};\n  }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n  @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n    @return $value $value $value $value;\n  } @else if list.length($value) == 4 {\n    @return $value;\n  } @else if list.length($value) == 3 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n      list.nth($value, 2);\n  } @else if list.length($value) == 2 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n      list.nth($value, 2);\n  }\n\n  @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n"
  },
  {
    "path": "packages/mdc-theme/_custom-properties.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use './css';\n@use './gss';\n\n/// Configuration for custom properties.\n/// @see {mixin} configure\n$_config: (\n  emit-custom-properties: true,\n  emit-fallback-values: true,\n  emit-fallback-vars: true,\n  emit-declaration-fallback: true,\n  varname-prefix: 'mdc',\n);\n\n/// Configure options for custom properties. The configuration will be applied\n/// within the scope of the mixin's content and reset when the mixin scope ends.\n///\n/// @example - scss\n///   @include configure($emit-fallback-values: false) {\n///     // No fallback values will be emitted within this mixin scope\n///     @include another-mixin();\n///   }\n///\n/// All parameters must be provided as argument lists.\n///\n/// @link https://sass-lang.com/documentation/values/lists#argument-lists\n///\n/// @param {Bool} $emit-custom-properties [true] - Enable or disable all\n///     custom property emission.\n/// @param {Bool} $emit-fallback-values [true] - Enable or disable emission of\n///     fallback CSS static values. This does not include dynamic `var()`\n///     fallback values.\n/// @param {Bool} $emit-fallback-vars [true] - Enable or disable emission of\n///     fallback `var()` values.\n/// @param {String} $varname-prefix ['mdc'] - Global prefix for all custom properties.\n@mixin configure($config...) {\n  @if not meta.content-exists() {\n    @error 'content is required for configure()';\n  }\n\n  $config: meta.keywords($config);\n  @each $key, $value in $config {\n    @if $value == null {\n      $config: map.remove($config, $key);\n    }\n  }\n\n  @if list.length($config) == 0 {\n    @content;\n  } @else {\n    $previous: $_config;\n    // Use !global to avoid shadowing\n    // https://sass-lang.com/documentation/variables#shadowing\n    $_config: map.merge($_config, $config) !global;\n    @content;\n    $_config: $previous !global;\n  }\n}\n\n/// Returns true if the parameter is a custom property Map.\n///\n/// @param {*} $value - the value to test.\n/// @return true if the value is a custom property Map, or false if not.\n@function is-custom-prop($value) {\n  @return meta.type-of($value) == 'map' and map.has-key($value, 'varname');\n}\n\n/// Indicates whether or not a value is a custom property var() string.\n///\n/// @example - scss\n///   $is-prop-string: is-custom-prop-string('var(--foo)'); // true\n///\n/// @param {*} $value - The value to test.\n/// @return {Bool} True if the value is a custom property var() string, or\n///     false if not.\n@function is-custom-prop-string($value) {\n  @return meta.type-of($value) == 'string' and string.slice($value, 1, 4) ==\n    'var(';\n}\n\n/// Returns true if $prop1's varname and fallback values are deeply equal to\n/// $prop2's varname and fallback values.\n///\n/// @param {Map} $prop1 - the first value to test.\n/// @param {Map} $prop2 - the second value to test.\n/// @return true if both properties are deeply equal\n@function are-equal($prop1, $prop2) {\n  @return create-var($prop1) == create-var($prop2);\n}\n\n/// Creates a custom property Map.\n///\n/// @param {String} $varname - the custom property name.\n/// @param {String | Number | Map} - the fallback value (may be another custom\n///     property Map). May be null.\n/// @return a custom property Map.\n@function create($varname, $fallback: null) {\n  @if string.slice($varname, 1, 2) != '--' {\n    $varname: create-varname($varname);\n  }\n\n  @return (varname: $varname, fallback: $fallback);\n}\n\n/// Create a custom property variable name with the global prefix.\n///\n/// @example - scss\n///   $varname: create-varname(foo); // --mdc-foo\n///\n/// @param {String} $name - The name of the custom property.\n/// @return {String} The full CSS custom property variable name.\n@function create-varname($name) {\n  $varname-prefix: map.get($_config, 'varname-prefix');\n  @return --#{$varname-prefix}-#{$name};\n}\n\n/// Returns the custom property variable name of a custom property Map.\n///\n/// @param {Map} $custom-prop - a custom property Map.\n/// @return the custom property variable name defined by the Map.\n@function get-varname($custom-prop) {\n  @return map.get($custom-prop, 'varname');\n}\n\n/// Returns the fallback value of a custom property Map. May be null if the\n/// custom property does not have a fallback.\n///\n/// @param {Map} $custom-prop - a custom property Map.\n/// @param {Bool} $shallow - if true, return the first fallback value, which\n///     may be another custom property Map. Defaults to false, which will return\n///     the deep final fallback value.\n/// @return the fallback value of a custom property Map. May be null.\n@function get-fallback($custom-prop, $shallow: false) {\n  $fallback: map.get($custom-prop, 'fallback');\n  @if is-custom-prop($fallback) and not $shallow {\n    @return get-fallback($fallback);\n  }\n\n  @return $fallback;\n}\n\n/// Creates a new custom property Map and returns it with the specified new\n/// fallback value.\n///\n/// @param {Map} $custom-prop - the custom property Map to copy.\n/// @param {String | Number | Map} $new-fallback - the new fallback value of the\n///     custom property Map. May be null.\n/// @param {Bool} $shallow - if true, set the first fallback value. Defaults to\n///     false, which will set the deep final fallback value.\n/// @return a new custom property Map with the new fallback value.\n@function set-fallback($custom-prop, $new-fallback, $shallow: false) {\n  $varname: get-varname($custom-prop);\n  $first-fallback: get-fallback($custom-prop, $shallow: true);\n\n  @if is-custom-prop($first-fallback) and not $shallow {\n    // The first fallback is a custom property and $shallow is false. Deeply\n    // set the fallback value of the custom property and get the new custom\n    // property Map returned.\n    $new-fallback: set-fallback($first-fallback, $new-fallback);\n  }\n\n  @return create($varname, $new-fallback);\n}\n\n/// Creates and returns a CSS `var()` function value represented by the provided\n/// custom property Map.\n///\n/// If custom properties are disabled, this function will return the custom\n/// property's fallback value instead, which may be `null` and result in an\n/// empty declaration.\n///\n/// @param {Map} $custom-prop - A custom property Map.\n/// @return {*} A CSS value, typically a `var()` function, representing the\n///     custom property. The returned value may change depending on the current\n///     configuration options for custom properties and whether or not a\n///     fallback value is present in the custom property Map.\n@function create-var($custom-prop) {\n  @if not map.get($_config, emit-custom-properties) {\n    // If configured not to emit custom properties and a request is made for a\n    // custom prop's CSS value, return its fallback value. If this is null, it\n    // will result in an empty declaration.\n    @return get-fallback($custom-prop);\n  }\n\n  $varname: get-varname($custom-prop);\n  $fallback: get-fallback($custom-prop, $shallow: true);\n\n  $emit-fallback-vars: map.get($_config, emit-fallback-vars);\n  $fallback-is-prop: is-custom-prop($fallback);\n  @if $fallback-is-prop and $emit-fallback-vars {\n    @return var($varname, create-var($fallback));\n  }\n\n  $emit-fallback-values: map.get($_config, emit-fallback-values);\n  @if $fallback and not $fallback-is-prop and $emit-fallback-values {\n    @return var($varname, $fallback);\n  }\n\n  @return var($varname);\n}\n\n/// Retrieves the CSS declaration value for a custom property Map. This is\n/// typically a `var()` function.\n///\n/// If custom properties are disabled, the custom property's fallback value\n/// will be returned instead.\n///\n/// @param {Map} $custom-prop - The custom property Map to retrieve a\n///     declaration value for.\n/// @return {*} The CSS declaration value.\n@function get-declaration-value($custom-prop) {\n  // This will return just the fallback value if `emit-custom-properties` is false.\n  @return create-var($custom-prop);\n}\n\n/// Retrieves the CSS fallback declaration value for a custom property Map.\n/// This is typically a static CSS value if a custom property has a fallback, or\n/// null if it does not.\n///\n/// This function will always return `null` if custom properties or fallback\n/// values are disabled.\n///\n/// @param {Map} $custom-prop - The custom property Map to retrieve a fallback\n///     declaration value for.\n/// @return {String | null} The CSS fallback declaration value.\n@function get-declaration-fallback($custom-prop) {\n  $emit-custom-properties: map.get($_config, emit-custom-properties);\n  $emit-fallback-values: map.get($_config, emit-fallback-values);\n  $emit-declaration-fallback: map.get($_config, emit-declaration-fallback);\n  @if (not $emit-custom-properties) or\n    (not $emit-fallback-values) or\n    (not $emit-declaration-fallback)\n  {\n    @return null;\n  }\n\n  @return get-fallback($custom-prop);\n}\n\n/// Emits a CSS declaration for a custom property. A custom property may either\n/// be provided as the value to a CSS property string to be emitted as a var()\n/// function, or as a standalone value to be emitted as a custom property\n/// declaration.\n///\n/// @example - scss\n///   @include declaration(color, create(--foo, teal));\n///   // color: var(--foo, teal);\n///   @include declaration(create(--foo, teal));\n///   // --foo: teal;\n///\n/// Standalone custom properties must have a fallback value to emit as a CSS\n/// declaration.\n///\n/// The declaration emitted for a custom property may change or be ignored\n/// based on the current configuration for custom properties.\n///\n/// @see {mixin} css.declaration\n/// @see {mixin} configuration\n///\n/// @param {String} $property - The CSS property of the declaration or the\n///     custom property Map to emit.\n/// @param {Map} $custom-prop - A custom property Map for the property's value.\n///     Optional if $property is the custom property Map to emit.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration($property, $custom-prop: null, $gss: (), $important: false) {\n  @if $property {\n    $value: null;\n    $fallback-value: null;\n    @if is-custom-prop($property) {\n      @if map.get($_config, emit-custom-properties) {\n        $custom-prop: $property;\n        $property: get-varname($custom-prop);\n        $value: get-fallback($custom-prop, $shallow: true);\n        @if is-custom-prop($value) {\n          $value: create-var($value);\n        }\n      }\n    } @else {\n      @if not is-custom-prop($custom-prop) {\n        @error \"Invalid custom property: #{$custom-prop}. Must be a Map with 'varname' and 'fallback'.\";\n      }\n\n      $value: get-declaration-value($custom-prop);\n      $fallback-value: get-declaration-fallback($custom-prop);\n    }\n\n    @include css.declaration(\n      $property,\n      $value,\n      $fallback-value: $fallback-value,\n      $gss: $gss,\n      $important: $important\n    );\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/_functions.import.scss",
    "content": "@forward \"./all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, $mdc-theme-primary, $mdc-theme-on-primary, $mdc-theme-accent, $mdc-theme-secondary, $mdc-theme-on-secondary, $mdc-theme-background, $mdc-theme-surface, $mdc-theme-on-surface, $mdc-theme-error, $mdc-theme-on-error, $mdc-theme-text-colors, $mdc-theme-text-emphasis, $mdc-theme-property-values, mdc-theme-ink-color-for-fill-, mdc-theme-prop-value, mdc-theme-accessible-ink-color, mdc-theme-is-valid-theme-prop-value-, mdc-theme-text-emphasis, mdc-theme-core-styles, mdc-theme-prop;\n"
  },
  {
    "path": "packages/mdc-theme/_functions.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_color.scss' and '_theme.scss' Sass modules instead.\n@forward './theme-color' show luminance, contrast, tone, contrast-tone, color-hash;\n@forward './theme' show deep-get;\n"
  },
  {
    "path": "packages/mdc-theme/_gss.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n///   @include annotate((noflip: true));\n///   left: 0;\n///\n/// @example - scss\n///   @include annotate($noflip: true);\n///   left: 0;\n///\n/// @example - css\n///   /* @noflip */ /*rtl:ignore*/\n///   left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n///     for an annotation to be added.\n@mixin annotate($annotations...) {\n  $keywords: meta.keywords($annotations);\n  @if list.length($annotations) > 0 {\n    $annotations: list.nth($annotations, 1);\n  } @else {\n    $annotations: $keywords;\n  }\n\n  @if (map.get($annotations, alternate) == true) {\n    /* @alternate */\n  }\n\n  // noflip must be the last tag right before the property\n  @if (map.get($annotations, noflip) == true) {\n    /* @noflip */ /*rtl:ignore*/\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/_index.scss",
    "content": "@forward './theme-color' show\n  $background,\n  $error,\n  $primary,\n  $on-error,\n  $on-primary,\n  $on-secondary,\n  $on-surface,\n  $secondary,\n  $surface,\n  accessible-ink-color,\n  contrast,\n  contrast-tone,\n  luminance,\n  text-emphasis,\n  tone;\n@forward './theme' show core-styles, property;\n@forward './color-palette';\n"
  },
  {
    "path": "packages/mdc-theme/_keys.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use './custom-properties';\n\n/// A flat Map of keys and their values. Keys may be set to any static CSS\n/// value, or another key's name to resolve to that key's value.\n///\n/// @example - scss\n///   $_store: (\n///     primary: purple, // keys may be set to CSS values...\n///     button-color: primary, // ...or resolve to another key's value\n///   );\n///\n/// @type {Map}\n$_store: ();\n/// A flat Map of relationship links between keys. While key values may\n/// resolve to another key's value in the key store, the store does not\n/// preserve or infer relationships between keys.\n///\n/// Instead, this link Map records the original relationship between keys as\n/// their values are updated and potentially overridden with customizations.\n///\n/// @example - scss\n///   // Given these keys...\n///   $primary: purple;\n///   $button-color: $primary; // ...button-color is linked to the primary key\n///\n///   // A key store with value customizations may look like this:\n///   $_store: (\n///     primary: amber,\n///     button-color: teal, // the relationship is lost with a customization\n///   );\n///\n///   // The links Map preserves the relationship for custom property\n///   // generation, while the store Map is only focused on values.\n///   $_links: (\n///     button-color: primary,\n///   );\n///\n/// @type {Map}\n$_links: ();\n/// A map of key options. If a key has options, it will have an entry in this\n/// variable with a Map value with options for the key.\n///\n/// @example - scss\n///   // Option structure\n///   $_options: (\n///     key-name: (\n///       // An additional prefix to add when generating the varname of a\n///       // key's custom property\n///       // --mdc-<prefix>-key-name\n///       custom-property-prefix: prefix\n///     )\n///   );\n///\n/// @type {Map}\n$_options: ();\n\n/// Indicates whether or not the provided value is a registered key.\n///\n/// @param {String} $key - One or more key parts to check\n/// @return {Bool} True if the key is registered, or false if it is not.\n@function is-key($key...) {\n  $key: combine($key...);\n  @return map.has-key($_store, $key);\n}\n\n/// Retrieves a List of all keys matching the provided key group prefix.\n///\n/// @example - scss\n///   $keys: get-keys(typography);\n///   // (typography-headline,\n///   //  typography-body,\n///   //  typography-body-font,\n///   //  typography-body-size)\n///\n/// @param {String} $group - Optional group prefix to search by. If ommitted,\n///     all registered keys will be returned.\n/// @return {List} A List of all keys matching the group prefix.\n@function get-keys($group: '') {\n  $keys: ();\n  @each $key in map.keys($_store) {\n    @if string.index($key, $group) == 1 {\n      $keys: list.append($keys, $key);\n    }\n  }\n\n  @return $keys;\n}\n\n/// Registers a Map of keys and their values with the key store. Key values may\n/// either be CSS values or other key strings.\n///\n/// @example - scss\n///   @include set-values((\n///     primary: teal,\n///     label-color: primary\n///   ));\n///\n/// Options may also be added for each key by providing an `$options` parameter.\n///\n/// @example - scss\n///   @include set-values(\n///     $key-map,\n///     $options: (\n///       // An additional prefix to add when generating the varname of a\n///       // key's custom property\n///       // --mdc-<prefix>-key-name\n///       custom-property-prefix: prefix\n///     )\n///   );\n///\n/// Note that this mixin only sets key values. If a key points to another key,\n/// it does not link those keys when custom properties are emitted. Use\n/// `add-link()` or `register-theme()` to create links between keys.\n///\n/// @see {mixin} set-value\n/// @see {mixin} add-link\n/// @see {mixin} register-theme\n///\n/// @param {Map} $key-map - A Map of keys to register.\n/// @param {Map} $options [null] - Optional Map of options to add for each key.\n@mixin set-values($key-map, $options: null) {\n  $unused: set-values($key-map, $options: $options);\n}\n\n/// Function version of `set-values()`.\n///\n/// Mixins cannot be invoked within functions in Sass. Use this when\n/// `set-values()` must be used within a function. The return value may be\n/// discarded or re-assigned to the `$key-map` provided.\n///\n/// @example - scss\n///   @function foo() {\n///     $unused: set-values((primary: teal));\n///   }\n///\n///   @function bar() {\n///     $key-map: (primary: teal);\n///     $key-map: set-values($key-map);\n///   }\n///\n/// @see {mixin} set-values\n///\n/// @return {Map} `$key-map`, unmodified, for convenience.\n@function set-values($key-map, $options: null) {\n  @each $key, $value in $key-map {\n    $key: set-value($key, $value, $options: $options);\n  }\n\n  @return $key-map;\n}\n\n/// Sets the value of a key. Key values may either be CSS values or other key\n/// strings.\n///\n/// @example - scss\n///   @include set-value(primary, teal);\n///   @include set-value(label-color, primary);\n///\n/// Options may also be added for each key by providing an `$options` parameter.\n///\n/// @example - scss\n///   @include set-value(key-name, teal, $options: (\n///     // An additional prefix to add when generating the varname of a\n///     // key's custom property\n///     // --mdc-<prefix>-key-name\n///     custom-property-prefix: prefix\n///   ));\n///\n/// Note that this mixin only sets the key's value. If the key points to another\n/// key, it does not link those keys when custom properties are emitted. Use\n/// `add-link()` or `register-theme()` to create links between keys.\n///\n/// @see {mixin} add-link\n/// @see {mixin} register-theme\n///\n/// @param {String} $key - The key to set a value for.\n/// @param {*} $value - The value of the key.\n/// @param {Map} $options [null] - Optional Map of options to add for each key.\n@mixin set-value($key, $value, $options: null) {\n  $unused: set-value($key, $value, $options: $options);\n}\n\n/// Function version of `set-value()`.\n///\n/// Mixins cannot be invoked within functions in Sass. Use this when\n/// `set-value()` must be used within a function. The return value may be\n/// discarded or re-assigned to the `$key` provided.\n///\n/// @example - scss\n///   @function foo() {\n///     $unused: set-value(primary, teal);\n///   }\n///\n///   @function bar() {\n///     $key: primary;\n///     $key: set-value($key, teal);\n///   }\n///\n/// @see {mixin} set-value\n///\n/// @return {String} `$key`, unmodified, for convenience.\n@function set-value($key, $value, $options: null) {\n  // Use !global to avoid shadowing\n  // https://sass-lang.com/documentation/variables#shadowing\n  $_store: map.set($_store, $key, $value) !global;\n  @if $options {\n    $_options: map.set($_options, $key, $options) !global;\n  }\n\n  @return $key;\n}\n\n/// Add a link between two keys.\n///\n/// When keys are linked and chained custom properties are emitted, the value\n/// of `$key` will always include the `var()` function of its linked key, even\n/// if it overrides its linked key's value.\n///\n/// @example - scss\n///   @include add-link(label-color, primary);\n///   @include set-values((\n///     primary: teal,\n///     label-color: amber\n///   ));\n///\n///   .primary {\n///     @include theme.property(color, primary);\n///   }\n///\n///   .label-color {\n///     @include theme.property(color, label-color);\n///   }\n///\n/// @example - css\n///   .primary {\n///     color: var(--primary, teal);\n///   }\n///\n///   .label-color {\n///     color: var(--label-color, var(--primary, amber));\n///   }\n///\n///\n/// If a key does not already have a value set, its value will be set to the\n/// linked key provided.\n///\n/// @param {String} $key - The key to add a link to.\n/// @param {String} $link - The name to link to `$key`.\n/// @throw When attempting to change the link of a key that has already been\n///     linked.\n@mixin add-link($key, $link) {\n  $unused: add-link($key, $link);\n}\n\n/// Function version of `add-link()`.\n///\n/// Mixins cannot be invoked within functions in Sass. Use this when\n/// `add-link()` must be used within a function. The return value may be\n/// discarded or re-assigned to the `$key` provided.\n///\n/// @example - scss\n///   @function foo() {\n///     $unused: add-link(label-color, primary);\n///   }\n///\n///   @function bar() {\n///     $key: label-color;\n///     $key: set-value($key, primary);\n///   }\n///\n/// @see {mixin} `add-link()`\n///\n/// @return {String} `$key` for convenience.\n@function add-link($key, $link) {\n  @if map.has-key($_links, $key) {\n    @error '#{$key} already has a link';\n  }\n\n  // Use !global to avoid shadowing\n  // https://sass-lang.com/documentation/variables#shadowing\n  $_links: map.set($_links, $key, $link) !global;\n  @if not map.has-key($_store, $key) {\n    $key: set-value($key, $link);\n  }\n\n  @return $key;\n}\n\n/// Resolve a key to its CSS value. This may be a static CSS value or a dynamic\n/// `var()` value.\n///\n/// The value that this function returns may change depending on configuration\n/// options if a key's value points to another key.\n///\n/// To always retrieve the static CSS value a key resolves to, even if it points\n/// to another key, provide `$deep: true` as a parameter to the function.\n///\n/// @param {String...} $key - One or more key parts to resolve to a CSS value.\n/// @param {Bool} $deep [false] - Set to true as a named parameter to always\n///     resolve the key to its static CSS value and not a dynamic `var()` value.\n/// @return {*} The value the key resolves to. This may be `null` if the key\n///     (or the key it points to) has not been registered.\n@function resolve($key...) {\n  $deep: map.get(meta.keywords($key), deep);\n  $key: combine($key...);\n\n  $value: map.get($_store, $key);\n  @if is-key($value) {\n    $value: resolve($value);\n  }\n\n  @return $value;\n}\n\n/// Register a `$theme` Map variable's keys. This should only be done once in\n/// the `theme-styles()` mixin with the canonical `$theme` Map to initialize\n/// default values and linked keys.\n///\n/// @example - scss\n///   @mixin theme-styles($theme: button-filled-theme.$light-theme) {\n///     @include keys.register-theme($theme, button-filled);\n///     @include button-filled-theme.theme($theme);\n///   }\n///\n/// A component's `$theme` Map may have shared keys (such as color, shape, and\n/// typography) that need linked before user customization with the `theme()`\n/// mixin.\n///\n/// The `register-theme()` mixin handles adding these links with `add-link()`\n/// dynamically from a canonical `$theme` configuration provided by a trusted\n/// source in `theme-styles()`. Subsequent calls to `theme()` will not invoke\n/// `register-theme()` or change the linked keys' registration.\n///\n/// @param {Map} $theme - The theme Map to register keys for.\n/// @param {String} $prefix [null] - Optional prefix to prepend before each key.\n/// @param {Map} $options [null] - Optional Map of options to add for each key.\n@mixin register-theme($theme, $prefix: null, $options: null) {\n  // The first $theme Map received in theme-styles() should be used to\n  // register keys.\n  // Subsequent calls to theme() to customize key values will not be\n  // wrapped within theme-styles() and will not change the registered\n  // key values (or more importantly, their links), since\n  // customizations may be simple one-offs.\n  @each $key, $value in $theme {\n    @if $value != null {\n      $key: combine($prefix, $key);\n      @include set-value($key, $value, $options: $options);\n      @if is-key($value) {\n        @include add-link($key, $link: $value);\n      }\n    }\n  }\n}\n\n/// Create and resolve custom properties from a user-provided `$theme` Map\n/// variable. The created custom properties are returned in a Map that matches\n/// the key structure of `$theme`.\n///\n/// This function should be used within a `theme()` mixin after validation and\n/// before providing any values to subsequent mixins. This will ensure that all\n/// values are custom properties to support runtime theming.\n///\n/// @example - scss\n///   $light-theme: (\n///     label-color: on-primary\n///   );\n///\n///   @mixin theme($theme) {\n///     $theme: keys.create-theme-properties($theme, button-filled);\n///     /*(\n///       label-color: (\n///         varname: --mdc-button-filled-label-color,\n///         fallback: (\n///           varname: --mdc-theme-on-primary,\n///           fallback: white,\n///         )\n///       )\n///     )*/\n///   }\n///\n/// @param {Map} $theme - The theme Map to create custom properties for.\n/// @param {String} $prefix [null] - Optional prefix to prepend for each key's\n///     custom property.\n/// @return {Map} A similar `$theme` Map whose values are replaced with the\n///     newly created and resolved custom properties.\n@function create-theme-properties($theme, $prefix: null) {\n  $theme-with-props: ();\n  @each $name, $value in $theme {\n    @if $value != null {\n      @if is-key($value) {\n        $value: create-custom-property($value);\n      }\n\n      $key: combine($prefix, $name);\n\n      @if _is-map($value) {\n        @each $k, $v in $value {\n          $theme-with-props: map.set(\n            $theme-with-props,\n            $name,\n            $k,\n            custom-properties.create(_create-varname(combine($key, $k)), $v)\n          );\n        }\n      } @else {\n        $theme-with-props: map.set(\n          $theme-with-props,\n          $name,\n          custom-properties.create(_create-varname($key), $value)\n        );\n      }\n    }\n  }\n\n  @return $theme-with-props;\n}\n\n/// Create a custom property for a key that represents the key's linked\n/// relationships and final resolved static value.\n///\n/// This function ignores customization options and is intended to return the\n/// most accurate data structure representation of a key. Customization options\n/// (such as custom property configuration) will change how the returned value\n/// is emitted.\n///\n/// @param {$tring...} $key - One or more key parts to create a custom property\n///     for.\n/// @return {Map} A custom property Map for the key.\n@function create-custom-property($key...) {\n  $key: combine($key...);\n  $prop: custom-properties.create(_create-varname($key));\n  $link: map.get($_links, $key);\n  @if $link {\n    $prop: custom-properties.set-fallback($prop, create-custom-property($link));\n  }\n\n  @return custom-properties.set-fallback($prop, resolve($key, $deep: true));\n}\n\n@mixin declare-custom-properties($theme, $prefix: null) {\n  $theme: create-theme-properties($theme, $prefix);\n\n  @each $key, $value in $theme {\n    @if _is-map($value) {\n      @each $k, $v in $value {\n        @include custom-properties.declaration($v);\n      }\n    } @else {\n      @include custom-properties.declaration($value);\n    }\n  }\n}\n\n/// Creates a custom property varname for a key. This function will add a key's\n/// option's `custom-property-prefix` if it exists.\n///\n/// @param {String...} $key - One or more key parts to create a varname for.\n/// @return {String} The key's custom property varname.\n@function _create-varname($key...) {\n  $key: combine($key...);\n  $prefix: map.get($_options, $key, custom-property-prefix);\n  @if $prefix {\n    $key: combine($prefix, $key);\n  }\n\n  @return custom-properties.create-varname($key);\n}\n\n/// Combines one or more key parts into a key.\n///\n/// @example - scss\n///   $key: combine(body, font-size);\n///   // body-font-size\n///\n/// @param {String...} $parts - Arbitrary number of string key parts to combine.\n/// @return {String} A combined key string.\n@function combine($parts...) {\n  // Allow extra keywords to be passed to other functions without impacting this\n  // function, which does not expect any keywords.\n  $unused: meta.keywords($parts);\n  $key: '';\n  @each $part in $parts {\n    @if $part {\n      @if $key == '' {\n        $key: $part;\n      } @else {\n        $key: #{$key}-#{$part};\n      }\n    }\n  }\n\n  @return $key;\n}\n\n@function _is-map($map) {\n  @return meta.type-of($map) == 'map' and not\n    custom-properties.is-custom-prop($map);\n}\n\n/// Transform a user-provided `$theme` map's values into `var()` custom property\n/// values.\n///\n/// Note: this function does NOT create fallback values so it should not be used\n/// in contexts where IE11 support is needed. For those cases use\n/// `keys.create-theme-properties` instead.\n///\n/// Use this function in `theme-styles()` mixins to transform values into\n/// custom property `var()` \"slots\" that can subsequently be styled via\n/// `keys.declare-custom-properties` in the `theme()` mixin by the user.\n///\n/// @example - scss\n///   $light-theme: (\n///     label-color: purple\n///   );\n///\n///   @mixin theme-styles($theme) {\n///     $theme: keys.create-theme-vars($theme, button);\n///\n///     .foo {\n///       color: map.get($theme, label-color);\n///     }\n///   }\n///\n/// @example - css\n///     .foo {\n///       color: var(--mdc-button-label-color, purple);\n///     }\n///\n/// @param {Map} $theme - The theme Map to transform values into custom property\n///     `var()`s.\n/// @param {String} $prefix - Component and variant prefix to prepend for each\n///     token's custom property name.\n/// @return {Map} The provided `$theme` Map whose values are replaced with the\n///     `var()` custom properties.\n@function create-theme-vars($theme, $prefix) {\n  @each $key, $value in $theme {\n    @if $value != null {\n      $token: combine($prefix, $key);\n\n      @if meta.type-of($value) == 'map' {\n        $value: create-theme-vars($value, $token);\n      } @else {\n        $value: custom-properties.create-var(\n          custom-properties.create($token, $value)\n        );\n      }\n      $theme: map.set($theme, $key, $value);\n    }\n  }\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_map-ext.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n\n// A collection of extensions to the sass:map module\n// https://sass-lang.com/documentation/modules/map\n\n/// Splits a Map into two separate Maps: one without the provided keys and one\n/// exclusively with the provided keys.\n///\n/// @example - scss\n///   $map: (\n///     focus: blue,\n///     focus-within: blue,\n///     hover: teal,\n///     active: green,\n///   );\n///\n///   $pair: split($map, focus, focus-within);\n///   // (\n///   //   (hover: teal, active: green),\n///   //   (focus: blue, focus-within: blue)\n///   // );\n///\n/// @param {Map} $map - The Map to split.\n/// @param {String...} $keys - Keys to split the Map by.\n/// @return {List} A List pair with two new Maps: the first with the keys\n///     removed and the second exclusively with the keys.\n@function split($map, $keys...) {\n  $map1: ();\n  $map2: ();\n  @each $key, $value in $map {\n    @if list.index($keys, $key) {\n      $map2: map.set($map2, $key, $value);\n    } @else {\n      $map1: map.set($map1, $key, $value);\n    }\n  }\n\n  @return ($map1, $map2);\n}\n\n/// Picks provided keys from a Map.\n///\n/// @example - scss\n///   $map: (\n///     focus: blue,\n///     focus-within: blue,\n///     hover: teal,\n///     active: green,\n///   );\n///\n///   pick($map, hover, active);\n///   // (hover: teal, active: green),\n///\n///   pick($map, (hover, active)...);\n///   // (hover: teal, active: green),\n///\n/// @param {Map} $map - The Map to pick.\n/// @param {String...} $keys - Keys to pick from the Map.\n/// @return {List} Map with only the keys provided.\n@function pick($map, $keys...) {\n  @return list.nth(split($map, $keys...), 2);\n}\n\n///\n/// trim-keys returns the given map with any matching keys removed.\n///\n/// @example\n///   trim-keys(('foo': red, 'bar': 5), ('foo')) = ('bar': 5)\n///\n/// @param {Map} $map - the map to rename.\n/// @param {List} $keys - the key names to trim off.\n/// @return {Map} the $map with any matching keys removed.\n///\n@function trim-keys($map, $keys) {\n  $out: map.merge($map, ());\n  @each $key, $value in $map {\n    @if list.index($keys, $key) {\n      $out: map.remove($out, $key);\n    }\n  }\n  @return $out;\n}\n\n///\n/// rename-keys returns the given map with any matching keys renamed to the\n/// given name.\n///\n/// @example\n///   rename-keys(('foo': red), ('foo': 'bar')) = ('bar': red)\n///\n/// @param {Map} $map - the map to rename.\n/// @param {Map} $rename - the renames to apply.\n/// @return {Map} the $map with any matching keys renamed per $rename.\n///\n@function rename-keys($map, $rename) {\n  $out: trim-keys($map, map.keys($rename));\n  @each $from, $to in $rename {\n    @if map.has-key($map, $from) {\n      $out: map.set($out, $to, map.get($map, $from));\n    }\n  }\n  @return $out;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"./all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n"
  },
  {
    "path": "packages/mdc-theme/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_theme.scss' Sass module instead.\n@forward './theme' show core-styles, property, prop;\n"
  },
  {
    "path": "packages/mdc-theme/_replace.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:string';\n\n/// Replaces all name instances in the provided string with values from the\n/// provided replacement Map whose keys correspond to the name instances.\n/// Returns a new string with the replacements applied.\n///\n/// @example\n///   replace-string('calc(x + y)', (x: 16px, y: 50%)); // 'calc(16px + 50%)'\n///\n/// @example\n///   $foo: custom-properties.create-var(custom-properties.create(--foo, 8px));\n///   replace-string('calc(foo)', (foo: $foo)); // 'calc(var(--foo, 8px))';\n///\n/// @access private\n/// @param {String} $string - The string to make replacements on.\n/// @param {Map} $replace-map - A Map of name/value replacements. The keys of\n///     the Map are names that will be replaced in the string with the keys'\n///     respective values.\n/// @return {String} The string with replacements made, if any.\n@function replace-string($string, $replace-map) {\n  @if meta.type-of($replace-map) != 'map' {\n    @error 'mdc-theme: Invalid replacement #{$replace-map}. Must be a Map.';\n  }\n\n  @each $name, $replacement in $replace-map {\n    // Since the replacement values may contain the name themselves (such as\n    // a custom property: name \"foo\" and value \"var(--foo)\"), gather the indices\n    // first before replacing.\n    $indices: ();\n    $substring: $string;\n    $prev-index: null;\n    $index: string.index($substring, $name);\n    @while $index {\n      $substring: string.slice($substring, $index + string.length($name));\n\n      @if $prev-index {\n        // Add previous index's value to switch from \"substring index\" to\n        // absolute string index. Also add length - 1 since slice removes\n        // the entire word as well as lists being 1 indexed\n        $index: $index + $prev-index + string.length($name) - 1;\n      }\n\n      // Use list.join() to \"prepend\" the index to the start of the list. This\n      // allows us to iterate \"backwards\" later.\n      $indices: list.join($index, $indices);\n      $prev-index: $index;\n      $index: string.index($substring, $name);\n    }\n\n    // Since we \"prepended\" the indices, the list is sorted backwards, with the\n    // last index first. Replacing values last index to first index removes the\n    // need for us to adjust the indices as we replace them.\n    @each $index in $indices {\n      $before: string.slice($string, 1, $index - 1);\n      $after: string.slice($string, $index + string.length($name));\n      $string: $before + $replacement + $after;\n    }\n  }\n\n  @return $string;\n}\n\n/// Replaces all value instances in the provided list with values from the\n/// provided replacement Map whose keys correspond to the name instances.\n/// Returns a new list with the replacements applied.\n///\n/// @example\n///   replace-list(0 value, (value: 16px)); // (0 16px)\n///\n/// @see {mixin} replace-string\n///\n/// @access private\n/// @param {List} $list - The list to make replacements on.\n/// @param {Map} $replace-map - A Map of name/value replacements. The keys of\n///     the Map are names that will be replaced in the list with the keys'\n///     respective values.\n///     property value replacements instead of the `var()` declaration.\n/// @return {List} A new list with replacements made, if any.\n@function replace-list($list, $replace-map) {\n  $separator: list.separator($list);\n  $replaced-list: ();\n  @each $value in $list {\n    @if meta.type-of($value) == 'string' {\n      $replaced-list: list.append(\n        $replaced-list,\n        replace-string($value, $replace-map),\n        $separator\n      );\n    } @else if meta.type-of($value) == 'list' {\n      $replaced-list: list.append(\n        $replaced-list,\n        replace-list($value, $replace-map),\n        $separator\n      );\n    } @else {\n      $replaced-list: list.append($replaced-list, $value, $separator);\n    }\n  }\n\n  @return $replaced-list;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_selector-ext.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:math';\n@use 'sass:selector';\n@use 'sass:string';\n\n// A collection of extensions to the sass:selector module\n// https://sass-lang.com/documentation/modules/selector\n\n/// Recursively negates and flattens a compound selector.\n///\n/// This is useful for IE11 support when appending two selectors when the second\n/// selector may have another nested `:not()`, since IE11 does not supported\n/// complex selector lists within `:not()`.\n///\n/// @example - scss\n///   $selector1: '.foo';\n///   $selector2: '.bar:not(.baz)';\n///\n///   #{selector.append($selector1, ':not(#{$selector2})'} {\n///     /* Modern browsers */\n///   }\n///\n///   #{selector.append($selector1, negate($selector2)} {\n///     /* IE11 support */\n///   }\n///\n/// @example - css\n///   .foo:not(.bar:not(.baz)) {\n///     /* Modern browsers */\n///   }\n///\n///   .foo:not(.bar), .foo.baz {\n///     /* IE11 support */\n///   }\n///\n/// @param {String} $compound-selector - A compound selector to negate.\n/// @return {List} The negated selector in selector value format.\n@function negate($compound-selector) {\n  $result: null;\n  @each $simple-selector in selector.simple-selectors($compound-selector) {\n    $to-append: null;\n    @if string.index($simple-selector, ':not(') == 1 {\n      $inside-not: string.slice($simple-selector, 6, -2);\n      $inside-not-simple-selectors: selector.simple-selectors($inside-not);\n      $inside-not-result: null;\n\n      @each $inside-not-simple-selector\n        in selector.simple-selectors($inside-not)\n      {\n        @if $inside-not-result == null {\n          // Skip the first simple selector, which has already been negated by\n          // removing :not() when parsing $inside-not.\n          $inside-not-result: selector.parse($inside-not-simple-selector);\n        } @else {\n          // Flatten nested :not()s \".foo:not(.bar:not(.baz))\" (IE11 support)\n          @if string.index($inside-not-simple-selector, ':not(') == 1 {\n            $inside-not-result: list.join(\n              $inside-not-result,\n              _negate($inside-not-simple-selector)\n            );\n          } @else {\n            $inside-not-result: selector.append(\n              $inside-not-result,\n              $inside-not-simple-selector\n            );\n          }\n        }\n      }\n\n      $result: if(\n        $result,\n        list.join($result, $inside-not-result),\n        $inside-not-result\n      );\n    } @else {\n      $to-append: string.unquote(':not(#{$simple-selector})');\n      $result: if($result, selector.append($result, $to-append), $to-append);\n    }\n  }\n\n  @return $result;\n}\n\n/// Identical to `selector.append()`, but adheres strictly to CSS compound\n/// selector order.\n///\n/// @example - scss\n///   .foo::before {\n///     &[dir=rtl] { /* Invalid */ }\n///   }\n///\n///   .foo::before {\n///     @include append-strict(&, '[dir=rtl]') { /* Valid */ }\n///   }\n///\n/// @example - css\n///   .foo::before[dir=rtl] {\n///     /* Invalid */\n///   }\n///\n///   .foo[dir=rtl]::before {\n///     /* Valid */\n///   }\n///\n/// This is useful for mixins where the parent selector is unknown and the\n/// appended selector's position is critical to maintain valid CSS.\n///\n/// @param {List} $selectors - One or more selectors to append.\n@mixin append-strict($selectors...) {\n  @at-root {\n    #{append-strict($selectors...)} {\n      @content;\n    }\n  }\n}\n\n/// Function version of `append-strict()`. Use this instead of the mixin along\n/// with `@at-root` when combining the result of `append-strict()` with other\n/// selectors.\n///\n/// @example - scss\n///   .foo::before {\n///     // Cannot add a list of other selectors with an @include mixin.\n///     // @include append-strict(&, ':hover'), & {}\n///\n///     @at-root {\n///       // Use @at-root and interpolation to add additional selectors\n///       #{append-strict(&, ':hover')},\n///       & {\n///         color: inherit;\n///       }\n///     }\n///   }\n///\n/// @example - css\n///   .foo:hover::before,\n///   .foo::before {\n///     color: inherit;\n///   }\n///\n/// @see {mixin} append-strict\n///\n/// @param {List} $selectors - One or more selectors to append.\n/// @return {List} The appended selectors in selector value format.\n@function append-strict($selectors...) {\n  $selector-lists: ();\n  @each $selector in $selectors {\n    $selector-lists: list.append($selector-lists, selector.parse($selector));\n  }\n\n  @return _append-strict($selector-lists);\n}\n\n/// Iterates through multiple selector Lists and strictly appends every\n/// combination of each selector lists' complex selectors.\n///\n/// @see {mixin} _append-strict-complex-selectors\n///\n/// @param {List} $selector-lists - A List of selector lists to append.\n/// @return {List} A single selector List resulting from appending all the\n///     provided selector lists.\n@function _append-strict($selector-lists) {\n  $length: list.length($selector-lists);\n  // Track the current index of each complex selector (within each selector\n  // list) that we are creating a combination of.\n  //\n  // Selectors: ((1), (2a, 2b), (3))\n  // Combinations: (1, 2a, 3), (1, 2b, 3)\n  //\n  // Initialize it to the first complex selector index for each selector list.\n  $current-indices: ();\n  @for $i from 1 through $length {\n    $current-indices: list.append($current-indices, 1);\n  }\n\n  // The final result: a single selector list resulting from appending the\n  // provided selector lists.\n  $selector-list-result: ();\n\n  $has-more-combinations: true;\n  @while $has-more-combinations {\n    // A combination of complex selectors to add to the selector list result.\n    $complex-selector-combination: ();\n    @for $i from 1 through $length {\n      $selector-list: list.nth($selector-lists, $i);\n      $current-index: list.nth($current-indices, $i);\n      $complex-selector: list.nth($selector-list, $current-index);\n      $complex-selector-combination: _append-strict-complex-selectors(\n        $complex-selector-combination,\n        $complex-selector\n      );\n    }\n\n    $selector-list-result: list.append(\n      $selector-list-result,\n      $complex-selector-combination,\n      $separator: comma\n    );\n\n    // Increase the index of the last selector list's complex selector to its\n    // next one. If it reaches the length of the array, reset to 1 and bump the\n    // next selector list index.\n    //\n    // Given selector lists: ((1), (2a, 2b), (3))\n    // At indices:    ((1), (1), (1))\n    // Try bumping:   ((1), (1), (2*)) *This index is >length of 1 for the list\n    // Bump the next: ((1), (2), (1))\n    $bump-next-list-index: true;\n    @for $neg-i from $length * -1 through -1 {\n      @if $bump-next-list-index {\n        $i: math.abs($neg-i);\n        $selector-list: list.nth($selector-lists, $i);\n        $current-index: list.nth($current-indices, $i);\n        $next-index: $current-index + 1;\n        @if $next-index > list.length($selector-list) {\n          // Reset to start for the list and bump the next list (technically\n          // previous since we're iterating backwards).\n          $next-index: 1;\n          $bump-next-list-index: true;\n        } @else {\n          // If we bumped to the next index for this selector list, we can\n          // \"break\" the loop and continue to form the next combination.\n          $bump-next-list-index: false;\n        }\n\n        // Save the new current index for this selector list.\n        $current-indices: list.set-nth($current-indices, $i, $next-index);\n      }\n    }\n\n    // When the first selector list reaches its length, it will ask to bump the\n    // next selector list index. There are no more selector lists, which means\n    // there are no more combinations and the loop may end.\n    @if $bump-next-list-index {\n      $has-more-combinations: false;\n    }\n  }\n\n  @return $selector-list-result;\n}\n\n/// Appends two complex selectors together, strictly adhering to the CSS\n/// `<compound-selector>` type definition to avoid forming invalid resulting\n/// compound selectors.\n///\n/// @param {List} $complex-selector-a - The first List of space-separated\n///     compound selectors.\n/// @param {List} $complex-selector-a - The second List of space-separated\n///     compound selectors.\n/// @return {List} A resulting appended complex selector.\n@function _append-strict-complex-selectors(\n  $complex-selector-a,\n  $complex-selector-b\n) {\n  // If one of the lists is empty, return the other list.\n  @if list.length($complex-selector-a) < 1 {\n    @return $complex-selector-b;\n  }\n\n  @if list.length($complex-selector-b) < 1 {\n    @return $complex-selector-a;\n  }\n\n  // The \"joining\" of A and B happens at the last compound selector of A and the\n  // first compound selector of B.\n  //\n  // Example:\n  // \".foo .bar\" and \".baz :hover\" will append as\n  // \".foo .bar.baz :hover\"\n  $last-compound-selector-a: list.nth(\n    $complex-selector-a,\n    list.length($complex-selector-a)\n  );\n  $first-compound-selector-b: list.nth($complex-selector-b, 1);\n\n  // The compound selector CSS joining (\".bar\" and \".baz\") and their sorting\n  // only needs to happen on the last/first of A/B.\n  $simple-selectors-a: selector.simple-selectors($last-compound-selector-a);\n  $simple-selectors-b: selector.simple-selectors($first-compound-selector-b);\n  $sorted-simple-selectors: _sort-simple-selectors(\n    list.join($simple-selectors-a, $simple-selectors-b)\n  );\n\n  // The result can start to form by setting the last compound selector of A to\n  // the result of the sorted and joined \".bar.baz\"...\n  $result: list.set-nth(\n    $complex-selector-a,\n    list.length($complex-selector-a),\n    _join-simple-selectors($sorted-simple-selectors)\n  );\n\n  // ...then adding the remaining compound selectors (excluding the first one,\n  // which was already appended) from B.\n  @if list.length($complex-selector-b) > 1 {\n    @for $i from 2 through list.length($complex-selector-b) {\n      $result: list.append(list.nth($complex-selector-b, $i));\n    }\n  }\n\n  @return $result;\n}\n\n/// Combines a List of simple selectors together to form a compound selector.\n/// If there are any pseudo class function selectors that should nest their\n/// selectors within their parentheses, this function will do so.\n///\n/// @param {List} $simple-selectors - A List of simple selectors to join.\n/// @return {String} A compound selector.\n@function _join-simple-selectors($simple-selectors) {\n  $compound-selector: '';\n  $parens-index: _get-nestable-parens-index($simple-selectors);\n  @if $parens-index {\n    // Contains a selector, such as :host() that other selectors must be placed\n    // within the parentheses of. This selector should be moved to the front of\n    // the compound selector.\n    $compound-selector: list.nth($simple-selectors, $parens-index);\n    @if string.index($compound-selector, '(') != null {\n      // Already has parens. Remove the final closing parens so that additional\n      // selectors are placed within the parentheses.\n      $compound-selector: string.slice(\n        $compound-selector,\n        1,\n        string.length($compound-selector) - 1\n      );\n    } @else {\n      // Otherwise, add an opening parens.\n      $compound-selector: #{$compound-selector}#{string.unquote('(')};\n    }\n  }\n\n  @for $i from 1 through list.length($simple-selectors) {\n    @if $i != $parens-index {\n      // Skip the parens selector that was moved to the front, if any\n      $simple-selector: list.nth($simple-selectors, $i);\n      $compound-selector: #{$compound-selector}#{$simple-selector};\n    }\n  }\n\n  @if $parens-index {\n    // Add the closing parens\n    $compound-selector: #{$compound-selector}#{string.unquote(')')};\n  }\n\n  @return $compound-selector;\n}\n\n/// Searches a List of simple selectors for any pseudo class functions that can\n/// and should be nested with other selectors. If one is found, the index is\n/// returned.\n///\n/// @see {mixin} _can-and-should-nest-pseudo-class\n///\n/// @param {List} $simple-selectors - A List of simple selectors to search.\n/// @return {Number} The index of the selector with parens to nest, or null if\n///     there is none.\n@function _get-nestable-parens-index($simple-selectors) {\n  @for $i from 1 through list.length($simple-selectors) {\n    $simple-selector: list.nth($simple-selectors, $i);\n    @if _can-and-should-nest-pseudo-class($simple-selector) {\n      @return $i;\n    }\n  }\n\n  @return null;\n}\n\n/// Checks two things:\n///\n/// 1. If a simple selector is a pseudo class function that accepts selectors\n///    as its arguments.\n/// 2. If this selector is commonly used for nesting within.\n///\n/// For example, `:host` satisfies both #1 and #2, but the `:not()` pseudo class\n/// is not commonly used in abstract nesting within Sass.\n///\n/// @example - scss\n///   :host(:hover) {\n///     :enabled {\n///       // commonly expect :host(:hover:enabled),\n///       // since :host(:hover):enabled is invalid CSS\n///     }\n///   }\n///\n///   :not(:hover) {\n///     :enabled {\n///       // commonly expect :not(:hover):enabled\n///       // do not expect :not(:hover:enabled) as the intention\n///     }\n///   }\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the simple selector is a pseudo class function that\n///     should nest additional selectors within its parentheses.\n@function _can-and-should-nest-pseudo-class($simple-selector) {\n  @return string.index($simple-selector, ':host') != null or\n    string.index($simple-selector, '::slotted') != null;\n}\n\n/// Sorts a List of simple selectors according to the `<compound-selector>` CSS\n/// type definition.\n///\n/// ```\n/// <compound-selector> = [ <type-selector>? <subclass-selector>*\n///                     [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!\n/// ```\n///\n/// @example - scss\n///   $unsorted: (':hover', '::before', 'h1');\n///   #{selector.append(_sort-simple-selectors($unsorted...))} {}\n///\n/// @example - css\n///   h1::before:hover {}\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-compound-selector\n///\n/// @param {List} $simple-selectors - A List of simple selectors.\n/// @return {List} A List of sorted simple selectors.\n@function _sort-simple-selectors($simple-selectors) {\n  @if list.length($simple-selectors) <= 1 {\n    @return $simple-selectors;\n  }\n\n  $type-selectors: ();\n  $pseudo-element-selectors: ();\n  $subclass-selectors: ();\n\n  @each $simple-selector in $simple-selectors {\n    @if _is-type-selector($simple-selector) {\n      $type-selectors: list.append($type-selectors, $simple-selector);\n    } @else if _is-pseudo-element-selector($simple-selector) {\n      $pseudo-element-selectors: list.append(\n        $pseudo-element-selectors,\n        $simple-selector\n      );\n    } @else {\n      $subclass-selectors: list.append($subclass-selectors, $simple-selector);\n    }\n  }\n\n  @return list.join(\n    $type-selectors,\n    list.join($subclass-selectors, $pseudo-element-selectors)\n  );\n}\n\n/// Checks if a simple selector is a `<type-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-type-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is a type selector.\n@function _is-type-selector($simple-selector) {\n  @return not _is-subclass-selector($simple-selector);\n}\n\n/// Checks if a simple selector is a `<subclass-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-subclass-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is a subclass selector.\n@function _is-subclass-selector($simple-selector) {\n  @return _is-id-selector($simple-selector) or\n    _is-class-selector($simple-selector) or\n    _is-attribute-selector($simple-selector) or\n    _is-pseudo-class-selector($simple-selector);\n}\n\n/// Checks if a simple selector is an `<id-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-id-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is an ID selector.\n@function _is-id-selector($simple-selector) {\n  @return string.index($simple-selector, '#') == 1;\n}\n\n/// Checks if a simple selector is a `<class-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-class-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is a class selector.\n@function _is-class-selector($simple-selector) {\n  @return string.index($simple-selector, '.') == 1;\n}\n\n/// Checks if a simple selector is an `<attribute-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-attribute-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is an attribute selector.\n@function _is-attribute-selector($simple-selector) {\n  @return string.index($simple-selector, '[') == 1;\n}\n\n/// Checks if a simple selector is a `<pseudo-class-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-pseudo-class-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is a pseudo class selector.\n@function _is-pseudo-class-selector($simple-selector) {\n  @return string.index($simple-selector, ':') == 1;\n}\n\n/// Checks if a simple selector is a `<pseudo-element-selector>`.\n///\n/// @link https://drafts.csswg.org/selectors/#typedef-pseudo-element-selector\n///\n/// @param {String} $simple-selector - The simple selector to check.\n/// @return {Bool} True if the selector is a pseudo element selector.\n@function _is-pseudo-element-selector($simple-selector) {\n  @return string.index($simple-selector, '::') == 1;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_shadow-dom.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:selector';\n@use 'sass:string';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Global variable used to conditionally emit CSS selector fallback\n/// declarations in addition to CSS custom property overrides for IE11 support.\n/// Use `enable-css-selector-fallback-declarations()` mixin to configure this\n/// flag.\n///\n/// @example\n///\n///   @include shadow-dom.enable-css-selector-fallback-declarations();\n///   @include foo-bar-theme.theme($theme);\n///\n///   CSS output =>\n///\n///     --foo-bar: red;\n///\n///     // Fallback declarations for IE11 support\n///     .mdc-foo-bar__baz {\n///       color: red;\n///     }\n$css-selector-fallback-declarations: false;\n\n/// Enables CSS selector fallback declarations for IE11 support by setting\n/// global variable `$css-selector-fallback-declarations` to true. Call this\n/// mixin before theme mixin call.\n/// @param {Boolean} $enable Set to `true` to emit CSS selector fallback\n///     declarations.\n/// @example\n///   @include shadow-dom.enable-css-selector-fallback-declarations()\n///   @include foo-bar-theme.theme($theme);\n@mixin enable-css-selector-fallback-declarations($enable) {\n  $css-selector-fallback-declarations: $enable !global;\n}\n\n$_host: ':host';\n$_host-parens: ':host(';\n$_end-parens: ')';\n\n/// @deprecated - Use selector-ext.append-strict() instead:\n///\n/// @example - scss\n///   :host([outlined]), :host, :host button {\n///     @include selector-ext.append-strict(&, ':hover') {\n///       --my-custom-prop: blue;\n///     }\n///   }\n///\n/// @example - css\n///   :host([outlined]:hover), :host(:hover), :host button:hover {\n///     --my-custom-prop: blue;\n///   }\n///\n/// @example - scss\n///   :host([outlined]), :host, :host button {\n///     @at-root {\n///       #{selector-ext.append-strict(&, ':hover')},\n///       & {\n///         --my-custom-prop: blue;\n///       }\n///     }\n///   }\n///\n/// @example - css\n///   :host([outlined]:hover), :host(:hover), :host button:hover,\n///   :host([outlined]), :host, :host button {\n///     --my-custom-prop: blue;\n///   }\n///\n/// Given one or more selectors, this mixin will fix any invalid `:host` parent\n/// nesting by adding parentheses or inserting the nested selector into the\n/// parent `:host()` selector's parentheses. The content block provided to\n/// this mixin\n/// will be projected under the new selectors.\n///\n/// @example\n///   :host([outlined]), :host, :host button {\n///     @include host-aware(selector.append(&, ':hover'), &)) {\n///       --my-custom-prop: blue;\n///     }\n///   }\n///\n/// will output (but with selectors on a single line):\n/// :host([outlined]:hover), // Appended :hover argument\n/// :host(:hover),\n/// :host button:hover,\n/// :host([outlined]), // Ampersand argument\n/// :host,\n/// :host button, {\n///   --my-custom-prop: blue;\n/// };\n///\n/// @param {List} $selector-args - One or more selectors to be fixed for invalid\n/// :host syntax.\n@mixin host-aware($selector-args...) {\n  @each $selector in $selector-args {\n    @if not _is-sass-selector($selector) {\n      @error 'mdc-theme: host-aware() expected a sass:selector value type but received #{$selector}';\n    }\n  }\n\n  @if not _share-common-parent($selector-args...) {\n    @error 'mdc-theme: host-aware() requires all selectors to use the parent selector (&)';\n  }\n\n  $selectors: _flatten-selectors($selector-args...);\n  $processed-selectors: ();\n\n  @each $selector in $selectors {\n    $first-selector: list.nth($selector, 1);\n\n    @if _host-selector-needs-to-be-fixed($first-selector) {\n      $selector: list.set-nth(\n        $selector,\n        1,\n        _fix-host-selector($first-selector)\n      );\n\n      $processed-selectors: list.append(\n        $processed-selectors,\n        $selector,\n        $separator: comma\n      );\n    } @else {\n      // Either not in :host, or there are more selectors following the :host\n      // and nothing needs to be modified. The content can be placed within the\n      // original selector\n      $processed-selectors: list.append(\n        $processed-selectors,\n        $selector,\n        $separator: comma\n      );\n    }\n  }\n\n  @if list.length($processed-selectors) > 0 {\n    @at-root {\n      #{$processed-selectors} {\n        @content;\n      }\n    }\n  }\n}\n\n/// Determines whether a selector needs to be processed.\n/// Selectors that need to be processed would include anything of the format\n/// `^:host(\\(.*\\))?.+` e.g. `:host([outlined]):hover` or `:host:hover` but not\n/// `:host` or `:host([outlined])`\n///\n/// @param {String} $selector - Selector string to be processed\n/// @return {Boolean} Whether or not the given selector string needs to be fixed\n///     for an invalid :host selector\n@function _host-selector-needs-to-be-fixed($selector) {\n  $host-index: string.index($selector, $_host);\n  $begins-with-host: $host-index == 1;\n\n  @if not $begins-with-host {\n    @return false;\n  }\n\n  $_host-parens-index: _get-last-end-parens-index($selector);\n  $has-parens: $_host-parens-index != null;\n\n  @if $has-parens {\n    // e.g. :host(.inside).after -> needs to be fixed\n    // :host(.inside) -> does not need to be fixed\n    $end-parens-index: string.index($selector, $_end-parens);\n    $content-after-parens: string.slice($selector, $end-parens-index + 1);\n\n    $has-content-after-parens: string.length($selector) > $end-parens-index;\n\n    @return $has-content-after-parens;\n  } @else {\n    // e.g. :host.after -> needs to be fixed\n    // :host -> does not need to be fixed\n    $has-content-after-host: $selector != $_host;\n\n    @return $has-content-after-host;\n  }\n}\n\n/// Flattens a list of selectors\n///\n/// @param {List} $selector-args - A list of selectors to flatten\n/// @return {List} Flattened selectors\n@function _flatten-selectors($selector-args...) {\n  $selectors: ();\n  @each $selector-list in $selector-args {\n    $selectors: list.join($selectors, $selector-list);\n  }\n\n  @return $selectors;\n}\n\n/// Fixes an invalid `:host` selector of the format `^:host(\\(.*\\))?.+` to\n/// `:host(.+)`\n/// @example\n///   @debug _fix-host-selector(':host:hover') // :host(:hover)\n///   @debug _fix-host-selector(':host([outlined]):hover) // :host([outlined]:hover)\n///\n/// @param {String} $selector - Selector string to be fixed that follows the\n///     following format: `^:host(\\(.*\\))?.+`\n/// @return {String} Fixed host selector.\n@function _fix-host-selector($selector) {\n  $_host-parens-index: string.index($selector, $_host-parens);\n  $has-parens: $_host-parens-index != null;\n  $new-host-inside: '';\n\n  @if $has-parens {\n    // e.g. :host(.inside).after -> :host(.inside.after)\n    $end-parens-index: _get-last-end-parens-index($selector);\n    $inside-host-parens: string.slice(\n      $selector,\n      string.length($_host-parens) + 1,\n      $end-parens-index - 1\n    );\n    $after-host-parens: string.slice($selector, $end-parens-index + 1);\n\n    $new-host-inside: $inside-host-parens + $after-host-parens;\n  } @else {\n    // e.g. :host.after -> :host(.after)\n    $new-host-inside: string.slice($selector, string.length($_host) + 1);\n  }\n\n  @return ':host(#{$new-host-inside})';\n}\n\n/// Returns the index of the final occurrence of the end-parenthesis in the\n/// given string or null if there is none.\n///\n/// @param {String} $string - The string to be searched\n/// @return {null|Number}\n@function _get-last-end-parens-index($string) {\n  $index: string.length($string);\n\n  @while $index > 0 {\n    $char: string.slice($string, $index, $index);\n    @if $char == $_end-parens {\n      @return $index;\n    }\n\n    $index: $index - 1;\n  }\n\n  @return null;\n}\n\n/// Returns true if the provided List of Sass selectors share a common parent\n/// selector. This function ensures that the parent selector (`&`) is used with\n/// `host-aware()`.\n///\n/// @example\n///   _share-common-parent(\n///     ('.foo:hover'), ('.foo'  '.bar'), ('.baz' '.foo')\n///   ); // true\n///\n///   _share-common-parent(\n///     ('.foo:hover'), ('.foo' '.bar'), ('.baz' '.bar')\n///   ); // false\n///\n/// The purpose of this function is to make sure that a group of selectors do\n/// not violate Sass nesting rules. Due to the dynamic nature of `host-aware()`,\n/// it's possible to provide invalid selector combinations.\n///\n/// @example\n///   // Valid native nesting\n///   :host {\n///     &:hover,\n///     .foo,\n///     .bar & {\n///       color: blue;\n///     }\n///   }\n///   // Valid host-aware() nesting\n///   :host {\n///     @include host-aware(\n///       selector.append(&, ':hover'),\n///       selector.nest(&, '.foo'),\n///       selector.nest('.bar', &),\n///     ) {\n///       color: blue;\n///     }\n///   }\n///   // Output\n///   :host(:hover),\n///   :host .foo,\n///   .bar :host {\n///     color: blue;\n///   }\n///\n///   // Invalid use of host-aware()\n///   :host {\n///     @include host-aware(\n///       selector.append(&, ':hover'),\n///       selector.parse('.foo') // Does not share a common parent via `&`\n///     ) {\n///       color: blue;\n///     }\n///   }\n///   // Invalid output: no way to write this natively without using @at-root\n///   :host(:hover),\n///   .foo {\n///     color: blue;\n///   }\n///\n/// @param {Arglist} $selector-lists - An argument list of Sass selectors.\n/// @return true if the selectors share a common parent selector, or false\n///   if not.\n@function _share-common-parent($selector-lists...) {\n  // To validate, this function will extract the simple selectors from each\n  // complex selector and compare them to each other. Every complex selector\n  // should share at least one common simple parent selector.\n  //\n  // We do this by keeping track of each simple selector and if they're present\n  // within a complex selector. At the end of checking all the selectors, at\n  // least one of simple selectors should have been seen for each one of the\n  // complex selectors.\n  //\n  // Each selector list index needs to track its own selector count Map. This is\n  // because each comma-separated list has its own root parent selector that\n  // we're looking for:\n  // .foo,\n  // .bar {\n  //   &:hover,\n  //   .baz & { ... }\n  // }\n  // ('.foo:hover', '.bar:hover'), ('.baz' '.foo', '.baz' '.bar')\n  //\n  // In the first index of each selector list, we're looking for the parent\n  // \".foo\". In the second index we're looking for the parent \".bar\".\n  $selector-counts-by-index: ();\n  $expected-counts-by-index: ();\n  @each $selector-list in $selector-lists {\n    @each $complex-selector in $selector-list {\n      $selector-list-index: list.index($selector-list, $complex-selector);\n      $selector-count-map: map.get(\n        $selector-counts-by-index,\n        $selector-list-index\n      );\n      @if not $selector-count-map {\n        $selector-count-map: ();\n      }\n\n      $expected-count: map.get($expected-counts-by-index, $selector-list-index);\n      @if not $expected-count {\n        $expected-count: 0;\n      }\n\n      $simple-selectors-set: ();\n      @each $selector in $complex-selector {\n        @each $simple-selector in selector.simple-selectors($selector) {\n          // Don't use list.join() because there may be duplicate selectors\n          // within the complex selector. We want to treat $simple-selectors-set\n          // like a Set where there are no duplicate values so that we don't\n          // mess up our count by counting one simple selector too many times\n          // for a single complex selector.\n          @if not list.index($simple-selectors-set, $simple-selector) {\n            $simple-selectors-set: list.append(\n              $simple-selectors-set,\n              $simple-selector\n            );\n          }\n        }\n      }\n\n      // Now that we have a \"Set\" of simple selectors for this complex\n      // selector, we can go through each one and update the selector count Map.\n      @each $simple-selector in $simple-selectors-set {\n        $count: map.get($selector-count-map, $simple-selector);\n        @if $count {\n          $count: $count + 1;\n        } @else {\n          $count: 1;\n        }\n\n        $selector-count-map: map.merge(\n          $selector-count-map,\n          (\n            $simple-selector: $count,\n          )\n        );\n      }\n\n      $selector-counts-by-index: map.merge(\n        $selector-counts-by-index,\n        (\n          $selector-list-index: $selector-count-map,\n        )\n      );\n      $expected-counts-by-index: map.merge(\n        $expected-counts-by-index,\n        (\n          $selector-list-index: $expected-count + 1,\n        )\n      );\n    }\n  }\n\n  @each $index, $selector-count-map in $selector-counts-by-index {\n    // If one of the selectors was seen the expected number of times, then we\n    // can reasonably assume that each selector shares a common parent.\n    // Verify for each index if there are multiple parents.\n    $found-parent: false;\n    @each $selector, $count in $selector-count-map {\n      $expected-count: map.get($expected-counts-by-index, $index);\n      @if $count == $expected-count {\n        $found-parent: true;\n      }\n    }\n\n    @if not $found-parent {\n      @return false;\n    }\n  }\n\n  // A common parent was found for each selector, or there were no selectors\n  // provided and we did not enter any for loops.\n  @return true;\n}\n\n/// Returns true if the value is a Sass selector type.\n///\n/// Selector types are a 2D List: a comma-separated list (the selector list)\n/// that contains space-separated lists (the complex selectors) that contain\n/// unquoted strings (the compound selectors).\n/// @link https://sass-lang.com/documentation/modules/selector\n///\n/// @example\n///   .foo, .bar button:hover { }\n///   $type: ((unquote('.foo')), (unquote('.bar') unquote('button:hover')),);\n///\n/// @param {*} $selector-list - A value to check.\n/// @return {Boolean} true if the value is a Sass selector, or false if not.\n@function _is-sass-selector($selector-list) {\n  // For the purposes of these utility functions, we don't care if the lists\n  // have the correct separated or if the strings are unquoted. All that\n  // matters is that the type is a 2D array and the values are strings to\n  // ensure \"close enough\" that the selector was generated by Sass.\n  //\n  // This function is primarily a safe-guard against an accidental string\n  // slipping in and forgetting to use a selector.append() which would cause a\n  // hard-to-debug problem.\n  @if meta.type-of($selector-list) != 'list' {\n    @return false;\n  }\n\n  // First level is the selector list: what's separated by commas\n  // e.g. \".foo, .bar\"\n  @each $complex-selector in $selector-list {\n    // Second level is the complex selector: what's separated by spaces\n    // e.g. \".foo .bar\"\n    @if meta.type-of($complex-selector) != 'list' {\n      @return false;\n    }\n\n    // Third level is the compound selector: the actual string\n    // e.g. \".foo\"\n    @each $selector in $complex-selector {\n      @if meta.type-of($selector) != 'string' {\n        @return false;\n      }\n    }\n  }\n\n  @return true;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_state.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:selector';\n@use 'sass:string';\n@use './custom-properties';\n@use './selector-ext';\n\n/// List of all valid states. When adding new state functions, add the name of\n/// the state to this List.\n$_valid-states: (\n  enabled,\n  disabled,\n  dragged,\n  error,\n  focus,\n  hover,\n  opened,\n  pressed,\n  selected,\n  unselected\n);\n\n/// Retrieves the default state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-default-state(blue); // blue\n///   get-default-state((default: blue)); // blue\n///   get-default-state((hover: red)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The default state if present, or null.\n@function get-default-state($default-or-map) {\n  $state: _get-state($default-or-map, default);\n  @if $state == null and not _is-state-map($default-or-map) {\n    @return $default-or-map;\n  }\n\n  @return $state;\n}\n\n/// Retrieves the enabled state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-enabled-state(blue); // blue\n///   get-enabled-state((enabled: blue)); // blue\n///   get-enabled-state((hover: red)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The enabled state if present, or null.\n@function get-enabled-state($default-or-map) {\n  @return _get-state($default-or-map, enabled);\n}\n\n/// Retrieves the disabled state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-disabled-state(blue); // null\n///   get-disabled-state((disabled: red)); // red\n///   get-disabled-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The disabled state if present, or null.\n@function get-disabled-state($default-or-map) {\n  @return _get-state($default-or-map, disabled);\n}\n\n/// Retrieves the dragged state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-dragged-state(blue); // null\n///   get-dragged-state((dragged: red)); // red\n///   get-dragged-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The dragged state if present, or null.\n@function get-dragged-state($default-or-map) {\n  @return _get-state($default-or-map, dragged);\n}\n\n/// Retrieves the error state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-error-state(blue); // null\n///   get-error-state((error: red)); // red\n///   get-error-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The error state if present, or null.\n@function get-error-state($default-or-map) {\n  @return _get-state($default-or-map, error);\n}\n\n/// Retrieves the focus state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-focus-state(blue); // null\n///   get-focus-state((focus: red)); // red\n///   get-focus-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The focus state if present, or null.\n@function get-focus-state($default-or-map) {\n  @return _get-state($default-or-map, focus);\n}\n\n/// Retrieves the hover state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-hover-state(blue); // null\n///   get-hover-state((hover: red)); // red\n///   get-hover-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The hover state if present, or null.\n@function get-hover-state($default-or-map) {\n  @return _get-state($default-or-map, hover);\n}\n\n/// Retrieves the opened state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-opened-state(blue); // null\n///   get-opened-state((opened: red)); // red\n///   get-opened-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The opened state if present, or null.\n@function get-opened-state($default-or-map) {\n  @return _get-state($default-or-map, opened);\n}\n\n/// Retrieves the pressed state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-pressed-state(blue); // null\n///   get-pressed-state((pressed: red)); // red\n///   get-pressed-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The pressed state if present, or null.\n@function get-pressed-state($default-or-map) {\n  @return _get-state($default-or-map, pressed);\n}\n\n/// Retrieves the selected state from the provided parameter. The parameter may\n/// be the state's default value or a state Map. A state Map has individual keys\n/// describing each state's value.\n///\n/// @example\n///   get-selected-state(blue); // null\n///   get-selected-state((selected: red)); // red\n///   get-selected-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The selected state if present, or null.\n@function get-selected-state($default-or-map) {\n  @return _get-state($default-or-map, selected);\n}\n\n/// Retrieves the unselected state from the provided parameter. The parameter\n/// may be the state's default value or a state Map. A state Map has individual\n/// key describing each state's value.\n///\n/// @example\n///   get-unselected-state(blue); // null\n///   get-unselected-state((unselected: red)); // red\n///   get-unselected-state((default: blue)); // null\n///\n/// @param {*} $default-or-map - The state's default value or a state Map.\n/// @return The unselected state if present, or null.\n@function get-unselected-state($default-or-map) {\n  @return _get-state($default-or-map, unselected);\n}\n\n@function _get-state($default-or-map, $state) {\n  @if _is-state-map($default-or-map) {\n    @return map.get($default-or-map, $state);\n  } @else {\n    @return null;\n  }\n}\n\n@function _is-state-map($default-or-map) {\n  @return meta.type-of($default-or-map) == 'map' and not\n    custom-properties.is-custom-prop($default-or-map);\n}\n\n/// Appends the default state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include default($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin default($selectors) {\n  @include enabled($selectors) {\n    @content;\n  }\n}\n\n/// Appends the enabled state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include enabled($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin enabled($selectors) {\n  @include _selector($selectors, enabled) {\n    @content;\n  }\n}\n\n/// Appends the disabled state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include disabled($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:disabled {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin disabled($selectors) {\n  @include _selector($selectors, disabled) {\n    @content;\n  }\n}\n\n/// Appends the dragged state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include dragged($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled.mdc-foo--dragged {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin dragged($selectors) {\n  @include enabled($selectors) {\n    @include _selector($selectors, dragged) {\n      @content;\n    }\n  }\n}\n\n/// Appends the error state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include error($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:invalid {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin error($selectors) {\n  @include _selector($selectors, error) {\n    @content;\n  }\n}\n\n/// Appends the focus state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include focus($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled:focus:not(:active) {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin focus($selectors) {\n  @include enabled($selectors) {\n    @include _selector($selectors, focus) {\n      @content;\n    }\n  }\n}\n\n/// Appends the hover state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include hover($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled:hover:not(:focus):not(:active) {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin hover($selectors) {\n  @include enabled($selectors) {\n    @include _selector($selectors, hover) {\n      @content;\n    }\n  }\n}\n\n/// Appends the opened state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include opened($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo.mdc-foo--opened {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin opened($selectors) {\n  @include _selector($selectors, opened) {\n    @content;\n  }\n}\n\n/// Appends the pressed state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include pressed($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo:enabled:active {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin pressed($selectors) {\n  @include enabled($selectors) {\n    @include _selector($selectors, pressed) {\n      @content;\n    }\n  }\n}\n\n/// Appends the selected state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include selected($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo.mdc-foo--selected {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin selected($selectors) {\n  @include _selector($selectors, selected) {\n    @content;\n  }\n}\n\n/// Appends the unselected state selector to the current parent.\n///\n/// @example - scss\n///   .mdc-foo {\n///     @include unselected($selectors) {\n///       color: teal;\n///     }\n///   }\n///\n/// @example - css\n///   .mdc-foo.mdc-foo--unselected {\n///     color: teal;\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n@mixin unselected($selectors) {\n  @include _selector($selectors, unselected) {\n    @content;\n  }\n}\n\n/// Creates and returns a Map of independent selectors from a Map of simple\n/// selectors.\n///\n/// This function ensures that each selector is independent given all possible\n/// states provided. An \"independent\" selector does not rely on CSS override\n/// order or specificity.\n///\n/// @example - scss\n///   $selectors: state.create-selectors(\n///     (\n///       disabled: ':disabled',\n///       hover: ':hover',\n///       focus: ':focus',\n///       pressed: ':active',\n///     )\n///   );\n///   // (\n///   //   enabled: ':enabled',\n///   //   disabled: ':disabled',\n///   //   hover: ':hover:not(:focus):not(:active)',\n///   //   focus: ':focus:not(:active)',\n///   //   pressed: ':active',\n///   // )\n///\n/// @see {function} _create-independent-selector\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n/// @return {Map} A Map of state selectors.\n@function _create-selectors($selectors) {\n  $new-selectors: ();\n  @each $state, $selector in $selectors {\n    @if not list.index($_valid-states, $state) {\n      @error 'Unsupported state #{$state}, must be one of #{$_valid-states}.';\n    }\n\n    // Check if there are any dependent states for this state that we need to\n    // add to the selector with :not()\n    $dependent-states: ();\n    @each $group in $_dependent-state-groups {\n      $index: list.index($group, $state);\n      @if $index and $index < list.length($group) {\n        // State is part of this group. Add any remaining selectors as\n        // dependents, only if they haven't already been added (the state may be\n        // part of multiple groups with shared state dependents, like\n        // :hover:focus:active and :link:visited:hover:active)\n        @for $i from $index + 1 through list.length($group) {\n          $dependent: list.nth($group, $i);\n          @if not list.index($dependent-states, $dependent) {\n            $dependent-states: list.append($dependent-states, $dependent);\n          }\n        }\n      }\n    }\n\n    $dependents: ();\n    @each $dependent-state in $dependent-states {\n      $dependent: map.get($selectors, $dependent-state);\n      @if $dependent and not list.index($_independent-states, $dependent-state)\n      {\n        $dependents: list.append($dependents, $dependent);\n      }\n    }\n\n    // Make the selector independent (if any dependents were found)\n    $selector: _create-independent-selector($selector, $dependents...);\n    $new-selectors: map.set($new-selectors, $state, $selector);\n  }\n\n  $new-selectors: _add-default-enabled-selector($new-selectors);\n\n  @return $new-selectors;\n}\n\n/// Adds a default selector for the \"enabled\" state if one does not exist and if\n/// it is possible to infer one from the provided Map of selectors.\n///\n/// @example - scss\n///   _add-default-enabled-selector((disabled: ':disabled'));\n///   // (\n///   //   disabled: ':disabled',\n///   //   enabled: ':enabled',\n///   // )\n///\n///   _add-default-enabled-selector((disabled: '.mdc-foo--disabled'));\n///   // (\n///   //   disabled: '.mdc-foo--disabled',\n///   //   enabled: ':not(.mdc-foo--disabled)',\n///   // )\n///\n/// @param {Map} $selectors - A Map of state selectors.\n/// @return {Map} The same Map of selectors, potentially with an additional\n///     \"enabled\" key with the enabled selector value.\n@function _add-default-enabled-selector($selectors) {\n  $enabled: map.get($selectors, enabled);\n  $disabled: map.get($selectors, disabled);\n  @if $disabled == ':disabled' {\n    @if $enabled and $enabled != ':enabled' {\n      // TODO: Clean up instances of :not(:disabled)\n      // Enabled selector was provided, but it was not :enabled. These\n      // can be cleaned up, but don't change them right now.\n      @warn 'Use :enabled instead of #{$enabled} when using :disabled.';\n      @return $selectors;\n    }\n\n    // For :disabled, use :enabled instead of the :not() variant\n    @return map.set($selectors, enabled, ':enabled');\n  }\n\n  @if $disabled and not $enabled {\n    @return map.set($selectors, enabled, selector-ext.negate($disabled));\n  }\n\n  @return $selectors;\n}\n\n/// A Map of override selectors. This can be used to temporarily change and\n/// configure state selectors.\n/// @type {Map}\n/// @see {mixin} override-selectors\n$_override-selectors: ();\n\n/// Override the current selectors provided to a state mixin for the provided\n/// content.\n///\n/// @example - scss\n///   // Change theme so that focus styles only show during keyboard navigation\n///   @include state.override-selectors((focus: ':focus-within')) {\n///     @include foo.theme($theme);\n///   }\n///\n/// @param {Map} $selectors A Map whose keys are states and values are string\n///     selectors.\n/// @content The styles to override state selectors for.\n@mixin override-selectors($selectors) {\n  $reset: $_override-selectors;\n  $_override-selectors: $selectors !global;\n  @content;\n  $_override-selectors: $reset !global;\n}\n\n$_independent-states: ();\n\n/// Indicates that for the given content of state mixins, the provided states\n/// are on their own independent elements and that they should ignore typical\n/// dependent groupings, such as `:hover`, `:focus`, and `:active`.\n///\n/// This mixin is useful when multiple states within a typical dependency group\n/// need to be visible at the same time (such as `:focus` and `:active`). To\n/// achieve this, the states must be on their own independent elements (such as\n/// separate `::before` and `::after` pseudo elements).\n///\n/// @example - scss\n///   .broken-ripple {\n///     @include state.hover {\n///       &::before { opacity: 0.1; }\n///     }\n///     @include state.focus {\n///       &::before { opacity: 0.2; }\n///     }\n///     @include state.pressed {\n///       &::after { opacity: 0.3; }\n///     }\n///   }\n///\n///   .fixed-ripple {\n///     @include state.independent-elements(pressed) {\n///       @include state.hover {\n///         &::before { opacity: 0.1; }\n///       }\n///       @include state.focus {\n///         &::before { opacity: 0.2; }\n///       }\n///       @include state.pressed {\n///         &::before { opacity: 0.3; }\n///       }\n///     }\n///   }\n///\n///  @example - css\n///   .broken-ripple:hover:not(:focus):not(:active)::before {\n///     opacity: 0.1;\n///   }\n///   .broken-ripple:focus:not(:active)::before {\n///     /* Focus styles will not be visible due to :not(:active)!! */\n///     opacity: 0.2;\n///   }\n///   .broken-ripple:active::after {\n///     opacity: 0.3;\n///   }\n///\n///   .fixed-ripple:hover:not(:focus)::before {\n///     opacity: 0.1;\n///   }\n///   .fixed-ripple:focus::before {\n///     /* Both focus and pressed styles are visible during press. Only hover\n///        and focus need to be independent of each other since they share an\n///        element. */\n///     opacity: 0.2;\n///   }\n///   .fixed-ripple:active::after {\n///     opacity: 0.3;\n///   }\n///\n/// @param {String...} $states - One or more states that should be considered\n///     independent and on its own element.\n/// @content Two or more state mixins that are part of a dependency group\n///     involving the provided independent states.\n@mixin independent-elements($states...) {\n  $reset: $_independent-states;\n  $_independent-states: $states !global;\n  @content;\n  $_independent-states: $reset !global;\n}\n\n/// A List of state groups that are dependent on each other for CSS override\n/// order. These are used to determine which state selectors are needed for\n/// `_create-independent-selector()`.\n// Note: Sass syntax does not allow declaring nested Lists; an empty second List\n// placeholder is added for the correct data structure.\n$_dependent-state-groups: ((hover, focus, pressed), ());\n\n/// Creates a selector that will be independent based on the other selectors\n/// that are dependents of it.\n///\n/// Selector dependencies are selector groups that must follow a certain order\n/// for CSS overrides. For example: `:hover`, `:focus`, `:active` or `:link`,\n/// `:visited`, `:hover`, `:active`.\n///\n/// Selectors at the start of a group are dependencies of selectors at the end\n/// of a group.\n///\n/// @example - scss\n///   #{_create-independent-selector(':hover', ':focus', ':active')} {\n///     color: teal;\n///   }\n///\n///   #{_create-independent-selector(':focus', ':active')} {\n///     color: magenta;\n///   }\n///\n/// @example - css\n///   :hover:not(:focus):not(:active) {\n///     color: teal;\n///   }\n///\n///   :focus:not(:active) {\n///     color: magenta;\n///   }\n///\n/// The returned selector is considered \"independent\" and does not rely on CSS\n/// override order or specificity within its group. In other words, \"hover\"\n/// styles can be customized after \"focus\" styles without hiding default focus\n/// styles.\n///\n/// @example - css\n///   /* Default focus styles */\n///   :focus:not(:active) { color: magenta; }\n///\n///   /* New hover styles, does not prevent focus styles from being visible */\n///   :hover:not(:focus):not(:active) { color: orange; }\n///\n/// @param {String} $selector - The main selector to target.\n/// @param {String...} $dependents - Additional group dependents of the main\n///     selector. They will be added as `:not()` selectors.\n/// @return {List} A new independent selector in selector value format.\n@function _create-independent-selector($selector, $dependents...) {\n  @each $dependent in $dependents {\n    @if $dependent {\n      $selector: selector-ext.append-strict(\n        $selector,\n        selector-ext.negate($dependent)\n      );\n    }\n  }\n\n  @return $selector;\n}\n\n@mixin _selector($selectors, $state) {\n  $selectors: _create-selectors(map.merge($selectors, $_override-selectors));\n  @if not map.has-key($selectors, $state) {\n    @error 'Missing #{$state} from #{$selectors}';\n  }\n\n  @at-root {\n    #{selector-ext.append-strict(&, map.get($selectors, $state))} {\n      @content;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/_string-ext.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'sass:string';\n\n/// Checks if a string starts with a given prefix.\n///\n/// @example - scss\n///   @debug has-prefix('var(--foo)', 'var('); // true\n///\n/// @param {String} $string - The string to test.\n/// @param {String} $prefix - The prefix to check.\n/// @return {Boolean} True if the string starts with the given prefix.\n@function has-prefix($string, $prefix) {\n  @return string.slice($string, 1, string.length($prefix)) == $prefix;\n}\n\n/// Checks if a string ends with a given suffix.\n///\n/// @example - scss\n///   @debug has-suffix('var(--foo)', ')'); // true\n///\n/// @param {String} $string - The string to test.\n/// @param {String} $suffix - The suffix to check.\n/// @return {Boolean} True if the string ends with the given suffix.\n@function has-suffix($string, $suffix) {\n  @return string.slice($string, -1 * string.length($suffix)) == $suffix;\n}\n\n/// Trims a repeating prefix from the start of a string.\n///\n/// @example - scss\n///   @debug trim-repeating-prefix('  foo bar  ', ' '); // \"foo bar  \"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $prefix - The repeating prefix string to trim.\n/// @return {String} The string with the prefix trimmed from the start.\n@function trim-repeating-prefix($string, $prefix) {\n  @while has-prefix($string, $prefix) {\n    $string: trim-prefix($string, $prefix);\n  }\n\n  @return $string;\n}\n\n/// Trims a prefix from the start of a string.\n///\n/// @example - scss\n///   @debug trim-prefix('var(--foo)', 'var('); // \"--foo)\"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $prefix - The prefix string to trim.\n/// @return {String} The string with the prefix trimmed from the start.\n@function trim-prefix($string, $prefix) {\n  @if has-prefix($string, $prefix) {\n    $string: string.slice($string, string.length($prefix) + 1);\n  }\n\n  @return $string;\n}\n\n/// Trims a repeating suffix from the end of a string.\n///\n/// @example - scss\n///   @debug trim-repeating-suffix('  foo bar  ', ' '); // \"  foo bar\"\n///   @debug trim-repeating-suffix('var(--foo)', ')'); // \"var(--foo\"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $suffix - The repeating suffix string to trim.\n/// @return {String} The string with the suffix trimmed from the end.\n@function trim-repeating-suffix($string, $suffix) {\n  @while has-suffix($string, $suffix) {\n    $string: trim-suffix($string, $suffix);\n  }\n\n  @return $string;\n}\n\n/// Trims a suffix from the end of a string.\n///\n/// @example - scss\n///   @debug trim-suffix('var(--foo)', ')'); // \"var(--foo\"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $suffix - The suffix string to trim.\n/// @return {String} The string with the suffix trimmed from the end.\n@function trim-suffix($string, $suffix) {\n  @if has-suffix($string, $suffix) {\n    $string: string.slice($string, 1, -1 * string.length($suffix) - 1);\n  }\n\n  @return $string;\n}\n\n/// Trims a repeating prefix and suffix from the start and end of a string.\n///\n/// If a suffix is not provided, the prefix is used as the suffix to trim.\n///\n/// @example - scss\n///   @debug trim-repeating('  foo bar  ', ' '); // \"foo bar\"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $prefix - The repeating prefix string to trim.\n/// @param {String} $suffix [$prefix] - The repeating suffix string to trim.\n/// @return {String} The string with the prefix and suffix trimmed.\n@function trim-repeating($string, $prefix, $suffix: $prefix) {\n  @return trim-repeating-prefix(\n    trim-repeating-suffix($string, $suffix),\n    $prefix\n  );\n}\n\n/// Trims a prefix and suffix from the start and end of a string.\n///\n/// If a suffix is not provided, the prefix is used as the suffix to trim.\n///\n/// @example - scss\n///   @debug trim('var(--foo)', 'var(', ')'); // \"--foo\"\n///\n/// @param {String} $string - The string to trim.\n/// @param {String} $prefix - The prefix string to trim.\n/// @param {String} $suffix [$prefix] - The suffix string to trim.\n/// @return {String} The string with the prefix and suffix trimmed.\n@function trim($string, $prefix, $suffix: $prefix) {\n  @return trim-prefix(trim-suffix($string, $suffix), $prefix);\n}\n"
  },
  {
    "path": "packages/mdc-theme/_theme-color.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n@use './custom-properties';\n@use './keys';\n\n@function _linear-channel-value($channel-value) {\n  $normalized-channel-value: math.div($channel-value, 255);\n  @if $normalized-channel-value < 0.03928 {\n    @return math.div($normalized-channel-value, 12.92);\n  }\n\n  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);\n}\n\n// Calculate the luminance for a color.\n// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n@function luminance($color) {\n  $red: _linear-channel-value(color.red($color));\n  $green: _linear-channel-value(color.green($color));\n  $blue: _linear-channel-value(color.blue($color));\n\n  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;\n}\n\n// Calculate the contrast ratio between two colors.\n// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n@function contrast($back, $front) {\n  $backLum: luminance($back) + 0.05;\n  $foreLum: luminance($front) + 0.05;\n\n  @return math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum));\n}\n\n// Determine whether the color is 'light' or 'dark'.\n@function tone($color) {\n  @if $color == 'dark' or $color == 'light' {\n    @return $color;\n  }\n\n  @if meta.type-of($color) != 'color' {\n    @warn '#{$color} is not a color. Falling back to \"dark\" tone.';\n    @return 'dark';\n  }\n\n  $minimumContrast: 3.1;\n\n  $lightContrast: contrast($color, white);\n  $darkContrast: contrast($color, rgba(black, 0.87));\n\n  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {\n    @return 'light';\n  } @else {\n    @return 'dark';\n  }\n}\n\n// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.\n// Returns 'dark' if the given color is light and 'light' if the given color is dark.\n@function contrast-tone($color) {\n  @return if(tone($color) == 'dark', 'light', 'dark');\n}\n\n///\n/// @param $color Target color in any color format.\n/// @return Returns hash in string format that uniquely represents\n///     any given color format. Useful for generating unique keyframe names.\n/// @example\n///   `color-hash(#6200ee)` => \"6200ee\"\n///   `color-hash(rgb(255, 112, 112))` => \"ff7070\"\n///   `color-hash((varname: --my-fancy-color, fallback: teal))` => 'teal'\n///   `color-hash((varname: --my-fancy-color, fallback: null))` => '--my-fancy-color'\n///\n@function color-hash($color) {\n  @if custom-properties.is-custom-prop($color) {\n    $color-value: custom-properties.get-fallback($color);\n\n    @if (custom-properties.is-custom-prop-string($color-value)) {\n      $varEndIndex: if(\n        string.index($color-value, ', '),\n        string.index($color-value, ', ') - 1,\n        -2\n      );\n      @return string.slice($color-value, 5, $varEndIndex);\n    }\n\n    @if (meta.type-of($color-value) == 'color') {\n      @return _get-hex-string($color-value);\n    }\n\n    @return custom-properties.get-varname($color);\n  }\n\n  @if meta.type-of($color) == 'string' {\n    @return $color;\n  }\n\n  @return _get-hex-string($color);\n}\n\n@function _get-hex-string($color) {\n  @return string.slice(color.ie-hex-str($color), 2); // Index starts at 1\n}\n\n//\n// Main theme colors for your brand.\n//\n// If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.\n//\n\n$primary: #6200ee !default; // baseline purple, 500 tone\n$on-primary: if(contrast-tone($primary) == 'dark', #000, #fff) !default;\n\n// The $mdc-theme-accent variable is DEPRECATED - it exists purely for backward compatibility.\n// The $mdc-theme-secondary* variables should be used for all new projects.\n/// @deprecated - use $secondary\n$accent: #018786 !default; // baseline teal, 600 tone\n$secondary: $accent !default;\n$on-secondary: if(contrast-tone($secondary) == 'dark', #000, #fff) !default;\n$background: #fff !default; // White\n\n$surface: #fff !default;\n$on-surface: if(contrast-tone($surface) == 'dark', #000, #fff) !default;\n\n$error: #b00020 !default;\n$on-error: if(contrast-tone($error) == 'dark', #000, #fff) !default;\n\n//\n// Text colors according to light vs dark and text type.\n//\n\n$text-colors: (\n  dark: (\n    primary: rgba(black, 0.87),\n    secondary: rgba(black, 0.54),\n    hint: rgba(black, 0.38),\n    disabled: rgba(black, 0.38),\n    icon: rgba(black, 0.38),\n  ),\n  light: (\n    primary: white,\n    secondary: rgba(white, 0.7),\n    hint: rgba(white, 0.5),\n    disabled: rgba(white, 0.5),\n    icon: rgba(white, 0.5),\n  ),\n) !default;\n\n$text-emphasis: (\n  high: 0.87,\n  medium: 0.6,\n  disabled: 0.38,\n) !default;\n\n@function ink-color-for-fill_($text-style, $fill-color) {\n  $contrast-tone: contrast-tone($fill-color);\n\n  @return map.get(map.get($text-colors, $contrast-tone), $text-style);\n}\n\n//\n// Primary text colors for each of the theme colors.\n//\n\n/// @deprecated Use individual variables (`$primary`, `$secondary`). Do not\n/// override this Map of variables.\n$property-values: (\n  primary: $primary,\n  secondary: $secondary,\n  background: $background,\n  surface: $surface,\n  error: $error,\n  on-primary: $on-primary,\n  on-secondary: $on-secondary,\n  on-surface: $on-surface,\n  on-error: $on-error,\n  text-primary-on-background: ink-color-for-fill_(primary, $background),\n  text-secondary-on-background: ink-color-for-fill_(secondary, $background),\n  text-hint-on-background: ink-color-for-fill_(hint, $background),\n  text-disabled-on-background: ink-color-for-fill_(disabled, $background),\n  text-icon-on-background: ink-color-for-fill_(icon, $background),\n  text-primary-on-light: ink-color-for-fill_(primary, light),\n  text-secondary-on-light: ink-color-for-fill_(secondary, light),\n  text-hint-on-light: ink-color-for-fill_(hint, light),\n  text-disabled-on-light: ink-color-for-fill_(disabled, light),\n  text-icon-on-light: ink-color-for-fill_(icon, light),\n  text-primary-on-dark: ink-color-for-fill_(primary, dark),\n  text-secondary-on-dark: ink-color-for-fill_(secondary, dark),\n  text-hint-on-dark: ink-color-for-fill_(hint, dark),\n  text-disabled-on-dark: ink-color-for-fill_(disabled, dark),\n  text-icon-on-dark: ink-color-for-fill_(icon, dark),\n) !default;\n\n@include keys.set-values(\n  $property-values,\n  $options: (custom-property-prefix: theme)\n);\n\n// A copy of the property values Map that is used to detect compile-time changes\n// for Angular support.\n$_property-values-copy: $property-values;\n\n/// Checks if the global $mdc-theme-property-values was dynamically changed at\n/// compile time. Typically, $property-values is configured once, but a Sass\n/// hack allows the variable to be changed multiple times and effectively\n/// support dynamic values.\n///\n/// Angular uses this in their dynamic theming. This function checks if this\n/// scenario has occurred and returns the current global value that should be\n/// used instead of the key store value.\n///\n/// @deprecated The function should not be used externally. It will be removed\n///     when $mdc-theme-property-values is fully deprecated and removed.\n@function deprecated-get-global-theme-key-value-if-changed($key) {\n  // Determine if we need to use a compile-time updated value to support\n  // Angular.\n  $current-global-value: map.get($property-values, $key);\n  $configured-global-value: map.get($_property-values-copy, $key);\n  @if $current-global-value != $configured-global-value {\n    // $mdc-theme-property-values was changed at compile time. Return the new\n    // compile-time value.\n    @return (value: $current-global-value, changed: true);\n  }\n\n  @return (changed: false);\n}\n\n// @deprecated use theme.property(). If you need to ensure the value is not a\n// custom property, use custom-properties.is-custom-prop() to check if the value\n// is a custom prop, then custom-properties.get-fallback() to get its value.\n// If `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\n// Otherwise, `$style` is treated as a theme property name, and the corresponding value from\n// `$mdc-theme-property-values` is returned. If this also fails, an error is thrown.\n//\n// This is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n//\n// Examples:\n//\n// 1. mdc-theme-prop-value(primary) => \"#6200ee\"\n// 2. mdc-theme-prop-value(blue)    => 'blue'\n//\n// NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.\n@function prop-value($style) {\n  @if custom-properties.is-custom-prop($style) {\n    @return custom-properties.get-fallback($style);\n  }\n\n  @if is-valid-theme-prop-value_($style) {\n    @return $style;\n  }\n\n  @if is-theme-key($style) {\n    // Determine if we need to use a compile-time updated value to support\n    // Angular.\n    $result: deprecated-get-global-theme-key-value-if-changed($style);\n    @if map.get($result, changed) {\n      @return map.get($result, value);\n    }\n  }\n\n  @return keys.resolve($style);\n}\n\n// NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.\n@function accessible-ink-color($fill-color, $text-style: primary) {\n  $fill-color-value: prop-value($fill-color);\n  $color-map-for-tone: map.get($text-colors, contrast-tone($fill-color-value));\n\n  @if not map.has-key($color-map-for-tone, $text-style) {\n    @error \"Invalid $text-style: '#{$text-style}'. Choose one of: #{map.keys($color-map-for-tone)}\";\n  }\n\n  @return map.get($color-map-for-tone, $text-style);\n}\n\n// NOTE: This function is depended upon by mdc-theme-prop-value (above) and thus must be defined in this file.\n@function is-valid-theme-prop-value_($style) {\n  @if $style == null {\n    @return false;\n  }\n\n  @return meta.type-of($style) == 'color' or $style == 'currentColor' or\n    string.slice($style, 1, 4) == 'var(' or $style == 'inherit' or $style ==\n    'transparent' or\n    // NOTE: `GrayText` is deprecated, but is the only feasible way to convey the\n    // correct high-contrast mode colors in alignment with Windows system colors.\n    $style == 'GrayText';\n}\n\n@function text-emphasis($emphasis) {\n  @return map.get($text-emphasis, $emphasis);\n}\n\n@function is-theme-key($style) {\n  @return map.has-key($property-values, $style);\n}\n\n@function get-theme-keys() {\n  @return map.keys($property-values);\n}\n\n///\n/// @param {Color|String} Color property key name (i.e., `primary`, `secondary`,\n///     etc).\n/// @return Returns custom property map containing CSS custom property and\n///     fallback value (i.e., (varname: ..., fallback: ...). Returns color if\n///     valid color value is provided. Throws error otherwise.\n/// @examples\n///   1. get-custom-property(primary)\n///   => (varname: --mdc-theme-primary, fallback: #6200ee)\n///\n///   2. get-custom-property(#fff)\n///   => #fff\n///\n@function get-custom-property($color) {\n  $is-tokens-custom-prop: meta.type-of($color) == 'string' and\n    string.index($color, '--') != null;\n  @if custom-properties.is-custom-prop($color) or\n    $is-tokens-custom-prop or\n    is-valid-theme-prop-value_($color)\n  {\n    @return $color;\n  } @else if is-theme-key($color) {\n    $custom-prop: keys.create-custom-property($color);\n\n    // Determine if we need to use a compile-time updated value to support\n    // Angular.\n    $result: deprecated-get-global-theme-key-value-if-changed($color);\n    @if map.get($result, changed) {\n      $custom-prop: custom-properties.set-fallback(\n        $custom-prop,\n        map.get($result, value)\n      );\n    }\n\n    @return $custom-prop;\n  } @else {\n    @error \"Invalid theme property: '#{$color}'. Choose one of: #{get-theme-keys()}\";\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/_theme.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/feature-targeting/feature-targeting';\n@use './css';\n@use './custom-properties';\n@use './gss';\n@use './keys';\n@use './replace';\n@use './theme-color';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  :root {\n    @include feature-targeting.targets($feat-color) {\n      @each $style in theme-color.get-theme-keys() {\n        @include custom-properties.declaration(\n          keys.create-custom-property($style)\n        );\n      }\n    }\n  }\n\n  @each $style in theme-color.get-theme-keys() {\n    @if $style != 'background' and $style != 'surface' {\n      .mdc-theme--#{$style} {\n        @include feature-targeting.targets($feat-color) {\n          @include property(color, $style);\n        }\n      }\n    } @else {\n      .mdc-theme--#{$style} {\n        @include feature-targeting.targets($feat-color) {\n          @include property(background-color, $style);\n        }\n      }\n    }\n  }\n\n  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.\n  @each $style in ('primary', 'secondary') {\n    .mdc-theme--#{$style}-bg {\n      @include feature-targeting.targets($feat-color) {\n        @include property(background-color, $style);\n      }\n    }\n  }\n}\n\n/// Applies a dynamic value to the specified property. This mixin should be used\n/// in theme style mixins when setting properties.\n///\n/// The value may be any of the following:\n/// - a standard CSS value\n/// - a custom property Map, e.g. (varname: --mdc-foo, fallback: blue)\n/// - a Material theme key String, e.g. 'primary', 'on-primary'\n///\n/// @example\n///   @include theme.property(color, teal);\n///   @include theme.property(color, custom-properties.create(foo, blue));\n///   @include theme.property(color, primary);\n///\n/// A `$replace` Map parameter may be provided to replace key/value pairs for\n/// string values. This can be used to substitute parameters in complex string\n/// values such as `calc()` with custom properties.\n///\n/// @example\n///   @include theme.property(\n///     width,\n///     calc(foo + bar),\n///     $replace: (foo: custom-properties.create(foo), bar: 8px)\n///   );\n///\n/// Note: Material theme key Strings (e.g. `primary`) are not supported as\n/// replacement values.\n///\n/// A CSS custom property declaration may be emitted by providing a custom\n/// property Map to `$property`. The fallback value (or `$value` if provided)\n/// will be used as the declaration value.\n///\n/// @example - scss\n///   .foo {\n///     @include theme.property(custom-properties.create(foo, teal));\n///     @include theme.property(custom-properties.create(bar, teal), blue);\n///   }\n///\n/// @example - css\n///   .foo {\n///     --mdc-foo: teal;\n///     --mdc-bar: blue;\n///   }\n///\n/// @param {String | Map} $property - The name of the CSS property. May also be\n///     a custom property Map to emit a custom propery declaration.\n/// @param {String | Number | Color | List | Map} $value - The property's value.\n///     This parameter may be omitted if `$property` is a custom property Map.\n/// @param {Map} $gss - Optional Map of GSS annotations to set.\n/// @param {Map} $replace - An optional Map of replacement key/value pairs if\n///     the `$value` is a string.\n/// @param {Bool} $important - Set to true to add an `!important` rule. Defaults\n///     to false.\n@mixin property(\n  $property,\n  $value: null,\n  $gss: (),\n  $replace: null,\n  $important: false\n) {\n  @if custom-properties.is-custom-prop($property) {\n    // $property is a custom property Map\n    //   --mdc-foo: value;\n    @if $value {\n      $property: custom-properties.set-fallback(\n        $property,\n        $value,\n        $shallow: true\n      );\n    }\n\n    @include custom-properties.declaration(\n      $property,\n      $gss: $gss,\n      $important: $important\n    );\n  } @else if custom-properties.is-custom-prop($value) {\n    // $value is a custom property Map\n    //   property: var(--mdc-foo, fallback);\n    @include custom-properties.declaration(\n      $property,\n      $value,\n      $gss: $gss,\n      $important: $important\n    );\n  } @else if keys.is-key($value) {\n    // $value is a key String\n    //   property: key;\n    $custom-prop: keys.create-custom-property($value);\n\n    @if theme-color.is-theme-key($value) {\n      // Determine if we need to use a compile-time updated value to support\n      // Angular.\n      $key: $value;\n      // (changed: Bool, value: *)\n      $result: theme-color.deprecated-get-global-theme-key-value-if-changed(\n        $key\n      );\n\n      @if map.get($result, changed) {\n        // $mdc-theme-property-values was changed at compile time. Use the\n        // global value instead. Otherwise if it was not changed, continue\n        // using the key store normally.\n        $custom-prop: keys.create-custom-property($key);\n        $custom-prop: custom-properties.set-fallback(\n          $custom-prop,\n          map.get($result, value)\n        );\n      }\n    }\n\n    @include custom-properties.declaration(\n      $property,\n      $custom-prop,\n      $gss: $gss,\n      $important: $important\n    );\n  } @else {\n    // $value is a standard CSS value\n    //   property: value;\n    $fallback: null;\n    @if $replace {\n      // If any replacements are null, treat the entire value as null (do not\n      // emit anything).\n      @each $name, $replacement in $replace {\n        @if $replacement == null {\n          $value: null;\n        }\n      }\n    }\n\n    @if $replace and $value {\n      @if meta.type-of($replace) != 'map' {\n        @error 'mdc-theme: Invalid replacement #{$replace}. Must be a Map.';\n      }\n\n      $replace-map-fallback: ();\n      $replace-map-value: ();\n      $needs-fallback: false;\n      @each $name, $replacement in $replace {\n        @if custom-properties.is-custom-prop($replacement) {\n          $replace-value: custom-properties.get-declaration-value($replacement);\n          $replace-fallback: custom-properties.get-declaration-fallback(\n            $replacement\n          );\n          @if $replace-fallback {\n            $needs-fallback: true;\n          }\n\n          $replace-map-value: map.set(\n            $replace-map-value,\n            $name,\n            $replace-value\n          );\n          $replace-map-fallback: map.set(\n            $replace-map-fallback,\n            $name,\n            $replace-fallback\n          );\n        } @else {\n          $replace-map-value: map.set($replace-map-value, $name, $replacement);\n          $replace-map-fallback: map.set(\n            $replace-map-fallback,\n            $name,\n            $replacement\n          );\n        }\n      }\n\n      @if meta.type-of($value) == 'string' {\n        @if $needs-fallback {\n          $fallback: replace.replace-string($value, $replace-map-fallback);\n        }\n        $value: replace.replace-string($value, $replace-map-value);\n      } @else if meta.type-of($value) == 'list' {\n        @if $needs-fallback {\n          $fallback: replace.replace-list($value, $replace-map-fallback);\n        }\n        $value: replace.replace-list($value, $replace-map-value);\n      } @else {\n        @error 'mdc-theme: Invalid replacement value #{$value}. $replace may only be used with string or list values.';\n      }\n    }\n\n    @include css.declaration(\n      $property,\n      $value,\n      $fallback-value: $fallback,\n      $gss: $gss,\n      $important: $important\n    );\n  }\n}\n\n// @deprecated use the `property()` mixin instead\n@mixin prop($property, $style) {\n  @include property($property, $style);\n}\n\n/// Validates theme configuration keys by comparing it with original theme\n/// configuration, also validates theme values to see if it has any unsupported\n/// value formats.\n///\n/// Use this in internal `theme()` mixins to validate library-provided\n/// `$theme` maps and ensure that all tokens are correct and present.\n///\n/// @example\n///     @mixin theme($theme) {\n///       @include theme.validate-theme($light-theme, $theme);\n///       ...\n///     }\n///\n/// @see validate-theme-styles to validate only theme keys.\n///\n/// @param {Map} $origin-theme - Original theme configuration in Sass map format\n///     that has all supported keys.\n/// @param {Map} $custom-theme - Provided theme configuration in Sass map format\n///     that should be validated against `$origin-theme`.\n@mixin validate-theme($origin-theme, $custom-theme, $test-only: false) {\n  @include validate-theme-styles(\n    $origin-theme,\n    $custom-theme,\n    $test-only: $test-only\n  );\n  @include _validate-theme-values($custom-theme, $test-only: $test-only);\n}\n\n/// Validates theme configuration keys by comparing it with original theme\n/// configuration.\n///\n/// Use this in internal `theme-styles()` mixins to validate library-provided\n/// `$theme` maps and ensure that all tokens are correct and present.\n///\n/// @example\n///     @mixin theme-styles($theme) {\n///       @include theme.validate-theme-styles($light-theme, $theme);\n///       ...\n///     }\n///\n/// @see validate-theme to validate both theme keys and theme values.\n///\n/// @param {Map} $origin-theme - Original theme configuration in Sass map format\n///     that has all supported keys.\n/// @param {Map} $custom-theme - Provided theme configuration in Sass map format\n///     that should be validated against `$origin-theme`.\n@mixin validate-theme-styles($origin-theme, $custom-theme, $test-only: false) {\n  $origin-keys: map.keys($origin-theme);\n  $unsupported-keys: ();\n\n  @each $key, $value in $custom-theme {\n    @if (not list.index($origin-keys, $key)) {\n      $unsupported-keys: list.append(\n        $unsupported-keys,\n        $key,\n        $separator: comma\n      );\n    }\n  }\n\n  @if list.length($unsupported-keys) > 0 {\n    $error-message: 'Unsupported keys found: #{$unsupported-keys}. Expected one of: #{$origin-keys}.';\n\n    @if $test-only {\n      content: $error-message;\n    } @else {\n      @error $error-message;\n    }\n  }\n}\n\n/// Validates theme configuration values to see if it has any unsupported value\n/// formats.\n/// @see Use `validate-theme()` to validate both theme keys and theme values.\n/// @param {Map} $custom-theme - Provided theme configuration in Sass map format\n///     that needs to be validated.\n@mixin _validate-theme-values($custom-theme, $test-only: false) {\n  $unsupported-custom-prop-keys: ();\n\n  @each $key, $value in $custom-theme {\n    @if custom-properties.is-custom-prop($value) {\n      $unsupported-custom-prop-keys: list.append(\n        $unsupported-custom-prop-keys,\n        $key,\n        $separator: comma\n      );\n    }\n  }\n\n  @if list.length($unsupported-custom-prop-keys) > 0 {\n    $error-message: 'Custom properties are not supported for theme map keys: #{$unsupported-custom-prop-keys}';\n\n    @if $test-only {\n      content: $error-message;\n    } @else {\n      @error $error-message;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/_tools.scss",
    "content": "//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// Returns either the first provided value if it is not null, or the second\n/// value if the first is null.\n///\n/// @example scss\n///   $value: either(map.get($theme, key), 1rem);\n///\n/// @param {*} $first - The first value to use, if it is not null.\n/// @param {*} $second - The second value to use if the first value is null.\n/// @return Either the first or the second value.\n@function either($first, $second) {\n  @return if($first != null, $first, $second);\n}\n"
  },
  {
    "path": "packages/mdc-theme/_validate.scss",
    "content": "//\n// Copyright 2021 Google LLC\n// SPDX-License-Identifier: Apache-2.0\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './string-ext';\n\n/// Validates a theme's tokens and throws an error if incorrect tokens are\n/// present or any tokens are missing.\n///\n/// Use this in internal `theme-styles()` mixins to validate library-provided\n/// `$theme` maps and ensure that all tokens are correct and present.\n///\n/// @example - scss\n///   @mixin theme-styles($theme) {\n///     $theme: theme.validate-theme-styles($light-theme, $theme);\n///     $theme: theme.create-theme-vars($theme, checkbox);\n///   }\n///\n/// @throw If any tokens are invalid or missing.\n/// @param {Map|List} $reference-theme - A reference theme Map whose token keys\n///     will be used to validate the user-provided theme (or list of tokens).\n/// @param {Map} $theme - The theme Map to validate.\n/// @return {Map} The validated theme Map.\n@function theme-styles($reference-theme, $theme, $require-all: true) {\n  $valid-tokens: $reference-theme;\n  @if meta.type-of($reference-theme) == 'map' {\n    $valid-tokens: map.keys($reference-theme);\n  }\n\n  $theme: _validate-theme-tokens(\n    $valid-tokens,\n    $theme,\n    $require-all: $require-all\n  );\n\n  @return $theme;\n}\n\n/// Validates a theme's tokens and values and throws an error if incorrect\n/// tokens are present or invalid values are provided.\n///\n/// Use this in `theme()` mixins to validate user-provided `$theme` maps before\n/// providing the value to `theme.create-theme-vars()`.\n///\n/// @example - scss\n///   @mixin theme($theme) {\n///     $theme: validate.theme($light-theme, $theme);\n///     $theme: theme.create-theme-vars($theme, checkbox);\n///   }\n///\n/// @throw If any tokens or values are invalid.\n/// @param {Map|List} $reference-theme - A reference theme Map whose token keys\n///     will be used to validate the user-provided theme (or list of tokens).\n/// @param {Map} $theme - User-provided theme Map to validate.\n/// @return {Map} The validated user-provided theme Map.\n@function theme($reference-theme, $theme) {\n  $valid-tokens: $reference-theme;\n  @if meta.type-of($reference-theme) == 'map' {\n    $valid-tokens: map.keys($reference-theme);\n  }\n\n  $theme: _validate-theme-tokens($valid-tokens, $theme, $require-all: false);\n\n  @return $theme;\n}\n\n/// Validates input for a `theme` mixin and throws an error if incorrect tokens\n/// are present or optionally missing if `$require-all` is true.\n///\n/// @throw If any tokens are invalid or optionally missing.\n/// @param {List} $valid-tokens - A List of token keys to validate the theme.\n/// @param {Map} $theme - The theme Map to validate.\n/// @param {Bool} $require-all [false] - If true, throw an error if the theme\n///     is missing tokens from the list.\n/// @return {Map} The validated theme Map.\n@function _validate-theme-tokens($valid-tokens, $theme, $require-all: false) {\n  $missing-tokens: ();\n  $unsupported-tokens: ();\n\n  @each $token, $value in $theme {\n    @if $token != null and list.index($valid-tokens, $token) == null {\n      $unsupported-tokens: list.append(\n        $unsupported-tokens,\n        $token,\n        $separator: comma\n      );\n    }\n  }\n\n  @if $require-all {\n    // TODO(b/203778922): Remove when type composite tokens are removed\n    $ignore-suffix: (\n      // Ignore composite font tokens\n      '-type'\n    );\n\n    @each $token in $valid-tokens {\n      $missing: map.get($theme, $token) == null;\n      @if $missing {\n        @each $suffix in $ignore-suffix {\n          @if string-ext.has-suffix($token, $suffix) {\n            $missing: false;\n          }\n        }\n      }\n\n      @if $missing {\n        $missing-tokens: list.append(\n          $missing-tokens,\n          $token,\n          $separator: comma\n        );\n      }\n    }\n  }\n\n  @if list.length($unsupported-tokens) > 0 {\n    @error 'The following tokens are invalid: #{$unsupported-tokens}.';\n  }\n\n  @if list.length($missing-tokens) > 0 {\n    @error 'The following required tokens are missing: #{$missing-tokens}.';\n  }\n\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-theme/_variables.import.scss",
    "content": "@forward \"./all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900, mdc-theme-core-styles, mdc-theme-prop;\n"
  },
  {
    "path": "packages/mdc-theme/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_color.scss' Sass module instead.\n@forward './theme-color' show $primary, $on-primary, $accent, $secondary, $on-secondary, $background, $surface, $on-surface, $error, $on-error, $text-colors, $text-emphasis, ink-color-for-fill_, $property-values, prop-value, prop-value, accessible-ink-color, is-valid-theme-prop-value_, text-emphasis;\n"
  },
  {
    "path": "packages/mdc-theme/mdc-theme.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import 'styles.scss' Sass module instead.\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-theme/package.json",
    "content": "{\n  \"name\": \"@material/theme\",\n  \"description\": \"The Material Components for the web theming system\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"theme\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-theme\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/styles.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './theme';\n\n@include theme.core-styles;\n"
  },
  {
    "path": "packages/mdc-theme/test/custom-properties.test.scss",
    "content": "@use 'true' as test;\n\n@use '../custom-properties';\n\n@include test.describe('custom-properties') {\n  @include test.describe('get-declaration-value()') {\n    @include test.describe('when emit-custom-properties is false ') {\n      @include custom-properties.configure($emit-custom-properties: false) {\n        @include test.it('returns null when fallback is null') {\n          $input: (\n            varname: --test-property,\n            fallback: null,\n          );\n\n          @include test.assert-equal(\n            custom-properties.get-declaration-value($input),\n            null\n          );\n        }\n\n        @include test.it('dos not return a custom property') {\n          $input: (\n            varname: --test-property,\n            fallback: 'blue',\n          );\n\n          @include test.assert-equal(\n            custom-properties.get-declaration-value($input),\n            'blue'\n          );\n        }\n      }\n\n      @include test.it('return a custom property') {\n        $input: (\n          varname: --test-property,\n          fallback: 'blue',\n        );\n\n        @include test.assert-equal(\n          custom-properties.get-declaration-value($input),\n          var(--test-property, 'blue')\n        );\n      }\n\n      @include test.it(\n        'returns just the custom property when fallback is null'\n      ) {\n        $input: (\n          varname: --test-property,\n          fallback: null,\n        );\n\n        @include test.assert-equal(\n          custom-properties.get-declaration-value($input),\n          var(--test-property)\n        );\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/test/feature-targeting-any.test.scss",
    "content": "@use '../theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include theme.core-styles($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-theme/test/mdc-theme.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-theme.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-theme/test/override.test.scss",
    "content": "@use '../index' as theme with (\n  $primary: teal,\n  $secondary: crimson\n);\n\n@include theme.core-styles();\n"
  },
  {
    "path": "packages/mdc-theme/test/replace.test.scss",
    "content": "@use '../custom-properties';\n@use '../theme';\n\n.simple {\n  @include theme.property(width, 'calc(x - y)', $replace: (x: 100%, y: 20px));\n}\n\n.var {\n  $first: custom-properties.create(--m-foo, 16px);\n  $second: custom-properties.create(--m-bar, 8px);\n  @include theme.property(\n    width,\n    'calc(first + second)',\n    $replace: (first: $first, second: $second)\n  );\n\n  @include theme.property(\n    height,\n    'calc(first + second + first + second)',\n    $replace: (first: $first, second: $second)\n  );\n}\n\n.multiple {\n  @include theme.property(width, 'calc(x + x + x)', $replace: (x: 8px));\n}\n\n.list {\n  @include theme.property(padding, 0 value, $replace: (value: 16px));\n}\n\n.replace-nulls {\n  // Entire block should be dropped. This should not be emitted.\n  @include theme.property(padding, a b, $replace: (a: 16px, b: null));\n}\n"
  },
  {
    "path": "packages/mdc-theme/test/shadow-dom.test.scss",
    "content": "@use 'sass:selector';\n@use '../selector-ext';\n@use '../shadow-dom';\n\n:host,\n:host(:not(.hidden)[outlined]),\n:host .my-class,\ngm-fab {\n  @include shadow-dom.host-aware(selector.append(&, '[lowered]')) {\n    color: blue;\n\n    @include shadow-dom.host-aware(selector.append(&, ':hover')) {\n      background-color: red;\n    }\n  }\n\n  @include shadow-dom.host-aware(selector.append(&, ':focus'), &) {\n    border-color: green;\n  }\n}\n\n/* Test replacement for deprecated shadow-dom.host-aware() */\n:host,\n:host(:not(.hidden)[outlined]),\n:host .my-class,\ngm-fab {\n  @include selector-ext.append-strict(&, '[lowered]') {\n    color: blue;\n\n    @include selector-ext.append-strict(&, ':hover') {\n      background-color: red;\n    }\n  }\n\n  @at-root {\n    #{selector-ext.append-strict(&, ':focus')},\n    & {\n      border-color: green;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-theme/test/theme-validate-keys.test.scss",
    "content": "@use '../theme';\n\n$origin-theme: (\n  one: 1,\n  two: '22',\n  three: 3px,\n  four: (\n    x: 1,\n    y: 2,\n  ),\n);\n\n// Should validate when subset of keys are provided.\n@include theme.validate-theme(\n  $origin-theme,\n  (\n    two: '22',\n    three: 3px,\n  )\n);\n\n// Should validate when theme configuration is empty.\n@include theme.validate-theme($origin-theme, ());\n\n// Should validate when nested theme keys are provided.\n@include theme.validate-theme(\n  $origin-theme,\n  (\n    four: (\n      x: 11,\n      y: 22,\n    ),\n  )\n);\n\n// Should validate when custom property strings are provided.\n@include theme.validate-theme(\n  $origin-theme,\n  (\n    one: var(--one),\n    two: var(--two, 4px),\n  )\n);\n\n// Should throw error when unsupported key (i.e., foobar) is provided.\n.test {\n  @include theme.validate-theme(\n    $origin-theme,\n    (\n      foobar: 66px,\n    ),\n    $test-only: true\n  );\n}\n\n// Should throw error when custom properties are provided.\n.no-custom-props {\n  @include theme.validate-theme(\n    $origin-theme,\n    (\n      three: (\n        varname: --three,\n        fallback: teal,\n      ),\n    ),\n    $test-only: true\n  );\n}\n"
  },
  {
    "path": "packages/mdc-theme/test/theme.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\n\ndescribe('theme.test.scss', () => {\n  it('should transform theme keys to custom property for theme.property()',\n     () => {\n       const filePath = path.join(__dirname, 'theme.test.css');\n       const css = fs.readFileSync(filePath, 'utf8').trim();\n       expect(css).toEqual(`.test {\n  color: #6200ee;\n  /* @alternate */\n  color: var(--mdc-theme-primary, #6200ee);\n}`);\n     });\n\n  it('host-aware test produces expected output', () => {\n    const filePath = path.join(__dirname, 'shadow-dom.test.css');\n    const css = fs.readFileSync(filePath, 'utf8').trim();\n    expect(css).toEqual(\n        `:host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {\n  color: blue;\n}\n:host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {\n  background-color: red;\n}\n\n:host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host, :host(:not(.hidden)[outlined]), :host .my-class, gm-fab {\n  border-color: green;\n}\n\n/* Test replacement for deprecated shadow-dom.host-aware() */\n:host([lowered]), :host(:not(.hidden)[outlined][lowered]), :host .my-class[lowered], gm-fab[lowered] {\n  color: blue;\n}\n:host([lowered]:hover), :host(:not(.hidden)[outlined][lowered]:hover), :host .my-class[lowered]:hover, gm-fab[lowered]:hover {\n  background-color: red;\n}\n\n:host(:focus), :host(:not(.hidden)[outlined]:focus), :host .my-class:focus, gm-fab:focus, :host,\n:host(:not(.hidden)[outlined]),\n:host .my-class,\ngm-fab {\n  border-color: green;\n}`);\n    // Sass' organization of selectors with newlines can be iffy when using\n    // the `selector` module and expanded mode, but all selectors are\n    // correct.\n  });\n\n  it('should replace values provided to $replace for theme.property()', () => {\n    const filePath = path.join(__dirname, 'replace.test.css');\n    const css = fs.readFileSync(filePath, 'utf8').trim();\n    expect(css).toEqual(`.simple {\n  width: calc(100% - 20px);\n}\n\n.var {\n  width: calc(16px + 8px);\n  /* @alternate */\n  width: calc(var(--m-foo, 16px) + var(--m-bar, 8px));\n  height: calc(16px + 8px + 16px + 8px);\n  /* @alternate */\n  height: calc(var(--m-foo, 16px) + var(--m-bar, 8px) + var(--m-foo, 16px) + var(--m-bar, 8px));\n}\n\n.multiple {\n  width: calc(8px + 8px + 8px);\n}\n\n.list {\n  padding: 0 16px;\n}`);\n  });\n\n  it('should allow overriding theme color values using @use/with', () => {\n    const filePath = path.join(__dirname, 'override.test.css');\n    const css = fs.readFileSync(filePath, 'utf8').trim();\n    expect(css).toContain('--mdc-theme-primary: teal');\n    expect(css).toContain('--mdc-theme-secondary: crimson');\n  });\n\n  it('validate-keys Should throw error when unsupported key is provided',\n     () => {\n       const filePath = path.join(__dirname, 'theme-validate-keys.test.css');\n       const css = fs.readFileSync(filePath, 'utf8').trim();\n       expect(css).toContain('Unsupported keys found: foobar.');\n     });\n\n  it('validate-keys Should throw error when custom properties are provided',\n     () => {\n       const filePath = path.join(__dirname, 'theme-validate-keys.test.css');\n       const css = fs.readFileSync(filePath, 'utf8').trim();\n       expect(css).toContain(\n           'Custom properties are not supported for theme map keys: three');\n     });\n});\n"
  },
  {
    "path": "packages/mdc-theme/test/theme.test.scss",
    "content": "@use '../theme';\n\n.test {\n  @include theme.property(color, primary);\n}\n"
  },
  {
    "path": "packages/mdc-theme/test/validate.test.scss",
    "content": "@use 'true' as test;\n\n@use '../validate';\n\n@include test.describe('theme-styles') {\n  @include test.describe('with `$require-all: false`') {\n    @include test.it('returns null when passed in null') {\n      $reference-theme: (\n        'test-token': blue,\n      );\n\n      @include test.assert-equal(\n        validate.theme-styles($reference-theme, null, $require-all: false),\n        null\n      );\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tokens/_resolvers.scss",
    "content": "@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n\n@function _material-elevation($args...) {\n  @return elevation-theme.resolver($args...);\n}\n\n$material: (\n  elevation: meta.get-function(_material-elevation),\n);\n"
  },
  {
    "path": "packages/mdc-tokens/package.json",
    "content": "{\n  \"name\": \"@material/tokens\",\n  \"description\": \"Material Components for the web mixins for Material Design tokens\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tokens\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tokens\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/elevation\": \"^14.0.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_index.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n//\n\n@forward './md-comp-assist-chip' as md-comp-assist-chip-*;\n@forward './md-comp-badge' as md-comp-badge-*;\n@forward './md-comp-banner' as md-comp-banner-*;\n@forward './md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*;\n@forward './md-comp-carousel-item' as md-comp-carousel-item-*;\n@forward './md-comp-checkbox' as md-comp-checkbox-*;\n@forward './md-comp-circular-progress-indicator' as\n  md-comp-circular-progress-indicator-*;\n@forward './md-comp-data-table' as md-comp-data-table-*;\n@forward './md-comp-date-input-modal' as md-comp-date-input-modal-*;\n@forward './md-comp-date-picker-docked' as md-comp-date-picker-docked-*;\n@forward './md-comp-date-picker-modal' as md-comp-date-picker-modal-*;\n@forward './md-comp-dialog' as md-comp-dialog-*;\n@forward './md-comp-divider' as md-comp-divider-*;\n@forward './md-comp-elevated-button' as md-comp-elevated-button-*;\n@forward './md-comp-elevated-card' as md-comp-elevated-card-*;\n@forward './md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*;\n@forward './md-comp-extended-fab-primary' as md-comp-extended-fab-primary-*;\n@forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*;\n@forward './md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*;\n@forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*;\n@forward './md-comp-fab-branded' as md-comp-fab-branded-*;\n@forward './md-comp-fab-branded-large' as md-comp-fab-branded-large-*;\n@forward './md-comp-fab-primary' as md-comp-fab-primary-*;\n@forward './md-comp-fab-primary-large' as md-comp-fab-primary-large-*;\n@forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*;\n@forward './md-comp-fab-secondary' as md-comp-fab-secondary-*;\n@forward './md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*;\n@forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*;\n@forward './md-comp-fab-surface' as md-comp-fab-surface-*;\n@forward './md-comp-fab-surface-large' as md-comp-fab-surface-large-*;\n@forward './md-comp-fab-surface-small' as md-comp-fab-surface-small-*;\n@forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;\n@forward './md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*;\n@forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;\n@forward './md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;\n@forward './md-comp-filled-button' as md-comp-filled-button-*;\n@forward './md-comp-filled-card' as md-comp-filled-card-*;\n@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;\n@forward './md-comp-filled-menu-button' as md-comp-filled-menu-button-*;\n@forward './md-comp-filled-select' as md-comp-filled-select-*;\n@forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;\n@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;\n@forward './md-comp-filled-tonal-icon-button' as\n  md-comp-filled-tonal-icon-button-*;\n@forward './md-comp-filter-chip' as md-comp-filter-chip-*;\n@forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;\n@forward './md-comp-icon-button' as md-comp-icon-button-*;\n@forward './md-comp-input-chip' as md-comp-input-chip-*;\n@forward './md-comp-linear-progress-indicator' as\n  md-comp-linear-progress-indicator-*;\n@forward './md-comp-list' as md-comp-list-*;\n@forward './md-comp-menu' as md-comp-menu-*;\n@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;\n@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;\n@forward './md-comp-navigation-rail' as md-comp-navigation-rail-*;\n@forward './md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*;\n@forward './md-comp-outlined-button' as md-comp-outlined-button-*;\n@forward './md-comp-outlined-card' as md-comp-outlined-card-*;\n@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;\n@forward './md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*;\n@forward './md-comp-outlined-segmented-button' as\n  md-comp-outlined-segmented-button-*;\n@forward './md-comp-outlined-select' as md-comp-outlined-select-*;\n@forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*;\n@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*;\n@forward './md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*;\n@forward './md-comp-radio-button' as md-comp-radio-button-*;\n@forward './md-comp-rich-tooltip' as md-comp-rich-tooltip-*;\n@forward './md-comp-scrim' as md-comp-scrim-*;\n@forward './md-comp-search-bar' as md-comp-search-bar-*;\n@forward './md-comp-search-view' as md-comp-search-view-*;\n@forward './md-comp-secondary-navigation-tab' as\n  md-comp-secondary-navigation-tab-*;\n@forward './md-comp-sheet-bottom' as md-comp-sheet-bottom-*;\n@forward './md-comp-sheet-floating' as md-comp-sheet-floating-*;\n@forward './md-comp-sheet-side' as md-comp-sheet-side-*;\n@forward './md-comp-slider' as md-comp-slider-*;\n@forward './md-comp-snackbar' as md-comp-snackbar-*;\n@forward './md-comp-standard-menu-button' as md-comp-standard-menu-button-*;\n@forward './md-comp-suggestion-chip' as md-comp-suggestion-chip-*;\n@forward './md-comp-switch' as md-comp-switch-*;\n@forward './md-comp-text-button' as md-comp-text-button-*;\n@forward './md-comp-time-input' as md-comp-time-input-*;\n@forward './md-comp-time-picker' as md-comp-time-picker-*;\n@forward './md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*;\n@forward './md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*;\n@forward './md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*;\n@forward './md-comp-top-app-bar-small-centered' as\n  md-comp-top-app-bar-small-centered-*;\n@forward './md-ref-palette' as md-ref-palette-*;\n@forward './md-ref-typeface' as md-ref-typeface-*;\n@forward './md-sys-color' as md-sys-color-*;\n@forward './md-sys-elevation' as md-sys-elevation-*;\n@forward './md-sys-motion' as md-sys-motion-*;\n@forward './md-sys-shape' as md-sys-shape-*;\n@forward './md-sys-state' as md-sys-state-*;\n@forward './md-sys-typescale' as md-sys-typescale-*;\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-assist-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'flat-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.assist-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-dragged-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-badge.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'color': map.get($deps, 'md-sys-color', 'error'),\n    'large-color': map.get($deps, 'md-sys-color', 'error'),\n    'large-label-text-color': map.get($deps, 'md-sys-color', 'on-error'),\n    'large-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'large-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'large-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'large-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'large-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.badge.large.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'large-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'large-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'large-size': if($exclude-hardcoded-values, null, 16px),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'size': if($exclude-hardcoded-values, null, 6px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-banner.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.banner.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'desktop-with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 52px),\n    'desktop-with-three-lines-container-height':\n      if($exclude-hardcoded-values, null, 90px),\n    'desktop-with-two-lines-with-image-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'divider-height': if($exclude-hardcoded-values, null, 1px),\n    'mobile-with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 54px),\n    'mobile-with-two-lines-container-height':\n      if($exclude-hardcoded-values, null, 112px),\n    'mobile-with-two-lines-with-image-container-height':\n      if($exclude-hardcoded-values, null, 120px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.banner.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-image-image-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-image-image-size': if($exclude-hardcoded-values, null, 40px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-bottom-app-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-height': if($exclude-hardcoded-values, null, 80px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-carousel-item.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-outline-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'with-outline-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-outline-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-outline-width': if($exclude-hardcoded-values, null, 1),\n    'with-outline-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'outline')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-checkbox.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 18px),\n    'container-shape': if($exclude-hardcoded-values, null, 2px),\n    'container-width': if($exclude-hardcoded-values, null, 18px),\n    'error-focus-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'error-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 18px),\n    'selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'selected-disabled-container-outline-width':\n      if($exclude-hardcoded-values, null, 0px),\n    'selected-disabled-icon-color': map.get($deps, 'md-sys-color', 'surface'),\n    'selected-error-container-color': map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-focus-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-focus-outline-width':\n      if($exclude-hardcoded-values, null, 0px),\n    'selected-error-hover-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-hover-outline-width':\n      if($exclude-hardcoded-values, null, 0px),\n    'selected-error-icon-color': map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-pressed-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-pressed-outline-width':\n      if($exclude-hardcoded-values, null, 0px),\n    'selected-focus-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-focus-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-hover-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-pressed-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'unselected-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'unselected-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-focus-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'unselected-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-hover-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'unselected-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-pressed-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-circular-progress-indicator.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 4px),\n    'four-color-active-indicator-four-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'four-color-active-indicator-one-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'four-color-active-indicator-three-color':\n      map.get($deps, 'md-sys-color', 'tertiary'),\n    'four-color-active-indicator-two-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'size': if($exclude-hardcoded-values, null, 48px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-data-table.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'footer-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'footer-container-height': if($exclude-hardcoded-values, null, 52px),\n    'footer-outlined-select-text-field-container-height':\n      if($exclude-hardcoded-values, null, 36px),\n    'footer-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'footer-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'footer-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'footer-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'footer-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'footer-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'header-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'header-hover-headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-hover-sorting-icon-button-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'outline-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'row-item-container-height': if($exclude-hardcoded-values, null, 52px),\n    'row-item-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'row-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'row-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'row-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'row-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'row-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'row-item-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'row-item-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'row-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'row-item-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'row-item-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface'),\n    'row-item-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-date-input-modal.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 512px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 328px),\n    'header-container-height': if($exclude-hardcoded-values, null, 120px),\n    'header-container-width': if($exclude-hardcoded-values, null, 328px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'headline-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'headline-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-large-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-large-weight'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-date-picker-docked.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 428px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 328px),\n    'date-container-height': if($exclude-hardcoded-values, null, 40px),\n    'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-container-width': if($exclude-hardcoded-values, null, 40px),\n    'date-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'date-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'date-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'date-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'date-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'date-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'date-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.date.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'date-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'date-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-state-layer-height': if($exclude-hardcoded-values, null, 40px),\n    'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-state-layer-width': if($exclude-hardcoded-values, null, 40px),\n    'date-today-container-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-container-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'date-today-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'date-unselected-outside-month-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-height': if($exclude-hardcoded-values, null, 64px),\n    'menu-button-container-height': if($exclude-hardcoded-values, null, 40px),\n    'menu-button-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'menu-button-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-button-disabled-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'menu-button-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-button-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'menu-button-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-button-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-button-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'menu-button-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-button-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-button-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-button-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-button-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-button-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-button-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-list-item-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'menu-list-item-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-selected-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'weekdays-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'weekdays-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'weekdays-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'weekdays-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'weekdays-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.weekdays.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'weekdays-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-date-picker-modal.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 512px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 328px),\n    'date-container-height': if($exclude-hardcoded-values, null, 40px),\n    'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-container-width': if($exclude-hardcoded-values, null, 40px),\n    'date-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'date-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'date-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'date-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'date-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'date-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'date-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.date.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'date-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'date-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-state-layer-height': if($exclude-hardcoded-values, null, 40px),\n    'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-state-layer-width': if($exclude-hardcoded-values, null, 40px),\n    'date-today-container-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-container-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'date-today-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'date-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-container-height': if($exclude-hardcoded-values, null, 120px),\n    'header-container-width': if($exclude-hardcoded-values, null, 328px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'headline-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'headline-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-large-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-large-weight'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'range-selection-active-indicator-container-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'range-selection-active-indicator-container-height':\n      if($exclude-hardcoded-values, null, 40px),\n    'range-selection-active-indicator-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'range-selection-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'range-selection-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'range-selection-date-in-range-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-focus-state-layer-opcaity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'range-selection-date-in-range-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-hover-state-layer-opcaity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'range-selection-date-in-range-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-pressed-state-layer-opcaity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'range-selection-header-container-height':\n      if($exclude-hardcoded-values, null, 128px),\n    'range-selection-header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'range-selection-header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'range-selection-header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'range-selection-header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'range-selection-header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'range-selection-header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'range-selection-month-subhead-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'range-selection-month-subhead-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'range-selection-month-subhead-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'range-selection-month-subhead-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'range-selection-month-subhead-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'range-selection-month-subhead-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.month.subhead.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'range-selection-month-subhead-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'weekdays-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'weekdays-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'weekdays-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'weekdays-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'weekdays-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.weekdays.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'weekdays-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'year-selection-year-container-height':\n      if($exclude-hardcoded-values, null, 36px),\n    'year-selection-year-container-width':\n      if($exclude-hardcoded-values, null, 72px),\n    'year-selection-year-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'year-selection-year-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'year-selection-year-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'year-selection-year-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'year-selection-year-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'year-selection-year-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'year-selection-year-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.year-selection.year.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'year-selection-year-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'year-selection-year-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'year-selection-year-selected-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'year-selection-year-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-state-layer-height':\n      if($exclude-hardcoded-values, null, 36px),\n    'year-selection-year-state-layer-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'year-selection-year-state-layer-width':\n      if($exclude-hardcoded-values, null, 72px),\n    'year-selection-year-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-dialog.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-small-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-small-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-small-weight'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'secondary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-divider.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'thickness': if($exclude-hardcoded-values, null, 1px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-elevated-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.elevated-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-elevated-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-extended-fab-branded.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.branded.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-extended-fab-primary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.primary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-extended-fab-secondary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.secondary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-extended-fab-surface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.surface.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-extended-fab-tertiary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.tertiary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-branded-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 48px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-branded.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-primary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-primary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-primary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-secondary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-secondary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-secondary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-surface-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-surface-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-surface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-tertiary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-tertiary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-fab-tertiary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-autocomplete.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'text-field-disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.04),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-active-indicator-height':\n      if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'disabled-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-select.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-with-trailing-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'text-field-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'text-field-disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.04),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-active-indicator-height':\n      if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-text-field.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04),\n    'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px),\n    'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-placeholder-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-prefix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-suffix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 20px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-tonal-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-tonal-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'toggle-selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-filter-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'elevated-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'flat-disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'flat-selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'flat-selected-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-selected-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'flat-selected-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'flat-unselected-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'flat-unselected-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filter-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'selected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-leading-icon-unselected-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-selected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-unselected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-trailing-icon-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-trailing-icon-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-trailing-icon-selected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-trailing-icon-unselected-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-full-screen-dialog.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'header-action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'header-action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'header-action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'header-action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'header-action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'header-action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'header-action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'header-action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'header-action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'header-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'header-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'header-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'header-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'header-on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-input-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.input-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'selected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-avatar-avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-avatar-avatar-size': if($exclude-hardcoded-values, null, 24px),\n    'with-avatar-disabled-avatar-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-selected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-unselected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-trailing-icon-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-trailing-icon-selected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-trailing-icon-unselected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-linear-progress-indicator.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 4px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'four-color-active-indicator-four-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'four-color-active-indicator-one-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'four-color-active-indicator-three-color':\n      map.get($deps, 'md-sys-color', 'tertiary'),\n    'four-color-active-indicator-two-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'track-height': if($exclude-hardcoded-values, null, 4px),\n    'track-shape': map.get($deps, 'md-sys-shape', 'corner-none')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-list.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'list-item-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'list-item-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'list-item-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.3),\n    'list-item-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-disabled-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'list-item-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-dragged-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level4'),\n    'list-item-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-dragged-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'list-item-dragged-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'list-item-focus-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'list-item-hover-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'list-item-large-leading-video-height':\n      if($exclude-hardcoded-values, null, 69px),\n    'list-item-leading-avatar-label-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'list-item-leading-avatar-label-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'list-item-leading-avatar-label-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'list-item-leading-avatar-label-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'list-item-leading-avatar-label-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'list-item-leading-avatar-label-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.leading-avatar-label.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'list-item-leading-avatar-label-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'list-item-leading-avatar-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'list-item-leading-avatar-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'list-item-leading-avatar-size': if($exclude-hardcoded-values, null, 40px),\n    'list-item-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'list-item-leading-image-height': if($exclude-hardcoded-values, null, 56px),\n    'list-item-leading-image-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-leading-image-width': if($exclude-hardcoded-values, null, 56px),\n    'list-item-leading-video-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-leading-video-width': if($exclude-hardcoded-values, null, 100px),\n    'list-item-overline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-overline-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'list-item-overline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'list-item-overline-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'list-item-overline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'list-item-overline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.overline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'list-item-overline-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'list-item-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'list-item-pressed-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'list-item-small-leading-video-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'list-item-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'list-item-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'list-item-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'list-item-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'list-item-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'list-item-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'list-item-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-trailing-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'list-item-trailing-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-trailing-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'list-item-trailing-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'list-item-trailing-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'list-item-trailing-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'list-item-trailing-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.trailing-supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'list-item-trailing-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'list-item-unselected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'md-comp-list-list-item-one-line-container-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'md-comp-list-list-item-three-line-container-height':\n      if($exclude-hardcoded-values, null, 88px),\n    'md-comp-list-list-item-two-line-container-height':\n      if($exclude-hardcoded-values, null, 72px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-menu.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'list-item-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'list-item-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'list-item-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'list-item-with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-with-leading-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-leading-icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'list-item-with-leading-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-trailing-icon-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-with-trailing-icon-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-with-trailing-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-trailing-icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-trailing-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-trailing-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-navigation-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 32px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 64px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-height': if($exclude-hardcoded-values, null, 80px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-bar.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-navigation-drawer.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 56px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 336px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'bottom-container-shape': map.get($deps, 'md-sys-shape', 'corner-large-top'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-height': if($exclude-hardcoded-values, null, 100%),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large-end'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 360px),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'large-badge-label-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'large-badge-label-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'large-badge-label-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'large-badge-label-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'large-badge-label-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'large-badge-label-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.large-badge-label.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'large-badge-label-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-navigation-rail.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 32px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 56px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-width': if($exclude-hardcoded-values, null, 80px),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-rail.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'menu-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'menu-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'no-label-active-indicator-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'no-label-active-indicator-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-autocomplete.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'text-field-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'text-field-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'dragged-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-segmented-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-select.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-with-trailing-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'text-field-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'text-field-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-outlined-text-field.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-placeholder-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-prefix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-suffix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-plain-tooltip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.plain-tooltip.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-primary-navigation-tab.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 3px),\n    'active-indicator-shape':\n      if($exclude-hardcoded-values, null, (3px 3px 0px 0px)),\n    'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'active-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 48px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'divider-height': if($exclude-hardcoded-values, null, 1px),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'inactive-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-and-label-text-container-height':\n      if($exclude-hardcoded-values, null, 64px),\n    'with-icon-active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-inactive-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-inactive-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-inactive-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-inactive-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-label-text-inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'with-label-text-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'with-label-text-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'with-label-text-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'with-label-text-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.primary-navigation-tab.with-label-text.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'with-label-text-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-radio-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'icon-size': if($exclude-hardcoded-values, null, 20px),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-rich-tooltip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'subhead-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'subhead-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'subhead-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.subhead.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-scrim.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'scrim'),\n    'container-opacity': if($exclude-hardcoded-values, null, 0.32)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-search-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'avatar-size': if($exclude-hardcoded-values, null, 30px),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-search-view.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'divider-color': map.get($deps, 'md-sys-color', 'outline'),\n    'docked-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'docked-header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'full-screen-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'full-screen-header-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'header-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'header-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'header-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'header-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'header-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'header-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'header-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'header-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-secondary-navigation-tab.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 2px),\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 48px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'divider-height': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.secondary-navigation-tab.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-inactive-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-sheet-bottom.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'docked-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'docked-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-large-top'),\n    'docked-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'docked-drag-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'docked-drag-handle-height': if($exclude-hardcoded-values, null, 4px),\n    'docked-drag-handle-opacity': if($exclude-hardcoded-values, null, 0.4),\n    'docked-drag-handle-width': if($exclude-hardcoded-values, null, 32px),\n    'docked-minimized-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'docked-modal-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'docked-standard-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-sheet-floating.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-sheet-side.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'detached-container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'docked-action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'docked-action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'docked-action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'docked-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'docked-container-height': if($exclude-hardcoded-values, null, 100%),\n    'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'docked-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'docked-container-width': if($exclude-hardcoded-values, null, 256px),\n    'docked-divider-color': map.get($deps, 'md-sys-color', 'outline'),\n    'docked-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'docked-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'docked-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'docked-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'docked-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'docked-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.sheet.side.docked.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'docked-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'docked-modal-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'docked-standard-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-slider.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-track-height': if($exclude-hardcoded-values, null, 4px),\n    'active-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-active-track-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-active-track-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-handle-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-handle-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-handle-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-inactive-track-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-inactive-track-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'handle-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'handle-height': if($exclude-hardcoded-values, null, 20px),\n    'handle-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'handle-width': if($exclude-hardcoded-values, null, 20px),\n    'hover-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'inactive-track-height': if($exclude-hardcoded-values, null, 4px),\n    'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'label-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'label-container-height': if($exclude-hardcoded-values, null, 28px),\n    'label-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.slider.label.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'pressed-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'track-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'with-overlap-handle-outline-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-overlap-handle-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'with-tick-marks-active-container-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-tick-marks-active-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-tick-marks-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 2px),\n    'with-tick-marks-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-tick-marks-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-tick-marks-inactive-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-tick-marks-inactive-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-snackbar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 48px),\n    'with-two-lines-container-height': if($exclude-hardcoded-values, null, 68px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-standard-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.standard-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-suggestion-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'flat-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.suggestion-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-switch.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-selected-handle-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-selected-handle-opacity': if($exclude-hardcoded-values, null, 1),\n    'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-track-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-track-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-handle-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-unselected-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-unselected-track-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'pressed-handle-height': if($exclude-hardcoded-values, null, 28px),\n    'pressed-handle-width': if($exclude-hardcoded-values, null, 28px),\n    'selected-focus-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-focus-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-handle-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-handle-height': if($exclude-hardcoded-values, null, 24px),\n    'selected-handle-width': if($exclude-hardcoded-values, null, 24px),\n    'selected-hover-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-hover-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-icon-size': if($exclude-hardcoded-values, null, 16px),\n    'selected-pressed-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-pressed-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'track-height': if($exclude-hardcoded-values, null, 32px),\n    'track-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'track-width': if($exclude-hardcoded-values, null, 52px),\n    'unselected-focus-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-focus-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-focus-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-handle-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-handle-height': if($exclude-hardcoded-values, null, 16px),\n    'unselected-handle-width': if($exclude-hardcoded-values, null, 16px),\n    'unselected-hover-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-hover-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-hover-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-icon-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-icon-size': if($exclude-hardcoded-values, null, 16px),\n    'unselected-pressed-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-pressed-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-pressed-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-track-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'with-icon-handle-height': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-handle-width': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-text-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.text-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-time-input.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'period-selector-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'period-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'period-selector-container-width': if($exclude-hardcoded-values, null, 52px),\n    'period-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'period-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'period-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'period-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'period-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'period-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'period-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.period-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'period-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'period-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'period-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'period-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'),\n    'time-input-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'time-input-field-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'time-input-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'time-input-field-container-width':\n      if($exclude-hardcoded-values, null, 96px),\n    'time-input-field-focus-container-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'time-input-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-input-field-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'time-input-field-focus-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'time-input-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'time-input-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'display-medium-font'),\n    'time-input-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-medium-line-height'),\n    'time-input-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'display-medium-size'),\n    'time-input-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-medium-tracking'),\n    'time-input-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'display-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-medium-font')\n      ),\n    'time-input-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'display-medium-weight'),\n    'time-input-field-separator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-separator-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-input-field-separator-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-input-field-separator-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-input-field-separator-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-input-field-separator-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.separator.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-input-field-separator-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-input-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'time-input-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'time-input-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'time-input-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'time-input-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'time-input-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'time-input-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-time-picker.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'clock-dial-color-ignore':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'clock-dial-container-size': if($exclude-hardcoded-values, null, 256px),\n    'clock-dial-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'clock-dial-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'clock-dial-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'clock-dial-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'clock-dial-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.clock-dial.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'clock-dial-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'clock-dial-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'clock-dial-selector-center-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-center-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-selector-center-container-size':\n      if($exclude-hardcoded-values, null, 8px),\n    'clock-dial-selector-handle-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-handle-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-selector-handle-container-size':\n      if($exclude-hardcoded-values, null, 48px),\n    'clock-dial-selector-track-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-track-container-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'clock-dial-shape-ignore': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'period-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'period-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'period-selector-horizontal-container-height':\n      if($exclude-hardcoded-values, null, 38px),\n    'period-selector-horizontal-container-width':\n      if($exclude-hardcoded-values, null, 216px),\n    'period-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'period-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'period-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'period-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'period-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'period-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.period-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'period-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'period-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'period-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'period-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-vertical-container-height':\n      if($exclude-hardcoded-values, null, 80px),\n    'period-selector-vertical-container-width':\n      if($exclude-hardcoded-values, null, 52px),\n    'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'),\n    'time-selector-24h-vertical-container-width':\n      if($exclude-hardcoded-values, null, 114px),\n    'time-selector-container-height': if($exclude-hardcoded-values, null, 80px),\n    'time-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'time-selector-container-width': if($exclude-hardcoded-values, null, 96px),\n    'time-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'time-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'time-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'time-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'time-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-separator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-separator-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-selector-separator-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-selector-separator-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-selector-separator-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-selector-separator-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.separator.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-selector-separator-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-selector-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'time-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-top-app-bar-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 152px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.large.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-medium-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-top-app-bar-medium.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 112px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.medium.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-small-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-small-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-small-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-top-app-bar-small-centered.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'avatar-size': if($exclude-hardcoded-values, null, 30px),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 64px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.centered.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-comp-top-app-bar-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 64px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-ref-palette.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'black': if($exclude-hardcoded-values, null, #000),\n    'error0': if($exclude-hardcoded-values, null, #000),\n    'error10': if($exclude-hardcoded-values, null, #410e0b),\n    'error100': if($exclude-hardcoded-values, null, #fff),\n    'error20': if($exclude-hardcoded-values, null, #601410),\n    'error30': if($exclude-hardcoded-values, null, #8c1d18),\n    'error40': if($exclude-hardcoded-values, null, #b3261e),\n    'error50': if($exclude-hardcoded-values, null, #dc362e),\n    'error60': if($exclude-hardcoded-values, null, #e46962),\n    'error70': if($exclude-hardcoded-values, null, #ec928e),\n    'error80': if($exclude-hardcoded-values, null, #f2b8b5),\n    'error90': if($exclude-hardcoded-values, null, #f9dedc),\n    'error95': if($exclude-hardcoded-values, null, #fceeee),\n    'error99': if($exclude-hardcoded-values, null, #fffbf9),\n    'neutral-variant0': if($exclude-hardcoded-values, null, #000),\n    'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22),\n    'neutral-variant100': if($exclude-hardcoded-values, null, #fff),\n    'neutral-variant20': if($exclude-hardcoded-values, null, #322f37),\n    'neutral-variant30': if($exclude-hardcoded-values, null, #49454f),\n    'neutral-variant40': if($exclude-hardcoded-values, null, #605d66),\n    'neutral-variant50': if($exclude-hardcoded-values, null, #79747e),\n    'neutral-variant60': if($exclude-hardcoded-values, null, #938f99),\n    'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4),\n    'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0),\n    'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec),\n    'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa),\n    'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe),\n    'neutral0': if($exclude-hardcoded-values, null, #000),\n    'neutral10': if($exclude-hardcoded-values, null, #1c1b1f),\n    'neutral100': if($exclude-hardcoded-values, null, #fff),\n    'neutral20': if($exclude-hardcoded-values, null, #313033),\n    'neutral30': if($exclude-hardcoded-values, null, #484649),\n    'neutral40': if($exclude-hardcoded-values, null, #605d62),\n    'neutral50': if($exclude-hardcoded-values, null, #787579),\n    'neutral60': if($exclude-hardcoded-values, null, #939094),\n    'neutral70': if($exclude-hardcoded-values, null, #aeaaae),\n    'neutral80': if($exclude-hardcoded-values, null, #c9c5ca),\n    'neutral90': if($exclude-hardcoded-values, null, #e6e1e5),\n    'neutral95': if($exclude-hardcoded-values, null, #f4eff4),\n    'neutral99': if($exclude-hardcoded-values, null, #fffbfe),\n    'primary0': if($exclude-hardcoded-values, null, #000),\n    'primary10': if($exclude-hardcoded-values, null, #21005d),\n    'primary100': if($exclude-hardcoded-values, null, #fff),\n    'primary20': if($exclude-hardcoded-values, null, #381e72),\n    'primary30': if($exclude-hardcoded-values, null, #4f378b),\n    'primary40': if($exclude-hardcoded-values, null, #6750a4),\n    'primary50': if($exclude-hardcoded-values, null, #7f67be),\n    'primary60': if($exclude-hardcoded-values, null, #9a82db),\n    'primary70': if($exclude-hardcoded-values, null, #b69df8),\n    'primary80': if($exclude-hardcoded-values, null, #d0bcff),\n    'primary90': if($exclude-hardcoded-values, null, #eaddff),\n    'primary95': if($exclude-hardcoded-values, null, #f6edff),\n    'primary99': if($exclude-hardcoded-values, null, #fffbfe),\n    'secondary0': if($exclude-hardcoded-values, null, #000),\n    'secondary10': if($exclude-hardcoded-values, null, #1d192b),\n    'secondary100': if($exclude-hardcoded-values, null, #fff),\n    'secondary20': if($exclude-hardcoded-values, null, #332d41),\n    'secondary30': if($exclude-hardcoded-values, null, #4a4458),\n    'secondary40': if($exclude-hardcoded-values, null, #625b71),\n    'secondary50': if($exclude-hardcoded-values, null, #7a7289),\n    'secondary60': if($exclude-hardcoded-values, null, #958da5),\n    'secondary70': if($exclude-hardcoded-values, null, #b0a7c0),\n    'secondary80': if($exclude-hardcoded-values, null, #ccc2dc),\n    'secondary90': if($exclude-hardcoded-values, null, #e8def8),\n    'secondary95': if($exclude-hardcoded-values, null, #f6edff),\n    'secondary99': if($exclude-hardcoded-values, null, #fffbfe),\n    'tertiary0': if($exclude-hardcoded-values, null, #000),\n    'tertiary10': if($exclude-hardcoded-values, null, #31111d),\n    'tertiary100': if($exclude-hardcoded-values, null, #fff),\n    'tertiary20': if($exclude-hardcoded-values, null, #492532),\n    'tertiary30': if($exclude-hardcoded-values, null, #633b48),\n    'tertiary40': if($exclude-hardcoded-values, null, #7d5260),\n    'tertiary50': if($exclude-hardcoded-values, null, #986977),\n    'tertiary60': if($exclude-hardcoded-values, null, #b58392),\n    'tertiary70': if($exclude-hardcoded-values, null, #d29dac),\n    'tertiary80': if($exclude-hardcoded-values, null, #efb8c8),\n    'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4),\n    'tertiary95': if($exclude-hardcoded-values, null, #ffecf1),\n    'tertiary99': if($exclude-hardcoded-values, null, #fffbfa),\n    'white': if($exclude-hardcoded-values, null, #fff)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-ref-typeface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'brand': if($exclude-hardcoded-values, null, (Roboto)),\n    'plain': if($exclude-hardcoded-values, null, (Roboto)),\n    'weight-bold': if($exclude-hardcoded-values, null, 700),\n    'weight-medium': if($exclude-hardcoded-values, null, 500),\n    'weight-regular': if($exclude-hardcoded-values, null, 400)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-color.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Scheme\": \"Dynamic\"\n//\n\n@use 'sass:map';\n\n@use './md-ref-palette';\n\n$_default-dark: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-dark($deps: $_default-dark) {\n  @return (\n    'background': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'error': map.get($deps, 'md-ref-palette', 'error80'),\n    'error-container': map.get($deps, 'md-ref-palette', 'error30'),\n    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'),\n    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'),\n    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-background': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-error': map.get($deps, 'md-ref-palette', 'error20'),\n    'on-error-container': map.get($deps, 'md-ref-palette', 'error90'),\n    'on-primary': map.get($deps, 'md-ref-palette', 'primary20'),\n    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'),\n    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'),\n    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),\n    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'),\n    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),\n    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'),\n    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'primary': map.get($deps, 'md-ref-palette', 'primary80'),\n    'primary-container': map.get($deps, 'md-ref-palette', 'primary30'),\n    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'secondary': map.get($deps, 'md-ref-palette', 'secondary80'),\n    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'),\n    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'surface': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'),\n    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'),\n    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30')\n  );\n}\n\n$_default-light: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-light($deps: $_default-light) {\n  @return (\n    'background': map.get($deps, 'md-ref-palette', 'neutral99'),\n    'error': map.get($deps, 'md-ref-palette', 'error40'),\n    'error-container': map.get($deps, 'md-ref-palette', 'error90'),\n    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'),\n    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'),\n    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'),\n    'on-background': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'on-error': map.get($deps, 'md-ref-palette', 'error100'),\n    'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),\n    'on-primary': map.get($deps, 'md-ref-palette', 'primary100'),\n    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),\n    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'),\n    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),\n    'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'),\n    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),\n    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'),\n    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),\n    'primary': map.get($deps, 'md-ref-palette', 'primary40'),\n    'primary-container': map.get($deps, 'md-ref-palette', 'primary90'),\n    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'secondary': map.get($deps, 'md-ref-palette', 'secondary40'),\n    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'surface': map.get($deps, 'md-ref-palette', 'neutral99'),\n    'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'),\n    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'),\n    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'),\n    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-elevation.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'level0': if($exclude-hardcoded-values, null, 0),\n    'level1': if($exclude-hardcoded-values, null, 1),\n    'level2': if($exclude-hardcoded-values, null, 3),\n    'level3': if($exclude-hardcoded-values, null, 6),\n    'level4': if($exclude-hardcoded-values, null, 8),\n    'level5': if($exclude-hardcoded-values, null, 12)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-motion.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Platform\": \"Web\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms),\n    'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms),\n    'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms),\n    'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms),\n    'duration-long1': if($exclude-hardcoded-values, null, 450ms),\n    'duration-long2': if($exclude-hardcoded-values, null, 500ms),\n    'duration-long3': if($exclude-hardcoded-values, null, 550ms),\n    'duration-long4': if($exclude-hardcoded-values, null, 600ms),\n    'duration-medium1': if($exclude-hardcoded-values, null, 250ms),\n    'duration-medium2': if($exclude-hardcoded-values, null, 300ms),\n    'duration-medium3': if($exclude-hardcoded-values, null, 350ms),\n    'duration-medium4': if($exclude-hardcoded-values, null, 400ms),\n    'duration-short1': if($exclude-hardcoded-values, null, 50ms),\n    'duration-short2': if($exclude-hardcoded-values, null, 100ms),\n    'duration-short3': if($exclude-hardcoded-values, null, 150ms),\n    'duration-short4': if($exclude-hardcoded-values, null, 200ms),\n    'easing-emphasized':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),\n    'easing-emphasized-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)),\n    'easing-emphasized-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    'easing-legacy':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)),\n    'easing-legacy-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)),\n    'easing-legacy-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)),\n    'easing-linear':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)),\n    'easing-standard':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),\n    'easing-standard-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)),\n    'easing-standard-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)),\n    'path': /** TODO: type \"motion_path\" is not supported. */ null\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-shape.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'corner-extra-large': if($exclude-hardcoded-values, null, 28px),\n    'corner-extra-large-top':\n      if($exclude-hardcoded-values, null, (28px 28px 0px 0px)),\n    'corner-extra-small': if($exclude-hardcoded-values, null, 4px),\n    'corner-extra-small-top':\n      if($exclude-hardcoded-values, null, (4px 4px 0px 0px)),\n    'corner-full': if($exclude-hardcoded-values, null, 9999px),\n    'corner-large': if($exclude-hardcoded-values, null, 16px),\n    'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)),\n    'corner-large-start':\n      if($exclude-hardcoded-values, null, (16px 0px 0px 16px)),\n    'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)),\n    'corner-medium': if($exclude-hardcoded-values, null, 12px),\n    'corner-none': if($exclude-hardcoded-values, null, 0px),\n    'corner-small': if($exclude-hardcoded-values, null, 8px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-state.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16),\n    'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08),\n    'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_132/_md-sys-typescale.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.132\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-ref-typeface';\n\n$_default: (\n  'md-ref-typeface': md-ref-typeface.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'body-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.5rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem),\n    'body-large-size': if($exclude-hardcoded-values, null, 1rem),\n    'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'body-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem),\n    'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'body-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-small-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'body-small-size': if($exclude-hardcoded-values, null, 0.75rem),\n    'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem),\n    'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            4rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-large-line-height': if($exclude-hardcoded-values, null, 4rem),\n    'display-large-size': if($exclude-hardcoded-values, null, 3.562rem),\n    'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem),\n    'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            3.25rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem),\n    'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem),\n    'display-medium-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.75rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem),\n    'display-small-size': if($exclude-hardcoded-values, null, 2.25rem),\n    'display-small-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.5rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem),\n    'headline-large-size': if($exclude-hardcoded-values, null, 2rem),\n    'headline-large-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.25rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem),\n    'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem),\n    'headline-medium-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-medium-weight':\n      map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem),\n    'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem),\n    'headline-small-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'label-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'label-large-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem),\n    'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'label-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem),\n    'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'label-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-small-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'label-small-size': if($exclude-hardcoded-values, null, 0.688rem),\n    'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'title-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.75rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem),\n    'title-large-size': if($exclude-hardcoded-values, null, 1.375rem),\n    'title-large-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'title-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.5rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem),\n    'title-medium-size': if($exclude-hardcoded-values, null, 1rem),\n    'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem),\n    'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'title-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'title-small-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),\n    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_index.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n//\n\n@forward './md-comp-assist-chip' as md-comp-assist-chip-*;\n@forward './md-comp-badge' as md-comp-badge-*;\n@forward './md-comp-banner' as md-comp-banner-*;\n@forward './md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*;\n@forward './md-comp-carousel-item' as md-comp-carousel-item-*;\n@forward './md-comp-checkbox' as md-comp-checkbox-*;\n@forward './md-comp-circular-progress-indicator' as\n  md-comp-circular-progress-indicator-*;\n@forward './md-comp-data-table' as md-comp-data-table-*;\n@forward './md-comp-date-input-modal' as md-comp-date-input-modal-*;\n@forward './md-comp-date-picker-docked' as md-comp-date-picker-docked-*;\n@forward './md-comp-date-picker-modal' as md-comp-date-picker-modal-*;\n@forward './md-comp-dialog' as md-comp-dialog-*;\n@forward './md-comp-divider' as md-comp-divider-*;\n@forward './md-comp-elevated-button' as md-comp-elevated-button-*;\n@forward './md-comp-elevated-card' as md-comp-elevated-card-*;\n@forward './md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*;\n@forward './md-comp-extended-fab-primary' as md-comp-extended-fab-primary-*;\n@forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*;\n@forward './md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*;\n@forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*;\n@forward './md-comp-fab-branded' as md-comp-fab-branded-*;\n@forward './md-comp-fab-branded-large' as md-comp-fab-branded-large-*;\n@forward './md-comp-fab-primary' as md-comp-fab-primary-*;\n@forward './md-comp-fab-primary-large' as md-comp-fab-primary-large-*;\n@forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*;\n@forward './md-comp-fab-secondary' as md-comp-fab-secondary-*;\n@forward './md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*;\n@forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*;\n@forward './md-comp-fab-surface' as md-comp-fab-surface-*;\n@forward './md-comp-fab-surface-large' as md-comp-fab-surface-large-*;\n@forward './md-comp-fab-surface-small' as md-comp-fab-surface-small-*;\n@forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;\n@forward './md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*;\n@forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;\n@forward './md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;\n@forward './md-comp-filled-button' as md-comp-filled-button-*;\n@forward './md-comp-filled-card' as md-comp-filled-card-*;\n@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;\n@forward './md-comp-filled-menu-button' as md-comp-filled-menu-button-*;\n@forward './md-comp-filled-select' as md-comp-filled-select-*;\n@forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;\n@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;\n@forward './md-comp-filled-tonal-icon-button' as\n  md-comp-filled-tonal-icon-button-*;\n@forward './md-comp-filter-chip' as md-comp-filter-chip-*;\n@forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;\n@forward './md-comp-icon-button' as md-comp-icon-button-*;\n@forward './md-comp-input-chip' as md-comp-input-chip-*;\n@forward './md-comp-linear-progress-indicator' as\n  md-comp-linear-progress-indicator-*;\n@forward './md-comp-list' as md-comp-list-*;\n@forward './md-comp-menu' as md-comp-menu-*;\n@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;\n@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;\n@forward './md-comp-navigation-rail' as md-comp-navigation-rail-*;\n@forward './md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*;\n@forward './md-comp-outlined-button' as md-comp-outlined-button-*;\n@forward './md-comp-outlined-card' as md-comp-outlined-card-*;\n@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;\n@forward './md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*;\n@forward './md-comp-outlined-segmented-button' as\n  md-comp-outlined-segmented-button-*;\n@forward './md-comp-outlined-select' as md-comp-outlined-select-*;\n@forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*;\n@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*;\n@forward './md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*;\n@forward './md-comp-radio-button' as md-comp-radio-button-*;\n@forward './md-comp-rich-tooltip' as md-comp-rich-tooltip-*;\n@forward './md-comp-scrim' as md-comp-scrim-*;\n@forward './md-comp-search-bar' as md-comp-search-bar-*;\n@forward './md-comp-search-view' as md-comp-search-view-*;\n@forward './md-comp-secondary-navigation-tab' as\n  md-comp-secondary-navigation-tab-*;\n@forward './md-comp-sheet-bottom' as md-comp-sheet-bottom-*;\n@forward './md-comp-sheet-floating' as md-comp-sheet-floating-*;\n@forward './md-comp-sheet-side' as md-comp-sheet-side-*;\n@forward './md-comp-slider' as md-comp-slider-*;\n@forward './md-comp-snackbar' as md-comp-snackbar-*;\n@forward './md-comp-standard-menu-button' as md-comp-standard-menu-button-*;\n@forward './md-comp-suggestion-chip' as md-comp-suggestion-chip-*;\n@forward './md-comp-switch' as md-comp-switch-*;\n@forward './md-comp-text-button' as md-comp-text-button-*;\n@forward './md-comp-time-input' as md-comp-time-input-*;\n@forward './md-comp-time-picker' as md-comp-time-picker-*;\n@forward './md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*;\n@forward './md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*;\n@forward './md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*;\n@forward './md-comp-top-app-bar-small-centered' as\n  md-comp-top-app-bar-small-centered-*;\n@forward './md-ref-palette' as md-ref-palette-*;\n@forward './md-ref-typeface' as md-ref-typeface-*;\n@forward './md-sys-color' as md-sys-color-*;\n@forward './md-sys-elevation' as md-sys-elevation-*;\n@forward './md-sys-motion' as md-sys-motion-*;\n@forward './md-sys-shape' as md-sys-shape-*;\n@forward './md-sys-state' as md-sys-state-*;\n@forward './md-sys-typescale' as md-sys-typescale-*;\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-assist-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'flat-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.assist-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-dragged-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-badge.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'color': map.get($deps, 'md-sys-color', 'error'),\n    'large-color': map.get($deps, 'md-sys-color', 'error'),\n    'large-label-text-color': map.get($deps, 'md-sys-color', 'on-error'),\n    'large-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'large-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'large-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'large-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'large-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.badge.large.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'large-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'large-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'large-size': if($exclude-hardcoded-values, null, 16px),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'size': if($exclude-hardcoded-values, null, 6px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-banner.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'desktop-with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 52px),\n    'desktop-with-three-lines-container-height':\n      if($exclude-hardcoded-values, null, 90px),\n    'desktop-with-two-lines-with-image-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'mobile-with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 54px),\n    'mobile-with-two-lines-container-height':\n      if($exclude-hardcoded-values, null, 112px),\n    'mobile-with-two-lines-with-image-container-height':\n      if($exclude-hardcoded-values, null, 120px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.banner.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-image-image-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-image-image-size': if($exclude-hardcoded-values, null, 40px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-bottom-app-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-height': if($exclude-hardcoded-values, null, 80px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-carousel-item.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-outline-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'with-outline-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-outline-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'with-outline-outline-width': if($exclude-hardcoded-values, null, 1),\n    'with-outline-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'outline')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-checkbox.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-shape': if($exclude-hardcoded-values, null, 2px),\n    'container-size': if($exclude-hardcoded-values, null, 18px),\n    'error-focus-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'error-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 18px),\n    'selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'selected-disabled-container-outline-width':\n      if($exclude-hardcoded-values, null, 0px),\n    'selected-disabled-icon-color': map.get($deps, 'md-sys-color', 'surface'),\n    'selected-error-container-color': map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-focus-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-hover-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-icon-color': map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-error-pressed-container-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'selected-error-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error'),\n    'selected-focus-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-focus-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-hover-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-pressed-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'unselected-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'unselected-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'unselected-error-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-pressed-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-circular-progress-indicator.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 4px),\n    'four-color-active-indicator-four-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'four-color-active-indicator-one-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'four-color-active-indicator-three-color':\n      map.get($deps, 'md-sys-color', 'tertiary'),\n    'four-color-active-indicator-two-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'size': if($exclude-hardcoded-values, null, 48px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-data-table.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'footer-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'footer-container-height': if($exclude-hardcoded-values, null, 52px),\n    'footer-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'footer-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'footer-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'footer-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'footer-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'footer-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'header-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'header-hover-headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-hover-sorting-icon-button-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'row-item-container-height': if($exclude-hardcoded-values, null, 52px),\n    'row-item-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'row-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'row-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'row-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'row-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'row-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'row-item-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'row-item-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'row-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'row-item-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'row-item-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface'),\n    'row-item-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'row-item-unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-date-input-modal.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 512px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 328px),\n    'header-container-height': if($exclude-hardcoded-values, null, 120px),\n    'header-container-width': if($exclude-hardcoded-values, null, 328px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'headline-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'headline-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-large-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-large-weight'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-date-picker-docked.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 456px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 360px),\n    'date-container-height': if($exclude-hardcoded-values, null, 48px),\n    'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-container-width': if($exclude-hardcoded-values, null, 48px),\n    'date-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'date-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'date-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'date-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'date-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'date-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'date-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.date.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'date-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'date-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-state-layer-height': if($exclude-hardcoded-values, null, 40px),\n    'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-state-layer-width': if($exclude-hardcoded-values, null, 40px),\n    'date-today-container-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-container-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'date-today-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'date-unselected-outside-month-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-height': if($exclude-hardcoded-values, null, 64px),\n    'menu-button-container-height': if($exclude-hardcoded-values, null, 40px),\n    'menu-button-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'menu-button-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-button-disabled-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'menu-button-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-button-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'menu-button-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-button-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-button-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'menu-button-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-button-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-button-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-button-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-button-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-button-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-button-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-button-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-list-item-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'menu-list-item-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-selected-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'weekdays-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'weekdays-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'weekdays-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'weekdays-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'weekdays-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.weekdays.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'weekdays-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-date-picker-modal.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 568px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 360px),\n    'date-container-height': if($exclude-hardcoded-values, null, 40px),\n    'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-container-width': if($exclude-hardcoded-values, null, 40px),\n    'date-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'date-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'date-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'date-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'date-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'date-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'date-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.date.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'date-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'date-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'date-state-layer-height': if($exclude-hardcoded-values, null, 40px),\n    'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'date-state-layer-width': if($exclude-hardcoded-values, null, 40px),\n    'date-today-container-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-container-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'date-today-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'date-today-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'date-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'date-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'date-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-container-height': if($exclude-hardcoded-values, null, 120px),\n    'header-container-width': if($exclude-hardcoded-values, null, 360px),\n    'header-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'headline-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'headline-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-large-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-large-weight'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'range-selection-active-indicator-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'range-selection-active-indicator-container-height':\n      if($exclude-hardcoded-values, null, 40px),\n    'range-selection-active-indicator-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'range-selection-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'range-selection-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'range-selection-date-in-range-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'range-selection-date-in-range-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'range-selection-date-in-range-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'range-selection-date-in-range-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'range-selection-date-in-range-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'range-selection-header-container-height':\n      if($exclude-hardcoded-values, null, 128px),\n    'range-selection-header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'range-selection-header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'range-selection-header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'range-selection-header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'range-selection-header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'range-selection-header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'range-selection-month-subhead-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'range-selection-month-subhead-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'range-selection-month-subhead-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'range-selection-month-subhead-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'range-selection-month-subhead-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'range-selection-month-subhead-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.month.subhead.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'range-selection-month-subhead-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'weekdays-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'weekdays-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'weekdays-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'weekdays-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'weekdays-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.weekdays.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'weekdays-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'year-selection-year-container-height':\n      if($exclude-hardcoded-values, null, 36px),\n    'year-selection-year-container-width':\n      if($exclude-hardcoded-values, null, 72px),\n    'year-selection-year-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'year-selection-year-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'year-selection-year-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'year-selection-year-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'year-selection-year-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'year-selection-year-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'year-selection-year-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.year-selection.year.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'year-selection-year-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'year-selection-year-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'year-selection-year-selected-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'year-selection-year-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'year-selection-year-state-layer-height':\n      if($exclude-hardcoded-values, null, 36px),\n    'year-selection-year-state-layer-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'year-selection-year-state-layer-width':\n      if($exclude-hardcoded-values, null, 72px),\n    'year-selection-year-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'year-selection-year-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-dialog.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-small-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-small-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-small-weight'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'secondary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-divider.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'thickness': if($exclude-hardcoded-values, null, 1px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-elevated-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.elevated-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-elevated-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-extended-fab-branded.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.branded.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-extended-fab-primary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.primary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-extended-fab-secondary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.secondary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-extended-fab-surface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.surface.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-extended-fab-tertiary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.tertiary.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-branded-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 48px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-branded.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-primary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-primary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-primary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-secondary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-secondary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-secondary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-surface-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-surface-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-surface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-tertiary-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 96px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-width': if($exclude-hardcoded-values, null, 96px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 36px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-tertiary-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-width': if($exclude-hardcoded-values, null, 40px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-fab-tertiary.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'container-width': if($exclude-hardcoded-values, null, 56px),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'lowered-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'lowered-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-autocomplete.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'text-field-disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.04),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-active-indicator-height':\n      if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'disabled-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'toggle-unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'toggle-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-select.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-with-trailing-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'text-field-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'text-field-disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.04),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-active-indicator-height':\n      if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-active-indicator-height':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-text-field.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'),\n    'disabled-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'disabled-active-indicator-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04),\n    'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-active-indicator-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px),\n    'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px),\n    'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-placeholder-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-prefix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-suffix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-tonal-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-tonal-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filled-tonal-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'secondary-container'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'toggle-selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'toggle-unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'toggle-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-filter-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'elevated-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'flat-disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'flat-selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'flat-selected-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-selected-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'flat-selected-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'flat-unselected-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'flat-unselected-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filter-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'selected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-selected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-unselected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-trailing-icon-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-trailing-icon-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-trailing-icon-selected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-unselected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-full-screen-dialog.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'header-action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'header-action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'header-action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'header-action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'header-action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'header-action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'header-action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'header-action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'header-action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'header-action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'header-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'header-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'header-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'header-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'header-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'header-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'header-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'header-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'header-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'header-on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-input-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.input-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'selected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-outline-width': if($exclude-hardcoded-values, null, 0px),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-avatar-avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-avatar-avatar-size': if($exclude-hardcoded-values, null, 24px),\n    'with-avatar-disabled-avatar-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-selected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-leading-icon-selected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-selected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-selected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-selected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-unselected-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-leading-icon-unselected-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-trailing-icon-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-trailing-icon-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-trailing-icon-selected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-trailing-icon-selected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-trailing-icon-unselected-dragged-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-trailing-icon-unselected-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-trailing-icon-unselected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-linear-progress-indicator.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 4px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'four-color-active-indicator-four-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'four-color-active-indicator-one-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'four-color-active-indicator-three-color':\n      map.get($deps, 'md-sys-color', 'tertiary'),\n    'four-color-active-indicator-two-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'track-height': if($exclude-hardcoded-values, null, 4px),\n    'track-shape': map.get($deps, 'md-sys-shape', 'corner-none')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-list.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'list-item-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'list-item-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'list-item-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.3),\n    'list-item-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-disabled-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'list-item-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'list-item-dragged-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level4'),\n    'list-item-dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-dragged-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'list-item-dragged-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'list-item-focus-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'list-item-hover-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'list-item-large-leading-video-height':\n      if($exclude-hardcoded-values, null, 69px),\n    'list-item-leading-avatar-label-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'list-item-leading-avatar-label-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'list-item-leading-avatar-label-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'list-item-leading-avatar-label-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'list-item-leading-avatar-label-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'list-item-leading-avatar-label-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.leading-avatar-label.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'list-item-leading-avatar-label-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'list-item-leading-avatar-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'list-item-leading-avatar-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'list-item-leading-avatar-size': if($exclude-hardcoded-values, null, 40px),\n    'list-item-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'list-item-leading-image-height': if($exclude-hardcoded-values, null, 56px),\n    'list-item-leading-image-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-leading-image-width': if($exclude-hardcoded-values, null, 56px),\n    'list-item-leading-video-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'list-item-leading-video-width': if($exclude-hardcoded-values, null, 100px),\n    'list-item-one-line-container-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'list-item-overline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-overline-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'list-item-overline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'list-item-overline-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'list-item-overline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'list-item-overline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.overline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'list-item-overline-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'list-item-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-leading-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'list-item-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'list-item-pressed-trailing-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-selected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'list-item-small-leading-video-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'list-item-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'list-item-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'list-item-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'list-item-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'list-item-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'list-item-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'list-item-three-line-container-height':\n      if($exclude-hardcoded-values, null, 88px),\n    'list-item-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-trailing-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'list-item-trailing-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'list-item-trailing-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-small-font'),\n    'list-item-trailing-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-small-line-height'),\n    'list-item-trailing-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-small-size'),\n    'list-item-trailing-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-small-tracking'),\n    'list-item-trailing-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.trailing-supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-small-weight')\n          map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-small-font')\n      ),\n    'list-item-trailing-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-small-weight'),\n    'list-item-two-line-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'list-item-unselected-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-menu.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-navigation-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 32px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 64px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-height': if($exclude-hardcoded-values, null, 80px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-bar.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-navigation-drawer.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 56px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 336px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight-prominent'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'bottom-container-shape': map.get($deps, 'md-sys-shape', 'corner-large-top'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-height': if($exclude-hardcoded-values, null, 100%),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-large-end'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'container-width': if($exclude-hardcoded-values, null, 360px),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'large-badge-label-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'large-badge-label-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'large-badge-label-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'large-badge-label-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'large-badge-label-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'large-badge-label-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.large-badge-label.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'large-badge-label-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-navigation-rail.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 32px),\n    'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'active-indicator-width': if($exclude-hardcoded-values, null, 56px),\n    'active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'),\n    'active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-width': if($exclude-hardcoded-values, null, 80px),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-rail.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'menu-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'menu-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'menu-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'menu-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'no-label-active-indicator-height':\n      if($exclude-hardcoded-values, null, 56px),\n    'no-label-active-indicator-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-autocomplete.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'text-field-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-focus-caret-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'text-field-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-card.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'dragged-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-icon-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-size': if($exclude-hardcoded-values, null, 40px),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-segmented-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-segmented-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-container-color':\n      map.get($deps, 'md-sys-color', 'secondary-container'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'selected-with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-secondary-container'),\n    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-with-icon-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-select.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'menu-cascading-menu-indicator-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-cascading-menu-indicator-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'menu-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-divider-height': if($exclude-hardcoded-values, null, 1px),\n    'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px),\n    'menu-list-item-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'menu-list-item-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'menu-list-item-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'menu-list-item-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'menu-list-item-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'menu-list-item-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.menu.list-item.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'menu-list-item-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'menu-list-item-selected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'menu-list-item-with-trailing-icon-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'menu-list-item-with-trailing-icon-trailing-icon-size':\n      if($exclude-hardcoded-values, null, 24px),\n    'text-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'text-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'text-field-disabled-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-input-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-label-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-outline-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'text-field-disabled-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'text-field-disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-disabled-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-disabled-trailing-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'text-field-error-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-error-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'text-field-error-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-error-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'error'),\n    'text-field-focus-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'text-field-focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'text-field-hover-input-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'text-field-hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'text-field-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'text-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'text-field-label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'text-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'text-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'text-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'text-field-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'text-field-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'text-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'text-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'text-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'text-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'text-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'text-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'text-field-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-outlined-text-field.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'caret-color': map.get($deps, 'md-sys-color', 'primary'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'disabled-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-supporting-text-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-hover-outline-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-error-container'),\n    'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'error-label-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'error-outline-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'),\n    'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'),\n    'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'focus-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-placeholder-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-prefix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-suffix-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'label-text-populated-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'label-text-populated-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'outline-width': if($exclude-hardcoded-values, null, 1px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-plain-tooltip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.plain-tooltip.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-primary-navigation-tab.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-indicator-height': if($exclude-hardcoded-values, null, 3px),\n    'active-indicator-shape':\n      if($exclude-hardcoded-values, null, (3px 3px 0px 0px)),\n    'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'active-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'active-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 48px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'inactive-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'inactive-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'inactive-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'inactive-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-and-label-text-container-height':\n      if($exclude-hardcoded-values, null, 64px),\n    'with-icon-active-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-active-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-inactive-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-inactive-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-inactive-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-inactive-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-active-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-active-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-label-text-inactive-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-inactive-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-label-text-inactive-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-label-text-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'with-label-text-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'with-label-text-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'with-label-text-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'with-label-text-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.primary-navigation-tab.with-label-text.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'with-label-text-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-radio-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'icon-size': if($exclude-hardcoded-values, null, 20px),\n    'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-rich-tooltip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'subhead-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'subhead-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'subhead-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.subhead.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-scrim.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'scrim'),\n    'container-opacity': if($exclude-hardcoded-values, null, 0.32)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-search-bar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'avatar-size': if($exclude-hardcoded-values, null, 30px),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-height': if($exclude-hardcoded-values, null, 56px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-search-view.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'divider-color': map.get($deps, 'md-sys-color', 'outline'),\n    'docked-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'docked-header-container-height': if($exclude-hardcoded-values, null, 56px),\n    'full-screen-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'full-screen-header-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'header-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-input-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'header-input-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'header-input-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'header-input-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'header-input-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.input-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'header-input-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'header-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'header-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'header-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'header-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'header-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'header-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'header-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'header-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'header-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-secondary-navigation-tab.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 48px),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'divider-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'divider-height': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'title-small-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-small-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'title-small-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-small-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.secondary-navigation-tab.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-small-weight')\n          map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-small-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-small-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-inactive-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-sheet-bottom.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'docked-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'docked-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-extra-large-top'),\n    'docked-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'docked-drag-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'docked-drag-handle-height': if($exclude-hardcoded-values, null, 4px),\n    'docked-drag-handle-opacity': if($exclude-hardcoded-values, null, 0.4),\n    'docked-drag-handle-width': if($exclude-hardcoded-values, null, 32px),\n    'docked-minimized-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-none'),\n    'docked-modal-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'docked-standard-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-sheet-floating.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n);\n\n@function values($deps: $_default) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-sheet-side.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'detached-container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),\n    'docked-action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'docked-action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'docked-action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'docked-action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'docked-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'docked-container-height': if($exclude-hardcoded-values, null, 100%),\n    'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'docked-container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'docked-container-width': if($exclude-hardcoded-values, null, 256px),\n    'docked-divider-color': map.get($deps, 'md-sys-color', 'outline'),\n    'docked-headline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'docked-headline-font':\n      map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'docked-headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'docked-headline-size':\n      map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'docked-headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'docked-headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.sheet.side.docked.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'docked-headline-weight':\n      map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'docked-modal-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'docked-modal-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-large-start'),\n    'docked-standard-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-slider.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'active-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'active-track-height': if($exclude-hardcoded-values, null, 4px),\n    'active-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-active-track-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-active-track-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-handle-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-handle-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'disabled-handle-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-inactive-track-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-inactive-track-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'focus-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'handle-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'handle-height': if($exclude-hardcoded-values, null, 20px),\n    'handle-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'handle-width': if($exclude-hardcoded-values, null, 20px),\n    'hover-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'inactive-track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'inactive-track-height': if($exclude-hardcoded-values, null, 4px),\n    'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'label-container-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'label-container-height': if($exclude-hardcoded-values, null, 28px),\n    'label-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'label-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'label-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'label-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'label-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'label-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.slider.label.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'label-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'pressed-handle-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'track-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'with-overlap-handle-outline-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-overlap-handle-outline-width':\n      if($exclude-hardcoded-values, null, 1px),\n    'with-tick-marks-active-container-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'with-tick-marks-active-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-tick-marks-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 2px),\n    'with-tick-marks-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-tick-marks-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-tick-marks-inactive-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-tick-marks-inactive-container-opacity':\n      if($exclude-hardcoded-values, null, 0.38)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-snackbar.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'action-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'action-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'action-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'action-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'action-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'action-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'action-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.action.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'action-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'action-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-primary'),\n    'action-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'),\n    'icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'icon-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'icon-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'icon-size': if($exclude-hardcoded-values, null, 24px),\n    'supporting-text-color':\n      map.get($deps, 'md-sys-color', 'inverse-on-surface'),\n    'supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-medium-font'),\n    'supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),\n    'supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-medium-size'),\n    'supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-medium-tracking'),\n    'supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-medium-font')\n      ),\n    'supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-medium-weight'),\n    'with-single-line-container-height':\n      if($exclude-hardcoded-values, null, 48px),\n    'with-two-lines-container-height': if($exclude-hardcoded-values, null, 68px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-standard-menu-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'focus-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'hover-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.standard-menu-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'pressed-trailing-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-suggestion-chip.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 32px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),\n    'dragged-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'dragged-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'dragged-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),\n    'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),\n    'elevated-disabled-container-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'elevated-disabled-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level0'),\n    'elevated-disabled-container-opacity':\n      if($exclude-hardcoded-values, null, 0.12),\n    'elevated-focus-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'elevated-hover-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'elevated-pressed-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level1'),\n    'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'flat-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'flat-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.suggestion-chip.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-leading-icon-disabled-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-leading-icon-disabled-leading-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'with-leading-icon-dragged-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-focus-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-hover-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'with-leading-icon-leading-icon-size':\n      if($exclude-hardcoded-values, null, 18px),\n    'with-leading-icon-pressed-leading-icon-color':\n      map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-switch.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'disabled-selected-handle-color': map.get($deps, 'md-sys-color', 'surface'),\n    'disabled-selected-handle-opacity': if($exclude-hardcoded-values, null, 1),\n    'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'disabled-selected-track-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-track-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'disabled-unselected-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-unselected-handle-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-unselected-icon-opacity':\n      if($exclude-hardcoded-values, null, 0.38),\n    'disabled-unselected-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'disabled-unselected-track-outline-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'pressed-handle-height': if($exclude-hardcoded-values, null, 28px),\n    'pressed-handle-width': if($exclude-hardcoded-values, null, 28px),\n    'selected-focus-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'selected-focus-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-handle-color': map.get($deps, 'md-sys-color', 'on-primary'),\n    'selected-handle-height': if($exclude-hardcoded-values, null, 24px),\n    'selected-handle-width': if($exclude-hardcoded-values, null, 24px),\n    'selected-hover-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'selected-hover-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-icon-size': if($exclude-hardcoded-values, null, 16px),\n    'selected-pressed-handle-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'selected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'selected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'selected-pressed-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'selected-track-color': map.get($deps, 'md-sys-color', 'primary'),\n    'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'state-layer-size': if($exclude-hardcoded-values, null, 40px),\n    'track-height': if($exclude-hardcoded-values, null, 32px),\n    'track-outline-width': if($exclude-hardcoded-values, null, 2px),\n    'track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'track-width': if($exclude-hardcoded-values, null, 52px),\n    'unselected-focus-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-focus-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'unselected-focus-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-focus-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-handle-color': map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-handle-height': if($exclude-hardcoded-values, null, 16px),\n    'unselected-handle-width': if($exclude-hardcoded-values, null, 16px),\n    'unselected-hover-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-hover-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'unselected-hover-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-hover-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-icon-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-icon-size': if($exclude-hardcoded-values, null, 16px),\n    'unselected-pressed-handle-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'unselected-pressed-icon-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'unselected-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'unselected-pressed-track-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-pressed-track-outline-color':\n      map.get($deps, 'md-sys-color', 'outline'),\n    'unselected-track-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'unselected-track-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'with-icon-handle-height': if($exclude-hardcoded-values, null, 24px),\n    'with-icon-handle-width': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-text-button.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-height': if($exclude-hardcoded-values, null, 40px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),\n    'label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-large-line-height'),\n    'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),\n    'label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-large-tracking'),\n    'label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.text-button.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-large-weight')\n          map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-large-font')\n      ),\n    'label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'label-large-weight'),\n    'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),\n    'pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'with-icon-disabled-icon-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38),\n    'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'),\n    'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px),\n    'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-time-input.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'period-selector-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'period-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'period-selector-container-width': if($exclude-hardcoded-values, null, 52px),\n    'period-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'period-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'period-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'period-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'period-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'period-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'period-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.period-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'period-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'period-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'period-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'period-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'),\n    'time-input-field-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'time-input-field-container-height':\n      if($exclude-hardcoded-values, null, 72px),\n    'time-input-field-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'time-input-field-container-width':\n      if($exclude-hardcoded-values, null, 96px),\n    'time-input-field-focus-container-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'time-input-field-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-input-field-focus-outline-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'time-input-field-focus-outline-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'time-input-field-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'time-input-field-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'display-medium-font'),\n    'time-input-field-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-medium-line-height'),\n    'time-input-field-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'display-medium-size'),\n    'time-input-field-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-medium-tracking'),\n    'time-input-field-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'display-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-medium-font')\n      ),\n    'time-input-field-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'display-medium-weight'),\n    'time-input-field-separator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-input-field-separator-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-input-field-separator-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-input-field-separator-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-input-field-separator-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-input-field-separator-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.separator.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-input-field-separator-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-input-field-supporting-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'time-input-field-supporting-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-small-font'),\n    'time-input-field-supporting-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-small-line-height'),\n    'time-input-field-supporting-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-small-size'),\n    'time-input-field-supporting-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-small-tracking'),\n    'time-input-field-supporting-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.supporting-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-small-weight')\n          map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-small-font')\n      ),\n    'time-input-field-supporting-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-small-weight')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-time-picker.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-state';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-state': md-sys-state.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'clock-dial-color': map.get($deps, 'md-sys-color', 'surface-variant'),\n    'clock-dial-container-size': if($exclude-hardcoded-values, null, 256px),\n    'clock-dial-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'body-large-font'),\n    'clock-dial-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'body-large-line-height'),\n    'clock-dial-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'body-large-size'),\n    'clock-dial-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'body-large-tracking'),\n    'clock-dial-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.clock-dial.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'body-large-weight')\n          map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'body-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'body-large-font')\n      ),\n    'clock-dial-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'body-large-weight'),\n    'clock-dial-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary'),\n    'clock-dial-selector-center-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-center-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-selector-center-container-size':\n      if($exclude-hardcoded-values, null, 8px),\n    'clock-dial-selector-handle-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-handle-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-selector-handle-container-size':\n      if($exclude-hardcoded-values, null, 48px),\n    'clock-dial-selector-track-container-color':\n      map.get($deps, 'md-sys-color', 'primary'),\n    'clock-dial-selector-track-container-width':\n      if($exclude-hardcoded-values, null, 2px),\n    'clock-dial-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'clock-dial-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'label-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'label-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'label-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'label-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'label-medium-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'),\n    'period-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'period-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'period-selector-horizontal-container-height':\n      if($exclude-hardcoded-values, null, 38px),\n    'period-selector-horizontal-container-width':\n      if($exclude-hardcoded-values, null, 216px),\n    'period-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'period-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'title-medium-font'),\n    'period-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),\n    'period-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'title-medium-size'),\n    'period-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-medium-tracking'),\n    'period-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.period-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-medium-font')\n      ),\n    'period-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),\n    'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'),\n    'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px),\n    'period-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'period-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'tertiary-container'),\n    'period-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-tertiary-container'),\n    'period-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'period-selector-vertical-container-height':\n      if($exclude-hardcoded-values, null, 80px),\n    'period-selector-vertical-container-width':\n      if($exclude-hardcoded-values, null, 52px),\n    'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'),\n    'time-selector-24h-vertical-container-width':\n      if($exclude-hardcoded-values, null, 114px),\n    'time-selector-container-height': if($exclude-hardcoded-values, null, 80px),\n    'time-selector-container-shape':\n      map.get($deps, 'md-sys-shape', 'corner-small'),\n    'time-selector-container-width': if($exclude-hardcoded-values, null, 96px),\n    'time-selector-focus-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),\n    'time-selector-hover-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),\n    'time-selector-label-text-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-selector-label-text-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-selector-label-text-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-selector-label-text-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-selector-label-text-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.label-text.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-selector-label-text-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-selector-pressed-state-layer-opacity':\n      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),\n    'time-selector-selected-container-color':\n      map.get($deps, 'md-sys-color', 'primary-container'),\n    'time-selector-selected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-selected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-primary-container'),\n    'time-selector-separator-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-separator-font':\n      map.get($deps, 'md-sys-typescale', 'display-large-font'),\n    'time-selector-separator-line-height':\n      map.get($deps, 'md-sys-typescale', 'display-large-line-height'),\n    'time-selector-separator-size':\n      map.get($deps, 'md-sys-typescale', 'display-large-size'),\n    'time-selector-separator-tracking':\n      map.get($deps, 'md-sys-typescale', 'display-large-tracking'),\n    'time-selector-separator-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.separator.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'display-large-weight')\n          map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'display-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'display-large-font')\n      ),\n    'time-selector-separator-weight':\n      map.get($deps, 'md-sys-typescale', 'display-large-weight'),\n    'time-selector-unselected-container-color':\n      map.get($deps, 'md-sys-color', 'surface-variant'),\n    'time-selector-unselected-focus-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-focus-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-hover-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-hover-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-pressed-label-text-color':\n      map.get($deps, 'md-sys-color', 'on-surface'),\n    'time-selector-unselected-pressed-state-layer-color':\n      map.get($deps, 'md-sys-color', 'on-surface')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-top-app-bar-large.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 152px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-medium-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-medium-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.large.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-medium-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-medium-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-medium-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-medium-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-medium-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-top-app-bar-medium.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 112px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'headline-small-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'headline-small-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.medium.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'headline-small-weight')\n          map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'headline-small-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'headline-small-font')\n      ),\n    'headline-weight':\n      map.get($deps, 'md-sys-typescale', 'headline-small-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-top-app-bar-small-centered.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'),\n    'avatar-size': if($exclude-hardcoded-values, null, 30px),\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 64px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.centered.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-comp-top-app-bar-small.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@use 'sass:map';\n\n@use './md-sys-color';\n\n@use './md-sys-elevation';\n\n@use './md-sys-shape';\n\n@use './md-sys-typescale';\n\n$_default: (\n  'md-sys-color': md-sys-color.values-light(),\n  'md-sys-elevation': md-sys-elevation.values(),\n  'md-sys-shape': md-sys-shape.values(),\n  'md-sys-typescale': md-sys-typescale.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'container-color': map.get($deps, 'md-sys-color', 'surface'),\n    'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),\n    'container-height': if($exclude-hardcoded-values, null, 64px),\n    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),\n    'container-surface-tint-layer-color':\n      map.get($deps, 'md-sys-color', 'surface-tint'),\n    'headline-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'),\n    'headline-line-height':\n      map.get($deps, 'md-sys-typescale', 'title-large-line-height'),\n    'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'),\n    'headline-tracking':\n      map.get($deps, 'md-sys-typescale', 'title-large-tracking'),\n    'headline-type':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.headline.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-sys-typescale', 'title-large-weight')\n          map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(\n            $deps,\n            'md-sys-typescale',\n            'title-large-line-height'\n          ) map.get($deps, 'md-sys-typescale', 'title-large-font')\n      ),\n    'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'),\n    'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'),\n    'leading-icon-size': if($exclude-hardcoded-values, null, 24px),\n    'on-scroll-container-elevation':\n      map.get($deps, 'md-sys-elevation', 'level2'),\n    'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'),\n    'trailing-icon-size': if($exclude-hardcoded-values, null, 24px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-ref-palette.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'black': if($exclude-hardcoded-values, null, #000),\n    'error0': if($exclude-hardcoded-values, null, #000),\n    'error10': if($exclude-hardcoded-values, null, #410e0b),\n    'error100': if($exclude-hardcoded-values, null, #fff),\n    'error20': if($exclude-hardcoded-values, null, #601410),\n    'error30': if($exclude-hardcoded-values, null, #8c1d18),\n    'error40': if($exclude-hardcoded-values, null, #b3261e),\n    'error50': if($exclude-hardcoded-values, null, #dc362e),\n    'error60': if($exclude-hardcoded-values, null, #e46962),\n    'error70': if($exclude-hardcoded-values, null, #ec928e),\n    'error80': if($exclude-hardcoded-values, null, #f2b8b5),\n    'error90': if($exclude-hardcoded-values, null, #f9dedc),\n    'error95': if($exclude-hardcoded-values, null, #fceeee),\n    'error99': if($exclude-hardcoded-values, null, #fffbf9),\n    'neutral-variant0': if($exclude-hardcoded-values, null, #000),\n    'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22),\n    'neutral-variant100': if($exclude-hardcoded-values, null, #fff),\n    'neutral-variant20': if($exclude-hardcoded-values, null, #322f37),\n    'neutral-variant30': if($exclude-hardcoded-values, null, #49454f),\n    'neutral-variant40': if($exclude-hardcoded-values, null, #605d66),\n    'neutral-variant50': if($exclude-hardcoded-values, null, #79747e),\n    'neutral-variant60': if($exclude-hardcoded-values, null, #938f99),\n    'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4),\n    'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0),\n    'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec),\n    'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa),\n    'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe),\n    'neutral0': if($exclude-hardcoded-values, null, #000),\n    'neutral10': if($exclude-hardcoded-values, null, #1c1b1f),\n    'neutral100': if($exclude-hardcoded-values, null, #fff),\n    'neutral12': if($exclude-hardcoded-values, null, #201f23),\n    'neutral17': if($exclude-hardcoded-values, null, #2b292d),\n    'neutral20': if($exclude-hardcoded-values, null, #313033),\n    'neutral22': if($exclude-hardcoded-values, null, #313033),\n    'neutral24': if($exclude-hardcoded-values, null, #313033),\n    'neutral30': if($exclude-hardcoded-values, null, #484649),\n    'neutral4': if($exclude-hardcoded-values, null, #0e0e11),\n    'neutral40': if($exclude-hardcoded-values, null, #605d62),\n    'neutral50': if($exclude-hardcoded-values, null, #787579),\n    'neutral6': if($exclude-hardcoded-values, null, #141317),\n    'neutral60': if($exclude-hardcoded-values, null, #939094),\n    'neutral70': if($exclude-hardcoded-values, null, #aeaaae),\n    'neutral80': if($exclude-hardcoded-values, null, #c9c5ca),\n    'neutral87': if($exclude-hardcoded-values, null, #ddd8dd),\n    'neutral90': if($exclude-hardcoded-values, null, #e6e1e5),\n    'neutral92': if($exclude-hardcoded-values, null, #ece7ec),\n    'neutral94': if($exclude-hardcoded-values, null, #f1ecf1),\n    'neutral95': if($exclude-hardcoded-values, null, #f4eff4),\n    'neutral96': if($exclude-hardcoded-values, null, #f7f2f7),\n    'neutral98': if($exclude-hardcoded-values, null, #fdf8fd),\n    'neutral99': if($exclude-hardcoded-values, null, #fffbfe),\n    'primary0': if($exclude-hardcoded-values, null, #000),\n    'primary10': if($exclude-hardcoded-values, null, #21005d),\n    'primary100': if($exclude-hardcoded-values, null, #fff),\n    'primary20': if($exclude-hardcoded-values, null, #381e72),\n    'primary30': if($exclude-hardcoded-values, null, #4f378b),\n    'primary40': if($exclude-hardcoded-values, null, #6750a4),\n    'primary50': if($exclude-hardcoded-values, null, #7f67be),\n    'primary60': if($exclude-hardcoded-values, null, #9a82db),\n    'primary70': if($exclude-hardcoded-values, null, #b69df8),\n    'primary80': if($exclude-hardcoded-values, null, #d0bcff),\n    'primary90': if($exclude-hardcoded-values, null, #eaddff),\n    'primary95': if($exclude-hardcoded-values, null, #f6edff),\n    'primary99': if($exclude-hardcoded-values, null, #fffbfe),\n    'secondary0': if($exclude-hardcoded-values, null, #000),\n    'secondary10': if($exclude-hardcoded-values, null, #1d192b),\n    'secondary100': if($exclude-hardcoded-values, null, #fff),\n    'secondary20': if($exclude-hardcoded-values, null, #332d41),\n    'secondary30': if($exclude-hardcoded-values, null, #4a4458),\n    'secondary40': if($exclude-hardcoded-values, null, #625b71),\n    'secondary50': if($exclude-hardcoded-values, null, #7a7289),\n    'secondary60': if($exclude-hardcoded-values, null, #958da5),\n    'secondary70': if($exclude-hardcoded-values, null, #b0a7c0),\n    'secondary80': if($exclude-hardcoded-values, null, #ccc2dc),\n    'secondary90': if($exclude-hardcoded-values, null, #e8def8),\n    'secondary95': if($exclude-hardcoded-values, null, #f6edff),\n    'secondary99': if($exclude-hardcoded-values, null, #fffbfe),\n    'tertiary0': if($exclude-hardcoded-values, null, #000),\n    'tertiary10': if($exclude-hardcoded-values, null, #31111d),\n    'tertiary100': if($exclude-hardcoded-values, null, #fff),\n    'tertiary20': if($exclude-hardcoded-values, null, #492532),\n    'tertiary30': if($exclude-hardcoded-values, null, #633b48),\n    'tertiary40': if($exclude-hardcoded-values, null, #7d5260),\n    'tertiary50': if($exclude-hardcoded-values, null, #986977),\n    'tertiary60': if($exclude-hardcoded-values, null, #b58392),\n    'tertiary70': if($exclude-hardcoded-values, null, #d29dac),\n    'tertiary80': if($exclude-hardcoded-values, null, #efb8c8),\n    'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4),\n    'tertiary95': if($exclude-hardcoded-values, null, #ffecf1),\n    'tertiary99': if($exclude-hardcoded-values, null, #fffbfa),\n    'white': if($exclude-hardcoded-values, null, #fff)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-ref-typeface.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'brand': if($exclude-hardcoded-values, null, (Roboto)),\n    'plain': if($exclude-hardcoded-values, null, (Roboto)),\n    'weight-bold': if($exclude-hardcoded-values, null, 700),\n    'weight-medium': if($exclude-hardcoded-values, null, 500),\n    'weight-regular': if($exclude-hardcoded-values, null, 400)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-color.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n// User-configured context group \"Scheme\": \"Dynamic\"\n//\n\n@use 'sass:map';\n\n@use './md-ref-palette';\n\n$_default-dark: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-dark($deps: $_default-dark) {\n  @return (\n    'background': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'error': map.get($deps, 'md-ref-palette', 'error80'),\n    'error-container': map.get($deps, 'md-ref-palette', 'error30'),\n    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'),\n    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'),\n    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-background': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-error': map.get($deps, 'md-ref-palette', 'error20'),\n    'on-error-container': map.get($deps, 'md-ref-palette', 'error90'),\n    'on-primary': map.get($deps, 'md-ref-palette', 'primary20'),\n    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'),\n    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),\n    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),\n    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'),\n    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),\n    'on-secondary-fixed-variant':\n      map.get($deps, 'md-ref-palette', 'secondary30'),\n    'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),\n    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'),\n    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),\n    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),\n    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),\n    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'),\n    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'primary': map.get($deps, 'md-ref-palette', 'primary80'),\n    'primary-container': map.get($deps, 'md-ref-palette', 'primary30'),\n    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),\n    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),\n    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'secondary': map.get($deps, 'md-ref-palette', 'secondary80'),\n    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'),\n    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),\n    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'surface': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'),\n    'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'),\n    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'),\n    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'),\n    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'),\n    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'),\n    'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'),\n    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'),\n    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'),\n    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),\n    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')\n  );\n}\n\n$_default-light: (\n  'md-ref-palette': md-ref-palette.values(),\n);\n\n@function values-light($deps: $_default-light) {\n  @return (\n    'background': map.get($deps, 'md-ref-palette', 'neutral99'),\n    'error': map.get($deps, 'md-ref-palette', 'error40'),\n    'error-container': map.get($deps, 'md-ref-palette', 'error90'),\n    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'),\n    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'),\n    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'),\n    'on-background': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'on-error': map.get($deps, 'md-ref-palette', 'error100'),\n    'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),\n    'on-primary': map.get($deps, 'md-ref-palette', 'primary100'),\n    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),\n    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),\n    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),\n    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'),\n    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),\n    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),\n    'on-secondary-fixed-variant':\n      map.get($deps, 'md-ref-palette', 'secondary30'),\n    'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'),\n    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),\n    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'),\n    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),\n    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),\n    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),\n    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'),\n    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),\n    'primary': map.get($deps, 'md-ref-palette', 'primary40'),\n    'primary-container': map.get($deps, 'md-ref-palette', 'primary90'),\n    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),\n    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),\n    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'secondary': map.get($deps, 'md-ref-palette', 'secondary40'),\n    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),\n    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),\n    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),\n    'surface': map.get($deps, 'md-ref-palette', 'neutral99'),\n    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'),\n    'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'),\n    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'),\n    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral90'),\n    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral96'),\n    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral100'),\n    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral87'),\n    'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'),\n    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'),\n    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'),\n    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),\n    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),\n    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-elevation.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'level0': if($exclude-hardcoded-values, null, 0),\n    'level1': if($exclude-hardcoded-values, null, 1),\n    'level2': if($exclude-hardcoded-values, null, 3),\n    'level3': if($exclude-hardcoded-values, null, 6),\n    'level4': if($exclude-hardcoded-values, null, 8),\n    'level5': if($exclude-hardcoded-values, null, 12)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-motion.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Platform\": \"Web\"\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms),\n    'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms),\n    'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms),\n    'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms),\n    'duration-long1': if($exclude-hardcoded-values, null, 450ms),\n    'duration-long2': if($exclude-hardcoded-values, null, 500ms),\n    'duration-long3': if($exclude-hardcoded-values, null, 550ms),\n    'duration-long4': if($exclude-hardcoded-values, null, 600ms),\n    'duration-medium1': if($exclude-hardcoded-values, null, 250ms),\n    'duration-medium2': if($exclude-hardcoded-values, null, 300ms),\n    'duration-medium3': if($exclude-hardcoded-values, null, 350ms),\n    'duration-medium4': if($exclude-hardcoded-values, null, 400ms),\n    'duration-short1': if($exclude-hardcoded-values, null, 50ms),\n    'duration-short2': if($exclude-hardcoded-values, null, 100ms),\n    'duration-short3': if($exclude-hardcoded-values, null, 150ms),\n    'duration-short4': if($exclude-hardcoded-values, null, 200ms),\n    'easing-emphasized':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),\n    'easing-emphasized-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)),\n    'easing-emphasized-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    'easing-legacy':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)),\n    'easing-legacy-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)),\n    'easing-legacy-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)),\n    'easing-linear':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)),\n    'easing-standard':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),\n    'easing-standard-accelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)),\n    'easing-standard-decelerate':\n      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)),\n    'path': /** TODO: type \"motion_path\" is not supported. */ null\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-shape.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'corner-extra-large': if($exclude-hardcoded-values, null, 28px),\n    'corner-extra-large-top':\n      if($exclude-hardcoded-values, null, (28px 28px 0px 0px)),\n    'corner-extra-small': if($exclude-hardcoded-values, null, 4px),\n    'corner-extra-small-top':\n      if($exclude-hardcoded-values, null, (4px 4px 0px 0px)),\n    'corner-full': if($exclude-hardcoded-values, null, 9999px),\n    'corner-large': if($exclude-hardcoded-values, null, 16px),\n    'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)),\n    'corner-large-start':\n      if($exclude-hardcoded-values, null, (16px 0px 0px 16px)),\n    'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)),\n    'corner-medium': if($exclude-hardcoded-values, null, 12px),\n    'corner-none': if($exclude-hardcoded-values, null, 0px),\n    'corner-small': if($exclude-hardcoded-values, null, 8px)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-state.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n//\n\n@function values($exclude-hardcoded-values: false) {\n  @return (\n    'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16),\n    'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12),\n    'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08),\n    'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12)\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/_md-sys-typescale.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n// Design system display name: Google Material 3\n// Design system version: v0.161\n// User-configured context group \"Audience\": \"3P\"\n//\n\n@use 'sass:map';\n\n@use './md-ref-typeface';\n\n$_default: (\n  'md-ref-typeface': md-ref-typeface.values(),\n);\n\n@function values($deps: $_default, $exclude-hardcoded-values: false) {\n  @return (\n    'body-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.5rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem),\n    'body-large-size': if($exclude-hardcoded-values, null, 1rem),\n    'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'body-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem),\n    'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'body-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'body-small-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'body-small-size': if($exclude-hardcoded-values, null, 0.75rem),\n    'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem),\n    'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            4rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-large-line-height': if($exclude-hardcoded-values, null, 4rem),\n    'display-large-size': if($exclude-hardcoded-values, null, 3.562rem),\n    'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem),\n    'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            3.25rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem),\n    'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem),\n    'display-medium-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'display-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.75rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem),\n    'display-small-size': if($exclude-hardcoded-values, null, 2.25rem),\n    'display-small-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 2rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.5rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem),\n    'headline-large-size': if($exclude-hardcoded-values, null, 2rem),\n    'headline-large-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2.25rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem),\n    'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem),\n    'headline-medium-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-medium-weight':\n      map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'headline-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            2rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem),\n    'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem),\n    'headline-small-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'label-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'label-large-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem),\n    'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'label-large-weight-prominent':\n      map.get($deps, 'md-ref-typeface', 'weight-bold'),\n    'label-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem),\n    'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'label-medium-weight-prominent':\n      map.get($deps, 'md-ref-typeface', 'weight-bold'),\n    'label-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'label-small-line-height': if($exclude-hardcoded-values, null, 1rem),\n    'label-small-size': if($exclude-hardcoded-values, null, 0.688rem),\n    'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem),\n    'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'title-large':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-large.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-regular')\n          if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.75rem\n          ) map.get($deps, 'md-ref-typeface', 'brand')\n      ),\n    'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'),\n    'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem),\n    'title-large-size': if($exclude-hardcoded-values, null, 1.375rem),\n    'title-large-tracking': if($exclude-hardcoded-values, null, 0rem),\n    'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),\n    'title-medium':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-medium.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.5rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem),\n    'title-medium-size': if($exclude-hardcoded-values, null, 1rem),\n    'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem),\n    'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),\n    'title-small':\n      if(\n        $exclude-hardcoded-values,\n        null,\n        /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-small.tracking cannot be represented in the \"font\" property shorthand. Consider using the discrete properties instead. */\n          map.get($deps, 'md-ref-typeface', 'weight-medium')\n          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(\n            $exclude-hardcoded-values,\n            null,\n            1.25rem\n          ) map.get($deps, 'md-ref-typeface', 'plain')\n      ),\n    'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'),\n    'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem),\n    'title-small-size': if($exclude-hardcoded-values, null, 0.875rem),\n    'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),\n    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')\n  );\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/index.test.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n//\n\n@use 'true' as test;\n\n@use './index';\n\n@include test.describe('index') {\n  @include test.describe('index.md-comp-assist-chip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-assist-chip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-badge-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-badge-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-banner-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-banner-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-bottom-app-bar-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-bottom-app-bar-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-carousel-item-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-carousel-item-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-checkbox-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-checkbox-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-circular-progress-indicator-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-circular-progress-indicator-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-comp-data-table-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-data-table-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-date-input-modal-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-date-input-modal-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-date-picker-docked-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-date-picker-docked-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-date-picker-modal-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-date-picker-modal-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-dialog-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-dialog-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-divider-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-divider-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-elevated-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-elevated-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-elevated-card-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-elevated-card-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-extended-fab-branded-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-extended-fab-branded-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-extended-fab-primary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-extended-fab-primary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-extended-fab-secondary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-extended-fab-secondary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-extended-fab-surface-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-extended-fab-surface-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-extended-fab-tertiary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-extended-fab-tertiary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-branded-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-branded-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-branded-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-branded-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-primary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-primary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-primary-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-primary-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-primary-small-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-primary-small-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-secondary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-secondary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-secondary-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-secondary-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-secondary-small-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-secondary-small-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-surface-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-surface-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-surface-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-surface-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-surface-small-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-surface-small-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-tertiary-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-tertiary-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-tertiary-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-tertiary-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-fab-tertiary-small-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-fab-tertiary-small-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-autocomplete-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-autocomplete-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-card-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-card-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-icon-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-icon-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-menu-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-menu-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-select-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-select-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-text-field-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-text-field-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-tonal-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filled-tonal-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-filled-tonal-icon-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-filled-tonal-icon-button-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-comp-filter-chip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-filter-chip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-full-screen-dialog-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-full-screen-dialog-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-icon-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-icon-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-input-chip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-input-chip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-linear-progress-indicator-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-linear-progress-indicator-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-comp-list-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-list-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-menu-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-menu-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-navigation-bar-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-navigation-bar-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-navigation-drawer-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-navigation-drawer-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-navigation-rail-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-navigation-rail-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-autocomplete-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-autocomplete-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-card-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-card-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-icon-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-icon-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-menu-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-menu-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-segmented-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-outlined-segmented-button-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-select-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-select-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-outlined-text-field-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-outlined-text-field-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-plain-tooltip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-plain-tooltip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-primary-navigation-tab-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-primary-navigation-tab-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-radio-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-radio-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-rich-tooltip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-rich-tooltip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-scrim-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-scrim-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-search-bar-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-search-bar-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-search-view-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-search-view-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-secondary-navigation-tab-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-secondary-navigation-tab-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-comp-sheet-bottom-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-sheet-bottom-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-sheet-floating-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-sheet-floating-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-sheet-side-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-sheet-side-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-slider-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-slider-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-snackbar-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-snackbar-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-standard-menu-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-standard-menu-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-suggestion-chip-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-suggestion-chip-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-switch-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-switch-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-text-button-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-text-button-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-time-input-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-time-input-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-time-picker-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-time-picker-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-top-app-bar-large-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-top-app-bar-large-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-top-app-bar-medium-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-top-app-bar-medium-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-top-app-bar-small-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-comp-top-app-bar-small-values());\n    }\n  }\n\n  @include test.describe('index.md-comp-top-app-bar-small-centered-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(\n        index.md-comp-top-app-bar-small-centered-values()\n      );\n    }\n  }\n\n  @include test.describe('index.md-ref-palette-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-ref-palette-values());\n    }\n  }\n\n  @include test.describe('index.md-ref-typeface-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-ref-typeface-values());\n    }\n  }\n\n  @include test.describe('index.md-sys-color-values-dark') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-color-values-dark());\n    }\n  }\n\n  @include test.describe('index.md-sys-color-values-light') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-color-values-light());\n    }\n  }\n\n  @include test.describe('index.md-sys-elevation-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-elevation-values());\n    }\n  }\n\n  @include test.describe('index.md-sys-motion-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-motion-values());\n    }\n  }\n\n  @include test.describe('index.md-sys-shape-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-shape-values());\n    }\n  }\n\n  @include test.describe('index.md-sys-state-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-state-values());\n    }\n  }\n\n  @include test.describe('index.md-sys-typescale-values') {\n    @include test.it('should forward non-empty map') {\n      @include test.assert-true(index.md-sys-typescale-values());\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tokens/v0_161/lib.test.scss",
    "content": "//\n// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!\n// !!! DO NOT MODIFY IT BY HAND !!!\n//\n\n@use 'true' as test;\n\n@use './md-comp-assist-chip';\n@use './md-comp-badge';\n@use './md-comp-banner';\n@use './md-comp-bottom-app-bar';\n@use './md-comp-carousel-item';\n@use './md-comp-checkbox';\n@use './md-comp-circular-progress-indicator';\n@use './md-comp-data-table';\n@use './md-comp-date-input-modal';\n@use './md-comp-date-picker-docked';\n@use './md-comp-date-picker-modal';\n@use './md-comp-dialog';\n@use './md-comp-divider';\n@use './md-comp-elevated-button';\n@use './md-comp-elevated-card';\n@use './md-comp-extended-fab-branded';\n@use './md-comp-extended-fab-primary';\n@use './md-comp-extended-fab-secondary';\n@use './md-comp-extended-fab-surface';\n@use './md-comp-extended-fab-tertiary';\n@use './md-comp-fab-branded';\n@use './md-comp-fab-branded-large';\n@use './md-comp-fab-primary';\n@use './md-comp-fab-primary-large';\n@use './md-comp-fab-primary-small';\n@use './md-comp-fab-secondary';\n@use './md-comp-fab-secondary-large';\n@use './md-comp-fab-secondary-small';\n@use './md-comp-fab-surface';\n@use './md-comp-fab-surface-large';\n@use './md-comp-fab-surface-small';\n@use './md-comp-fab-tertiary';\n@use './md-comp-fab-tertiary-large';\n@use './md-comp-fab-tertiary-small';\n@use './md-comp-filled-autocomplete';\n@use './md-comp-filled-button';\n@use './md-comp-filled-card';\n@use './md-comp-filled-icon-button';\n@use './md-comp-filled-menu-button';\n@use './md-comp-filled-select';\n@use './md-comp-filled-text-field';\n@use './md-comp-filled-tonal-button';\n@use './md-comp-filled-tonal-icon-button';\n@use './md-comp-filter-chip';\n@use './md-comp-full-screen-dialog';\n@use './md-comp-icon-button';\n@use './md-comp-input-chip';\n@use './md-comp-linear-progress-indicator';\n@use './md-comp-list';\n@use './md-comp-menu';\n@use './md-comp-navigation-bar';\n@use './md-comp-navigation-drawer';\n@use './md-comp-navigation-rail';\n@use './md-comp-outlined-autocomplete';\n@use './md-comp-outlined-button';\n@use './md-comp-outlined-card';\n@use './md-comp-outlined-icon-button';\n@use './md-comp-outlined-menu-button';\n@use './md-comp-outlined-segmented-button';\n@use './md-comp-outlined-select';\n@use './md-comp-outlined-text-field';\n@use './md-comp-plain-tooltip';\n@use './md-comp-primary-navigation-tab';\n@use './md-comp-radio-button';\n@use './md-comp-rich-tooltip';\n@use './md-comp-scrim';\n@use './md-comp-search-bar';\n@use './md-comp-search-view';\n@use './md-comp-secondary-navigation-tab';\n@use './md-comp-sheet-bottom';\n@use './md-comp-sheet-floating';\n@use './md-comp-sheet-side';\n@use './md-comp-slider';\n@use './md-comp-snackbar';\n@use './md-comp-standard-menu-button';\n@use './md-comp-suggestion-chip';\n@use './md-comp-switch';\n@use './md-comp-text-button';\n@use './md-comp-time-input';\n@use './md-comp-time-picker';\n@use './md-comp-top-app-bar-large';\n@use './md-comp-top-app-bar-medium';\n@use './md-comp-top-app-bar-small';\n@use './md-comp-top-app-bar-small-centered';\n@use './md-ref-palette';\n@use './md-ref-typeface';\n@use './md-sys-color';\n@use './md-sys-elevation';\n@use './md-sys-motion';\n@use './md-sys-shape';\n@use './md-sys-state';\n@use './md-sys-typescale';\n\n@include test.describe('lib') {\n  @include test.describe('md-comp-assist-chip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-assist-chip.values());\n    }\n  }\n\n  @include test.describe('md-comp-badge.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-badge.values());\n    }\n  }\n\n  @include test.describe('md-comp-banner.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-banner.values());\n    }\n  }\n\n  @include test.describe('md-comp-bottom-app-bar.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-bottom-app-bar.values());\n    }\n  }\n\n  @include test.describe('md-comp-carousel-item.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-carousel-item.values());\n    }\n  }\n\n  @include test.describe('md-comp-checkbox.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-checkbox.values());\n    }\n  }\n\n  @include test.describe('md-comp-circular-progress-indicator.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-circular-progress-indicator.values());\n    }\n  }\n\n  @include test.describe('md-comp-data-table.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-data-table.values());\n    }\n  }\n\n  @include test.describe('md-comp-date-input-modal.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-date-input-modal.values());\n    }\n  }\n\n  @include test.describe('md-comp-date-picker-docked.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-date-picker-docked.values());\n    }\n  }\n\n  @include test.describe('md-comp-date-picker-modal.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-date-picker-modal.values());\n    }\n  }\n\n  @include test.describe('md-comp-dialog.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-dialog.values());\n    }\n  }\n\n  @include test.describe('md-comp-divider.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-divider.values());\n    }\n  }\n\n  @include test.describe('md-comp-elevated-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-elevated-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-elevated-card.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-elevated-card.values());\n    }\n  }\n\n  @include test.describe('md-comp-extended-fab-branded.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-extended-fab-branded.values());\n    }\n  }\n\n  @include test.describe('md-comp-extended-fab-primary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-extended-fab-primary.values());\n    }\n  }\n\n  @include test.describe('md-comp-extended-fab-secondary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-extended-fab-secondary.values());\n    }\n  }\n\n  @include test.describe('md-comp-extended-fab-surface.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-extended-fab-surface.values());\n    }\n  }\n\n  @include test.describe('md-comp-extended-fab-tertiary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-extended-fab-tertiary.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-branded.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-branded.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-branded-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-branded-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-primary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-primary.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-primary-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-primary-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-primary-small.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-primary-small.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-secondary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-secondary.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-secondary-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-secondary-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-secondary-small.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-secondary-small.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-surface.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-surface.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-surface-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-surface-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-surface-small.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-surface-small.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-tertiary.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-tertiary.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-tertiary-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-tertiary-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-fab-tertiary-small.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-fab-tertiary-small.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-autocomplete.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-autocomplete.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-card.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-card.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-icon-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-icon-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-menu-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-menu-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-select.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-select.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-text-field.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-text-field.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-tonal-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-tonal-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-filled-tonal-icon-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filled-tonal-icon-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-filter-chip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-filter-chip.values());\n    }\n  }\n\n  @include test.describe('md-comp-full-screen-dialog.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-full-screen-dialog.values());\n    }\n  }\n\n  @include test.describe('md-comp-icon-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-icon-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-input-chip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-input-chip.values());\n    }\n  }\n\n  @include test.describe('md-comp-linear-progress-indicator.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-linear-progress-indicator.values());\n    }\n  }\n\n  @include test.describe('md-comp-list.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-list.values());\n    }\n  }\n\n  @include test.describe('md-comp-menu.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-menu.values());\n    }\n  }\n\n  @include test.describe('md-comp-navigation-bar.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-navigation-bar.values());\n    }\n  }\n\n  @include test.describe('md-comp-navigation-drawer.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-navigation-drawer.values());\n    }\n  }\n\n  @include test.describe('md-comp-navigation-rail.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-navigation-rail.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-autocomplete.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-autocomplete.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-card.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-card.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-icon-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-icon-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-menu-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-menu-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-segmented-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-segmented-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-select.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-select.values());\n    }\n  }\n\n  @include test.describe('md-comp-outlined-text-field.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-outlined-text-field.values());\n    }\n  }\n\n  @include test.describe('md-comp-plain-tooltip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-plain-tooltip.values());\n    }\n  }\n\n  @include test.describe('md-comp-primary-navigation-tab.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-primary-navigation-tab.values());\n    }\n  }\n\n  @include test.describe('md-comp-radio-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-radio-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-rich-tooltip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-rich-tooltip.values());\n    }\n  }\n\n  @include test.describe('md-comp-scrim.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-scrim.values());\n    }\n  }\n\n  @include test.describe('md-comp-search-bar.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-search-bar.values());\n    }\n  }\n\n  @include test.describe('md-comp-search-view.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-search-view.values());\n    }\n  }\n\n  @include test.describe('md-comp-secondary-navigation-tab.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-secondary-navigation-tab.values());\n    }\n  }\n\n  @include test.describe('md-comp-sheet-bottom.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-sheet-bottom.values());\n    }\n  }\n\n  @include test.describe('md-comp-sheet-floating.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-sheet-floating.values());\n    }\n  }\n\n  @include test.describe('md-comp-sheet-side.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-sheet-side.values());\n    }\n  }\n\n  @include test.describe('md-comp-slider.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-slider.values());\n    }\n  }\n\n  @include test.describe('md-comp-snackbar.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-snackbar.values());\n    }\n  }\n\n  @include test.describe('md-comp-standard-menu-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-standard-menu-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-suggestion-chip.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-suggestion-chip.values());\n    }\n  }\n\n  @include test.describe('md-comp-switch.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-switch.values());\n    }\n  }\n\n  @include test.describe('md-comp-text-button.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-text-button.values());\n    }\n  }\n\n  @include test.describe('md-comp-time-input.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-time-input.values());\n    }\n  }\n\n  @include test.describe('md-comp-time-picker.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-time-picker.values());\n    }\n  }\n\n  @include test.describe('md-comp-top-app-bar-large.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-top-app-bar-large.values());\n    }\n  }\n\n  @include test.describe('md-comp-top-app-bar-medium.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-top-app-bar-medium.values());\n    }\n  }\n\n  @include test.describe('md-comp-top-app-bar-small.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-top-app-bar-small.values());\n    }\n  }\n\n  @include test.describe('md-comp-top-app-bar-small-centered.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-comp-top-app-bar-small-centered.values());\n    }\n  }\n\n  @include test.describe('md-ref-palette.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-ref-palette.values());\n    }\n  }\n\n  @include test.describe('md-ref-typeface.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-ref-typeface.values());\n    }\n  }\n\n  @include test.describe('md-sys-color.values-dark') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-color.values-dark());\n    }\n  }\n\n  @include test.describe('md-sys-color.values-light') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-color.values-light());\n    }\n  }\n\n  @include test.describe('md-sys-elevation.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-elevation.values());\n    }\n  }\n\n  @include test.describe('md-sys-motion.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-motion.values());\n    }\n  }\n\n  @include test.describe('md-sys-shape.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-shape.values());\n    }\n  }\n\n  @include test.describe('md-sys-state.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-state.values());\n    }\n  }\n\n  @include test.describe('md-sys-typescale.values') {\n    @include test.it('should return non-empty map') {\n      @include test.assert-true(md-sys-typescale.values());\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-tooltip/README.md",
    "content": "<!--docs:\ntitle: \"Tooltip\"\nlayout: detail\nsection: components\nexcerpt: \"Tooltips display informative text when users hover over, focus on, or tap an element.\"\niconId: tooltip\npath: /catalog/tooltips/\n-->\n\n# Tooltip\n\nTooltips display informative text when users hover over, focus on, or tap an\nelement.\n\n**Contents**\n\n*   [Using tooltips](#using-tooltips)\n*   [Tooltips](#tooltips)\n*   [API](#api)\n*   [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using tooltips\n\nPlain tooltips, when activated, display a text label identifying an element,\nsuch as a description of its function. Tooltips should include only short,\ndescriptive text and avoid restating visible UI text.\n\nCommon use cases include:\n\n*   Displaying full text that has been truncated\n*   Identifying a UI affordance\n*   Describing differences between similar elements\n*   Distinguishing actions with related iconography\n\nRich tooltips provide greater context and assistance for taking action through\nthe additions of an optional title and buttons.\n\nCommon use cases include:\n\n*   Guidance on a particular section of the page or object\n*   Providing informative and contextual actions\n\n### Installing tooltips\n\n```\nnpm install @material/tooltip\n```\n\n### Styles\n\n```scss\n@use \"@material/tooltip/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCTooltip} from '@material/tooltip';\nconst tooltip = new MDCTooltip(document.querySelector('.mdc-tooltip'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more\n> information on how to import JavaScript.\n\n### Making tooltips accessible\n\nEach tooltip element placed into the DOM is expected to have a unique `id`.\nTheir corresponding anchor element must be labeled with the `aria-describedby`\nattribute, establishing a relationship between the two elements.\n\nAnchor elements for rich tooltips without interactive contents (a link or an\naction button), are similarly labeled with `aria-describedby`. Rich tooltips\nwithout interactive content also have the aria-role `tooltip`.\n\nAnchor elements for rich tooltips with interactive elements are labeled with\n`data-tooltip-id`. This prevents the screen reader from announcing the contents\nprior to the user navigating into the tooltip, and giving focus to the\ninteractive elements. Rich tooltips with interactive content have the aria-role\n`dialog` instead of `tooltip` and their anchor elements has their\n`aria-haspopup` property set to `dialog`, and `aria-expanded` set to the\nvisibility of the interactive rich tooltip.\n\n## Tooltips\n\nThere are two types of tooltips:\n\n1.  [Plain Tooltips](#plain-tooltips)\n1.  [Rich Tooltips](#rich-tooltips)\n\n### Plain tooltips\n\n![Plain tooltip example](images/tooltip.png)\n\n#### Plain tooltip example\n\n```html\n<div id=\"tooltip-id\" class=\"mdc-tooltip\" role=\"tooltip\" aria-hidden=\"true\">\n  <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n    <span class=\"mdc-tooltip__label\">lorem ipsum dolor<span>\n  </div>\n</div>\n```\n\nTo ensure proper positioning of the tooltip, it's important that this tooltip\nelement is an immediate child of the `<body>`, rather than nested underneath the\nanchor element or other elements.\n\n```html\n<a aria-describedby=\"tooltip-id\" href=\"www.google.com\"> Link </a>\n```\n\nThe `aria-describedby` attribute (which is given the `id` for the associated\ntooltip) designates an element as being the anchor element for a particular\ntooltip.\n\nOther MDC components can be designated as anchor elements by adding this\nattribute.\n\n### Rich tooltips\n\n![Rich tooltip example](images/rich_tooltip.png)\n\nRich tooltips have two variants: default and persistent.\n\nDefault rich tooltips are shown when users hover over or focus on their anchor\nelement. They remain shown when users focus/hover over the contents of the rich\ntooltip, but becomes hidden if the users focus/hover outside of the anchor\nelement or the tooltip contents. If the user clicks within the contents of the\ntooltip, the tooltip will also be hidden.\n\nPersistent rich tooltips' visibility is toggled by clicks and enter/space bar\nkeystrokes on their anchor element. When shown, they remain visible when users\nfocus/hover over the contents of the rich tooltip, as well as when users hover\noutside of the anchor element or the tooltip contents. However, they become\nhidden when the users focus outside of the anchor element or the tooltip\ncontents. If the user clicks within the contents of the tooltip, the tooltip\nremains shown. If the user clicks outside the contents of the tooltip, the\ntooltip will be hidden. It is recommended that persistent rich tooltips are not\nadded to anchor elements that already have an click action; the click action for\nthe anchor element should be used solely to toggle the visibility of the rich\ntooltip.\n\n#### Rich tooltip example\n\nDefault rich tooltip without interactive content\n\n```html\n<div class=\"mdc-tooltip-wrapper--rich\">\n  <button class=\"mdc-button\" aria-describedby=\"tt0\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Button</span>\n  </button>\n  <div id=\"tt0\" class=\"mdc-tooltip mdc-tooltip--rich\" aria-hidden=\"true\" role=\"tooltip\">\n     <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n       <p class=\"mdc-tooltip__content\">\n         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur\n         pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum\n         aliquam sit amet sit amet eros.\n       </p>\n     </div>\n  </div>\n</div>\n```\n\nThe rich tooltip element should be a sibling of the anchor element; the anchor\nand the tooltip element should be wrapped in a parent div with the class\n`mdc-tooltip-wrapper--rich` or the tooltip will not be positioned correctly.\n\nDefault rich tooltip with interactive content\n\n```html\n<div class=\"mdc-tooltip-wrapper--rich\">\n  <button class=\"mdc-button\" data-tooltip-id=\"tt0\" aria-haspopup=\"dialog\" aria-expanded=\"false\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Button</span>\n  </button>\n  <div id=\"tt0\" class=\"mdc-tooltip mdc-tooltip--rich\" aria-hidden=\"true\" role=\"dialog\">\n     <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n        <h2 class=\"mdc-tooltip__title\"> Lorem Ipsum </h2>\n        <p class=\"mdc-tooltip__content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur\n          pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum\n          aliquam sit amet sit amet eros.\n          <a class=\"mdc-tooltip__content-link\" href=\"google.com\">link</a>\n        </p>\n        <div class=\"mdc-tooltip--rich-actions\">\n            <button class=\"mdc-button mdc-tooltip--rich-action\">\n              <div class=\"mdc-button__ripple\"></div>\n              <span class=\"mdc-button__focus-ring\"></span>\n              <span class=\"mdc-button__label\">Action</span>\n            </button>\n        </div>\n     </div>\n  </div>\n</div>\n```\n\nNote that any links used within the rich tooltip has the class\n`mdc-tooltip__content-link`. This is to ensure that the color of links within\nrich tooltips are consistent with the color theming.\n\nPersistent rich tooltip with interactive content\n\n```html\n<div class=\"mdc-tooltip-wrapper--rich\">\n  <button class=\"mdc-button\" data-tooltip-id=\"tt0\" aria-haspopup=\"dialog\" aria-expanded=\"false\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">Button</span>\n  </button>\n  <div id=\"tt0\" class=\"mdc-tooltip mdc-tooltip--rich\" aria-hidden=\"true\" tabindex=\"-1\" data-mdc-tooltip-persistent=\"true\" role=\"dialog\">\n     <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n        <h2 class=\"mdc-tooltip__title\"> Lorem Ipsum </h2>\n        <p class=\"mdc-tooltip__content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur\n          pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum\n          aliquam sit amet sit amet eros.\n          <a class=\"mdc-tooltip__content-link\" href=\"google.com\">link</a>\n        </p>\n        <div class=\"mdc-tooltip--rich-actions\">\n          <button class=\"mdc-button mdc-tooltip--rich-action\">\n            <div class=\"mdc-button__ripple\"></div>\n            <span class=\"mdc-button__focus-ring\"></span>\n            <span class=\"mdc-button__label\">Action</span>\n          </button>\n        </div>\n     </div>\n  </div>\n</div>\n```\n\nNote that persistent rich tooltips have `tabindex` set to `-1`. This is added to\nensure that the tooltip is not hidden when clicked on.\n\n#### MDC Button:\n\n```html\n<button class=\"mdc-button mdc-button--outlined\" aria-describedby=\"tooltip-id\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n#### MDC Icon Button:\n\n```html\n<button class=\"mdc-icon-button material-icons\" aria-describedby=\"tooltip-id\">favorite</button>\n```\n\nIf the information provided in the tooltip is duplicated from the anchor\nelement's `aria-label`, the tooltip can be hidden from the screenreader by\nannotating the anchor element with `data-tooltip-id` instead of\n`aria-describedby`. Hiding the tooltip from the screenreader will prevent the\nsame information from being announced twice (once from the `aria-label` and a\nsecond time from the tooltip).\n\n```html\n<button class=\"mdc-icon-button material-icons\"\n        aria-label=\"toggle favorite\"\n        data-tooltip-id=\"tooltip-id\">\n  favorite\n</button>\n\n<div id=\"tooltip-id\" class=\"mdc-tooltip\" role=\"tooltip\" aria-hidden=\"true\">\n  <div class=\"mdc-tooltip__surface mdc-tooltip__surface-animation\">\n    <span class=\"mdc-tooltip__label\">toggle favorite</span>\n  </div>\n</div>\n```\n\n### Tooltip positioning\n\nTooltip positioning is based on the anchor element.\n\nPlain tooltips appear directly below or above this anchor element and can be\nplaced flush with either the end, center, or start of the anchor.\n\n![End, center, and start alignment of tooltip on icon button in a LTR page](images/plain_tooltip_alignment.png)\n<p align=\"center\"> *Plain tooltip aligned with the end, center, and start of an\nanchor element (in a LTR page flow).* </p>\n\nRich tooltips appear directly below or above this anchor element, and can be\nplaced at the corner of either the end or start of the anchor.\n\n![End and start alignment of rich tooltip on button in a LTR page](images/rich_tooltip_alignment.png)\n<p align=\"center\"> *Rich tooltip aligned with the end and start of an anchor\nelement (in a LTR page flow).* </p>\n\nA threshold distance of 32px is expected to be maintained between the tooltip\nand the viewport edge. A valid tooltip position is calculated based on which of\nthe position options (start, center, or end for x-axis alignment and above or\nbelow for y-axis alignment) maintain this threshold. If all possible alignment\noptions violate the threshold, then a valid tooltip position is one that does\nnot collide with the viewport.\n\nA user specified position is honored only if the specified position is\nconsidered valid based on the logic outlined above.\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the tooltip's theme style module.\n\n```scss\n@use \"@material/tooltip\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the tooltip.\n`rich-fill-color($color)` | Sets the fill color of the rich tooltip.\n`label-ink-color($color)` | Sets the color of the tooltip's label text.\n`rich-text-ink-color($title-color, $content-color, $content-link-color)` | Sets the color of the text for the content inside a rich tooltip.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to tooltip surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`word-break($value, $fallbackValue)` | Sets the `word-break` property for the tooltip label. This is used to force-wrap long tooltip labels that lack spaces and hyphens. The optional $fallbackValue param can be used for IE11 as it does not support the `break-word` option. Users for IE11 who do not want their tooltip labels to be broken in the middle of the word can use this mixin to remove the default IE11 behavior of `break-all`.\n`z-index($z-index)` | Sets the z-index of the tooltip.\n`show-transition($enter-duration)` | Sets the duration for the animation that shows the tooltip.\n`exit-transition($exit-duration)` | Sets the duration for the animation that hides the tooltip.\n`rich-max-height($max-height)` | Sets the max-height of a rich tooltip.\n`rich-max-width($max-width)` | Sets the max-width of a rich tooltip.\n\n### `MDCTooltip` Methods\n\nMethod Signature | Description\n--- | ---\n`setTooltipPosition(position: {xPos?: XPosition, yPos?: YPosition}) => void` | Specify how the tooltip should be aligned with the anchor element. See [tooltip positioning](#tooltip-positioning) section for more information.\n`setAnchorBoundaryType(type: AnchorBoundaryType) => void` | Specify whether the anchor element is `bounded` (element has an identifiable boundary such as a button) or `unbounded` (element does not have a visually declared boundary such as a text link). Tooltips are placed closer to bounded anchor elements compared to unbounded anchor elements. If no type is specified, defaults to `bounded`.\n`hide() => void` | Proxies to the foundation's `hide` method, immediately hides the tooltip if it is shown.\n`isShown() => boolean` | Returns whether or not the tooltip is shown.\n`attachScrollHandler(addEventListenerFn: (event, handler) => void)` | Provided with a method that registers an event listener on a given element, will attach a `scroll` event handler on said element when the tooltip is shown. This should be used in situations where the anchor element is placed inside a scrollable container (that is not the body element), and will keep the tooltip \"attached\" to the anchor element when this element is scrolled.\n`removeScrollHandler(removeEventHandlerFn: (event, handler) => void)` | Should be used in conjunction with the above `attachScrollHandler` method. Removes the additional scroll handlers attached in the above method when the tooltip is hidden.\n`setShowDelay(delayMs: number) => void` | Specify the delay prior to a tooltip being shown.\n`setHideDelay(delayMs: number) => void` | Specify the delay prior to a tooltip being hidden.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a Tooltip for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCTooltipAdapter](./adapter.ts) and\n[MDCTooltipFoundation](./foundation.ts) for up-to-date code documentation of\ntooltip foundation APIs.\n"
  },
  {
    "path": "packages/mdc-tooltip/_index.scss",
    "content": "@forward \"./tooltip-theme\";\n"
  },
  {
    "path": "packages/mdc-tooltip/_plain-tooltip-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/typography/typography';\n@use './tooltip-theme';\n@use 'sass:map';\n\n$custom-property-prefix: 'plain-tooltip';\n$light-theme: (\n  container-color: null,\n  container-shape: null,\n  supporting-text-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-tracking: null,\n  supporting-text-type: null,\n  supporting-text-weight: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include tooltip-theme.fill-color(map.get($theme, 'container-color'));\n  @include tooltip-theme.shape-radius(map.get($theme, 'container-shape'));\n  @include tooltip-theme.label-ink-color(\n    map.get($theme, 'supporting-text-color')\n  );\n\n  .mdc-tooltip__surface {\n    @include typography.theme-styles(\n      (\n        font: map.get($theme, 'supporting-text-font'),\n        line-height: map.get($theme, 'supporting-text-line-height'),\n        size: map.get($theme, 'supporting-text-size'),\n        weight: map.get($theme, 'supporting-text-weight'),\n        tracking: map.get($theme, 'supporting-text-tracking'),\n      )\n    );\n  }\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-typography($theme, map.get($resolvers, 'typography'))\n  );\n  @return $theme;\n}\n\n@function _resolve-theme-typography($theme, $resolver) {\n  @return typography.resolve-theme($theme, $resolver, 'supporting-text');\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/_rich-tooltip-theme.scss",
    "content": "//\n// Copyright 2022 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use '@material/button/button-text-theme';\n@use '@material/elevation/elevation-theme';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/typography/typography';\n@use './tooltip-theme';\n@use 'sass:map';\n@use 'sass:meta';\n\n$custom-property-prefix: 'rich-tooltip';\n$light-theme: (\n  action-focus-label-text-color: null,\n  action-focus-state-layer-color: null,\n  action-focus-state-layer-opacity: null,\n  action-hover-label-text-color: null,\n  action-hover-state-layer-color: null,\n  action-hover-state-layer-opacity: null,\n  action-label-text-color: null,\n  action-label-text-font: null,\n  action-label-text-line-height: null,\n  action-label-text-size: null,\n  action-label-text-tracking: null,\n  action-label-text-type: null,\n  action-label-text-weight: null,\n  action-pressed-label-text-color: null,\n  action-pressed-state-layer-color: null,\n  action-pressed-state-layer-opacity: null,\n  container-color: null,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: null,\n  container-surface-tint-layer-color: null,\n  content-overflow-y: null,\n  content-overflow-x: null,\n  subhead-color: null,\n  subhead-font: null,\n  subhead-line-height: null,\n  subhead-size: null,\n  subhead-tracking: null,\n  subhead-type: null,\n  subhead-weight: null,\n  supporting-text-color: null,\n  supporting-text-font: null,\n  supporting-text-line-height: null,\n  supporting-text-size: null,\n  supporting-text-tracking: null,\n  supporting-text-type: null,\n  supporting-text-weight: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  // Only resolve typography tokens because the elevation theme mixin handles\n  // resolving elevation tokens internally.\n  $theme: _resolve-theme-typography($theme, map.get($resolvers, 'typography'));\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include tooltip-theme.rich-fill-color(map.get($theme, 'container-color'));\n  &.mdc-tooltip--rich {\n    @include tooltip-theme.surface-shape-radius(\n      map.get($theme, 'container-shape')\n    );\n  }\n  @include tooltip-theme.rich-text-ink-color(\n    $title-color: map.get($theme, 'subhead-color'),\n    $content-color: map.get($theme, 'supporting-text-color'),\n    $content-link-color: map.get($theme, 'action-label-text-color')\n  );\n\n  .mdc-tooltip--rich-action {\n    @include button-text-theme.theme-styles(\n      (\n        focus-label-text-color: map.get($theme, 'action-focus-label-text-color'),\n        focus-state-layer-color:\n          map.get($theme, 'action-focus-state-layer-color'),\n        focus-state-layer-opacity:\n          map.get($theme, 'action-focus-state-layer-opacity'),\n        hover-label-text-color: map.get($theme, 'action-hover-label-text-color'),\n        hover-state-layer-color:\n          map.get($theme, 'action-hover-state-layer-color'),\n        hover-state-layer-opacity:\n          map.get($theme, 'action-hover-state-layer-opacity'),\n        label-text-color: map.get($theme, 'action-label-text-color'),\n        label-text-font: map.get($theme, 'action-label-text-font'),\n        label-text-size: map.get($theme, 'action-label-text-size'),\n        label-text-tracking: map.get($theme, 'action-label-text-tracking'),\n        label-text-weight: map.get($theme, 'action-label-text-weight'),\n        pressed-label-text-color:\n          map.get($theme, 'action-pressed-label-text-color'),\n        pressed-state-layer-color:\n          map.get($theme, 'action-pressed-state-layer-color'),\n        pressed-state-layer-opacity:\n          map.get($theme, 'action-pressed-state-layer-opacity'),\n      )\n    );\n  }\n\n  @include _container-elevation(map.get($resolvers, 'elevation'), $theme);\n  @include tooltip-theme.content-scroll(\n    map.get($theme, 'content-overflow-x'),\n    map.get($theme, 'content-overflow-y')\n  );\n\n  .mdc-tooltip__surface .mdc-tooltip__title {\n    @include typography.theme-styles(\n      (\n        font: map.get($theme, 'subhead-font'),\n        line-height: map.get($theme, 'subhead-line-height'),\n        size: map.get($theme, 'subhead-size'),\n        weight: map.get($theme, 'subhead-weight'),\n        tracking: map.get($theme, 'subhead-tracking'),\n      )\n    );\n  }\n}\n\n@mixin _container-elevation($elevation-resolver, $theme) {\n  .mdc-tooltip__surface {\n    @include elevation-theme.with-resolver(\n      $elevation-resolver,\n      $elevation: map.get($theme, 'container-elevation'),\n      $shadow-color: map.get($theme, 'container-shadow-color')\n    );\n\n    @include elevation-theme.overlay-container-color(\n      map.get($theme, 'container-surface-tint-layer-color')\n    );\n  }\n\n  .mdc-tooltip__caret-surface-bottom {\n    @include elevation-theme.with-resolver(\n      $elevation-resolver,\n      $elevation: map.get($theme, 'container-elevation'),\n      $shadow-color: map.get($theme, 'container-shadow-color')\n    );\n  }\n\n  // The top caret surface needs to matching surface elevation styles as the\n  // rich tooltip *without* the shadow beneath it (the caret is a diamond\n  // overlaid on top of the tooltip surface, a shadow on this element would\n  // therefore be visible on top of the tooltip). To accomplish this we must\n  // resolve the elevation values first and then call each mixin individually\n  // (since the theme mixin does not support custom properties).\n  .mdc-tooltip__caret-surface-top {\n    $overlay-opacity: _generate-elevation-overlay-opacity(\n      $theme,\n      $elevation-resolver\n    );\n    @include elevation-theme.overlay-opacity($overlay-opacity);\n    @include elevation-theme.overlay-container-color(\n      map.get($theme, 'container-surface-tint-layer-color')\n    );\n  }\n}\n\n@function _generate-elevation-overlay-opacity($theme, $elevation-resolver) {\n  @if map.get($theme, 'container-elevation') and\n    map.get($theme, 'container-shadow-color')\n  {\n    $resolved-value: meta.call(\n      $elevation-resolver,\n      $elevation: map.get($theme, 'container-elevation'),\n      $shadow-color: map.get($theme, 'container-shadow-color')\n    );\n    @return map.get($resolved-value, overlay-opacity);\n  }\n\n  @return null;\n}\n\n@function _resolve-theme-elevation($theme, $elevation-resolver) {\n  @if map.get($theme, 'container-elevation') and\n    map.get($theme, 'container-shadow-color')\n  {\n    $resolved-value: meta.call(\n      $elevation-resolver,\n      $elevation: map.get($theme, 'container-elevation'),\n      $shadow-color: map.get($theme, 'container-shadow-color')\n    );\n    $theme: map.set($theme, 'container-elevation', $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@function _resolve-theme-typography($theme, $resolver) {\n  @return typography.resolve-theme(\n    $theme,\n    $resolver,\n    action-label-text,\n    supporting-text\n  );\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-elevation($theme, map.get($resolvers, 'elevation'))\n  );\n\n  $theme: map.merge(\n    $theme,\n    _resolve-theme-typography($theme, map.get($resolvers, 'typography'))\n  );\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/_tooltip-theme.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/theme';\n@use '@material/theme/custom-properties';\n@use '@material/theme/css';\n@use '@material/theme/theme-color';\n\n$background-color: rgba(black, theme-color.text-emphasis(medium));\n$border-radius: small;\n$label-color: text-primary-on-dark;\n\n$enter-duration: 150ms;\n$exit-duration: 75ms;\n\n// Rich Tooltip variables\n$rich-background-color: theme-color.prop-value(surface);\n$rich-title-text-color: text-primary-on-light;\n$rich-content-text-color: rgba(black, theme-color.text-emphasis(medium));\n$rich-content-link-color: primary;\n$rich-content-overflow-x: unset;\n$rich-content-overflow-y: auto;\n\n// Use a custom property so IE11 does not use \"normal\" and instead uses provided\n// fall-back value.\n$word-break-custom-prop: custom-properties.create(\n  --mdc-tooltip-word-break,\n  normal\n);\n$word-break-default: custom-properties.create-var($word-break-custom-prop);\n$word-break-ie11-fallback: break-all;\n$z-index: 9;\n\n// Sets the border-radius for the tooltip surface and tooltip caret element.\n// @param {Number | String} $radius Desired border radius value, accepts either\n//   a shape category or number value. $radius can be a singel value, or a\n//   list of up to 4 values.\n// @param {Boolean} $rtl-reflexive [false] If a rule should be created for a\n//    flipped $radius for a RTL layout.\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  .mdc-tooltip__surface {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n\n  .mdc-tooltip__caret-surface-top,\n  .mdc-tooltip__caret-surface-bottom {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n// Sets the border-radius for the tooltip surface element only.\n// @param {Number | String} $radius Desired border radius value, accepts either\n//   a shape category or number value. $radius can be a singel value, or a\n//   list of up to 4 values.\n// @param {Boolean} $rtl-reflexive [false] If a rule should be created for a\n//    flipped $radius for a RTL layout.\n@mixin surface-shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $query: feature-targeting.all()\n) {\n  .mdc-tooltip__surface {\n    @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n  }\n}\n\n// Sets the word-break property for the tooltip label. Users of IE11 can\n// overwrite the fallback if their tooltip labels will never contain long\n// strings without spaces or hyphens.\n// @param {String} $value\n// @param {String} $fallbackValue A fallback value to be set for word-break.\n//    This can be used to cover IE11 which does not support\n//    \"overflow-wrap: anywhere\".\n@mixin word-break(\n  $value,\n  $fallbackValue: $word-break-ie11-fallback,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-tooltip__surface {\n      @include css.declaration(\n        word-break,\n        $value,\n        $fallback-value: $fallbackValue\n      );\n      overflow-wrap: anywhere;\n    }\n  }\n}\n\n// Sets the color of the tooltip label.\n// @param {Color | String} $color\n@mixin label-ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  @include feature-targeting.targets($feat-color) {\n    .mdc-tooltip__surface {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n// Sets the color of the text for the content inside a rich tooltip.\n// @param {Color | String} $title-color The color for the title of rich\n//   tooltips.\n// @param {Color | String} $content-color The color for the text in the content\n//   of rich tooltips.\n// @param {Color | String} $content-link-color The color for a link in the\n//   content of rich tooltips.\n@mixin rich-text-ink-color(\n  $title-color: null,\n  $content-color: null,\n  $content-link-color: null,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  @include feature-targeting.targets($feat-color) {\n    @if $title-color {\n      .mdc-tooltip__title {\n        @include theme.property(color, $title-color);\n      }\n    }\n\n    @if $content-color {\n      .mdc-tooltip__content {\n        @include theme.property(color, $content-color);\n      }\n    }\n\n    @if $content-link-color {\n      .mdc-tooltip__content-link {\n        @include theme.property(color, $content-link-color);\n      }\n    }\n  }\n}\n\n// Sets the fill/surface color of the tooltip.\n// @param {Color | String} $color\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  .mdc-tooltip__surface {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n// Sets the fill/surface color of the rich tooltip.\n// @param {Color | String} $color\n@mixin rich-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  &.mdc-tooltip--rich {\n    .mdc-tooltip__surface {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n\n    .mdc-tooltip__caret-surface-top,\n    .mdc-tooltip__caret-surface-bottom {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n// Sets the max-height of the rich tooltip.\n// @param {Number} $max-height\n@mixin rich-max-height($max-height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &.mdc-tooltip--rich {\n    .mdc-tooltip__surface {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(max-height, $max-height);\n      }\n    }\n  }\n}\n\n// Sets the max-width of the rich tooltip.\n// @param {Number} $max-width\n@mixin rich-max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &.mdc-tooltip--rich {\n    .mdc-tooltip__surface {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(max-width, $max-width);\n      }\n      .mdc-tooltip__content {\n        @include feature-targeting.targets($feat-structure) {\n          @include theme.property(max-width, $max-width);\n        }\n      }\n    }\n  }\n}\n\n// Sets the z-index of the tooltip.\n// @param {Number} $z-index\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    &.mdc-tooltip {\n      z-index: $z-index;\n    }\n  }\n}\n\n// Sets the duration for the animation that shows the tooltip.\n// @param {Number} $enter-duration\n@mixin show-transition($enter-duration, $query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    .mdc-tooltip--showing-transition .mdc-tooltip__surface-animation {\n      transition: animation-functions.enter(opacity, $enter-duration),\n        animation-functions.enter(transform, $enter-duration);\n    }\n  }\n}\n\n// Sets the duration for the animation that hides the tooltip.\n// @param {Number} $exit-duration\n@mixin hide-transition($exit-duration, $query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include feature-targeting.targets($feat-animation) {\n    .mdc-tooltip--hide-transition .mdc-tooltip__surface-animation {\n      transition: animation-functions.exit-permanent(opacity, $exit-duration);\n    }\n  }\n}\n\n// Set the number of lines visible on a plain tooltip before being truncated.\n// @param {Number} $num-line-clamp\n@mixin line-clamp($num-line-clamp, $tooltip-surface-color: $background-color) {\n  .mdc-tooltip__label {\n    display: -webkit-box;\n    -webkit-line-clamp: $num-line-clamp;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n}\n\n// Sets the overflow behavior on interactive rich tooltip content. Note that\n// this is only applied to INTERACTIVE rich tooltips, as the content of non-\n// interactive rich tooltip is not focusable. This means keyboard users cannot\n// scroll the tooltip content and is an a11y violation. Non-interactive rich\n// tooltips should, therefore, utilize the `max-height` mixin above to increase\n// the tooltip height.\n@mixin content-scroll(\n  $content-overflow-x,\n  $content-overflow-y,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-tooltip__interactive-content {\n      @include theme.property(overflow-x, $content-overflow-x);\n      @include theme.property(overflow-y, $content-overflow-y);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/_tooltip.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use 'sass:math';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl' as rtl;\n@use '@material/dom/mixins' as dom-mixins;\n@use './tooltip-theme';\n@use '@material/typography/typography';\n\n$_padding-y: 4px;\n$_padding-x: 8px;\n$_max-height: 40vh;\n//LINT.IfChange(tooltip-dimensions)\n$_min-width: 40px;\n$_max-width: 200px;\n$_min-height: 24px;\n// LINT.ThenChange(constants.ts:tooltip-dimensions)\n$_label-type-scale: caption;\n$_line-height: 16px;\n// LINT.IfChange(tooltip-anim-scale)\n$_animation-scale: 0.8;\n// LINT.ThenChange(constants.ts:tooltip-anim-scale);\n\n// Rich Tooltip variables\n$_rich_corner_radius: 4px;\n$_rich_line-height: 20px;\n$_rich_title_baseline: 28px;\n// LINT.IfChange(rich-tooltip-dimensions)\n$_rich_max-width: 320px;\n// LINT.ThenChange(constants.ts:rich-tooltip-dimensions)\n$_content-margin: 8px;\n$_content-type-scale: body2;\n$_title-type-scale: subtitle2;\n$_caret-size: 24px;\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include tooltip-theme.word-break(\n    tooltip-theme.$word-break-default,\n    tooltip-theme.$word-break-ie11-fallback,\n    $query: $query\n  );\n  @include tooltip-theme.show-transition(\n    tooltip-theme.$enter-duration,\n    $query: $query\n  );\n  @include tooltip-theme.hide-transition(\n    tooltip-theme.$exit-duration,\n    $query: $query\n  );\n\n  .mdc-tooltip {\n    @include feature-targeting.targets($feat-structure) {\n      position: fixed;\n      display: none;\n      z-index: tooltip-theme.$z-index;\n    }\n  }\n\n  .mdc-tooltip-wrapper--rich {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n    }\n  }\n\n  .mdc-tooltip--shown,\n  .mdc-tooltip--showing,\n  .mdc-tooltip--hide {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n    }\n\n    &.mdc-tooltip--rich {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        // Moves the rich tooltip out of the viewport/parent element initially\n        // so that the initial width is not affected and a 'correct' width can\n        // be used to calculate the position of the tooltip.\n        @include rtl.ignore-next-line();\n        left: -$_rich_max_width;\n        position: absolute;\n      }\n    }\n  }\n\n  .mdc-tooltip__surface {\n    &::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      line-height: $_line-height;\n      padding: $_padding-y $_padding-x;\n      min-width: $_min-width;\n      max-width: $_max-width;\n      min-height: $_min-height;\n      max-height: $_max-height;\n      box-sizing: border-box;\n      overflow: hidden;\n      text-align: center;\n    }\n\n    .mdc-tooltip--rich & {\n      @include feature-targeting.targets($feat-structure) {\n        align-items: flex-start;\n        display: flex;\n        flex-direction: column;\n        min-height: $_min-height;\n        min-width: $_min-width;\n        max-width: $_rich_max-width;\n        position: relative;\n\n        @include rtl.ignore-next-line();\n        text-align: left;\n        @include rtl.rtl {\n          @include rtl.ignore-next-line();\n          text-align: right;\n        }\n      }\n    }\n\n    .mdc-tooltip--multiline & {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.ignore-next-line();\n        text-align: left;\n        @include rtl.rtl {\n          @include rtl.ignore-next-line();\n          text-align: right;\n        }\n      }\n    }\n\n    .mdc-tooltip__title {\n      @include feature-targeting.targets($feat-structure) {\n        margin: 0 $_content-margin;\n      }\n    }\n\n    .mdc-tooltip__content {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(#{$_max-width} - (2 * #{$_content-margin}));\n        margin: $_content-margin;\n      }\n\n      .mdc-tooltip--rich & {\n        @include feature-targeting.targets($feat-structure) {\n          max-width: calc(#{$_rich_max-width} - (2 * #{$_content-margin}));\n          align-self: stretch;\n        }\n      }\n    }\n\n    .mdc-tooltip__content-link {\n      @include feature-targeting.targets($feat-structure) {\n        text-decoration: none;\n      }\n    }\n  }\n\n  .mdc-tooltip--rich-actions,\n  .mdc-tooltip__content,\n  .mdc-tooltip__title {\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 1;\n    }\n  }\n\n  .mdc-tooltip__surface-animation {\n    @include feature-targeting.targets($feat-structure) {\n      opacity: 0;\n      transform: scale($_animation-scale);\n      will-change: transform, opacity;\n    }\n\n    .mdc-tooltip--shown & {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n\n    .mdc-tooltip--hide & {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .mdc-tooltip__caret-surface-top,\n  .mdc-tooltip__caret-surface-bottom {\n    @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      height: $_caret-size;\n      width: $_caret-size;\n      // We override this transform in MDCTooltipFoundation, however these\n      // styles must be present before the override happens in order to\n      // calculate the correct boundingClientRect (with the transforms applied).\n      @include rtl.ignore-next-line();\n      transform: rotate(35deg) skewY(20deg) scaleX(math.cos(20deg));\n    }\n  }\n\n  .mdc-tooltip__caret-surface-bottom {\n    @include elevation-mixins.elevation(2, $query: $query);\n    @include feature-targeting.targets($feat-structure) {\n      outline: 1px solid transparent;\n      z-index: -1;\n\n      // Added for b/206440838.\n      @include dom.forced-colors-mode($exclude-ie11: true) {\n        outline-color: CanvasText;\n      }\n    }\n  }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include tooltip-theme.shape-radius(\n    tooltip-theme.$border-radius,\n    $query: $query\n  );\n  @include tooltip-theme.label-ink-color(\n    tooltip-theme.$label-color,\n    $query: $query\n  );\n  @include tooltip-theme.fill-color(\n    tooltip-theme.$background-color,\n    $query: $query\n  );\n\n  @include tooltip-theme.rich-text-ink-color(\n    tooltip-theme.$rich-title-text-color,\n    tooltip-theme.$rich-content-text-color,\n    tooltip-theme.$rich-content-link-color,\n    $query: $query\n  );\n\n  @include tooltip-theme.content-scroll(\n    tooltip-theme.$rich-content-overflow-x,\n    tooltip-theme.$rich-content-overflow-y,\n    $query: $query\n  );\n\n  .mdc-tooltip {\n    @include tooltip-theme.rich-fill-color(\n      tooltip-theme.$rich-background-color,\n      $query: $query\n    );\n  }\n\n  .mdc-tooltip__surface {\n    @include typography.typography(\n      $_label-type-scale,\n      $exclude-props: (line-height),\n      $query: $query\n    );\n\n    .mdc-tooltip--rich & {\n      @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n      @include elevation-mixins.elevation(2, $query: $query);\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: $_rich_corner_radius;\n        line-height: $_rich_line-height;\n      }\n    }\n\n    .mdc-tooltip__title {\n      @include typography.text-baseline(\n        $top: $_rich_title_baseline - $_padding-y,\n        $lineHeight: $_rich_line-height,\n        $query: $query\n      );\n      @include typography.typography($_title-type-scale, $query: $query);\n    }\n\n    .mdc-tooltip__content {\n      @include typography.typography($_content-type-scale, $query: $query);\n\n      .mdc-tooltip--rich & {\n        @include feature-targeting.targets($feat-structure) {\n          max-width: calc(#{$_rich_max-width} - (2 * #{$_content-margin}));\n          align-self: stretch;\n        }\n      }\n    }\n  }\n\n  @include static-styles($query: $query);\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {EventType, SpecificEventListener} from '@material/base/types';\n\nimport {CssClasses} from './constants';\n\n/**\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTooltipAdapter {\n  /**\n   * @return the attribute string if present on the root element, null\n   * otherwise.\n   */\n  getAttribute(attr: string): string|null;\n\n  /**\n   * Sets an attribute on the root element.\n   */\n  setAttribute(attr: string, value: string): void;\n\n  /**\n   * Removes an attribute on the root element.\n   */\n  removeAttribute(attr: string): void;\n\n  /**\n   * Adds a class onto the root element.\n   */\n  addClass(className: CssClasses): void;\n\n  /**\n   * @return whether or not the root element has the provided className.\n   */\n  hasClass(className: CssClasses): boolean;\n\n  /**\n   * Removes a class from the root element.\n   */\n  removeClass(className: CssClasses): void;\n\n  /**\n   * @return the value of the given computed style property on the root element.\n   */\n  getComputedStyleProperty(propertyName: string): string;\n\n  /**\n   * Sets the property value of the given style property on the root element.\n   */\n  setStyleProperty(propertyName: string, value: string): void;\n\n  /**\n   * Sets the property value of the given style property on the tooltip's\n   * surface-animation element (indicated by the\n   * \"mdc-tooltip__surface-animation\" class).\n   */\n  setSurfaceAnimationStyleProperty(propertyName: string, value: string): void;\n\n  /**\n   * @return the width of the viewport.\n   */\n  getViewportWidth(): number;\n\n  /**\n   * @return the height of the viewport.\n   */\n  getViewportHeight(): number;\n\n  /**\n   * @return the width and height of the tooltip element.\n   */\n  getTooltipSize(): {width: number, height: number};\n\n  /**\n   * @return the DOMRect for the anchor element.\n   */\n  getAnchorBoundingRect(): DOMRect|null;\n\n  /**\n   * @return the DOMRect for the parent of the tooltip element.\n   */\n  getParentBoundingRect(): DOMRect|null;\n\n  /**\n   * @return the attribute string if present on the anchor element, null\n   * otherwise.\n   */\n  getAnchorAttribute(attr: string): string|null;\n\n  /**\n   * Sets an attribute on the anchor element.\n   */\n  setAnchorAttribute(attr: string, value: string): void;\n\n  /**\n   * @return true if the text direction is right-to-left.\n   */\n  isRTL(): boolean;\n\n  /**\n   * Checks if element is contained within the anchor element.\n   */\n  anchorContainsElement(element: Element): boolean;\n\n  /**\n   * Checks if element is contained within the tooltip element.\n   */\n  tooltipContainsElement(element: Element): boolean;\n\n  /**\n   * Sets focus on the anchor element.\n   */\n  focusAnchorElement(): void;\n\n  /**\n   * Registers an event listener to the root element.\n   */\n  registerEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener to the root element.\n   */\n  deregisterEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener to the anchor element.\n   */\n  registerAnchorEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener to the anchor element.\n   */\n  deregisterAnchorEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener to the document body.\n   */\n  registerDocumentEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener to the document body.\n   */\n  deregisterDocumentEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Registers an event listener to the window.\n   */\n  registerWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Deregisters an event listener to the window.\n   */\n  deregisterWindowEventHandler<K extends EventType>(\n      eventType: K, handler: SpecificEventListener<K>): void;\n\n  /**\n   * Notification that the tooltip element has been fully hidden. Typically used\n   * to wait for the hide animation to complete.\n   */\n  notifyHidden(): void;\n\n  /**\n   * Notification that the tooltip element has been shown.\n   */\n  notifyShown(): void;\n\n  /**\n   * @return the DOMRect for the caret element.\n   */\n  getTooltipCaretBoundingRect(): DOMRect|null;\n\n  /**\n   * Sets the property value of the given style property on both the caret-top\n   * and caret-bottom elements.\n   */\n  setTooltipCaretStyle(propertyName: string, value: string): void;\n\n  /**\n   * Clears all inline styles set on the caret-top and caret-bottom elements.\n   */\n  clearTooltipCaretStyles(): void;\n\n  /**\n   * @return the active element of the document that owns the tooltip.\n   */\n  getActiveElement(): Element|null;\n\n  /**\n   * @return whether the provided object is an Element or not. This is\n   * required because Elements from iframes are typed differently.\n   */\n  isInstanceOfElement(eventTarget: EventTarget|null): boolean;\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/component.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {EventType, SpecificEventListener} from '@material/base/types';\nimport {safeAttrPrefix} from 'safevalues';\nimport {setElementPrefixedAttribute} from 'safevalues/dom';\n\nimport {MDCTooltipAdapter} from './adapter';\nimport {\n  AnchorBoundaryType,\n  CssClasses,\n  events,\n  PositionWithCaret,\n  XPosition,\n  YPosition,\n} from './constants';\nimport {MDCTooltipFoundation} from './foundation';\n\nconst ARIA_ATTR_PREFIX = [safeAttrPrefix`aria-`];\n\n/** MDC Tooltip */\nexport class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {\n  static override attachTo(root: HTMLElement) {\n    return new MDCTooltip(root);\n  }\n\n  private anchorElem!: HTMLElement; // assigned in initialize\n  private isTooltipRich!: boolean; // assigned in initialSyncWithDOM\n  private isTooltipPersistent!: boolean; // assigned in initialSyncWithDOM\n\n  private handleMouseEnter!: SpecificEventListener<'mouseenter'>;\n  private handleFocus!: SpecificEventListener<'focus'>;\n  private handleMouseLeave!: SpecificEventListener<'mouseleave'>;\n  private handleTransitionEnd!: SpecificEventListener<'transitionend'>;\n  private handleClick!: SpecificEventListener<'click'>;\n  private handleTouchstart!: SpecificEventListener<'touchstart'>;\n  private handleTouchend!: SpecificEventListener<'touchend'>;\n\n  override initialize() {\n    const tooltipId = this.root.getAttribute('id');\n    if (!tooltipId) {\n      throw new Error('MDCTooltip: Tooltip component must have an id.');\n    }\n\n    const anchorElem =\n      document.querySelector<HTMLElement>(`[data-tooltip-id=\"${tooltipId}\"]`) ||\n      document.querySelector<HTMLElement>(`[aria-describedby=\"${tooltipId}\"]`);\n    if (!anchorElem) {\n      throw new Error(\n        'MDCTooltip: Tooltip component requires an anchor element annotated with [aria-describedby] or [data-tooltip-id].',\n      );\n    }\n    this.anchorElem = anchorElem;\n  }\n\n  override initialSyncWithDOM() {\n    this.isTooltipRich = this.foundation.isRich();\n    this.isTooltipPersistent = this.foundation.isPersistent();\n\n    this.handleMouseEnter = () => {\n      this.foundation.handleAnchorMouseEnter();\n    };\n\n    this.handleFocus = (event) => {\n      this.foundation.handleAnchorFocus(event);\n    };\n\n    this.handleMouseLeave = () => {\n      this.foundation.handleAnchorMouseLeave();\n    };\n\n    this.handleTransitionEnd = () => {\n      this.foundation.handleTransitionEnd();\n    };\n\n    this.handleClick = () => {\n      this.foundation.handleAnchorClick();\n    };\n\n    this.handleTouchstart = () => {\n      this.foundation.handleAnchorTouchstart();\n    };\n\n    this.handleTouchend = () => {\n      this.foundation.handleAnchorTouchend();\n    };\n\n    if (this.isTooltipRich && this.isTooltipPersistent) {\n      this.anchorElem.addEventListener('click', this.handleClick);\n    } else {\n      this.anchorElem.addEventListener('mouseenter', this.handleMouseEnter);\n      // TODO(b/157075286): Listening for a 'focus' event is too broad.\n      this.anchorElem.addEventListener('focus', this.handleFocus);\n      this.anchorElem.addEventListener('mouseleave', this.handleMouseLeave);\n      this.anchorElem.addEventListener('touchstart', this.handleTouchstart);\n      this.anchorElem.addEventListener('touchend', this.handleTouchend);\n    }\n\n    this.listen('transitionend', this.handleTransitionEnd);\n  }\n\n  override destroy() {\n    if (this.anchorElem) {\n      if (this.isTooltipRich && this.isTooltipPersistent) {\n        this.anchorElem.removeEventListener('click', this.handleClick);\n      } else {\n        this.anchorElem.removeEventListener(\n          'mouseenter',\n          this.handleMouseEnter,\n        );\n        this.anchorElem.removeEventListener('focus', this.handleFocus);\n        this.anchorElem.removeEventListener(\n          'mouseleave',\n          this.handleMouseLeave,\n        );\n        this.anchorElem.removeEventListener(\n          'touchstart',\n          this.handleTouchstart,\n        );\n        this.anchorElem.removeEventListener('touchend', this.handleTouchend);\n      }\n    }\n\n    this.unlisten('transitionend', this.handleTransitionEnd);\n    super.destroy();\n  }\n\n  setTooltipPosition(position: {\n    xPos?: XPosition;\n    yPos?: YPosition;\n    withCaretPos?: PositionWithCaret;\n  }) {\n    this.foundation.setTooltipPosition(position);\n  }\n\n  setAnchorBoundaryType(type: AnchorBoundaryType) {\n    this.foundation.setAnchorBoundaryType(type);\n  }\n\n  setShowDelay(delayMs: number) {\n    this.foundation.setShowDelay(delayMs);\n  }\n\n  setHideDelay(delayMs: number) {\n    this.foundation.setHideDelay(delayMs);\n  }\n\n  hide() {\n    this.foundation.hide();\n  }\n\n  isShown() {\n    return this.foundation.isShown();\n  }\n\n  /**\n   * Method that allows user to specify additional elements that should have a\n   * scroll event listener attached to it. This should be used in instances\n   * where the anchor element is placed inside a scrollable container (that is\n   * not the body element), and will ensure that the tooltip will stay attached\n   * to the anchor on scroll.\n   */\n  attachScrollHandler(\n    addEventListenerFn: <K extends EventType>(\n      event: K,\n      handler: SpecificEventListener<K>,\n    ) => void,\n  ) {\n    this.foundation.attachScrollHandler(addEventListenerFn);\n  }\n\n  /**\n   * Must be used in conjunction with #attachScrollHandler. Removes the scroll\n   * event handler from elements on the page.\n   */\n  removeScrollHandler(\n    removeEventHandlerFn: <K extends EventType>(\n      event: K,\n      handler: SpecificEventListener<K>,\n    ) => void,\n  ) {\n    this.foundation.removeScrollHandler(removeEventHandlerFn);\n  }\n\n  override getDefaultFoundation() {\n    const adapter: MDCTooltipAdapter = {\n      getAttribute: (attr) => this.root.getAttribute(attr),\n      setAttribute: (attr, value) => {\n        setElementPrefixedAttribute(ARIA_ATTR_PREFIX, this.root, attr, value);\n      },\n      removeAttribute: (attr) => {\n        this.root.removeAttribute(attr);\n      },\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      getComputedStyleProperty: (propertyName) => {\n        return window\n          .getComputedStyle(this.root)\n          .getPropertyValue(propertyName);\n      },\n      setStyleProperty: (propertyName, value) => {\n        this.root.style.setProperty(propertyName, value);\n      },\n      setSurfaceAnimationStyleProperty: (propertyName, value) => {\n        const surface = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.SURFACE_ANIMATION}`,\n        );\n        surface?.style.setProperty(propertyName, value);\n      },\n      getViewportWidth: () => window.innerWidth,\n      getViewportHeight: () => window.innerHeight,\n      getTooltipSize: () => {\n        return {width: this.root.offsetWidth, height: this.root.offsetHeight};\n      },\n      getAnchorBoundingRect: () => {\n        return this.anchorElem ? this.anchorElem.getBoundingClientRect() : null;\n      },\n      getParentBoundingRect: () => {\n        return this.root.parentElement?.getBoundingClientRect() ?? null;\n      },\n      getAnchorAttribute: (attr) => {\n        return this.anchorElem ? this.anchorElem.getAttribute(attr) : null;\n      },\n      setAnchorAttribute: (attr, value) => {\n        if (this.anchorElem) {\n          setElementPrefixedAttribute(\n            ARIA_ATTR_PREFIX,\n            this.anchorElem,\n            attr,\n            value,\n          );\n        }\n      },\n      isRTL: () => getComputedStyle(this.root).direction === 'rtl',\n      anchorContainsElement: (element) => {\n        return !!this.anchorElem?.contains(element);\n      },\n      tooltipContainsElement: (element) => {\n        return this.root.contains(element);\n      },\n      focusAnchorElement: () => {\n        this.anchorElem?.focus();\n      },\n      registerEventHandler: (event, handler) => {\n        if (this.root instanceof HTMLElement) {\n          this.root.addEventListener(event, handler);\n        }\n      },\n      deregisterEventHandler: (event, handler) => {\n        if (this.root instanceof HTMLElement) {\n          this.root.removeEventListener(event, handler);\n        }\n      },\n      registerAnchorEventHandler: (event, handler) => {\n        this.anchorElem?.addEventListener(event, handler);\n      },\n      deregisterAnchorEventHandler: (event, handler) => {\n        this.anchorElem?.removeEventListener(event, handler);\n      },\n      registerDocumentEventHandler: (event, handler) => {\n        document.body.addEventListener(event, handler);\n      },\n      deregisterDocumentEventHandler: (event, handler) => {\n        document.body.removeEventListener(event, handler);\n      },\n      registerWindowEventHandler: (event, handler) => {\n        window.addEventListener(event, handler);\n      },\n      deregisterWindowEventHandler: (event, handler) => {\n        window.removeEventListener(event, handler);\n      },\n      notifyHidden: () => {\n        this.emit(events.HIDDEN, {});\n      },\n      notifyShown: () => {\n        this.emit(events.SHOWN, {});\n      },\n      getTooltipCaretBoundingRect: () => {\n        const caret = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.TOOLTIP_CARET_TOP}`,\n        );\n        if (!caret) {\n          return null;\n        }\n        return caret.getBoundingClientRect();\n      },\n      setTooltipCaretStyle: (propertyName, value) => {\n        const topCaret = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.TOOLTIP_CARET_TOP}`,\n        );\n        const bottomCaret = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.TOOLTIP_CARET_BOTTOM}`,\n        );\n\n        if (!topCaret || !bottomCaret) {\n          return;\n        }\n\n        topCaret.style.setProperty(propertyName, value);\n        bottomCaret.style.setProperty(propertyName, value);\n      },\n      clearTooltipCaretStyles: () => {\n        const topCaret = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.TOOLTIP_CARET_TOP}`,\n        );\n        const bottomCaret = this.root.querySelector<HTMLElement>(\n          `.${CssClasses.TOOLTIP_CARET_BOTTOM}`,\n        );\n\n        if (!topCaret || !bottomCaret) {\n          return;\n        }\n        topCaret.removeAttribute('style');\n        bottomCaret.removeAttribute('style');\n      },\n      getActiveElement: () => {\n        return document.activeElement;\n      },\n      isInstanceOfElement: (eventTarget: EventTarget) => {\n        return eventTarget instanceof Element;\n      },\n    };\n\n    //tslint:enable:object-literal-sort-keys\n    return new MDCTooltipFoundation(adapter);\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/constants.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nenum CssClasses {\n  RICH = 'mdc-tooltip--rich',\n  SHOWN = 'mdc-tooltip--shown',\n  SHOWING = 'mdc-tooltip--showing',\n  SHOWING_TRANSITION = 'mdc-tooltip--showing-transition',\n  HIDE = 'mdc-tooltip--hide',\n  HIDE_TRANSITION = 'mdc-tooltip--hide-transition',\n  MULTILINE_TOOLTIP = 'mdc-tooltip--multiline',\n  SURFACE = 'mdc-tooltip__surface',\n  SURFACE_ANIMATION = 'mdc-tooltip__surface-animation',\n  TOOLTIP_CARET_TOP = 'mdc-tooltip__caret-surface-top',\n  TOOLTIP_CARET_BOTTOM = 'mdc-tooltip__caret-surface-bottom',\n}\n\nconst numbers = {\n  BOUNDED_ANCHOR_GAP: 4,\n  UNBOUNDED_ANCHOR_GAP: 8,\n  MIN_VIEWPORT_TOOLTIP_THRESHOLD: 8,\n  HIDE_DELAY_MS: 600,\n  SHOW_DELAY_MS: 500,\n  // LINT.IfChange(tooltip-dimensions)\n  MIN_WIDTH: 40,\n  MIN_HEIGHT: 24,\n  MAX_WIDTH: 200,\n  // LINT.ThenChange(_tooltip.scss:tooltip-dimensions)\n  CARET_INDENTATION: 24,\n  // LINT.IfChange(tooltip-anim-scale)\n  ANIMATION_SCALE: 0.8,\n  // LINT.ThenChange(_tooltip.scss:tooltip-anim-scale)\n  // LINT.IfChange(rich-tooltip-dimensions)\n  RICH_MAX_WIDTH: 320,\n  // LINT.ThenChange(_tooltip.scss:rich-tooltip-dimensions)\n};\n\nconst attributes = {\n  ARIA_EXPANDED: 'aria-expanded',\n  ARIA_HASPOPUP: 'aria-haspopup',\n  PERSISTENT: 'data-mdc-tooltip-persistent',\n  SCROLLABLE_ANCESTOR: 'tooltip-scrollable-ancestor',\n  HAS_CARET: 'data-mdc-tooltip-has-caret',\n};\n\nconst events = {\n  HIDDEN: 'MDCTooltip:hidden',\n  SHOWN: 'MDCTooltip:shown',\n};\n\n/** Enum for possible tooltip positioning relative to its anchor element. */\nenum XPosition {\n  DETECTED = 0,\n  START = 1,\n  // Note: CENTER is not valid for rich tooltips.\n  CENTER = 2,\n  END = 3,\n  // SIDE_XXX positioning is only valid for plain tooltips.\n  SIDE_START = 4,\n  SIDE_END = 5,\n}\n\nenum YPosition {\n  DETECTED = 0,\n  ABOVE = 1,\n  BELOW = 2,\n  // SIDE positioning is only valid for plain tooltips with either SIDE_START or\n  // SIDE_END x positioning.\n  SIDE = 3,\n}\n\n/**\n * Enum for possible anchor boundary types. This determines the gap between the\n * bottom of the anchor and the tooltip element.\n * Bounded anchors have an identifiable boundary (e.g. buttons).\n * Unbounded anchors don't have a visually declared boundary (e.g. plain text).\n */\nenum AnchorBoundaryType {\n  BOUNDED = 0,\n  UNBOUNDED = 1,\n}\n\nconst strings = {\n  LEFT: 'left',\n  RIGHT: 'right',\n  CENTER: 'center',\n  TOP: 'top',\n  BOTTOM: 'bottom'\n};\n\n/**\n * Enum for possible positions of a tooltip with caret (this specifies the\n * positioning of the tooltip relative to the anchor -- the position of the\n * caret will follow that of the tooltip). This can NOT be combined with the\n * above X/YPosition options. Naming for the enums follows: (vertical\n * placement)_(horizontal placement).\n */\nenum PositionWithCaret {\n  DETECTED = 0,\n\n  ABOVE_START = 1,\n  ABOVE_CENTER = 2,\n  ABOVE_END = 3,\n\n  TOP_SIDE_START = 4,\n  CENTER_SIDE_START = 5,\n  BOTTOM_SIDE_START = 6,\n\n  TOP_SIDE_END = 7,\n  CENTER_SIDE_END = 8,\n  BOTTOM_SIDE_END = 9,\n\n  BELOW_START = 10,\n  BELOW_CENTER = 11,\n  BELOW_END = 12,\n}\n\nenum YPositionWithCaret {\n  ABOVE = 1,\n  BELOW = 2,\n  SIDE_TOP = 3,\n  SIDE_CENTER = 4,\n  SIDE_BOTTOM = 5,\n}\n\nenum XPositionWithCaret {\n  START = 1,\n  CENTER = 2,\n  END = 3,\n  SIDE_START = 4,\n  SIDE_END = 5,\n}\n\nexport {\n  CssClasses,\n  numbers,\n  attributes,\n  events,\n  XPosition,\n  AnchorBoundaryType,\n  YPosition,\n  strings,\n  PositionWithCaret,\n  YPositionWithCaret,\n  XPositionWithCaret\n};\n"
  },
  {
    "path": "packages/mdc-tooltip/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {AnimationFrame} from '@material/animation/animationframe';\nimport {getCorrectPropertyName} from '@material/animation/util';\nimport {MDCFoundation} from '@material/base/foundation';\nimport {EventType, SpecificEventListener} from '@material/base/types';\nimport {KEY, normalizeKey} from '@material/dom/keyboard';\n\nimport {MDCTooltipAdapter} from './adapter';\nimport {AnchorBoundaryType, attributes, CssClasses, numbers, PositionWithCaret, strings, XPosition, XPositionWithCaret, YPosition, YPositionWithCaret} from './constants';\n\nconst {\n  RICH,\n  SHOWN,\n  SHOWING,\n  SHOWING_TRANSITION,\n  HIDE,\n  HIDE_TRANSITION,\n  MULTILINE_TOOLTIP\n} = CssClasses;\n\nenum AnimationKeys {\n  POLL_ANCHOR = 'poll_anchor'\n}\n\n// Accessing `window` without a `typeof` check will throw on Node environments.\nconst HAS_WINDOW = typeof window !== 'undefined';\n\n/** MDC Tooltip Foundation */\nexport class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {\n  static override get defaultAdapter(): MDCTooltipAdapter {\n    return {\n      getAttribute: () => null,\n      setAttribute: () => undefined,\n      removeAttribute: () => undefined,\n      addClass: () => undefined,\n      hasClass: () => false,\n      removeClass: () => undefined,\n      getComputedStyleProperty: () => '',\n      setStyleProperty: () => undefined,\n      setSurfaceAnimationStyleProperty: () => undefined,\n      getViewportWidth: () => 0,\n      getViewportHeight: () => 0,\n      getTooltipSize: () => ({width: 0, height: 0}),\n      getAnchorBoundingRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      getParentBoundingRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      getAnchorAttribute: () => null,\n      setAnchorAttribute: () => null,\n      isRTL: () => false,\n      anchorContainsElement: () => false,\n      tooltipContainsElement: () => false,\n      focusAnchorElement: () => undefined,\n      registerEventHandler: () => undefined,\n      deregisterEventHandler: () => undefined,\n      registerAnchorEventHandler: () => undefined,\n      deregisterAnchorEventHandler: () => undefined,\n      registerDocumentEventHandler: () => undefined,\n      deregisterDocumentEventHandler: () => undefined,\n      registerWindowEventHandler: () => undefined,\n      deregisterWindowEventHandler: () => undefined,\n      notifyHidden: () => undefined,\n      notifyShown: () => undefined,\n      getTooltipCaretBoundingRect: () =>\n          ({top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0} as any),\n      setTooltipCaretStyle: () => undefined,\n      clearTooltipCaretStyles: () => undefined,\n      getActiveElement: () => null,\n      isInstanceOfElement: () => false,\n    };\n  }\n\n  private interactiveTooltip!: boolean;  // assigned in init()\n  private richTooltip!: boolean;         // assigned in init()\n  private persistentTooltip!: boolean;   // assigned in init()\n  private hasCaret!: boolean;            // assigned in init()\n  private tooltipShown = false;\n  private anchorGap = numbers.BOUNDED_ANCHOR_GAP;\n  private xTooltipPos = XPosition.DETECTED;\n  private yTooltipPos = YPosition.DETECTED;\n  private tooltipPositionWithCaret = PositionWithCaret.DETECTED;\n  // Minimum threshold distance needed between the tooltip and the viewport.\n  private readonly minViewportTooltipThreshold =\n      numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD;\n  private hideDelayMs = numbers.HIDE_DELAY_MS;\n  private showDelayMs = numbers.SHOW_DELAY_MS;\n\n  private anchorRect: DOMRect|null = null;\n  private parentRect: DOMRect|null = null;\n  private frameId: number|null = null;\n  private hideTimeout: number|null = null;\n  private showTimeout: number|null = null;\n  private readonly animFrame: AnimationFrame;\n  private readonly anchorBlurHandler: SpecificEventListener<'blur'>;\n  private readonly documentClickHandler: SpecificEventListener<'click'>;\n  private readonly documentKeydownHandler: SpecificEventListener<'keydown'>;\n  private readonly tooltipMouseEnterHandler:\n      SpecificEventListener<'mouseenter'>;\n  private readonly tooltipMouseLeaveHandler:\n      SpecificEventListener<'mouseleave'>;\n  private readonly richTooltipFocusOutHandler:\n      SpecificEventListener<'focusout'>;\n  private readonly windowScrollHandler: SpecificEventListener<'scroll'>;\n  private readonly windowResizeHandler: SpecificEventListener<'resize'>;\n\n  private readonly addAncestorScrollEventListeners = new Array<() => void>();\n  private readonly removeAncestorScrollEventListeners = new Array<() => void>();\n\n  constructor(adapter?: Partial<MDCTooltipAdapter>) {\n    super({...MDCTooltipFoundation.defaultAdapter, ...adapter});\n    this.animFrame = new AnimationFrame();\n\n    this.anchorBlurHandler = (event) => {\n      this.handleAnchorBlur(event);\n    };\n\n    this.documentClickHandler = (event) => {\n      this.handleDocumentClick(event);\n    };\n\n    this.documentKeydownHandler = (event) => {\n      this.handleKeydown(event);\n    };\n\n    this.tooltipMouseEnterHandler = () => {\n      this.handleTooltipMouseEnter();\n    };\n\n    this.tooltipMouseLeaveHandler = () => {\n      this.handleTooltipMouseLeave();\n    };\n\n    this.richTooltipFocusOutHandler = (event) => {\n      this.handleRichTooltipFocusOut(event);\n    };\n\n    this.windowScrollHandler = () => {\n      this.handleWindowScrollEvent();\n    };\n\n    this.windowResizeHandler = () => {\n      this.handleWindowChangeEvent();\n    };\n  }\n\n  override init() {\n    this.richTooltip = this.adapter.hasClass(RICH);\n    this.persistentTooltip =\n        this.adapter.getAttribute(attributes.PERSISTENT) === 'true';\n    this.interactiveTooltip =\n        !!this.adapter.getAnchorAttribute(attributes.ARIA_EXPANDED) &&\n        this.adapter.getAnchorAttribute(attributes.ARIA_HASPOPUP) === 'dialog';\n    this.hasCaret = this.richTooltip &&\n        this.adapter.getAttribute(attributes.HAS_CARET) === 'true';\n  }\n\n  isShown() {\n    return this.tooltipShown;\n  }\n\n  isRich() {\n    return this.richTooltip;\n  }\n\n  isPersistent() {\n    return this.persistentTooltip;\n  }\n\n  handleAnchorMouseEnter() {\n    if (this.tooltipShown) {\n      // Covers the instance where a user hovers over the anchor to reveal the\n      // tooltip, and then quickly navigates away and then back to the anchor.\n      // The tooltip should stay visible without animating out and then back in\n      // again.\n      this.show();\n    } else {\n      // clearHideTimeout here since handleAnchorMouseLeave sets a hideTimeout\n      // and that can execute before the showTimeout executes, resulting in hide\n      // being called and the showTimeout set below to be cleared.\n      this.clearHideTimeout();\n      this.showTimeout = setTimeout(() => {\n        this.show();\n      }, this.showDelayMs);\n    }\n  }\n\n  handleAnchorTouchstart() {\n    this.showTimeout = setTimeout(() => {\n      this.show();\n    }, this.showDelayMs);\n    // Prevent a context menu from appearing if user is long-pressing on a\n    // tooltip anchor.\n    this.adapter.registerWindowEventHandler(\n        'contextmenu', this.preventContextMenuOnLongTouch);\n  }\n\n  private preventContextMenuOnLongTouch(event: MouseEvent) {\n    event.preventDefault();\n  }\n\n  /**\n   * Helper methods for determining if the event target or related target\n   * is contained inside the tooltip or the anchor. These methods are used to\n   * determing when a tooltip should be closed of left open on blur and click\n   * events.\n   */\n  private tooltipContainsRelatedTargetElement(target: EventTarget|\n                                              null): boolean {\n    return this.adapter.isInstanceOfElement(target) &&\n        this.adapter.tooltipContainsElement((target as Element));\n  }\n\n  private anchorOrTooltipContainsTargetElement(target: EventTarget|\n                                               null): boolean {\n    return this.adapter.isInstanceOfElement(target) &&\n        (this.adapter.tooltipContainsElement((target as Element)) ||\n         this.adapter.anchorContainsElement((target as Element)));\n  }\n\n  handleAnchorTouchend() {\n    this.clearShowTimeout();\n\n    // Only remove the 'contextmenu' listener if the tooltip is not shown. When\n    // the tooltip *is* shown, listener is removed in the close method.\n    if (!this.isShown()) {\n      this.adapter.deregisterWindowEventHandler(\n          'contextmenu', this.preventContextMenuOnLongTouch);\n    }\n  }\n\n  handleAnchorFocus(event: FocusEvent) {\n    // TODO(b/157075286): Need to add some way to distinguish keyboard\n    // navigation focus events from other focus events, and only show the\n    // tooltip on the former of these events.\n\n    // Do not show tooltip if the previous focus was on a tooltip element. This\n    // occurs when a rich tooltip is closed and focus is restored to the anchor\n    // or when user tab-navigates back into the anchor from the rich tooltip.\n    if (this.tooltipContainsRelatedTargetElement(event.relatedTarget)) {\n      return;\n    }\n    this.showTimeout = setTimeout(() => {\n      this.show();\n    }, this.showDelayMs);\n  }\n\n  handleAnchorMouseLeave() {\n    this.clearShowTimeout();\n    this.hideTimeout = setTimeout(() => {\n      this.hide();\n    }, this.hideDelayMs);\n  }\n\n  handleAnchorClick() {\n    if (this.tooltipShown) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  handleDocumentClick(event: MouseEvent) {\n    // For persistent rich tooltips, we will not hide if:\n    // - The click target is within the anchor element. Otherwise, both\n    //   the anchor element's click handler and this handler will handle the\n    //   click (due to event propagation), resulting in a shown tooltip\n    //   being immediately hidden if the tooltip was initially hidden.\n    // - The click target is within the tooltip element, since clicks\n    //   on the tooltip do not close the tooltip.\n    if (this.richTooltip && this.persistentTooltip &&\n        this.anchorOrTooltipContainsTargetElement(event.target)) {\n      return;\n    }\n    // Hide the tooltip immediately on click.\n    this.hide();\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    // Hide the tooltip immediately on ESC key.\n    const key = normalizeKey(event);\n    if (key === KEY.ESCAPE) {\n      const activeElement = this.adapter.getActiveElement();\n      let tooltipContainsActiveElement = false;\n      if (this.adapter.isInstanceOfElement(activeElement)) {\n        tooltipContainsActiveElement =\n            this.adapter.tooltipContainsElement((activeElement as Element));\n      }\n\n      if (tooltipContainsActiveElement) {\n        this.adapter.focusAnchorElement();\n      }\n      this.hide();\n      // prevent event from bubbling\n      event.stopPropagation();\n      return false;\n    }\n    return true;\n  }\n\n  private handleAnchorBlur(event: FocusEvent) {\n    if (this.richTooltip) {\n      if (event.relatedTarget === null ||\n          this.tooltipContainsRelatedTargetElement(event.relatedTarget)) {\n        // There are two scenarios where a blur event on a rich tooltip anchor\n        // should leave the tooltip open.\n        // 1. When the `event.relatedTarget` contains the tooltip element. This\n        // indicates that focus has moved off the anchor and onto the tooltip.\n        // 2. When the `event.relatedTarget` is null. This occurs because focus is\n        // moving to an element that is not focusable. This should only occur in\n        // instances of a screen reader in browse mode/linear navigation mode.\n        // We allow linear navigation over the contents of all rich tooltips to\n        // enable clients to hear a line-by-line reading of the tooltip's\n        // content.\n        return;\n      }\n    }\n    // Hide tooltip immediately on focus change.\n    this.hide();\n  }\n\n  private handleTooltipMouseEnter() {\n    this.show();\n  }\n\n  private handleTooltipMouseLeave() {\n    this.clearShowTimeout();\n    this.hideTimeout = setTimeout(() => {\n      this.hide();\n    }, this.hideDelayMs);\n  }\n\n  private handleRichTooltipFocusOut(event: FocusEvent) {\n    // If the focus is still within the anchor or the tooltip, do not hide the\n    // tooltip.\n    if (this.anchorOrTooltipContainsTargetElement(event.relatedTarget)) {\n      return;\n    }\n    if (event.relatedTarget === null && this.interactiveTooltip) {\n      // If event.relatedTarget is null, it is because focus is moving to an\n      // element that is not focusable. This should only occur in instances\n      // of a screen reader in browse mode/linear navigation mode. If the\n      // tooltip is interactive (and so the entire content is not read by\n      // the screen reader upon the tooltip being opened), we want to allow\n      // users to read the content of the tooltip (and not just the focusable\n      // elements).\n      return;\n    }\n\n    this.hide();\n  }\n\n  private handleWindowScrollEvent() {\n    if (!this.persistentTooltip) {\n      this.hide();\n    }\n  }\n\n  /**\n   * On window resize or scroll, check the anchor position and size and\n   * repostion tooltip if necessary.\n   */\n  private handleWindowChangeEvent() {\n    // Since scroll and resize events can fire at a high rate, we throttle\n    // the potential re-positioning of tooltip component using\n    // requestAnimationFrame.\n    this.animFrame.request(AnimationKeys.POLL_ANCHOR, () => {\n      this.repositionTooltipOnAnchorMove();\n    });\n  }\n\n  show() {\n    this.clearHideTimeout();\n    this.clearShowTimeout();\n\n    if (this.tooltipShown) {\n      return;\n    }\n\n    this.tooltipShown = true;\n    this.adapter.removeAttribute('aria-hidden');\n\n    if (this.richTooltip) {\n      if (this.interactiveTooltip) {\n        this.adapter.setAnchorAttribute('aria-expanded', 'true');\n      }\n      this.adapter.registerEventHandler(\n          'focusout', this.richTooltipFocusOutHandler);\n    }\n\n    if (!this.persistentTooltip) {\n      this.adapter.registerEventHandler(\n          'mouseenter', this.tooltipMouseEnterHandler);\n      this.adapter.registerEventHandler(\n          'mouseleave', this.tooltipMouseLeaveHandler);\n    }\n\n    this.adapter.removeClass(HIDE);\n    this.adapter.addClass(SHOWING);\n    if (this.isTooltipMultiline() && !this.richTooltip) {\n      this.adapter.addClass(MULTILINE_TOOLTIP);\n    }\n    this.anchorRect = this.adapter.getAnchorBoundingRect();\n    this.parentRect = this.adapter.getParentBoundingRect();\n    this.richTooltip ? this.positionRichTooltip() : this.positionPlainTooltip();\n    this.adapter.registerAnchorEventHandler('blur', this.anchorBlurHandler);\n    this.adapter.registerDocumentEventHandler(\n        'click', this.documentClickHandler);\n    this.adapter.registerDocumentEventHandler(\n        'keydown', this.documentKeydownHandler);\n\n    this.adapter.registerWindowEventHandler('scroll', this.windowScrollHandler);\n    this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);\n    // Register any additional scroll handlers\n    for (const fn of this.addAncestorScrollEventListeners) {\n      fn();\n    }\n\n    this.frameId = requestAnimationFrame(() => {\n      this.clearAllAnimationClasses();\n      this.adapter.addClass(SHOWN);\n      this.adapter.addClass(SHOWING_TRANSITION);\n    });\n  }\n\n  hide() {\n    this.clearHideTimeout();\n    this.clearShowTimeout();\n\n    if (!this.tooltipShown) {\n      return;\n    }\n\n    if (this.frameId) {\n      cancelAnimationFrame(this.frameId);\n    }\n\n    this.tooltipShown = false;\n    this.adapter.setAttribute('aria-hidden', 'true');\n    this.adapter.deregisterEventHandler(\n        'focusout', this.richTooltipFocusOutHandler);\n    if (this.richTooltip) {\n      if (this.interactiveTooltip) {\n        this.adapter.setAnchorAttribute('aria-expanded', 'false');\n      }\n    }\n\n    if (!this.persistentTooltip) {\n      this.adapter.deregisterEventHandler(\n          'mouseenter', this.tooltipMouseEnterHandler);\n      this.adapter.deregisterEventHandler(\n          'mouseleave', this.tooltipMouseLeaveHandler);\n    }\n\n    this.clearAllAnimationClasses();\n    this.adapter.addClass(HIDE);\n    this.adapter.addClass(HIDE_TRANSITION);\n    this.adapter.removeClass(SHOWN);\n\n    this.adapter.deregisterAnchorEventHandler('blur', this.anchorBlurHandler);\n    this.adapter.deregisterDocumentEventHandler(\n        'click', this.documentClickHandler);\n    this.adapter.deregisterDocumentEventHandler(\n        'keydown', this.documentKeydownHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'scroll', this.windowScrollHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'resize', this.windowResizeHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'contextmenu', this.preventContextMenuOnLongTouch);\n\n    // Deregister any additional scroll handlers\n    for (const fn of this.removeAncestorScrollEventListeners) {\n      fn();\n    }\n  }\n\n  handleTransitionEnd() {\n    const isHidingTooltip = this.adapter.hasClass(HIDE);\n\n    this.adapter.removeClass(SHOWING);\n    this.adapter.removeClass(SHOWING_TRANSITION);\n    this.adapter.removeClass(HIDE);\n    this.adapter.removeClass(HIDE_TRANSITION);\n\n    // If handleTransitionEnd is called after hiding the tooltip, the tooltip\n    // will have the HIDE class (before calling the adapter removeClass method).\n    // If tooltip is now hidden, send a notification that the animation has\n    // completed and the tooltip is no longer visible.\n    // We don't send a notification of the animation completing if a showTimeout\n    // value is set -- this happens when a user triggers a tooltip to be shown\n    // while that tooltip is fading. Once this hide transition is completed,\n    // that same tooltip will be re-shown.\n    if (isHidingTooltip && this.showTimeout === null) {\n      this.adapter.notifyHidden();\n    } else if (!isHidingTooltip) {\n      this.adapter.notifyShown();\n    }\n  }\n\n  private clearAllAnimationClasses() {\n    this.adapter.removeClass(SHOWING_TRANSITION);\n    this.adapter.removeClass(HIDE_TRANSITION);\n  }\n\n  setTooltipPosition(position: {\n    xPos?: XPosition,\n    yPos?: YPosition,\n    withCaretPos?: PositionWithCaret\n  }) {\n    const {xPos, yPos, withCaretPos} = position;\n    if (this.hasCaret && withCaretPos) {\n      this.tooltipPositionWithCaret = withCaretPos;\n      return;\n    }\n\n    if (xPos) {\n      this.xTooltipPos = xPos;\n    }\n\n    if (yPos) {\n      this.yTooltipPos = yPos;\n    }\n  }\n\n  setAnchorBoundaryType(type: AnchorBoundaryType) {\n    if (type === AnchorBoundaryType.UNBOUNDED) {\n      this.anchorGap = numbers.UNBOUNDED_ANCHOR_GAP;\n    } else {\n      this.anchorGap = numbers.BOUNDED_ANCHOR_GAP;\n    }\n  }\n\n  setShowDelay(delayMs: number) {\n    this.showDelayMs = delayMs;\n  }\n\n  setHideDelay(delayMs: number) {\n    this.hideDelayMs = delayMs;\n  }\n\n  private isTooltipMultiline() {\n    const tooltipSize = this.adapter.getTooltipSize();\n    return tooltipSize.height > numbers.MIN_HEIGHT &&\n        tooltipSize.width >= numbers.MAX_WIDTH;\n  }\n\n  private positionPlainTooltip() {\n    // A plain tooltip has `fixed` positioning and is placed as an immediate\n    // child of the document body. Its positioning is calculated with respect to\n    // the viewport.\n    const {top, yTransformOrigin, left, xTransformOrigin} =\n        this.calculateTooltipStyles(this.anchorRect);\n\n    const transformProperty =\n        HAS_WINDOW ? getCorrectPropertyName(window, 'transform') : 'transform';\n    this.adapter.setSurfaceAnimationStyleProperty(\n        `${transformProperty}-origin`,\n        `${xTransformOrigin} ${yTransformOrigin}`);\n    this.adapter.setStyleProperty('top', `${top}px`);\n    this.adapter.setStyleProperty('left', `${left}px`);\n  }\n\n  private positionRichTooltip() {\n    // TODO(b/177686782): Remove width setting when max-content is used to style\n    // the rich tooltip.\n\n    // Reset rich tooltip positioning/styling so we can get an accurate\n    // measurement of the rich tooltip width. Toolip has to be moved to the left\n    // to ensure that the parent component does not restrict the size of the\n    // tooltip. See b/245915536 for more info.\n    this.adapter.setStyleProperty('width', '');\n    this.adapter.setStyleProperty('left', `-${numbers.RICH_MAX_WIDTH}px`);\n    // getComputedStyleProperty is used instead of getTooltipSize since\n    // getTooltipSize returns the offSetWidth, which includes the border and\n    // padding. What we need is the width of the tooltip without border and\n    // padding.\n    const computedWidth =\n        Number(this.adapter.getComputedStyleProperty('width').slice(0, -2));\n    const widthNum =\n        isFinite(computedWidth) ? computedWidth : numbers.RICH_MAX_WIDTH;\n    const viewportWidth = Math.max(\n        this.adapter.getViewportWidth() -\n            (2 * numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD),\n        numbers.MIN_WIDTH);\n    // Tooltip width is the minimum of the tooltip's computed width (which is\n    // dictated by the content inside the tooltip) and the viewport width.\n    // See b/261878540 for more info.\n    const tooltipWidth = Math.min(viewportWidth, widthNum);\n    // When rich tooltips are positioned within their parent containers, the\n    // tooltip width might be shrunk if it collides with the edge of the parent\n    // container. We set the width of the tooltip to prevent this.\n    this.adapter.setStyleProperty('width', `${tooltipWidth}px`);\n\n    const {top, yTransformOrigin, left, xTransformOrigin} = this.hasCaret ?\n        this.calculateTooltipWithCaretStyles(this.anchorRect) :\n        this.calculateTooltipStyles(this.anchorRect);\n\n    const transformProperty =\n        HAS_WINDOW ? getCorrectPropertyName(window, 'transform') : 'transform';\n    this.adapter.setSurfaceAnimationStyleProperty(\n        `${transformProperty}-origin`,\n        `${xTransformOrigin} ${yTransformOrigin}`);\n    // A rich tooltip has `absolute` positioning and is placed as a sibling to\n    // the anchor element. Its positioning is calculated with respect to the\n    // parent element, and so the values need to be adjusted against the parent\n    // element.\n    const leftAdjustment = left - (this.parentRect?.left ?? 0);\n    const topAdjustment = top - (this.parentRect?.top ?? 0);\n    this.adapter.setStyleProperty('top', `${topAdjustment}px`);\n    this.adapter.setStyleProperty('left', `${leftAdjustment}px`);\n  }\n\n  /**\n   * Calculates the position of the tooltip. A tooltip will be placed\n   * beneath the anchor element and aligned either with the 'start'/'end'\n   * edge of the anchor element or the 'center'.\n   *\n   * Tooltip alignment is selected such that the tooltip maintains a\n   * threshold distance away from the viewport (defaulting to 'center'\n   * alignment). If the placement of the anchor prevents this threshold\n   * distance from being maintained, the tooltip is positioned so that it\n   * does not collide with the viewport.\n   *\n   * Users can specify an alignment, however, if this alignment results in\n   * the tooltip colliding with the viewport, this specification is\n   * overwritten.\n   */\n  private calculateTooltipStyles(anchorRect: DOMRect|null) {\n    if (!anchorRect) {\n      return {top: 0, left: 0};\n    }\n\n    const tooltipSize = this.adapter.getTooltipSize();\n    const top = this.calculateYTooltipDistance(anchorRect, tooltipSize.height);\n    const left = this.calculateXTooltipDistance(anchorRect, tooltipSize.width);\n\n    return {\n      top: top.distance,\n      yTransformOrigin: top.yTransformOrigin,\n      left: left.distance,\n      xTransformOrigin: left.xTransformOrigin\n    };\n  }\n\n  /**\n   * Calculates the `left` distance for the tooltip.\n   * Returns the distance value and a string indicating the x-axis transform-\n   * origin that should be used when animating the tooltip.\n   */\n  private calculateXTooltipDistance(anchorRect: DOMRect, tooltipWidth: number):\n      ({distance: number, xTransformOrigin: string}) {\n    const isLTR = !this.adapter.isRTL();\n    let startPos: number|undefined, endPos: number|undefined,\n        centerPos: number|undefined, sideStartPos: number|undefined,\n        sideEndPos: number|undefined;\n    let startTransformOrigin: string, endTransformOrigin: string;\n    if (this.richTooltip) {\n      startPos = isLTR ? anchorRect.left - tooltipWidth : anchorRect.right;\n      endPos = isLTR ? anchorRect.right : anchorRect.left - tooltipWidth;\n\n      startTransformOrigin = isLTR ? strings.RIGHT : strings.LEFT;\n      endTransformOrigin = isLTR ? strings.LEFT : strings.RIGHT;\n    } else {\n      startPos = isLTR ? anchorRect.left : anchorRect.right - tooltipWidth;\n      endPos = isLTR ? anchorRect.right - tooltipWidth : anchorRect.left;\n      centerPos = anchorRect.left + (anchorRect.width - tooltipWidth) / 2;\n\n      const sideLeftAligned = anchorRect.left - (tooltipWidth + this.anchorGap);\n      const sideRightAligned = anchorRect.right + this.anchorGap;\n      sideStartPos = isLTR ? sideLeftAligned : sideRightAligned;\n      sideEndPos = isLTR ? sideRightAligned : sideLeftAligned;\n\n      startTransformOrigin = isLTR ? strings.LEFT : strings.RIGHT;\n      endTransformOrigin = isLTR ? strings.RIGHT : strings.LEFT;\n    }\n    // For plain tooltips, centerPos is defined\n    const plainTooltipPosOptions = [startPos, centerPos!, endPos];\n\n    // Side positioning should only be considered if it is specified by the\n    // client.\n    if (this.xTooltipPos === XPosition.SIDE_START) {\n      plainTooltipPosOptions.push(sideStartPos!);\n    } else if (this.xTooltipPos === XPosition.SIDE_END) {\n      plainTooltipPosOptions.push(sideEndPos!);\n    }\n\n    const positionOptions = this.richTooltip ?\n        this.determineValidPositionOptions(startPos, endPos) :\n        this.determineValidPositionOptions(...plainTooltipPosOptions);\n\n    if (this.xTooltipPos === XPosition.START && positionOptions.has(startPos)) {\n      return {distance: startPos, xTransformOrigin: startTransformOrigin};\n    } else if (\n        this.xTooltipPos === XPosition.END && positionOptions.has(endPos)) {\n      return {distance: endPos, xTransformOrigin: endTransformOrigin};\n    } else if (\n        this.xTooltipPos === XPosition.CENTER &&\n        positionOptions.has(centerPos)) {\n      // This code path is only executed if calculating the distance for plain\n      // tooltips. In this instance, centerPos will always be defined, so we can\n      // safely assert that the returned value is non-null/undefined.\n      return {distance: centerPos!, xTransformOrigin: strings.CENTER};\n    } else if (\n        this.xTooltipPos === XPosition.SIDE_START &&\n        positionOptions.has(sideStartPos)) {\n      // This code path is only executed if calculating the distance for plain\n      // tooltips. In this instance, sideStartPos will always be defined, so we\n      // can safely assert that the returned value is non-null/undefined.\n      return {distance: sideStartPos!, xTransformOrigin: endTransformOrigin};\n    } else if (\n        this.xTooltipPos === XPosition.SIDE_END &&\n        positionOptions.has(sideEndPos)) {\n      // This code path is only executed if calculating the distance for plain\n      // tooltips. In this instance, sideEndPos will always be defined, so we\n      // can safely assert that the returned value is non-null/undefined.\n      return {distance: sideEndPos!, xTransformOrigin: startTransformOrigin};\n    }\n\n    // If no user position is supplied, rich tooltips default to end pos, then\n    // start position. Plain tooltips default to center, start, then end.\n    const possiblePositions = this.richTooltip ?\n        [\n          {distance: endPos, xTransformOrigin: endTransformOrigin},\n          {distance: startPos, xTransformOrigin: startTransformOrigin}\n        ] :\n        [\n          {distance: centerPos!, xTransformOrigin: strings.CENTER},\n          {distance: startPos, xTransformOrigin: startTransformOrigin},\n          {distance: endPos, xTransformOrigin: endTransformOrigin}\n        ];\n\n    const validPosition =\n        possiblePositions.find(({distance}) => positionOptions.has(distance));\n    if (validPosition) {\n      return validPosition;\n    }\n\n    // Indicates that all potential positions would result in the tooltip\n    // colliding with the viewport. This would only occur when the anchor\n    // element itself collides with the viewport, or the viewport is very\n    // narrow. In this case, we allow the tooltip to be mis-aligned from the\n    // anchor element.\n    if (anchorRect.left < 0) {\n      return {\n        distance: this.minViewportTooltipThreshold,\n        xTransformOrigin: strings.LEFT\n      };\n    } else {\n      const viewportWidth = this.adapter.getViewportWidth();\n      const distance =\n          viewportWidth - (tooltipWidth + this.minViewportTooltipThreshold);\n      return {distance, xTransformOrigin: strings.RIGHT};\n    }\n  }\n\n  /**\n   * Given the values for the horizontal alignments of the tooltip, calculates\n   * which of these options would result in the tooltip maintaining the required\n   * threshold distance vs which would result in the tooltip staying within the\n   * viewport.\n   *\n   * A Set of values is returned holding the distances that would honor the\n   * above requirements. Following the logic for determining the tooltip\n   * position, if all alignments violate the threshold, then the returned Set\n   * contains values that keep the tooltip within the viewport.\n   */\n  private determineValidPositionOptions(...positions: number[]) {\n    const posWithinThreshold = new Set();\n    const posWithinViewport = new Set();\n\n    for (const position of positions) {\n      if (this.positionHonorsViewportThreshold(position)) {\n        posWithinThreshold.add(position);\n      } else if (this.positionDoesntCollideWithViewport(position)) {\n        posWithinViewport.add(position);\n      }\n    }\n\n    return posWithinThreshold.size ? posWithinThreshold : posWithinViewport;\n  }\n\n  private positionHonorsViewportThreshold(leftPos: number) {\n    const viewportWidth = this.adapter.getViewportWidth();\n    const tooltipWidth = this.adapter.getTooltipSize().width;\n\n    return leftPos + tooltipWidth <=\n        viewportWidth - this.minViewportTooltipThreshold &&\n        leftPos >= this.minViewportTooltipThreshold;\n  }\n\n  private positionDoesntCollideWithViewport(leftPos: number) {\n    const viewportWidth = this.adapter.getViewportWidth();\n    const tooltipWidth = this.adapter.getTooltipSize().width;\n\n    return leftPos + tooltipWidth <= viewportWidth && leftPos >= 0;\n  }\n\n  /**\n   * Calculates the `top` distance for the tooltip.\n   * Returns the distance value and a string indicating the y-axis transform-\n   * origin that should be used when animating the tooltip.\n   */\n  private calculateYTooltipDistance(\n      anchorRect: DOMRect, tooltipHeight: number) {\n    const belowYPos = anchorRect.bottom + this.anchorGap;\n    const aboveYPos = anchorRect.top - (this.anchorGap + tooltipHeight);\n    const anchorMidpoint = anchorRect.top + anchorRect.height / 2;\n    const sideYPos = anchorMidpoint - (tooltipHeight / 2);\n    const posOptions = [aboveYPos, belowYPos];\n    if (this.yTooltipPos === YPosition.SIDE) {\n      // Side positioning should only be considered if it is specified by the\n      // client.\n      posOptions.push(sideYPos);\n    }\n    const yPositionOptions = this.determineValidYPositionOptions(...posOptions);\n\n    if (this.yTooltipPos === YPosition.ABOVE &&\n        yPositionOptions.has(aboveYPos)) {\n      return {distance: aboveYPos, yTransformOrigin: strings.BOTTOM};\n    } else if (\n        this.yTooltipPos === YPosition.BELOW &&\n        yPositionOptions.has(belowYPos)) {\n      return {distance: belowYPos, yTransformOrigin: strings.TOP};\n    } else if (\n        this.yTooltipPos === YPosition.SIDE && yPositionOptions.has(sideYPos)) {\n      return {distance: sideYPos, yTransformOrigin: strings.CENTER};\n    }\n\n    if (yPositionOptions.has(belowYPos)) {\n      return {distance: belowYPos, yTransformOrigin: strings.TOP};\n    }\n\n    if (yPositionOptions.has(aboveYPos)) {\n      return {distance: aboveYPos, yTransformOrigin: strings.BOTTOM};\n    }\n\n    // Indicates that all potential positions would result in the tooltip\n    // colliding with the viewport. This would only occur when the viewport is\n    // very short.\n    return {distance: belowYPos, yTransformOrigin: strings.TOP};\n  }\n\n  /**\n   * Given the values for above/below alignment of the tooltip, calculates\n   * which of these options would result in the tooltip maintaining the required\n   * threshold distance vs which would result in the tooltip staying within the\n   * viewport.\n   *\n   * A Set of values is returned holding the distances that would honor the\n   * above requirements. Following the logic for determining the tooltip\n   * position, if all possible alignments violate the threshold, then the\n   * returned Set contains values that keep the tooltip within the viewport.\n   */\n  private determineValidYPositionOptions(...positions: number[]) {\n    const posWithinThreshold = new Set();\n    const posWithinViewport = new Set();\n    for (const position of positions) {\n      if (this.yPositionHonorsViewportThreshold(position)) {\n        posWithinThreshold.add(position);\n      } else if (this.yPositionDoesntCollideWithViewport(position)) {\n        posWithinViewport.add(position);\n      }\n    }\n    return posWithinThreshold.size ? posWithinThreshold : posWithinViewport;\n  }\n\n  private yPositionHonorsViewportThreshold(yPos: number) {\n    const viewportHeight = this.adapter.getViewportHeight();\n    const tooltipHeight = this.adapter.getTooltipSize().height;\n\n    return yPos + tooltipHeight + this.minViewportTooltipThreshold <=\n        viewportHeight &&\n        yPos >= this.minViewportTooltipThreshold;\n  }\n\n  private yPositionDoesntCollideWithViewport(yPos: number) {\n    const viewportHeight = this.adapter.getViewportHeight();\n    const tooltipHeight = this.adapter.getTooltipSize().height;\n\n    return yPos + tooltipHeight <= viewportHeight && yPos >= 0;\n  }\n\n  private calculateTooltipWithCaretStyles(anchorRect: DOMRect|null) {\n    // Prior to grabbing the caret bounding rect, we clear all styles set on the\n    // caret. This will ensure the width/height is consistent (since we rotate\n    // the caret 90deg in some positions which would result in the height and\n    // width bounding rect measurements flipping).\n    this.adapter.clearTooltipCaretStyles();\n    const caretSize = this.adapter.getTooltipCaretBoundingRect();\n    if (!anchorRect || !caretSize) {\n      return {position: PositionWithCaret.DETECTED, top: 0, left: 0};\n    }\n\n    // The caret for the rich tooltip is created by rotating/skewing/scaling\n    // square div into a diamond shape and then hiding half of it so it looks\n    // like a triangle. We use the boundingClientRect to calculate the\n    // width/height of the element after the transforms (to the caret) have been\n    // applied. Since the full tooltip is scaled by 0.8 for the entrance\n    // animation, we divide by this value to retrieve the actual caret\n    // dimensions.\n    const caretWidth = caretSize.width / numbers.ANIMATION_SCALE;\n    // Since we hide half of caret, we divide the returned DOMRect height\n    // by 2.\n    const caretHeight = (caretSize.height / numbers.ANIMATION_SCALE) / 2;\n    const tooltipSize = this.adapter.getTooltipSize();\n\n    const yOptions = this.calculateYWithCaretDistanceOptions(\n        anchorRect, tooltipSize.height, {caretWidth, caretHeight});\n    const xOptions = this.calculateXWithCaretDistanceOptions(\n        anchorRect, tooltipSize.width, {caretWidth, caretHeight});\n\n    let positionOptions =\n        this.validateTooltipWithCaretDistances(yOptions, xOptions);\n    if (positionOptions.size < 1) {\n      positionOptions = this.generateBackupPositionOption(\n          anchorRect, tooltipSize, {caretWidth, caretHeight});\n    }\n\n    const {position, xDistance, yDistance} =\n        this.determineTooltipWithCaretDistance(positionOptions);\n\n    // After determining the position of the tooltip relative to the anchor,\n    // place the caret in the corresponding position and retrieve the necessary\n    // x/y transform origins needed to properly animate the tooltip entrance.\n    const {yTransformOrigin, xTransformOrigin} =\n        this.setCaretPositionStyles(position, {caretWidth, caretHeight});\n\n    return {\n      yTransformOrigin,\n      xTransformOrigin,\n      top: yDistance,\n      left: xDistance\n    };\n  }\n\n  private calculateXWithCaretDistanceOptions(\n      anchorRect: DOMRect, tooltipWidth: number,\n      caretSize: {caretHeight: number, caretWidth: number}):\n      Map<XPositionWithCaret, number> {\n    const {caretWidth, caretHeight} = caretSize;\n    const isLTR = !this.adapter.isRTL();\n    const anchorMidpoint = anchorRect.left + anchorRect.width / 2;\n\n    const sideLeftAligned =\n        anchorRect.left - (tooltipWidth + this.anchorGap + caretHeight);\n    const sideRightAligned = anchorRect.right + this.anchorGap + caretHeight;\n    const sideStartPos = isLTR ? sideLeftAligned : sideRightAligned;\n    const sideEndPos = isLTR ? sideRightAligned : sideLeftAligned;\n\n    const verticalLeftAligned =\n        anchorMidpoint - (numbers.CARET_INDENTATION + caretWidth / 2);\n    const verticalRightAligned = anchorMidpoint -\n        (tooltipWidth - numbers.CARET_INDENTATION - caretWidth / 2);\n    const verticalStartPos = isLTR ? verticalLeftAligned : verticalRightAligned;\n    const verticalEndPos = isLTR ? verticalRightAligned : verticalLeftAligned;\n    const verticalCenterPos = anchorMidpoint - tooltipWidth / 2;\n\n    const possiblePositionsMap = new Map([\n      [XPositionWithCaret.START, verticalStartPos],\n      [XPositionWithCaret.CENTER, verticalCenterPos],\n      [XPositionWithCaret.END, verticalEndPos],\n      [XPositionWithCaret.SIDE_END, sideEndPos],\n      [XPositionWithCaret.SIDE_START, sideStartPos],\n    ]);\n    return possiblePositionsMap;\n  }\n\n  private calculateYWithCaretDistanceOptions(\n      anchorRect: DOMRect, tooltipHeight: number,\n      caretSize: {caretHeight: number, caretWidth: number}):\n      Map<YPositionWithCaret, number> {\n    const {caretWidth, caretHeight} = caretSize;\n    const anchorMidpoint = anchorRect.top + anchorRect.height / 2;\n\n    const belowYPos = anchorRect.bottom + this.anchorGap + caretHeight;\n    const aboveYPos =\n        anchorRect.top - (this.anchorGap + tooltipHeight + caretHeight);\n    const sideTopYPos =\n        anchorMidpoint - (numbers.CARET_INDENTATION + caretWidth / 2);\n    const sideCenterYPos = anchorMidpoint - (tooltipHeight / 2);\n    const sideBottomYPos = anchorMidpoint -\n        (tooltipHeight - numbers.CARET_INDENTATION - caretWidth / 2);\n\n    const possiblePositionsMap = new Map([\n      [YPositionWithCaret.ABOVE, aboveYPos],\n      [YPositionWithCaret.BELOW, belowYPos],\n      [YPositionWithCaret.SIDE_TOP, sideTopYPos],\n      [YPositionWithCaret.SIDE_CENTER, sideCenterYPos],\n      [YPositionWithCaret.SIDE_BOTTOM, sideBottomYPos],\n    ]);\n\n    return possiblePositionsMap;\n  }\n\n  private repositionTooltipOnAnchorMove() {\n    const newAnchorRect = this.adapter.getAnchorBoundingRect();\n    if (!newAnchorRect || !this.anchorRect) return;\n    // Don't repositioning the tooltip if the anchor is moved/scrolled out of\n    // the viewport. See b/264343145 for more info.\n    const windowHeight = this.adapter.getViewportHeight();\n    if ((newAnchorRect.top + newAnchorRect.height) < 0 ||\n        (newAnchorRect.bottom - newAnchorRect.height) >= windowHeight) {\n      return;\n    }\n\n    if (newAnchorRect.top !== this.anchorRect.top ||\n        newAnchorRect.left !== this.anchorRect.left ||\n        newAnchorRect.height !== this.anchorRect.height ||\n        newAnchorRect.width !== this.anchorRect.width) {\n      this.anchorRect = newAnchorRect;\n      this.parentRect = this.adapter.getParentBoundingRect();\n      this.richTooltip ? this.positionRichTooltip() :\n                         this.positionPlainTooltip();\n    }\n  }\n\n  /**\n   * Given a list of x/y position options for a rich tooltip with caret, checks\n   * if valid x/y combinations of these position options are either within the\n   * viewport threshold, or simply within the viewport. Returns a map with the\n   * valid x/y position combinations that all either honor the viewport\n   * threshold or are simply inside within the viewport.\n   */\n  private validateTooltipWithCaretDistances(\n      yOptions: Map<YPositionWithCaret, number>,\n      xOptions: Map<XPositionWithCaret, number>) {\n    const posWithinThreshold =\n        new Map<PositionWithCaret, {xDistance: number, yDistance: number}>();\n    const posWithinViewport =\n        new Map<PositionWithCaret, {xDistance: number, yDistance: number}>();\n\n    // If a tooltip has a caret, not all combinations of YPositionWithCarets and\n    // XPositionWithCarets are possible. Because of this we only check the\n    // validity of a given XPositionWithCaret if a potential corresponding\n    // YPositionWithCaret is valid.\n    const validMappings = new Map([\n      [\n        YPositionWithCaret.ABOVE,\n        [\n          XPositionWithCaret.START, XPositionWithCaret.CENTER,\n          XPositionWithCaret.END\n        ]\n      ],\n      [\n        YPositionWithCaret.BELOW,\n        [\n          XPositionWithCaret.START, XPositionWithCaret.CENTER,\n          XPositionWithCaret.END\n        ]\n      ],\n      [\n        YPositionWithCaret.SIDE_TOP,\n        [XPositionWithCaret.SIDE_START, XPositionWithCaret.SIDE_END]\n      ],\n      [\n        YPositionWithCaret.SIDE_CENTER,\n        [XPositionWithCaret.SIDE_START, XPositionWithCaret.SIDE_END]\n      ],\n      [\n        YPositionWithCaret.SIDE_BOTTOM,\n        [XPositionWithCaret.SIDE_START, XPositionWithCaret.SIDE_END]\n      ],\n    ]);\n\n    // TODO(b/227383292): Handle instances where one direction can fit in\n    // in the viewport (whether honoring the threshold or not), and the\n    // other direction does not.\n    for (const y of validMappings.keys()) {\n      const yDistance = yOptions.get(y)!;\n      if (this.yPositionHonorsViewportThreshold(yDistance)) {\n        for (const x of validMappings.get(y)!) {\n          const xDistance = xOptions.get(x)!;\n          if (this.positionHonorsViewportThreshold(xDistance)) {\n            const caretPositionName = this.caretPositionOptionsMapping(x, y);\n            posWithinThreshold.set(caretPositionName, {xDistance, yDistance});\n          }\n        }\n      }\n\n      if (this.yPositionDoesntCollideWithViewport(yDistance)) {\n        for (const x of validMappings.get(y)!) {\n          const xDistance = xOptions.get(x)!;\n          if (this.positionDoesntCollideWithViewport(xDistance)) {\n            const caretPositionName = this.caretPositionOptionsMapping(x, y);\n            posWithinViewport.set(caretPositionName, {xDistance, yDistance});\n          }\n        }\n      }\n    }\n\n    return posWithinThreshold.size ? posWithinThreshold : posWithinViewport;\n  }\n\n  /**\n   * Method for generating a horizontal and vertical position for the tooltip if\n   * all other calculated values are considered invalid. This would only happen\n   * in situations of very small viewports/large tooltips.\n   */\n  private generateBackupPositionOption(\n      anchorRect: DOMRect, tooltipSize: {width: number, height: number},\n      caretSize: {caretHeight: number, caretWidth: number}) {\n    const isLTR = !this.adapter.isRTL();\n    let xDistance: number;\n    let xPos: XPositionWithCaret;\n    if (anchorRect.left < 0) {\n      xDistance = this.minViewportTooltipThreshold + caretSize.caretHeight;\n      xPos = isLTR ? XPositionWithCaret.END : XPositionWithCaret.START;\n    } else {\n      const viewportWidth = this.adapter.getViewportWidth();\n      xDistance = viewportWidth -\n          (tooltipSize.width + this.minViewportTooltipThreshold +\n           caretSize.caretHeight);\n      xPos = isLTR ? XPositionWithCaret.START : XPositionWithCaret.END;\n    }\n\n    let yDistance: number;\n    let yPos: YPositionWithCaret;\n    if (anchorRect.top < 0) {\n      yDistance = this.minViewportTooltipThreshold + caretSize.caretHeight;\n      yPos = YPositionWithCaret.BELOW;\n    } else {\n      const viewportHeight = this.adapter.getViewportHeight();\n      yDistance = viewportHeight -\n          (tooltipSize.height + this.minViewportTooltipThreshold +\n           caretSize.caretHeight);\n      yPos = YPositionWithCaret.ABOVE;\n    }\n\n    const caretPositionName = this.caretPositionOptionsMapping(xPos, yPos);\n    return new Map<PositionWithCaret, {xDistance: number, yDistance: number}>(\n        [[caretPositionName, {xDistance, yDistance}]]);\n  }\n\n  /**\n   * Given a list of valid position options for a rich tooltip with caret,\n   * returns the option that should be used.\n   */\n  private determineTooltipWithCaretDistance(\n      options: Map<PositionWithCaret, {xDistance: number, yDistance: number}>):\n      {position: PositionWithCaret, xDistance: number, yDistance: number} {\n    if (options.has(this.tooltipPositionWithCaret)) {\n      const tooltipPos = options.get(this.tooltipPositionWithCaret)!;\n      return {\n        position: this.tooltipPositionWithCaret,\n        xDistance: tooltipPos.xDistance,\n        yDistance: tooltipPos.yDistance,\n      };\n    }\n\n    const orderPref = [\n      PositionWithCaret.ABOVE_START, PositionWithCaret.ABOVE_CENTER,\n      PositionWithCaret.ABOVE_END, PositionWithCaret.TOP_SIDE_START,\n      PositionWithCaret.CENTER_SIDE_START, PositionWithCaret.BOTTOM_SIDE_START,\n      PositionWithCaret.TOP_SIDE_END, PositionWithCaret.CENTER_SIDE_END,\n      PositionWithCaret.BOTTOM_SIDE_END, PositionWithCaret.BELOW_START,\n      PositionWithCaret.BELOW_CENTER, PositionWithCaret.BELOW_END\n    ];\n\n    // Before calling this method we check whether or not the \"options\" param\n    // is empty and invoke a different method. We, therefore, can be certain\n    // that \"validPosition\" will always be defined.\n    const validPosition = orderPref.find((pos) => options.has(pos))!;\n    const pos = options.get(validPosition)!;\n    return {\n      position: validPosition,\n      xDistance: pos.xDistance,\n      yDistance: pos.yDistance,\n    };\n  }\n\n  /**\n   * Returns the corresponding PositionWithCaret enum for the provided\n   * XPositionWithCaret and YPositionWithCaret enums. This mapping exists so our\n   * public API accepts only PositionWithCaret enums (as all combinations of\n   * XPositionWithCaret and YPositionWithCaret are not valid), but internally we\n   * can calculate the X and Y positions of a rich tooltip with caret\n   * separately.\n   */\n  private caretPositionOptionsMapping(\n      xPos: XPositionWithCaret, yPos: YPositionWithCaret): PositionWithCaret {\n    switch (yPos) {\n      case YPositionWithCaret.ABOVE:\n        if (xPos === XPositionWithCaret.START) {\n          return PositionWithCaret.ABOVE_START;\n        } else if (xPos === XPositionWithCaret.CENTER) {\n          return PositionWithCaret.ABOVE_CENTER;\n        } else if (xPos === XPositionWithCaret.END) {\n          return PositionWithCaret.ABOVE_END;\n        }\n        break;\n      case YPositionWithCaret.BELOW:\n        if (xPos === XPositionWithCaret.START) {\n          return PositionWithCaret.BELOW_START;\n        } else if (xPos === XPositionWithCaret.CENTER) {\n          return PositionWithCaret.BELOW_CENTER;\n        } else if (xPos === XPositionWithCaret.END) {\n          return PositionWithCaret.BELOW_END;\n        }\n        break;\n      case YPositionWithCaret.SIDE_TOP:\n        if (xPos === XPositionWithCaret.SIDE_START) {\n          return PositionWithCaret.TOP_SIDE_START;\n        } else if (xPos === XPositionWithCaret.SIDE_END) {\n          return PositionWithCaret.TOP_SIDE_END;\n        }\n        break;\n      case YPositionWithCaret.SIDE_CENTER:\n        if (xPos === XPositionWithCaret.SIDE_START) {\n          return PositionWithCaret.CENTER_SIDE_START;\n        } else if (xPos === XPositionWithCaret.SIDE_END) {\n          return PositionWithCaret.CENTER_SIDE_END;\n        }\n        break;\n      case YPositionWithCaret.SIDE_BOTTOM:\n        if (xPos === XPositionWithCaret.SIDE_START) {\n          return PositionWithCaret.BOTTOM_SIDE_START;\n        } else if (xPos === XPositionWithCaret.SIDE_END) {\n          return PositionWithCaret.BOTTOM_SIDE_END;\n        }\n        break;\n      default:\n        break;\n    }\n    throw new Error(\n        `MDCTooltipFoundation: Invalid caret position of ${xPos}, ${yPos}`);\n  }\n\n  /**\n   * Given a PositionWithCaret, applies the correct styles to the caret element\n   * so that it is positioned properly on the rich tooltip.\n   * Returns the x and y positions of the caret, to be used as the\n   * transform-origin on the tooltip itself for entrance animations.\n   */\n  private setCaretPositionStyles(position: PositionWithCaret, caretSize: {\n    caretWidth: number,\n    caretHeight: number\n  }) {\n    const values = this.calculateCaretPositionOnTooltip(position, caretSize);\n    if (!values) {\n      return {yTransformOrigin: 0, xTransformOrigin: 0};\n    }\n    // Prior to setting the caret position styles, clear any previous styles\n    // set. This is necessary as all position options do not use the same\n    // properties (e.g. using 'left' or 'right') and so old style properties\n    // might not get overridden, causing misplaced carets.\n    this.adapter.clearTooltipCaretStyles();\n\n    this.adapter.setTooltipCaretStyle(values.yAlignment, values.yAxisPx);\n    this.adapter.setTooltipCaretStyle(values.xAlignment, values.xAxisPx);\n    // Value of scaleX is cos(skew), Math.cos() expects radians though, so we\n    // must first convert the skew value (which is in degrees) to radians.\n    const skewRadians = values.skew * (Math.PI / 180);\n    const scaleX = Math.cos(skewRadians);\n\n    this.adapter.setTooltipCaretStyle(\n        'transform',\n        `rotate(${values.rotation}deg) skewY(${values.skew}deg) scaleX(${\n            scaleX})`);\n    this.adapter.setTooltipCaretStyle(\n        'transform-origin', `${values.xAlignment} ${values.yAlignment}`);\n    for (const corner of values.caretCorners) {\n      this.adapter.setTooltipCaretStyle(corner, '0');\n    }\n    return {\n      yTransformOrigin: values.yTransformOrigin,\n      xTransformOrigin: values.xTransformOrigin\n    };\n  }\n\n  /**\n   * Given a PositionWithCaret, determines the correct styles to position the\n   * caret properly on the rich tooltip.\n   */\n  private calculateCaretPositionOnTooltip(\n      tooltipPos: PositionWithCaret,\n      caretSize: {caretWidth: number, caretHeight: number}): CaretPosOnTooltip\n      |undefined {\n    const isLTR = !this.adapter.isRTL();\n    const tooltipWidth = this.adapter.getComputedStyleProperty('width');\n    const tooltipHeight = this.adapter.getComputedStyleProperty('height');\n    if (!tooltipWidth || !tooltipHeight || !caretSize) {\n      return;\n    }\n\n    const midpointWidth =\n        `calc((${tooltipWidth} - ${caretSize.caretWidth}px) / 2)`;\n    const midpointHeight =\n        `calc((${tooltipHeight} - ${caretSize.caretWidth}px) / 2)`;\n    const flushWithEdge = '0';\n    const indentedFromEdge = `${numbers.CARET_INDENTATION}px`;\n    const indentedFromWidth = `calc(${tooltipWidth} - ${indentedFromEdge})`;\n    const indentedFromHeight = `calc(${tooltipHeight} - ${indentedFromEdge})`;\n    const verticalRotation = 35;\n    const horizontalRotation = Math.abs(90 - verticalRotation);\n    const bottomRightTopLeftBorderRadius =\n        ['border-bottom-right-radius', 'border-top-left-radius'];\n    const bottomLeftTopRightBorderRadius =\n        ['border-bottom-left-radius', 'border-top-right-radius'];\n    const skewDeg = 20;\n\n    switch (tooltipPos) {\n      case PositionWithCaret.BELOW_CENTER:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: strings.LEFT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: midpointWidth,\n          rotation: -1 * verticalRotation,\n          skew: -1 * skewDeg,\n          xTransformOrigin: midpointWidth,\n          yTransformOrigin: flushWithEdge,\n          caretCorners: bottomRightTopLeftBorderRadius,\n        };\n      case PositionWithCaret.BELOW_END:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.RIGHT : strings.LEFT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: indentedFromEdge,\n          rotation: isLTR ? verticalRotation : -1 * verticalRotation,\n          skew: isLTR ? skewDeg : -1 * skewDeg,\n          xTransformOrigin: isLTR ? indentedFromWidth : indentedFromEdge,\n          yTransformOrigin: flushWithEdge,\n          caretCorners: isLTR ? bottomLeftTopRightBorderRadius :\n                                bottomRightTopLeftBorderRadius,\n        };\n      case PositionWithCaret.BELOW_START:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.LEFT : strings.RIGHT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: indentedFromEdge,\n          rotation: isLTR ? -1 * verticalRotation : verticalRotation,\n          skew: isLTR ? -1 * skewDeg : skewDeg,\n          xTransformOrigin: isLTR ? indentedFromEdge : indentedFromWidth,\n          yTransformOrigin: flushWithEdge,\n          caretCorners: isLTR ? bottomRightTopLeftBorderRadius :\n                                bottomLeftTopRightBorderRadius,\n        };\n\n      case PositionWithCaret.TOP_SIDE_END:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.LEFT : strings.RIGHT,\n          yAxisPx: indentedFromEdge,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? horizontalRotation : -1 * horizontalRotation,\n          skew: isLTR ? -1 * skewDeg : skewDeg,\n          xTransformOrigin: isLTR ? flushWithEdge : tooltipWidth,\n          yTransformOrigin: indentedFromEdge,\n          caretCorners: isLTR ? bottomRightTopLeftBorderRadius :\n                                bottomLeftTopRightBorderRadius,\n        };\n      case PositionWithCaret.CENTER_SIDE_END:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.LEFT : strings.RIGHT,\n          yAxisPx: midpointHeight,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? horizontalRotation : -1 * horizontalRotation,\n          skew: isLTR ? -1 * skewDeg : skewDeg,\n          xTransformOrigin: isLTR ? flushWithEdge : tooltipWidth,\n          yTransformOrigin: midpointHeight,\n          caretCorners: isLTR ? bottomRightTopLeftBorderRadius :\n                                bottomLeftTopRightBorderRadius,\n        };\n      case PositionWithCaret.BOTTOM_SIDE_END:\n        return {\n          yAlignment: strings.BOTTOM,\n          xAlignment: isLTR ? strings.LEFT : strings.RIGHT,\n          yAxisPx: indentedFromEdge,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? -1 * horizontalRotation : horizontalRotation,\n          skew: isLTR ? skewDeg : -1 * skewDeg,\n          xTransformOrigin: isLTR ? flushWithEdge : tooltipWidth,\n          yTransformOrigin: indentedFromHeight,\n          caretCorners: isLTR ? bottomLeftTopRightBorderRadius :\n                                bottomRightTopLeftBorderRadius,\n        };\n\n      case PositionWithCaret.TOP_SIDE_START:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.RIGHT : strings.LEFT,\n          yAxisPx: indentedFromEdge,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? -1 * horizontalRotation : horizontalRotation,\n          skew: isLTR ? skewDeg : -1 * skewDeg,\n          xTransformOrigin: isLTR ? tooltipWidth : flushWithEdge,\n          yTransformOrigin: indentedFromEdge,\n          caretCorners: isLTR ? bottomLeftTopRightBorderRadius :\n                                bottomRightTopLeftBorderRadius,\n        };\n      case PositionWithCaret.CENTER_SIDE_START:\n        return {\n          yAlignment: strings.TOP,\n          xAlignment: isLTR ? strings.RIGHT : strings.LEFT,\n          yAxisPx: midpointHeight,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? -1 * horizontalRotation : horizontalRotation,\n          skew: isLTR ? skewDeg : -1 * skewDeg,\n          xTransformOrigin: isLTR ? tooltipWidth : flushWithEdge,\n          yTransformOrigin: midpointHeight,\n          caretCorners: isLTR ? bottomLeftTopRightBorderRadius :\n                                bottomRightTopLeftBorderRadius,\n        };\n      case PositionWithCaret.BOTTOM_SIDE_START:\n        return {\n          yAlignment: strings.BOTTOM,\n          xAlignment: isLTR ? strings.RIGHT : strings.LEFT,\n          yAxisPx: indentedFromEdge,\n          xAxisPx: flushWithEdge,\n          rotation: isLTR ? horizontalRotation : -1 * horizontalRotation,\n          skew: isLTR ? -1 * skewDeg : skewDeg,\n          xTransformOrigin: isLTR ? tooltipWidth : flushWithEdge,\n          yTransformOrigin: indentedFromHeight,\n          caretCorners: isLTR ? bottomRightTopLeftBorderRadius :\n                                bottomLeftTopRightBorderRadius,\n        };\n\n      case PositionWithCaret.ABOVE_CENTER:\n        return {\n          yAlignment: strings.BOTTOM,\n          xAlignment: strings.LEFT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: midpointWidth,\n          rotation: verticalRotation,\n          skew: skewDeg,\n          xTransformOrigin: midpointWidth,\n          yTransformOrigin: tooltipHeight,\n          caretCorners: bottomLeftTopRightBorderRadius,\n        };\n      case PositionWithCaret.ABOVE_END:\n        return {\n          yAlignment: strings.BOTTOM,\n          xAlignment: isLTR ? strings.RIGHT : strings.LEFT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: indentedFromEdge,\n          rotation: isLTR ? -1 * verticalRotation : verticalRotation,\n          skew: isLTR ? -1 * skewDeg : skewDeg,\n          xTransformOrigin: isLTR ? indentedFromWidth : indentedFromEdge,\n          yTransformOrigin: tooltipHeight,\n          caretCorners: isLTR ? bottomRightTopLeftBorderRadius :\n                                bottomLeftTopRightBorderRadius,\n        };\n      default:\n      case PositionWithCaret.ABOVE_START:\n        return {\n          yAlignment: strings.BOTTOM,\n          xAlignment: isLTR ? strings.LEFT : strings.RIGHT,\n          yAxisPx: flushWithEdge,\n          xAxisPx: indentedFromEdge,\n          rotation: isLTR ? verticalRotation : -1 * verticalRotation,\n          skew: isLTR ? skewDeg : -1 * skewDeg,\n          xTransformOrigin: isLTR ? indentedFromEdge : indentedFromWidth,\n          yTransformOrigin: tooltipHeight,\n          caretCorners: isLTR ? bottomLeftTopRightBorderRadius :\n                                bottomRightTopLeftBorderRadius,\n        };\n    }\n  }\n\n  private clearShowTimeout() {\n    if (this.showTimeout) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = null;\n    }\n  }\n\n  private clearHideTimeout() {\n    if (this.hideTimeout) {\n      clearTimeout(this.hideTimeout);\n      this.hideTimeout = null;\n    }\n  }\n\n  /**\n   * Method that allows user to specify additional elements that should have a\n   * scroll event listener attached to it. This should be used in instances\n   * where the anchor element is placed inside a scrollable container, and will\n   * ensure that the tooltip will stay attached to the anchor on scroll.\n   */\n  attachScrollHandler(\n      addEventListenerFn: <K extends EventType>(\n          event: K, handler: SpecificEventListener<K>) => void) {\n    this.addAncestorScrollEventListeners.push(() => {\n      addEventListenerFn('scroll', this.windowScrollHandler);\n    });\n  }\n\n  /**\n   * Must be used in conjunction with #attachScrollHandler. Removes the scroll\n   * event handler from elements on the page.\n   */\n  removeScrollHandler(\n      removeEventHandlerFn: <K extends EventType>(\n          event: K, handler: SpecificEventListener<K>) => void) {\n    this.removeAncestorScrollEventListeners.push(() => {\n      removeEventHandlerFn('scroll', this.windowScrollHandler);\n    });\n  }\n\n\n  override destroy() {\n    if (this.frameId) {\n      cancelAnimationFrame(this.frameId);\n      this.frameId = null;\n    }\n\n    this.clearHideTimeout();\n    this.clearShowTimeout();\n\n    this.adapter.removeClass(SHOWN);\n    this.adapter.removeClass(SHOWING_TRANSITION);\n    this.adapter.removeClass(SHOWING);\n    this.adapter.removeClass(HIDE);\n    this.adapter.removeClass(HIDE_TRANSITION);\n\n    if (this.richTooltip) {\n      this.adapter.deregisterEventHandler(\n          'focusout', this.richTooltipFocusOutHandler);\n    }\n\n    if (!this.persistentTooltip) {\n      this.adapter.deregisterEventHandler(\n          'mouseenter', this.tooltipMouseEnterHandler);\n      this.adapter.deregisterEventHandler(\n          'mouseleave', this.tooltipMouseLeaveHandler);\n    }\n\n    this.adapter.deregisterAnchorEventHandler('blur', this.anchorBlurHandler);\n\n    this.adapter.deregisterDocumentEventHandler(\n        'click', this.documentClickHandler);\n    this.adapter.deregisterDocumentEventHandler(\n        'keydown', this.documentKeydownHandler);\n\n    this.adapter.deregisterWindowEventHandler(\n        'scroll', this.windowScrollHandler);\n    this.adapter.deregisterWindowEventHandler(\n        'resize', this.windowResizeHandler);\n    for (const fn of this.removeAncestorScrollEventListeners) {\n      fn();\n    }\n\n    this.animFrame.cancelAll();\n  }\n}\n\ninterface CaretPosOnTooltip {\n  // Either 'top' or 'bottom', indicating which should be used with the yAxisPx\n  // value to position the caret.\n  yAlignment: string;\n  // Either 'left' or 'right', indicating which should be used with the xAxisPx\n  // value to position the caret.\n  xAlignment: string;\n  // Indicates the vertical px alignment of the caret.\n  yAxisPx: string;\n  // Indicates the horizontal px alignment of the caret.\n  xAxisPx: string;\n  // Value (in degrees) by which the caret will be rotated.\n  rotation: number;\n  // Value (in degrees) by which the caret will be skewed.\n  skew: number;\n  // The x-axis of the transform-origin property for the whole tooltip. This\n  // ensures that, during the opening animation of the tooltip, it expands from\n  // the caret.\n  xTransformOrigin: string;\n  // The y-axis of the transform-origin property for the whole tooltip. This\n  // ensures that, during the opening animation of the tooltip, it expands from\n  // the caret.\n  yTransformOrigin: string;\n  // List of border-radius properties (e.g. border-radius-top-left, etc) that\n  // indicate which corners of the caret element should have a border-radius of\n  // 0. Certain corners use a 0 border radius to ensure a clean junction between\n  // the tooltip and the caret.\n  caretCorners: string[];\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTooltipFoundation;\n"
  },
  {
    "path": "packages/mdc-tooltip/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './foundation';\nexport * from './constants';\n"
  },
  {
    "path": "packages/mdc-tooltip/package.json",
    "content": "{\n  \"name\": \"@material/tooltip\",\n  \"description\": \"The Material Components Web tooltip component.\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"tooltip\"\n  ],\n  \"main\": \"dist/mdc.tooltip.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-tooltip\"\n  },\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/button\": \"^14.0.0\",\n    \"@material/dom\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/tokens\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"safevalues\": \"^1.0.1\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-tooltip/styles.scss",
    "content": "//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './tooltip';\n\n@include tooltip.core-styles;\n"
  },
  {
    "path": "packages/mdc-tooltip/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {KEY} from '@material/dom/keyboard';\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {createKeyboardEvent, emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {AnchorBoundaryType, CssClasses, numbers, XPosition, YPosition} from '../constants';\nimport {MDCTooltip, MDCTooltipFoundation} from '../index';\n\nfunction setupTestWithMockFoundation(fixture: HTMLElement) {\n  const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n  const anchorElem = fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n  const mockFoundation = createMockFoundation(MDCTooltipFoundation);\n  const component = new MDCTooltip(tooltipElem, mockFoundation);\n  return {anchorElem, tooltipElem, mockFoundation, component};\n}\n\ndescribe('MDCTooltip', () => {\n  let fixture: HTMLElement;\n  setUpMdcTestEnvironment();\n  describe('plain tooltip tests', () => {\n    beforeEach(() => {\n      fixture = createFixture(html`<div>\n        <button aria-describedby=\"tt0\">\n          anchor\n        </button>\n        <div id=\"tt0\" class=\"mdc-tooltip\" aria-role=\"tooltip\">\n          <div class=\"mdc-tooltip__surface\">\n            demo tooltip\n          </div>\n        </div>\n      </div>`);\n      document.body.appendChild(fixture);\n    });\n\n    afterEach(() => {\n      document.body.removeChild(fixture);\n    });\n\n    it('attachTo returns a component instance', () => {\n      expect(MDCTooltip.attachTo(\n                 fixture.querySelector<HTMLElement>('.mdc-tooltip')!))\n          .toEqual(jasmine.any(MDCTooltip));\n    });\n\n    it('attachTo throws an error when anchor element is missing', () => {\n      const container =\n          fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n      container.parentElement!.removeChild(container);\n      expect(\n          () => MDCTooltip.attachTo(\n              container.querySelector<HTMLElement>('.mdc-tooltip')!))\n          .toThrow();\n    });\n\n    it('#initialSyncWithDOM registers mouseenter event handler on the anchor element',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(anchorElem, 'mouseenter');\n         expect(mockFoundation.handleAnchorMouseEnter).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters mouseenter event handler on the anchor element',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         component.destroy();\n         emitEvent(anchorElem, 'mouseenter');\n         expect(mockFoundation.handleAnchorMouseEnter).not.toHaveBeenCalled();\n       });\n\n    it('#initialSyncWithDOM registers focus event handler on the anchor element',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(anchorElem, 'focus');\n         expect(mockFoundation.handleAnchorFocus).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters focus event handler on the anchor element', () => {\n      const {anchorElem, mockFoundation, component} =\n          setupTestWithMockFoundation(fixture);\n      component.destroy();\n      emitEvent(anchorElem, 'focus');\n      expect(mockFoundation.handleAnchorFocus).not.toHaveBeenCalled();\n    });\n\n    it('#initialSyncWithDOM registers mouseleave event handler on the anchor element',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(anchorElem, 'mouseleave');\n         expect(mockFoundation.handleAnchorMouseLeave).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters mouseleave event handler on the anchor element',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         component.destroy();\n         emitEvent(anchorElem, 'mouseleave');\n         expect(mockFoundation.handleAnchorMouseLeave).not.toHaveBeenCalled();\n       });\n\n    it('#initialSyncWithDOM registers transitionend event handler on the tooltip',\n       () => {\n         const {mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(component.root, 'transitionend');\n         expect(mockFoundation.handleTransitionEnd).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters transitionend event handler on the tooltip',\n       () => {\n         const {mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         component.destroy();\n         emitEvent(component.root, 'transitionend');\n         expect(mockFoundation.handleTransitionEnd).not.toHaveBeenCalled();\n       });\n\n    it('#initialSyncWithDOM registers touchstart event handler on the tooltip',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(anchorElem, 'touchstart');\n         expect(mockFoundation.handleAnchorTouchstart).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters touchstart event handler on the tooltip', () => {\n      const {anchorElem, mockFoundation, component} =\n          setupTestWithMockFoundation(fixture);\n      component.destroy();\n      emitEvent(anchorElem, 'touchstart');\n      expect(mockFoundation.handleAnchorTouchstart).not.toHaveBeenCalled();\n    });\n\n    it('#initialSyncWithDOM registers touchend event handler on the tooltip',\n       () => {\n         const {anchorElem, mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         emitEvent(anchorElem, 'touchend');\n         expect(mockFoundation.handleAnchorTouchend).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters touchend event handler on the tooltip', () => {\n      const {anchorElem, mockFoundation, component} =\n          setupTestWithMockFoundation(fixture);\n      component.destroy();\n      emitEvent(anchorElem, 'touchend');\n      expect(mockFoundation.handleAnchorTouchend).not.toHaveBeenCalled();\n    });\n\n    it('#setTooltipPosition forwards to MDCFoundation#setTooltipPosition',\n       () => {\n         const {mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         component.setTooltipPosition(\n             {xPos: XPosition.CENTER, yPos: YPosition.ABOVE});\n         expect(mockFoundation.setTooltipPosition).toHaveBeenCalledWith({\n           xPos: XPosition.CENTER,\n           yPos: YPosition.ABOVE\n         });\n         component.destroy();\n       });\n\n    it('#setAnchorBoundaryType forwards to MDCFoundation#setAnchorBoundaryType',\n       () => {\n         const {mockFoundation, component} =\n             setupTestWithMockFoundation(fixture);\n         component.setAnchorBoundaryType(AnchorBoundaryType.UNBOUNDED);\n         expect(mockFoundation.setAnchorBoundaryType)\n             .toHaveBeenCalledWith(AnchorBoundaryType.UNBOUNDED);\n         component.destroy();\n       });\n\n    it('#hide forwards to MDCFoundation#hide', () => {\n      const {mockFoundation, component} = setupTestWithMockFoundation(fixture);\n      component.hide();\n      expect(mockFoundation.hide).toHaveBeenCalled();\n      component.destroy();\n    });\n\n    it('#isShown forwards to MDCFoundation#isShown', () => {\n      const {mockFoundation, component} = setupTestWithMockFoundation(fixture);\n      component.isShown();\n      expect(mockFoundation.isShown).toHaveBeenCalled();\n      component.destroy();\n    });\n\n    it('#isShown returns false if the tooltip is not shown', () => {\n      const {mockFoundation, component} = setupTestWithMockFoundation(fixture);\n      mockFoundation.isShown.and.returnValue(false);\n      expect(component.isShown()).toBeFalse();\n      component.destroy();\n    });\n\n    it('detects tooltip labels that span multiple lines', () => {\n      document.body.removeChild(fixture);\n      fixture = createFixture(html`<div>\n        <button data-tooltip-id=\"tt0\">\n          anchor\n        </button>\n        <div id=\"tt0\"\n             class=\"mdc-tooltip\"\n             aria-role=\"tooltip\">\n          <div class=\"mdc-tooltip__surface\">\n            this is as long tooltip label that will overflow the maximum width\n            and will create a multi-line tooltip label\n          </div>\n        </div>\n      </div>`);\n      document.body.appendChild(fixture);\n      const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n      // Add a max-width and min-height since styles are not loaded in\n      // this test.\n      tooltipElem.style.maxWidth = `${numbers.MAX_WIDTH}px`;\n      tooltipElem.style.minHeight = `${numbers.MIN_HEIGHT}px`;\n      const anchorElem =\n          fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n      MDCTooltip.attachTo(tooltipElem);\n\n      emitEvent(anchorElem, 'mouseenter');\n      jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n      expect(tooltipElem.classList).toContain(CssClasses.MULTILINE_TOOLTIP);\n    });\n  });\n\n  describe('default interactive rich tooltip tests', () => {\n    beforeEach(() => {\n      fixture = createFixture(html`<div>\n        <button data-tooltip-id=\"tt0\" aria-haspopup=\"dialog\" aria-expanded=\"false\">\n          anchor\n        </button>\n        <div id=\"tt0\" class=\"mdc-tooltip mdc-tooltip--rich\" aria-hidden=\"true\" role=\"dialog\">\n          <div class=\"mdc-tooltip__surface\">\n            <h2 class=\"mdc-tooltip__title\">Title</h2>\n            <p class=\"mdc-tooltip__content\">Content <a class=\"mdc-tooltip__content-link\" href=\"google.com\">link</a></p>\n            <div class=\"mdc-tooltip--rich-actions\">\n              <button class=\"mdc-button mdc-tooltip__action\">\n                <div class=\"mdc-button__ripple\"></div>\n                <span class=\"mdc-button__label\">Action</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>`);\n      document.body.appendChild(fixture);\n    });\n\n    afterEach(() => {\n      document.body.removeChild(fixture);\n    });\n\n    it('attachTo returns a component instance', () => {\n      expect(MDCTooltip.attachTo(\n                 fixture.querySelector<HTMLElement>('.mdc-tooltip--rich')!))\n          .toEqual(jasmine.any(MDCTooltip));\n    });\n\n    it('sets aria-expanded on anchor to true when showing rich tooltip', () => {\n      const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n      const anchorElem =\n          fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n      MDCTooltip.attachTo(tooltipElem);\n\n      emitEvent(anchorElem, 'mouseenter');\n      jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n      expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n    });\n\n    it('aria-expanded remains true on anchor when mouseleave anchor and mouseenter rich tooltip',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'mouseenter');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         emitEvent(anchorElem, 'mouseleave');\n         emitEvent(tooltipElem, 'mouseenter');\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n       });\n\n    it('aria-expanded remains true on anchor when mouseleave rich tooltip and mouseenter anchor',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'mouseenter');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         emitEvent(tooltipElem, 'mouseleave');\n         emitEvent(anchorElem, 'mouseenter');\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n       });\n\n    it('aria-expanded becomes true on anchor when anchor is focused', () => {\n      const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n      const anchorElem =\n          fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n      MDCTooltip.attachTo(tooltipElem);\n\n      emitEvent(anchorElem, 'focus');\n      jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n      expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n    });\n\n    it('aria-expanded becomes false on anchor when ESC is pressed from the tooltip',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         tooltipElem.dispatchEvent(\n             createKeyboardEvent('keydown', {key: KEY.ESCAPE, bubbles: true}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');\n       });\n\n    it('anchor becomes focused when ESC is pressed from the tooltip while focus is in tooltip',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         const tooltipActionButton =\n             fixture.querySelector<HTMLElement>('.mdc-tooltip__action')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         tooltipActionButton.focus();\n         tooltipElem.dispatchEvent(\n             createKeyboardEvent('keydown', {key: KEY.ESCAPE, bubbles: true}));\n\n         expect(document.activeElement).toBe(anchorElem);\n       });\n\n    it('aria-expanded becomes false on anchor when anchor blurs and non-tooltip element is focused',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         anchorElem.dispatchEvent(\n             new FocusEvent('blur', {relatedTarget: document.body}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');\n       });\n\n    it('aria-expanded remains true on anchor when anchor blurs and rich tooltip focuses',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         anchorElem.dispatchEvent(\n             new FocusEvent('blur', {relatedTarget: tooltipElem}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n       });\n\n    it('aria-expanded becomes false on anchor when rich tooltip focuses out and anchor does not receive focus',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         tooltipElem.dispatchEvent(\n             new FocusEvent('focusout', {relatedTarget: document.body}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');\n       });\n\n    it('aria-expanded remains true on anchor when rich tooltip focuses out and anchor receives focus',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         tooltipElem.dispatchEvent(\n             new FocusEvent('focusout', {relatedTarget: anchorElem}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n       });\n\n    it('aria-expanded remains true on anchor when rich tooltip focuses out and element within tooltip receives focus',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const tooltipContent =\n             fixture.querySelector<HTMLElement>('.mdc-tooltip__content')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[data-tooltip-id]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'focus');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n         tooltipElem.dispatchEvent(\n             new FocusEvent('focusout', {relatedTarget: tooltipContent}));\n\n         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');\n       });\n  });\n\n  describe('persistent non-interactive rich tooltip tests', () => {\n    beforeEach(() => {\n      fixture = createFixture(html`<div>\n        <button aria-describedby=\"tt0\">\n          anchor\n        </button>\n        <div id=\"tt0\" class=\"mdc-tooltip mdc-tooltip--rich\" aria-hidden=\"true\" data-mdc-tooltip-persistent=\"true\" role=\"tooltip\" tabindex=\"-1\">\n          <div class=\"mdc-tooltip__surface\">\n            <p class=\"mdc-tooltip__content\">\n              demo tooltip\n            </p>\n          </div>\n        </div>\n      </div>`);\n      document.body.appendChild(fixture);\n    });\n\n    afterEach(() => {\n      document.body.removeChild(fixture);\n    });\n\n    it('#initialSyncWithDOM registers click event handler on the anchor element',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         const component = MDCTooltip.attachTo(tooltipElem);\n         const foundation = component['foundation'];\n         spyOn(foundation, 'handleAnchorClick');\n\n         emitEvent(anchorElem, 'click');\n\n         expect(foundation.handleAnchorClick).toHaveBeenCalled();\n         component.destroy();\n       });\n\n    it('#destroy deregisters click event handler on the anchor element', () => {\n      const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n      const anchorElem =\n          fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n      const component = MDCTooltip.attachTo(tooltipElem);\n      const foundation = component['foundation'];\n      spyOn(foundation, 'handleAnchorClick');\n\n      component.destroy();\n      emitEvent(anchorElem, 'click');\n\n      expect(foundation.handleAnchorClick).not.toHaveBeenCalled();\n    });\n\n    it('aria-hidden remains true on tooltip when mouseenter anchor', () => {\n      const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n      const anchorElem =\n          fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n      MDCTooltip.attachTo(tooltipElem);\n\n      emitEvent(anchorElem, 'mouseenter');\n      jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n      expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');\n    });\n\n    it('set aria-hidden to false on tooltip when anchor clicked while tooltip is hidden',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');\n\n         emitEvent(anchorElem, 'click');\n\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n       });\n\n    it('set aria-hidden to true on tooltip when anchor clicked while tooltip is shown',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         emitEvent(anchorElem, 'click');\n\n         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');\n       });\n\n    it('set aria-hidden to true on tooltip when element other than anchor or the tooltip is clicked while tooltip is shown',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         emitEvent(document.body, 'click');\n\n         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');\n       });\n\n    it('aria-hidden remains false on tooltip when tooltip is clicked while tooltip is shown',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         emitEvent(tooltipElem, 'click');\n\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n       });\n\n    it('aria-hidden remains false on tooltip when mouseleave anchor while tooltip is shown',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         emitEvent(anchorElem, 'mouseleave');\n\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n       });\n\n    it('aria-hidden remains false on tooltip when mouseleave tooltip while tooltip is shown',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         emitEvent(tooltipElem, 'mouseleave');\n\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n       });\n\n    it('aria-hidden becomes true on tooltip when anchor blurs and non-tooltip element is focused',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         anchorElem.dispatchEvent(\n             new FocusEvent('blur', {relatedTarget: document.body}));\n\n         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');\n       });\n\n    it('aria-hidden remains false on tooltip when anchor blurs and rich tooltip focuses',\n       () => {\n         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;\n         const anchorElem =\n             fixture.querySelector<HTMLElement>('[aria-describedby]')!;\n         MDCTooltip.attachTo(tooltipElem);\n\n         emitEvent(anchorElem, 'click');\n         jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n         anchorElem.dispatchEvent(\n             new FocusEvent('blur', {relatedTarget: tooltipElem}));\n\n         expect(tooltipElem.hasAttribute('aria-hidden')).toBeFalse();\n       });\n  });\n});\n"
  },
  {
    "path": "packages/mdc-tooltip/test/feature-targeting-any.test.scss",
    "content": "@use '../tooltip';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include tooltip.core-styles($query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-tooltip/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createKeyboardEvent, createMouseEvent, emitEvent} from '../../../testing/dom/events';\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';\nimport {MDCTooltipAdapter} from '../adapter';\nimport {AnchorBoundaryType, attributes, CssClasses, numbers, PositionWithCaret, XPosition, YPosition} from '../constants';\nimport {MDCTooltipFoundation} from '../foundation';\n\nconst CARET_WIDTH = 24;\nconst CARET_HEIGHT = 32;\nconst RICH_TOOLTIP_WIDTH = '300px';\nconst RICH_TOOLTIP_HEIGHT = '140px';\nconst CARET_POSITION_STYLES = new Map([\n  [\n    PositionWithCaret.ABOVE_START, {\n      yAlignment: 'bottom',\n      xAlignment: 'left',\n      yAxisPx: '0',\n      xAxisPx: `${numbers.CARET_INDENTATION}px`,\n      rotation: 35,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: `${numbers.CARET_INDENTATION}px`,\n      yTransformOrigin: RICH_TOOLTIP_HEIGHT,\n    }\n  ],\n  [\n    PositionWithCaret.ABOVE_CENTER, {\n      yAlignment: 'bottom',\n      xAlignment: 'left',\n      yAxisPx: '0',\n      xAxisPx: `calc((${RICH_TOOLTIP_WIDTH} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      rotation: 35,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: `calc((${RICH_TOOLTIP_WIDTH} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      yTransformOrigin: RICH_TOOLTIP_HEIGHT,\n\n    }\n  ],\n  [\n    PositionWithCaret.ABOVE_END, {\n      yAlignment: 'bottom',\n      xAlignment: 'right',\n      yAxisPx: '0',\n      xAxisPx: `${numbers.CARET_INDENTATION}px`,\n      rotation: -35,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin:\n          `calc(${RICH_TOOLTIP_WIDTH} - ${numbers.CARET_INDENTATION}px)`,\n      yTransformOrigin: RICH_TOOLTIP_HEIGHT,\n    }\n  ],\n  [\n    PositionWithCaret.TOP_SIDE_START, {\n      yAlignment: 'top',\n      xAlignment: 'right',\n      yAxisPx: `${numbers.CARET_INDENTATION}px`,\n      xAxisPx: '0',\n      rotation: -55,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: RICH_TOOLTIP_WIDTH,\n      yTransformOrigin: `${numbers.CARET_INDENTATION}px`,\n\n    }\n  ],\n  [\n    PositionWithCaret.CENTER_SIDE_START, {\n      yAlignment: 'top',\n      xAlignment: 'right',\n      yAxisPx: `calc((${RICH_TOOLTIP_HEIGHT} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      xAxisPx: '0',\n      rotation: -55,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: RICH_TOOLTIP_WIDTH,\n      yTransformOrigin: `calc((${RICH_TOOLTIP_HEIGHT} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n    }\n  ],\n  [\n    PositionWithCaret.BOTTOM_SIDE_START, {\n      yAlignment: 'bottom',\n      xAlignment: 'right',\n      yAxisPx: `${numbers.CARET_INDENTATION}px`,\n      xAxisPx: '0',\n      rotation: 55,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: RICH_TOOLTIP_WIDTH,\n      yTransformOrigin:\n          `calc(${RICH_TOOLTIP_HEIGHT} - ${numbers.CARET_INDENTATION}px)`,\n    }\n  ],\n  [\n    PositionWithCaret.TOP_SIDE_END, {\n      yAlignment: 'top',\n      xAlignment: 'left',\n      yAxisPx: `${numbers.CARET_INDENTATION}px`,\n      xAxisPx: '0',\n      rotation: 55,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: 0,\n      yTransformOrigin: `${numbers.CARET_INDENTATION}px`,\n\n    }\n  ],\n  [\n    PositionWithCaret.CENTER_SIDE_END, {\n      yAlignment: 'top',\n      xAlignment: 'left',\n      yAxisPx: `calc((${RICH_TOOLTIP_HEIGHT} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      xAxisPx: '0',\n      rotation: 55,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: 0,\n      yTransformOrigin: `calc((${RICH_TOOLTIP_HEIGHT} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n\n    }\n  ],\n  [\n    PositionWithCaret.BOTTOM_SIDE_END, {\n      yAlignment: 'bottom',\n      xAlignment: 'left',\n      yAxisPx: `${numbers.CARET_INDENTATION}px`,\n      xAxisPx: '0',\n      rotation: -55,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: 0,\n      yTransformOrigin:\n          `calc(${RICH_TOOLTIP_HEIGHT} - ${numbers.CARET_INDENTATION}px)`,\n\n    }\n  ],\n  [\n    PositionWithCaret.BELOW_START, {\n      yAlignment: 'top',\n      xAlignment: 'left',\n      yAxisPx: '0',\n      xAxisPx: `${numbers.CARET_INDENTATION}px`,\n      rotation: -35,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: `${numbers.CARET_INDENTATION}px`,\n      yTransformOrigin: 0,\n\n    }\n  ],\n  [\n    PositionWithCaret.BELOW_CENTER, {\n      yAlignment: 'top',\n      xAlignment: 'left',\n      yAxisPx: '0',\n      xAxisPx: `calc((${RICH_TOOLTIP_WIDTH} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      rotation: -35,\n      skew: -20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin: `calc((${RICH_TOOLTIP_WIDTH} - ${\n          CARET_WIDTH / numbers.ANIMATION_SCALE}px) / 2)`,\n      yTransformOrigin: 0,\n\n    }\n  ],\n  [\n    PositionWithCaret.BELOW_END, {\n      yAlignment: 'top',\n      xAlignment: 'right',\n      yAxisPx: '0',\n      xAxisPx: `${numbers.CARET_INDENTATION}px`,\n      rotation: 35,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin:\n          `calc(${RICH_TOOLTIP_WIDTH} - ${numbers.CARET_INDENTATION}px)`,\n      yTransformOrigin: 0,\n    }\n  ]\n]);\nconst CARET_POSITION_STYLES_RTL = new Map([\n  [\n    PositionWithCaret.BELOW_START, {\n      yAlignment: 'top',\n      xAlignment: 'right',\n      yAxisPx: '0',\n      xAxisPx: `${numbers.CARET_INDENTATION}px`,\n      rotation: 35,\n      skew: 20,\n      scaleX: 0.9396926207859084,\n      xTransformOrigin:\n          `calc(${RICH_TOOLTIP_WIDTH} - ${numbers.CARET_INDENTATION}px)`,\n      yTransformOrigin: 0,\n\n    }\n  ],\n]);\n\n// Constant for the animationFrame mock found in setUpMdcTestEnvironment\nconst ANIMATION_FRAME = 1;\n\n// This function assumes that the foundation has already been initialized for\n// interactive rich tooltips. If isRich and isInteractive have not been\n// initialized, the checks for interactive rich tooltips will not be called.\nfunction expectTooltipToHaveBeenShown(\n    foundation: MDCTooltipFoundation,\n    mockAdapter: jasmine.SpyObj<MDCTooltipAdapter>) {\n  if (foundation.isRich() && foundation['interactiveTooltip']) {\n    expect(mockAdapter.setAnchorAttribute)\n        .toHaveBeenCalledWith('aria-expanded', 'true');\n  }\n\n  expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n  expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n}\n\n// This function assumes that the foundation has already been initialized for\n// interactive rich tooltips. If isRich and isInteractive have not been\n// initialized, the checks for interactive rich tooltips will not be called.\nfunction expectTooltipToHaveBeenHidden(\n    foundation: MDCTooltipFoundation,\n    mockAdapter: jasmine.SpyObj<MDCTooltipAdapter>) {\n  if (foundation.isRich() && foundation['interactiveTooltip']) {\n    expect(mockAdapter.setAnchorAttribute)\n        .toHaveBeenCalledWith('aria-expanded', 'false');\n  }\n\n  expect(mockAdapter.setAttribute).toHaveBeenCalledWith('aria-hidden', 'true');\n  expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE);\n  expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n  expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n}\n\n// This function assumes that the foundation has already been initialized for\n// interactive rich tooltips. If isRich and isInteractive have not been\n// initialized, the checks for interactive rich tooltips will not be called.\nfunction expectTooltipNotToHaveBeenHidden(\n    foundation: MDCTooltipFoundation,\n    mockAdapter: jasmine.SpyObj<MDCTooltipAdapter>) {\n  if (foundation.isRich() && foundation['interactiveTooltip']) {\n    expect(mockAdapter.setAnchorAttribute)\n        .not.toHaveBeenCalledWith('aria-expanded', 'false');\n  }\n\n  expect(mockAdapter.setAttribute)\n      .not.toHaveBeenCalledWith('aria-hidden', 'true');\n  expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.HIDE);\n  expect(mockAdapter.addClass)\n      .not.toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n  expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(CssClasses.SHOWN);\n}\n\nfunction setUpFoundationTestForRichTooltip(\n    tooltipFoundation: typeof MDCTooltipFoundation,\n    {isInteractive, isPersistent, hasCaret}:\n        {isInteractive?: boolean,\n         isPersistent?: boolean,\n         hasCaret?: boolean} = {}) {\n  const {foundation, mockAdapter} = setUpFoundationTest(tooltipFoundation);\n\n  mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);\n  mockAdapter.getAttribute.withArgs(attributes.PERSISTENT)\n      .and.returnValue(isPersistent ? 'true' : 'false');\n  mockAdapter.getAnchorAttribute.withArgs(attributes.ARIA_EXPANDED)\n      .and.returnValue(isInteractive ? 'false' : null);\n  mockAdapter.getAnchorAttribute.withArgs(attributes.ARIA_HASPOPUP)\n      .and.returnValue(isInteractive ? 'dialog' : 'false');\n  mockAdapter.getAttribute.withArgs(attributes.HAS_CARET)\n      .and.returnValue(hasCaret ? 'true' : 'false');\n  mockAdapter.isInstanceOfElement.and.returnValue(true);\n\n  foundation.init();\n\n  return {foundation, mockAdapter};\n}\n\ndescribe('MDCTooltipFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  it('default adapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTooltipFoundation, [\n      'getAttribute',\n      'setAttribute',\n      'removeAttribute',\n      'addClass',\n      'hasClass',\n      'removeClass',\n      'getComputedStyleProperty',\n      'setStyleProperty',\n      'setSurfaceAnimationStyleProperty',\n      'getViewportWidth',\n      'getViewportHeight',\n      'getTooltipSize',\n      'getAnchorBoundingRect',\n      'getParentBoundingRect',\n      'getAnchorAttribute',\n      'setAnchorAttribute',\n      'isRTL',\n      'anchorContainsElement',\n      'tooltipContainsElement',\n      'focusAnchorElement',\n      'registerEventHandler',\n      'deregisterEventHandler',\n      'registerAnchorEventHandler',\n      'deregisterAnchorEventHandler',\n      'registerDocumentEventHandler',\n      'deregisterDocumentEventHandler',\n      'registerWindowEventHandler',\n      'deregisterWindowEventHandler',\n      'notifyHidden',\n      'notifyShown',\n      'getTooltipCaretBoundingRect',\n      'setTooltipCaretStyle',\n      'clearTooltipCaretStyles',\n      'getActiveElement',\n      'isInstanceOfElement',\n    ]);\n  });\n\n  it('#isRich returns false for plain tooltip', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(false);\n    foundation.init();\n\n    expect(foundation.isRich()).toBeFalse();\n  });\n\n  it('#isRich returns true for rich tooltip', () => {\n    const {foundation} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n    expect(foundation.isRich()).toBeTrue();\n  });\n\n  it('#isPersistent returns false for default rich tooltip', () => {\n    const {foundation} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n    expect(foundation.isPersistent()).toBeFalse();\n  });\n\n  it('#isPersistent returns true for persistent rich tooltip', () => {\n    const {foundation} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {isPersistent: true});\n\n    expect(foundation.isPersistent()).toBeTrue();\n  });\n\n  it('#isShown returns true if the tooltip is currently shown', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n\n    expect(foundation.isShown()).toBeTrue();\n  });\n\n  it('#isShown returns false if the tooltip is currently hidden', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    foundation.hide();\n\n    expect(foundation.isShown()).toBeFalse();\n  });\n\n  it('#show modifies tooltip element so it is shown', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n  });\n\n  it('#show does not set aria-expanded=\"true\" on anchor element for non-interactive rich tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n\n       expect(mockAdapter.setAnchorAttribute)\n           .not.toHaveBeenCalledWith('aria-expanded', 'true');\n     });\n\n  it('#show sets aria-expanded=\"true\" on anchor element for interactive rich tooltip',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isInteractive: true});\n\n       foundation.show();\n\n       expect(mockAdapter.setAnchorAttribute)\n           .toHaveBeenCalledWith('aria-expanded', 'true');\n     });\n\n  it('#show adds SHOWN and SHOWN_TRANSITION class after rAF', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n  });\n\n  it('#hide cancels a pending rAF', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    foundation.hide();\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n\n    jasmine.clock().tick(1);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n  });\n\n  it('#show registers mouseenter event listener on the tooltip for rich tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n\n       expect(mockAdapter.registerEventHandler)\n           .toHaveBeenCalledWith('mouseenter', jasmine.any(Function));\n     });\n\n  it('#show registers mouseleave event listener on the tooltip for rich tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n\n       expect(mockAdapter.registerEventHandler)\n           .toHaveBeenCalledWith('mouseleave', jasmine.any(Function));\n     });\n\n  it('#hide deregisters mouseenter event listeners on the tooltip for rich tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       foundation.hide();\n\n       expect(mockAdapter.deregisterEventHandler)\n           .toHaveBeenCalledWith('mouseenter', jasmine.any(Function));\n     });\n\n  it('#hide deregisters mouseleave event listeners on the tooltip for rich tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       foundation.hide();\n\n       expect(mockAdapter.deregisterEventHandler)\n           .toHaveBeenCalledWith('mouseleave', jasmine.any(Function));\n     });\n\n\n  it('#show registers blur event listener on the anchor element', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.show();\n\n    expect(mockAdapter.registerAnchorEventHandler)\n        .toHaveBeenCalledWith('blur', jasmine.any(Function));\n  });\n\n  it('#show registers click and keydown event listeners on the document',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.show();\n       expect(mockAdapter.registerDocumentEventHandler)\n           .toHaveBeenCalledWith('click', jasmine.any(Function));\n       expect(mockAdapter.registerDocumentEventHandler)\n           .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n     });\n\n  it('#hide deregisters blur event listeners on the anchor', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.show();\n    foundation.hide();\n\n    expect(mockAdapter.deregisterAnchorEventHandler)\n        .toHaveBeenCalledWith('blur', jasmine.any(Function));\n  });\n\n  it('#hide deregisters click and keydown event listeners on the document',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.show();\n       foundation.hide();\n\n       expect(mockAdapter.deregisterDocumentEventHandler)\n           .toHaveBeenCalledWith('click', jasmine.any(Function));\n       expect(mockAdapter.deregisterDocumentEventHandler)\n           .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n     });\n\n  it('#show registers scroll and resize event listeners on the window', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    expect(mockAdapter.registerWindowEventHandler)\n        .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n    expect(mockAdapter.registerWindowEventHandler)\n        .toHaveBeenCalledWith('resize', jasmine.any(Function));\n  });\n\n  it('#hide deregisters scroll and resize event listeners on the window',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.show();\n       foundation.hide();\n\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('resize', jasmine.any(Function));\n     });\n\n  it('#hide modifies tooltip element so it is hidden', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    foundation.hide();\n\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n  });\n\n  it('#show only performs an action if tooltip is hidden', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    foundation.show();\n    expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n  });\n\n  it('#show cancels a pending hideTimeout', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.show();\n    foundation.handleAnchorMouseLeave();\n    expect((foundation as any).hideTimeout).not.toEqual(null);\n    foundation.show();\n    expect((foundation as any).hideTimeout).toEqual(null);\n\n    jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n  });\n\n  it('#hide only performs an action if tooltip is shown', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.hide();\n\n    expect(mockAdapter.setAttribute).not.toHaveBeenCalled();\n    expect(mockAdapter.removeClass).not.toHaveBeenCalled();\n  });\n\n  it('#handleTransitionEnd removes the SHOWING, SHOWING_TRANSITION, HIDE, and HIDE_TRANSITION classes',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleTransitionEnd();\n\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n     });\n\n  it('#handleTransitionEnd after #hide sends notification that tooltip has been hidden',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.hasClass.and.returnValue(true);\n\n       foundation.show();\n       foundation.hide();\n       foundation.handleTransitionEnd();\n\n       expect(mockAdapter.hasClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.notifyHidden).toHaveBeenCalled();\n       expect(mockAdapter.notifyShown).not.toHaveBeenCalled();\n     });\n\n  it('#handleTransitionEnd after #show sends notification that tooltip has been shown',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.show();\n       foundation.handleTransitionEnd();\n\n       expect(mockAdapter.hasClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.notifyHidden).not.toHaveBeenCalled();\n       expect(mockAdapter.notifyShown).toHaveBeenCalled();\n     });\n\n  it('clears any in-progress animations befores starting a show animation',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.show();\n\n       jasmine.clock().tick(1);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n     });\n\n  it('clears any in-progress animations befores starting a hide animation',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.show();\n       foundation.hide();\n\n       jasmine.clock().tick(1);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n     });\n\n  it(`#handleKeydown with ESC key hides tooltip`, () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.show();\n    foundation.handleKeydown(createKeyboardEvent('keydown', {key: 'Escape'}));\n\n    expect((foundation as any).hideTimeout).toEqual(null);\n    expect(mockAdapter.setAttribute)\n        .toHaveBeenCalledWith('aria-hidden', 'true');\n    expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass)\n        .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n  });\n\n  it('#handleKeydown does not hide the tooltip if the ESCAPE key was not pressed',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.hide = jasmine.createSpy('hide');\n\n       foundation.show();\n       foundation.handleKeydown(createKeyboardEvent('keydown', {key: 'Space'}));\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleKeydown does not restore focus to the anchorElement if the activeElement is not a HTMLElement',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getActiveElement.and.returnValue(null);\n\n       foundation.handleKeydown(\n           createKeyboardEvent('keydown', {key: 'Escape'}));\n\n       expect(mockAdapter.focusAnchorElement).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeydown does not restore focus to the anchorElement if the activeElement is not within tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n\n       document.body.focus();\n       foundation.handleKeydown(\n           createKeyboardEvent('keydown', {key: 'Escape'}));\n\n       expect(mockAdapter.focusAnchorElement).not.toHaveBeenCalled();\n     });\n\n  it('#handleKeydown restores focus to the anchorElement if the activeElement was within tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       const activeElement = document.createElement('div');\n       mockAdapter.getActiveElement.and.returnValue(activeElement);\n       mockAdapter.isInstanceOfElement.and.returnValue(true);\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n\n       document.body.focus();\n       const mockKeyboardEvent =\n           createKeyboardEvent('keydown', {key: 'Escape'});\n       foundation.handleKeydown(mockKeyboardEvent);\n\n       expect(mockAdapter.tooltipContainsElement)\n           .toHaveBeenCalledWith(activeElement);\n       expect(mockAdapter.focusAnchorElement).toHaveBeenCalled();\n     });\n\n  it('#handleDocumentClick hides the tooltip immediately for plain tooltips',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       const mockClickEvent = createMouseEvent('click');\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick hides the tooltip immediately for default rich tooltips',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       const mockClickEvent = createMouseEvent('click');\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick hides the tooltip immediately for persistent rich tooltips if there is no event target',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       const mockClickEvent = createMouseEvent('click');\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick hides the tooltip immediately for persistent rich tooltips if event target is not HTMLElement',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       const mockClickEvent = {\n         ...createMouseEvent('click'),\n         target: 'not an HTMLElement'\n       } as unknown as MouseEvent;\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick hides the tooltip immediately for persistent rich tooltips if event target is not within anchorElement or tooltipElement',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.anchorContainsElement.and.returnValue(false);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n       const mockClickEvent = {\n         ...createMouseEvent('click'),\n         target: document.createElement('div')\n       };\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick does not hide the tooltip for persistent rich tooltips if event target is within anchorElement',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.anchorContainsElement.and.returnValue(true);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n       const mockClickEvent = {\n         ...createMouseEvent('click'),\n         target: document.createElement('div')\n       };\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleDocumentClick does not hide the tooltip for persistent rich tooltips if event target is within tooltipElement',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.anchorContainsElement.and.returnValue(false);\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n       const mockClickEvent = {\n         ...createMouseEvent('click'),\n         target: document.createElement('div')\n       };\n\n       foundation.show();\n       foundation.handleDocumentClick(mockClickEvent);\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n\n  it(`#handleAnchorMouseLeave hides the tooltip after a ${\n         numbers.HIDE_DELAY_MS}ms delay`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.show();\n       foundation.handleAnchorMouseLeave();\n       expect((foundation as any).hideTimeout).not.toEqual(null);\n\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleAnchorMouseLeave does not clear showTimeout after #handleAnchorMouseEnter is called',\n     () => {\n       const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.handleAnchorMouseLeave();\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS / 2);\n       foundation.handleAnchorMouseEnter();\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS / 2);\n\n       expect((foundation as any).showTimeout).not.toEqual(null);\n     });\n\n  it(`#handleAnchorBlur hides the tooltip immediately for plain tooltips`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleAnchorBlur();\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur hides the tooltip immediately when focus changes to non-HTMLElement related target for default rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleAnchorBlur({});\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur hides the tooltip immediately when focus changes to related target not within tooltip for default rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n\n       const mockFocusEvent = {relatedTarget: document.createElement('div')};\n       foundation.show();\n       (foundation as any).handleAnchorBlur(mockFocusEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur doesn't hide the tooltip when focus changes to related target not within tooltip for default rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n\n       const mockFocusEvent = {relatedTarget: document.createElement('div')};\n       foundation.show();\n       (foundation as any).handleAnchorBlur(mockFocusEvent);\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur hides the tooltip immediately when focus changes to non-HTMLElement related target for persistent rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n\n       foundation.show();\n       (foundation as any).handleAnchorBlur({});\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur hides the tooltip immediately when focus changes to related target not within tooltip for persistent rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n\n       const mockFocusEvent = {relatedTarget: document.createElement('div')};\n       foundation.show();\n       (foundation as any).handleAnchorBlur(mockFocusEvent);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorBlur doesn't hide the tooltip when focus changes to related target within tooltip for persistent rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n\n       const mockFocusEvent = {relatedTarget: document.createElement('div')};\n       foundation.show();\n       (foundation as any).handleAnchorBlur(mockFocusEvent);\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleDocumentClick hides the tooltip immediately`, () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    const mockClickEvent = createMouseEvent('click');\n\n    foundation.show();\n    foundation.handleDocumentClick(mockClickEvent);\n\n    expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n  });\n\n  it(`#handleAnchorMouseEnter shows the tooltip after a ${\n         numbers.SHOW_DELAY_MS}ms delay`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorMouseEnter();\n       expect((foundation as any).showTimeout).not.toEqual(null);\n\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it('#handleAnchorMouseEnter clears any pending hideTimeout', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.handleAnchorMouseLeave();\n    expect((foundation as any).hideTimeout).not.toEqual(null);\n\n    foundation.handleAnchorMouseEnter();\n\n    expect((foundation as any).hideTimeout).toEqual(null);\n  });\n\n  it(`#handleAnchorFocus shows the tooltip after a ${\n         numbers.SHOW_DELAY_MS}ms delay if relatedTarget is not a HTMLElement`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.handleAnchorFocus({relatedTarget: null} as FocusEvent);\n       expect((foundation as any).showTimeout).not.toEqual(null);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorFocus shows the tooltip if the relatedTarget is not within tooltip`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n\n       foundation.handleAnchorFocus(\n           {relatedTarget: document.createElement('div')} as unknown as\n           FocusEvent);\n       expect((foundation as any).showTimeout).not.toEqual(null);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorFocus doesn't show the tooltip if the relatedTarget is within tooltip`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.isInstanceOfElement.and.returnValue(true);\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n\n       foundation.handleAnchorFocus(\n           {relatedTarget: document.createElement('div')} as unknown as\n           FocusEvent);\n       expect((foundation as any).showTimeout).toEqual(null);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n       expect(mockAdapter.removeAttribute)\n           .not.toHaveBeenCalledWith('aria-hidden');\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(CssClasses.SHOWING);\n     });\n\n  it(`#handleAnchorClick shows the tooltip immediately when tooltip is hidden for persistent rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n\n       expect(foundation.isShown()).toBeFalse();\n       foundation.handleAnchorClick();\n\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorClick hides the tooltip immediately when tooltip is shown for persistent rich tooltips`,\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n\n       foundation.show();\n       foundation.handleAnchorClick();\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`#handleTooltipMouseEnter shows plain tooltips immediately`, () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    (foundation as any).handleTooltipMouseEnter();\n    expectTooltipToHaveBeenShown(foundation, mockAdapter);\n  });\n\n  it(`#handleTooltipMouseLeave hides plain tooltips after a ${\n         numbers.HIDE_DELAY_MS}ms delay`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleTooltipMouseLeave();\n       expect((foundation as any).hideTimeout).not.toEqual(null);\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleTooltipMouseLeave clears any pending showTimeout for plain tooltips',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n\n       foundation.handleAnchorMouseEnter();\n       expect((foundation as any).showTimeout).not.toEqual(null);\n       (foundation as any).handleTooltipMouseLeave();\n\n       expect((foundation as any).showTimeout).toEqual(null);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n       expect(mockAdapter.removeAttribute)\n           .not.toHaveBeenCalledWith('aria-hidden');\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(CssClasses.SHOWING);\n     });\n\n  it(`#handleTooltipMouseEnter shows rich tooltips immediately`, () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n    (foundation as any).handleTooltipMouseEnter();\n\n    expectTooltipToHaveBeenShown(foundation, mockAdapter);\n  });\n\n  it(`#handleTooltipMouseLeave hides rich tooltips after a ${\n         numbers.HIDE_DELAY_MS}ms delay`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleTooltipMouseLeave();\n       expect((foundation as any).hideTimeout).not.toEqual(null);\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleTooltipMouseLeave clears any pending showTimeout for rich tooltips',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.handleAnchorMouseEnter();\n       expect((foundation as any).showTimeout).not.toEqual(null);\n       (foundation as any).handleTooltipMouseLeave();\n\n       expect((foundation as any).showTimeout).toEqual(null);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n       expect(mockAdapter.removeAttribute)\n           .not.toHaveBeenCalledWith('aria-hidden');\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(CssClasses.SHOWING);\n     });\n\n  it('#handleRichTooltipFocusOut hides the tooltip immediately if there is no related target',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleRichTooltipFocusOut({});\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleRichTooltipFocusOut leaves tooltip open if related target is null and tooltip is interactive',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isInteractive: true});\n\n       foundation.show();\n       (foundation as any).handleRichTooltipFocusOut({relatedTarget: null});\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleRichTooltipFocusOut  hides the tooltip immediately if related target is null and tooltip is not interactive',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       (foundation as any).handleRichTooltipFocusOut({relatedTarget: null});\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleRichTooltipFocusOut hides the tooltip immediately if related target is not within the anchor or the tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       mockAdapter.anchorContainsElement.and.returnValue(false);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n       (foundation as any).handleRichTooltipFocusOut({\n         relatedTarget: document.createElement('div')\n       });\n\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleRichTooltipFocusOut does not hide the tooltip if related target is within the anchor',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       mockAdapter.anchorContainsElement.and.returnValue(true);\n       mockAdapter.tooltipContainsElement.and.returnValue(false);\n       (foundation as any).handleRichTooltipFocusOut({\n         relatedTarget: document.createElement('div')\n       });\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleRichTooltipFocusOut does not hide the tooltip if related target is within the tooltip',\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n       foundation.show();\n       mockAdapter.anchorContainsElement.and.returnValue(false);\n       mockAdapter.tooltipContainsElement.and.returnValue(true);\n       (foundation as any).handleRichTooltipFocusOut({\n         relatedTarget: document.createElement('div')\n       });\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it(`does not re-animate a tooltip already shown in the dom (from focus)`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorFocus({relatedTarget: null} as FocusEvent);\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n       foundation.handleAnchorMouseLeave();\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS / 2);\n       foundation.handleAnchorFocus({relatedTarget: null} as FocusEvent);\n\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(3);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(3);\n     });\n\n  it(`does not re-animate a tooltip already shown in the dom (from mouseenter)`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorMouseEnter();\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n\n       foundation.handleAnchorMouseLeave();\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS / 2);\n       foundation.handleAnchorMouseEnter();\n\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(3);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.addClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(3);\n     });\n\n  it('#handleAnchorMouseLeave clears any pending showTimeout', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.handleAnchorMouseEnter();\n    expect((foundation as any).showTimeout).not.toEqual(null);\n    foundation.handleAnchorMouseLeave();\n    expect((foundation as any).showTimeout).toEqual(null);\n\n    jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n    expect(mockAdapter.removeAttribute).not.toHaveBeenCalledWith('aria-hidden');\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWING);\n  });\n\n  it('#handleTooltipMouseEnter keeps tooltip visible', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n    foundation.handleAnchorMouseLeave();\n    expect((foundation as any).hideTimeout).not.toEqual(null);\n    (foundation as any).handleTooltipMouseEnter();\n\n    expect((foundation as any).hideTimeout).toEqual(null);\n    expect(mockAdapter.setAttribute)\n        .not.toHaveBeenCalledWith('aria-hidden', 'true');\n    expect(foundation.isShown()).toBeTrue();\n  });\n\n  it('#hide clears any pending showTimeout', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.handleAnchorMouseEnter();\n    expect((foundation as any).showTimeout).not.toEqual(null);\n    foundation.hide();\n    expect((foundation as any).showTimeout).toEqual(null);\n\n    jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n    expect(mockAdapter.removeAttribute).not.toHaveBeenCalledWith('aria-hidden');\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWING);\n  });\n\n  it(`#handleAnchorTouchstart shows a tooltip if the user long-presses for ${\n         numbers.SHOW_DELAY_MS}ms`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorTouchstart();\n\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it(`#handleAnchorTouchstart adds event handler for \"contextmenu\" event`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorTouchstart();\n\n       expect(mockAdapter.registerWindowEventHandler)\n           .toHaveBeenCalledWith('contextmenu', jasmine.any(Function));\n     });\n\n  it(`#handleAnchorTouchend clears any pending showTimeout`, () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.handleAnchorTouchstart();\n\n    expect((foundation as any).showTimeout).not.toEqual(null);\n    foundation.handleAnchorTouchend();\n    expect((foundation as any).showTimeout).toEqual(null);\n\n    jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n    expect(mockAdapter.removeAttribute).not.toHaveBeenCalledWith('aria-hidden');\n    expect(mockAdapter.removeClass).not.toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWING);\n  });\n\n  it(`#handleAnchorTouchend removes event handler for \"contextmenu\" event if tooltip is not shown`,\n     () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.handleAnchorTouchstart();\n       foundation.handleAnchorTouchend();\n\n       expect(mockAdapter.registerWindowEventHandler)\n           .toHaveBeenCalledWith('contextmenu', jasmine.any(Function));\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('contextmenu', jasmine.any(Function));\n     });\n\n  it('#hide deregisters \"contextmenu\" event listeners on the window', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    foundation.handleAnchorTouchstart();\n    jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n    foundation.hide();\n\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('contextmenu', jasmine.any(Function));\n  });\n\n  it('properly calculates tooltip position (START alignment)', () => {\n    const anchorHeight = 35;\n    const expectedTooltipHeight = anchorHeight + numbers.BOUNDED_ANCHOR_GAP;\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue({\n      top: 0,\n      bottom: anchorHeight,\n      left: 32,\n      right: 82,\n      width: 50,\n      height: anchorHeight\n    });\n    mockAdapter.getTooltipSize.and.returnValue({width: 100, height: 30});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipHeight}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `32px`);\n  });\n\n  it('properly sets tooltip transform origin (left top)', () => {\n    const anchorHeight = 35;\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue({\n      top: 0,\n      bottom: anchorHeight,\n      left: 32,\n      right: 82,\n      width: 50,\n      height: anchorHeight\n    });\n    mockAdapter.getTooltipSize.and.returnValue({width: 100, height: 30});\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'left top');\n  });\n\n  it('properly calculates tooltip position (END alignment)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 400, right: 450, width: 50, height: 35};\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n    const tooltipSize = {width: 100, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(480);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `350px`);\n  });\n\n  it('properly sets tooltip transform origin (right top)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 400, right: 450, width: 50, height: 35};\n    const tooltipSize = {width: 100, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(480);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'right top');\n  });\n\n  it('properly calculates tooltip position (CENTER alignment)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n    const tooltipSize = {width: 40, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `80px`);\n  });\n\n  it('properly sets tooltip transform origin (center top)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};\n    const tooltipSize = {width: 40, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'center top');\n  });\n\n  it('properly calculates tooltip position with an UNBOUNDED anchor', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, width: 200, height: 35} as DOMRect;\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.UNBOUNDED_ANCHOR_GAP;\n    const tooltipSize = {width: 40, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setAnchorBoundaryType(AnchorBoundaryType.UNBOUNDED);\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `80px`);\n  });\n\n  it('sets width of rich tooltip after positioning', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    const testWidth = '50px';\n    mockAdapter.getComputedStyleProperty.and.returnValue(testWidth);\n    mockAdapter.getViewportWidth.and.returnValue(300);\n\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('width', testWidth);\n  });\n\n  it('sets width of rich tooltip so it fits in small viewports', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    const testWidth = '230px';\n    mockAdapter.getComputedStyleProperty.and.returnValue(testWidth);\n    mockAdapter.getViewportWidth.and.returnValue(150);\n\n    foundation.show();\n\n    // expected width is 150 - (2 * MIN_VIEWPORT_THRESHOLD) => 150 - 16\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('width', '134px');\n  });\n\n  it('maintains a min width for rich tooltips when in a small viewport', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    const testWidth = '50px';\n    mockAdapter.getComputedStyleProperty.and.returnValue(testWidth);\n    mockAdapter.getViewportWidth.and.returnValue(20);\n\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('width', '40px');\n  });\n\n  it('properly calculates rich tooltip position (START alignment)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 100, right: 150, width: 50, height: 35};\n    const parentBoundingRect =\n        {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop = anchorBoundingRect.height +\n        numbers.BOUNDED_ANCHOR_GAP - parentBoundingRect.top;\n    const expectedTooltipLeft =\n        anchorBoundingRect.left - tooltipSize.width - parentBoundingRect.left;\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(150);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly sets rich tooltip transform origin (right top)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 100, right: 150, width: 50, height: 35};\n    const parentBoundingRect =\n        {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(150);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'right top');\n  });\n\n  it('properly calculates rich tooltip position (END alignment)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 50, width: 50, height: 35};\n    const parentBoundingRect =\n        {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n    const expectedTooltipTop = anchorBoundingRect.height +\n        numbers.BOUNDED_ANCHOR_GAP - parentBoundingRect.top;\n    const expectedTooltipLeft =\n        anchorBoundingRect.right - parentBoundingRect.left;\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(150);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates rich tooltip transform origin (left top)', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 50, width: 50, height: 35};\n    const parentBoundingRect =\n        {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(150);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'left top');\n  });\n\n  it('allows users to specify the tooltip position for plain tooltips (START alignment instead of CENTER)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 32, right: 232, width: 200, height: 35};\n       const expectedTooltipTop =\n           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n       const tooltipSize = {width: 40, height: 30};\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({xPos: XPosition.START});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `32px`);\n     });\n\n  it('ignores user specification if positioning violates threshold for plain tooltips (CENTER alignment instead of START)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};\n       const expectedTooltipTop =\n           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n       const tooltipSize = {width: 40, height: 30};\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({xPos: XPosition.START});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `80px`);\n     });\n\n  it('allows users to specify the tooltip position for plain tooltips (END alignment instead of START)',\n     () => {\n       const anchorHeight = 35;\n       const expectedTooltipHeight = anchorHeight + numbers.BOUNDED_ANCHOR_GAP;\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue({\n         top: 0,\n         bottom: anchorHeight,\n         left: 0,\n         right: 100,\n         width: 100,\n         height: anchorHeight\n       });\n       mockAdapter.getTooltipSize.and.returnValue({width: 50, height: 30});\n\n       foundation.setTooltipPosition({xPos: XPosition.END});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipHeight}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `50px`);\n     });\n\n  it('allows users to specify the tooltip position for rich tooltips (END alignment instead of START)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 132, right: 232, width: 100, height: 35};\n       const parentBoundingRect =\n           {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n       const expectedTooltipTop = anchorBoundingRect.height +\n           numbers.BOUNDED_ANCHOR_GAP - parentBoundingRect.top;\n       const expectedTooltipLeft = anchorBoundingRect.left - tooltipSize.width -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({xPos: XPosition.START});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('ignores user specification if positioning violates threshold for rich tooltips (END alignment instead of START)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};\n       const parentBoundingRect =\n           {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n       const expectedTooltipTop = anchorBoundingRect.height +\n           numbers.BOUNDED_ANCHOR_GAP - parentBoundingRect.top;\n       const expectedTooltipLeft =\n           anchorBoundingRect.right - parentBoundingRect.left;\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n\n       foundation.setTooltipPosition({xPos: XPosition.START});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('ignores user specification if positioning is not supported for rich tooltips (END alignment instead of CENTER)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 0, right: 100, width: 100, height: 35};\n       const parentBoundingRect =\n           {top: 5, bottom: 35, left: 0, right: 50, width: 50, height: 30};\n       const expectedTooltipTop = anchorBoundingRect.height +\n           numbers.BOUNDED_ANCHOR_GAP - parentBoundingRect.top;\n       const expectedTooltipLeft =\n           anchorBoundingRect.right - parentBoundingRect.left;\n       const {foundation, mockAdapter} =\n           setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n\n       foundation.setTooltipPosition({xPos: XPosition.CENTER});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates START tooltip position in RTL', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 100, width: 100, height: 35};\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition({xPos: XPosition.START});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `50px`);\n  });\n\n  it('properly calculates \"right top\" transform origin in RTL', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 100, width: 100, height: 35};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition({xPos: XPosition.START});\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'right top');\n  });\n\n  it('properly calculates END tooltip position in RTL', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 32, right: 132, width: 100, height: 35};\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition({xPos: XPosition.END});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', `32px`);\n  });\n\n  it('properly calculates \"left top\" transform origin in RTL', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 32, right: 132, width: 100, height: 35};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition({xPos: XPosition.END});\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'left top');\n  });\n\n  it('positions tooltip within viewport if threshold cannot be maintained (x-axis)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 450, right: 500, width: 50, height: 35};\n       const expectedTooltipTop =\n           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n       const tooltipSize = {width: 100, height: 30};\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `400px`);\n     });\n\n  it('allows users to specify a position within viewport if threshold cannot be maintained (START alignment instead of CENTER)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 10, right: 60, width: 50, height: 35};\n       const expectedTooltipTop =\n           anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n       const tooltipSize = {width: 60, height: 30};\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportWidth.and.returnValue(500);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; width: number;\n       //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({xPos: XPosition.START});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `10px`);\n     });\n\n  it('properly calculates tooltip y-position (ABOVE alignment)', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 125, left: 10, right: 60, width: 50, height: 25};\n    const tooltipSize = {width: 60, height: 20};\n    const expectedTooltipTop = anchorBoundingRect.top -\n        (numbers.BOUNDED_ANCHOR_GAP + tooltipSize.height);\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    mockAdapter.getViewportHeight.and.returnValue(300);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setTooltipPosition({yPos: YPosition.ABOVE});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n  });\n\n  it('properly calculates tooltip transform origin (left bottom)', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 125, left: 10, right: 60, width: 50, height: 25};\n    const tooltipSize = {width: 60, height: 20};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    mockAdapter.getViewportHeight.and.returnValue(300);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setTooltipPosition({yPos: YPosition.ABOVE});\n    foundation.show();\n    expect(mockAdapter.setSurfaceAnimationStyleProperty)\n        .toHaveBeenCalledWith('transform-origin', 'left bottom');\n  });\n\n  it('properly calculates tooltip y-position (BELOW alignment)', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 125, left: 10, right: 60, width: 50, height: 25};\n    const tooltipSize = {width: 60, height: 20};\n    const expectedTooltipTop =\n        anchorBoundingRect.bottom + numbers.BOUNDED_ANCHOR_GAP;\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    mockAdapter.getViewportHeight.and.returnValue(300);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setTooltipPosition({yPos: YPosition.BELOW});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n  });\n\n  it('positions tooltip within viewport if threshold cannot be maintained (y-axis)',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 30, left: 450, right: 500, width: 50} as DOMRect;\n       const expectedTooltipTop =\n           anchorBoundingRect.bottom + numbers.BOUNDED_ANCHOR_GAP;\n       const tooltipSize = {width: 100, height: 30};\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportHeight.and.returnValue(70);\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n     });\n\n  it('ignores user specification if positioning violates threshold (BELOW alignment instead of ABOVE)',\n     () => {\n       const anchorBoundingRect =\n           {top: 40, bottom: 70, left: 450, right: 500, width: 50} as DOMRect;\n       const tooltipSize = {width: 100, height: 30};\n       const expectedTooltipTop =\n           anchorBoundingRect.bottom + numbers.BOUNDED_ANCHOR_GAP;\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportHeight.and.returnValue(140);\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({yPos: YPosition.ABOVE});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n     });\n\n  it('allows users to specify a position within viewport if threshold cannot be maintained (ABOVE alignment instead of BELOW)',\n     () => {\n       const anchorBoundingRect =\n           {top: 40, bottom: 70, left: 450, right: 500, width: 50} as DOMRect;\n       const tooltipSize = {width: 100, height: 30};\n       const expectedTooltipTop = anchorBoundingRect.top -\n           (numbers.BOUNDED_ANCHOR_GAP + tooltipSize.height);\n\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.getViewportHeight.and.returnValue(110);\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       foundation.setTooltipPosition({yPos: YPosition.ABOVE});\n       foundation.show();\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n     });\n\n  it('properly calculates tooltip position SIDE_END', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 140, left: 0, right: 100, width: 100, height: 40};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportHeight.and.returnValue(500);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setTooltipPosition(\n        {xPos: XPosition.SIDE_END, yPos: YPosition.SIDE});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('top', '105px');\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', '104px');\n  });\n\n  it('properly calculates tooltip position SIDE_START in RTL', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 140, left: 0, right: 100, width: 100, height: 40};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportHeight.and.returnValue(500);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition(\n        {xPos: XPosition.SIDE_START, yPos: YPosition.SIDE});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('top', '105px');\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', '104px');\n  });\n\n  it('properly calculates tooltip position SIDE_START', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 140, left: 100, right: 200, width: 100, height: 40};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportHeight.and.returnValue(500);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n    foundation.setTooltipPosition(\n        {xPos: XPosition.SIDE_START, yPos: YPosition.SIDE});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('top', '105px');\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', '46px');\n  });\n\n  it('properly calculates tooltip position SIDE_END in RTL', () => {\n    const anchorBoundingRect =\n        {top: 100, bottom: 140, left: 100, right: 200, width: 100, height: 40};\n    const tooltipSize = {width: 50, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportHeight.and.returnValue(500);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.isRTL.and.returnValue(true);\n\n    foundation.setTooltipPosition(\n        {xPos: XPosition.SIDE_END, yPos: YPosition.SIDE});\n    foundation.show();\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('top', '105px');\n    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('left', '46px');\n  });\n\n  it('#destroy clears showTimeout', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.handleAnchorMouseEnter();\n    foundation.destroy();\n\n    expect((foundation as any).showTimeout).toEqual(null);\n  });\n\n  it('#destroy clears requestAnimationFrame from show', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.show();\n    expect(foundation['frameId']).not.toEqual(null);\n    foundation.destroy();\n    jasmine.clock().tick(ANIMATION_FRAME);\n\n    expect(foundation['frameId']).toEqual(null);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n    // 1 call from show and 5 calls from destroy\n    expect(mockAdapter.removeClass).toHaveBeenCalledTimes(6);\n    expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.addClass)\n        .not.toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n  });\n\n  it('#destroy clears hideTimeout', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.handleAnchorMouseLeave();\n    foundation.destroy();\n\n    expect((foundation as any).hideTimeout).toEqual(null);\n  });\n\n  it('#destroy removes tooltip classes', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.destroy();\n\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWN);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n    expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n    expect(mockAdapter.removeClass)\n        .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n  });\n\n  it('#destroy cancels all animation frame requests', () => {\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n\n    (foundation as any).handleWindowChangeEvent();\n    foundation.destroy();\n\n    expect(foundation['animFrame']['rafIDs'].size).toEqual(0);\n  });\n\n  it('#destroy removes the event listeners for plain tooltips', () => {\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('mouseenter', jasmine.any(Function));\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('mouseleave', jasmine.any(Function));\n    expect(mockAdapter.deregisterEventHandler)\n        .not.toHaveBeenCalledWith('focusout', jasmine.any(Function));\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('resize', jasmine.any(Function));\n    expect(mockAdapter.deregisterAnchorEventHandler)\n        .toHaveBeenCalledWith('blur', jasmine.any(Function));\n  });\n\n  it('#destroy removes the event listeners for default rich tooltips', () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTestForRichTooltip(MDCTooltipFoundation);\n\n    foundation.destroy();\n\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('focusout', jasmine.any(Function));\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('mouseenter', jasmine.any(Function));\n    expect(mockAdapter.deregisterEventHandler)\n        .toHaveBeenCalledWith('mouseleave', jasmine.any(Function));\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('click', jasmine.any(Function));\n    expect(mockAdapter.deregisterDocumentEventHandler)\n        .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n    expect(mockAdapter.deregisterWindowEventHandler)\n        .toHaveBeenCalledWith('resize', jasmine.any(Function));\n  });\n\n  it('#destroy removes the event listeners for persistent rich tooltips',\n     () => {\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n\n       foundation.destroy();\n\n       expect(mockAdapter.deregisterEventHandler)\n           .toHaveBeenCalledWith('focusout', jasmine.any(Function));\n       expect(mockAdapter.deregisterEventHandler)\n           .not.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));\n       expect(mockAdapter.deregisterEventHandler)\n           .not.toHaveBeenCalledWith('mouseleave', jasmine.any(Function));\n       expect(mockAdapter.deregisterDocumentEventHandler)\n           .toHaveBeenCalledWith('click', jasmine.any(Function));\n       expect(mockAdapter.deregisterDocumentEventHandler)\n           .toHaveBeenCalledWith('keydown', jasmine.any(Function));\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('scroll', jasmine.any(Function));\n       expect(mockAdapter.deregisterWindowEventHandler)\n           .toHaveBeenCalledWith('resize', jasmine.any(Function));\n     });\n\n  it('recalculates position of tooltip if anchor position changes', () => {\n    const anchorBoundingRect =\n        {top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};\n    const expectedTooltipTop =\n        anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;\n    const expectedTooltipLeft = 80;\n    const tooltipSize = {width: 40, height: 30};\n\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n    mockAdapter.getViewportWidth.and.returnValue(500);\n    mockAdapter.getViewportHeight.and.returnValue(500);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    mockAdapter.registerWindowEventHandler.and.callFake(\n        // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n        // error suppression.\n        //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(ev:\n        //  string, handler: EventListener) => void' is not assignable to\n        //  parameter of type '<K extends keyof\n        //  GlobalEventHandlersEventMap>(eventType: K, handler:\n        //  SpecificEventListener<K>) => void'.\n        (ev: string, handler: EventListener) => {\n          window.addEventListener(ev, handler);\n        });\n\n    foundation.show();\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n\n    const yPositionDiff = 50;\n    const xPositionDiff = 20;\n    const newAnchorBoundingRect = {\n      top: anchorBoundingRect.top + yPositionDiff,\n      bottom: anchorBoundingRect.bottom + yPositionDiff,\n      left: anchorBoundingRect.left + xPositionDiff,\n      right: anchorBoundingRect.right + xPositionDiff,\n      width: anchorBoundingRect.width,\n      height: anchorBoundingRect.height,\n    };\n\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(newAnchorBoundingRect);\n    emitEvent(window, 'resize');\n    jasmine.clock().tick(1);\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop + yPositionDiff}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith(\n            'left', `${expectedTooltipLeft + xPositionDiff}px`);\n  });\n\n  it('doesn\\'t recalculates position of tooltip if anchor is scrolled above viewport',\n     () => {\n       const anchorBoundingRect =\n           {top: 0, bottom: 35, left: 200, right: 250, height: 35};\n       const parentBoundingRect =\n           {top: 5, bottom: 40, left: 100, right: 150, height: 35};\n       const tooltipSize = {width: 40, height: 30};\n\n       const scrollableAncestor = document.createElement('div');\n       scrollableAncestor.setAttribute('id', 'scrollable');\n       document.body.appendChild(scrollableAncestor);\n\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.getViewportWidth.and.returnValue(300);\n       mockAdapter.getViewportHeight.and.returnValue(150);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       mockAdapter.registerWindowEventHandler.and.callFake(\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(ev:\n           //  string, handler: EventListener) => void' is not assignable to\n           //  parameter of type '<K extends keyof\n           //  GlobalEventHandlersEventMap>(eventType: K, handler:\n           //  SpecificEventListener<K>) => void'.\n           (ev: string, handler: EventListener) => {\n             window.addEventListener(ev, handler);\n           });\n       foundation.show();\n\n       const yPositionDiff = 50;\n       const newAnchorBoundingRect = {\n         top: anchorBoundingRect.top - yPositionDiff,\n         bottom: anchorBoundingRect.bottom - yPositionDiff,\n         left: anchorBoundingRect.left,\n         right: anchorBoundingRect.right,\n         height: anchorBoundingRect.height\n       };\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(newAnchorBoundingRect);\n\n       // Reset spy on setStyleProperty so we can verify it is not called again\n       // after the scroll event.\n       mockAdapter.setStyleProperty.calls.reset();\n       emitEvent(window, 'scroll');\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.setStyleProperty).not.toHaveBeenCalled();\n     });\n\n  it('doesn\\'t recalculates position of tooltip if anchor is scrolled below viewport',\n     () => {\n       const anchorBoundingRect =\n           {top: 110, bottom: 145, left: 200, right: 250, height: 35};\n       const parentBoundingRect =\n           {top: 115, bottom: 150, left: 100, right: 150, height: 35};\n       const tooltipSize = {width: 40, height: 30};\n\n       const scrollableAncestor = document.createElement('div');\n       scrollableAncestor.setAttribute('id', 'scrollable');\n       document.body.appendChild(scrollableAncestor);\n\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n       mockAdapter.getViewportWidth.and.returnValue(300);\n       mockAdapter.getViewportHeight.and.returnValue(150);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n\n       mockAdapter.registerWindowEventHandler.and.callFake(\n           // TODO: Wait until b/208710526 is fixed, then remove this\n           // autogenerated error suppression.\n           //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '(ev:\n           //  string, handler: EventListener) => void' is not assignable to\n           //  parameter of type '<K extends keyof\n           //  GlobalEventHandlersEventMap>(eventType: K, handler:\n           //  SpecificEventListener<K>) => void'.\n           (ev: string, handler: EventListener) => {\n             window.addEventListener(ev, handler);\n           });\n       foundation.show();\n\n       const newAnchorBoundingRect = {\n         top: anchorBoundingRect.top + 50,\n         bottom: anchorBoundingRect.bottom + 50,\n         left: anchorBoundingRect.left,\n         right: anchorBoundingRect.right,\n         height: anchorBoundingRect.height\n       };\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; bottom: number; left: number; right: number; height: number;\n       //  }' is not assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(newAnchorBoundingRect);\n\n       // Reset spy on setStyleProperty so we can verify it is not called again\n       // after the scroll event.\n       mockAdapter.setStyleProperty.calls.reset();\n       emitEvent(window, 'scroll');\n       jasmine.clock().tick(1);\n\n       expect(mockAdapter.setStyleProperty).not.toHaveBeenCalled();\n     });\n\n  it('#show registers additional user-specified scroll handlers', () => {\n    const scrollableAncestor = document.createElement('div');\n    scrollableAncestor.setAttribute('id', 'scrollable');\n    document.body.appendChild(scrollableAncestor);\n    const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);\n\n    foundation.attachScrollHandler((event, handler) => {\n      scrollableAncestor.addEventListener(event, handler);\n    });\n    foundation.show();\n\n    emitEvent(scrollableAncestor, 'scroll');\n    jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n\n    expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n  });\n\n  it('#hide deregisters additional user-specified scroll handlers', () => {\n    const scrollableAncestor = document.createElement('div');\n    scrollableAncestor.setAttribute('id', 'scrollable');\n    document.body.appendChild(scrollableAncestor);\n    const {foundation} = setUpFoundationTest(MDCTooltipFoundation);\n\n    spyOn(foundation, 'hide').and.callThrough();\n\n    foundation.attachScrollHandler((event, handler) => {\n      scrollableAncestor.addEventListener(event, handler);\n    });\n    foundation.removeScrollHandler((event, handler) => {\n      scrollableAncestor.removeEventListener(event, handler);\n    });\n    foundation.show();\n    foundation.hide();\n\n    emitEvent(scrollableAncestor, 'scroll');\n    jasmine.clock().tick(1);\n\n    expect(foundation.hide).toHaveBeenCalledTimes(1);\n  });\n\n  it('persistent tooltip remains visible if user specified ancestor is scrolled',\n     () => {\n       const scrollableAncestor = document.createElement('div');\n       scrollableAncestor.setAttribute('id', 'scrollable');\n       document.body.appendChild(scrollableAncestor);\n\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {isPersistent: true});\n\n       foundation.attachScrollHandler((event, handler) => {\n         scrollableAncestor.addEventListener(event, handler);\n       });\n       foundation.show();\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n\n       emitEvent(scrollableAncestor, 'scroll');\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n\n       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  for (const pos of CARET_POSITION_STYLES.keys()) {\n    it(`correctly positions a ${pos} aligned caret`, () => {\n      const anchorBoundingRect =\n          {top: 200, bottom: 235, left: 350, right: 400, width: 50, height: 35};\n      const tooltipSize = {width: 300, height: 150};\n\n      const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n          MDCTooltipFoundation, {hasCaret: true});\n\n      mockAdapter.getViewportWidth.and.returnValue(850);\n      mockAdapter.getViewportHeight.and.returnValue(800);\n      // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n      // error suppression.\n      //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n      //  number; bottom: number; left: number; right: number; width: number;\n      //  height: number; }' is not assignable to parameter of type 'DOMRect'.\n      mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n      mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n      mockAdapter.isRTL.and.returnValue(false);\n      mockAdapter.getComputedStyleProperty.withArgs('width').and.returnValue(\n          RICH_TOOLTIP_WIDTH);\n      mockAdapter.getComputedStyleProperty.withArgs('height').and.returnValue(\n          RICH_TOOLTIP_HEIGHT);\n      mockAdapter.getTooltipCaretBoundingRect.and.returnValue(\n          // TODO: Wait until b/208710526 is fixed, then remove this\n          // autogenerated error suppression.\n          //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n          //  number; height: number; }' is not assignable to parameter of type\n          //  'DOMRect'.\n          {width: CARET_WIDTH, height: CARET_HEIGHT});\n\n      foundation.setTooltipPosition({withCaretPos: pos});\n      foundation.show();\n\n      const styleValues = CARET_POSITION_STYLES.get(pos)!;\n      expect(mockAdapter.setTooltipCaretStyle)\n          .toHaveBeenCalledWith(styleValues.yAlignment, styleValues.yAxisPx);\n      expect(mockAdapter.setTooltipCaretStyle)\n          .toHaveBeenCalledWith(styleValues.xAlignment, styleValues.xAxisPx);\n      expect(mockAdapter.setTooltipCaretStyle)\n          .toHaveBeenCalledWith(\n              'transform',\n              `rotate(${styleValues.rotation}deg) skewY(${\n                  styleValues.skew}deg) scaleX(${styleValues.scaleX})`);\n      expect(mockAdapter.setTooltipCaretStyle)\n          .toHaveBeenCalledWith(\n              'transform-origin',\n              `${styleValues.xAlignment} ${styleValues.yAlignment}`);\n      expect(mockAdapter.setSurfaceAnimationStyleProperty)\n          .toHaveBeenCalledWith(\n              'transform-origin',\n              `${styleValues.xTransformOrigin} ${\n                  styleValues.yTransformOrigin}`);\n    });\n  }\n\n  it('properly calculates tooltip with caret position (ABOVE_START)', () => {\n    const anchorBoundingRect =\n        {top: 200, bottom: 235, left: 350, right: 400, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop =\n        (anchorBoundingRect.top -\n         (numbers.BOUNDED_ANCHOR_GAP + tooltipSize.height + CARET_HEIGHT / 2)) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (ABOVE_CENTER)', () => {\n    const anchorBoundingRect = {top: 200, left: 10, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop =\n        (anchorBoundingRect.top -\n         (numbers.BOUNDED_ANCHOR_GAP + tooltipSize.height + CARET_HEIGHT / 2)) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (tooltipSize.width / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (ABOVE_END)', () => {\n    const anchorBoundingRect = {top: 200, left: 0, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop =\n        (anchorBoundingRect.top -\n         (numbers.BOUNDED_ANCHOR_GAP + tooltipSize.height + CARET_HEIGHT / 2)) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (tooltipSize.width - numbers.CARET_INDENTATION - CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (BELOW_START)', () => {\n    const anchorBoundingRect = {bottom: 35, left: 40, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop = (anchorBoundingRect.bottom +\n                                numbers.BOUNDED_ANCHOR_GAP + CARET_HEIGHT / 2) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(90);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ bottom:\n    //  number; left: number; width: number; height: number; }' is not\n    //  assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (BELOW_CENTER)', () => {\n    const anchorBoundingRect = {bottom: 35, left: 10, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop = (anchorBoundingRect.bottom +\n                                numbers.BOUNDED_ANCHOR_GAP + CARET_HEIGHT / 2) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (tooltipSize.width / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(90);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ bottom:\n    //  number; left: number; width: number; height: number; }' is not\n    //  assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (BELOW_END)', () => {\n    const anchorBoundingRect = {bottom: 35, left: 0, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipTop = (anchorBoundingRect.bottom +\n                                numbers.BOUNDED_ANCHOR_GAP + CARET_HEIGHT / 2) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (tooltipSize.width - numbers.CARET_INDENTATION - CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(90);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ bottom:\n    //  number; left: number; width: number; height: number; }' is not\n    //  assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (TOP_SIDE_START)', () => {\n    const anchorBoundingRect =\n        {top: 50, bottom: 85, left: 350, right: 400, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 50};\n\n    const expectedTooltipTop =\n        (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n         (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left -\n         (tooltipSize.width + numbers.BOUNDED_ANCHOR_GAP + CARET_HEIGHT / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  bottom: number; left: number; right: number; width: number; height:\n    //  number; }' is not assignable to parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (CENTER_SIDE_START)',\n     () => {\n       const anchorBoundingRect = {top: 25, left: 350, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 50};\n\n       const expectedTooltipTop =\n           (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n            tooltipSize.height / 2) -\n           parentBoundingRect.top;\n       const expectedTooltipLeft =\n           (anchorBoundingRect.left -\n            (tooltipSize.width + numbers.BOUNDED_ANCHOR_GAP +\n             CARET_HEIGHT / 2)) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(800);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates tooltip with caret position (BOTTOM_SIDE_START)',\n     () => {\n       const anchorBoundingRect = {top: 20, left: 350, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 60};\n\n       const expectedTooltipTop =\n           (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n            (tooltipSize.height - numbers.CARET_INDENTATION -\n             CARET_WIDTH / 2)) -\n           parentBoundingRect.top;\n       const expectedTooltipLeft =\n           (anchorBoundingRect.left -\n            (tooltipSize.width + numbers.BOUNDED_ANCHOR_GAP +\n             CARET_HEIGHT / 2)) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(105);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates tooltip with caret position (TOP_SIDE_END)', () => {\n    const anchorBoundingRect = {top: 50, right: 35, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 60};\n\n    const expectedTooltipTop =\n        (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n         (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n        parentBoundingRect.top;\n    const expectedTooltipLeft =\n        (anchorBoundingRect.right + numbers.BOUNDED_ANCHOR_GAP +\n         CARET_HEIGHT / 2) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(95);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  right: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret position (CENTER_SIDE_END)',\n     () => {\n       const anchorBoundingRect = {top: 22, right: 35, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 60};\n\n       const expectedTooltipTop =\n           (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n            tooltipSize.height / 2) -\n           parentBoundingRect.top;\n       const expectedTooltipLeft =\n           (anchorBoundingRect.right + numbers.BOUNDED_ANCHOR_GAP +\n            CARET_HEIGHT / 2) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(95);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; right: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       mockAdapter.isRTL.and.returnValue(false);\n       mockAdapter.getComputedStyleProperty.withArgs('width').and.returnValue(\n           RICH_TOOLTIP_WIDTH);\n       mockAdapter.getComputedStyleProperty.withArgs('height').and.returnValue(\n           RICH_TOOLTIP_HEIGHT);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates tooltip with caret position (BOTTOM_SIDE_END)',\n     () => {\n       const anchorBoundingRect = {top: 20, right: 35, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 60};\n\n       const expectedTooltipTop =\n           (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n            (tooltipSize.height - numbers.CARET_INDENTATION -\n             CARET_WIDTH / 2)) -\n           parentBoundingRect.top;\n       const expectedTooltipLeft =\n           (anchorBoundingRect.right + numbers.BOUNDED_ANCHOR_GAP +\n            CARET_HEIGHT / 2) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(95);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; right: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates tooltip with caret SIDE_END position in RTL', () => {\n    const anchorBoundingRect = {top: 200, left: 350, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left -\n         (tooltipSize.width + numbers.BOUNDED_ANCHOR_GAP + CARET_HEIGHT / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    mockAdapter.isRTL.and.returnValue(true);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n\n    foundation.setTooltipPosition(\n        {withCaretPos: PositionWithCaret.BOTTOM_SIDE_END});\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret SIDE_START position in RTL',\n     () => {\n       const anchorBoundingRect = {top: 200, right: 400, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n\n       const expectedTooltipLeft =\n           (anchorBoundingRect.right + numbers.BOUNDED_ANCHOR_GAP +\n            CARET_HEIGHT / 2) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(800);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; right: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       mockAdapter.isRTL.and.returnValue(true);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n\n       foundation.setTooltipPosition(\n           {withCaretPos: PositionWithCaret.BOTTOM_SIDE_START});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('properly calculates tooltip with caret START position in RTL', () => {\n    const anchorBoundingRect = {top: 200, left: 350, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (tooltipSize.width - numbers.CARET_INDENTATION - CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    mockAdapter.isRTL.and.returnValue(true);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n\n    foundation.setTooltipPosition(\n        {withCaretPos: PositionWithCaret.ABOVE_START});\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('properly calculates tooltip with caret END position in RTL', () => {\n    const anchorBoundingRect = {top: 200, left: 350, width: 50, height: 35};\n    const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n    const tooltipSize = {width: 40, height: 30};\n    const expectedTooltipLeft =\n        (anchorBoundingRect.left + anchorBoundingRect.width / 2 -\n         (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n        parentBoundingRect.left;\n    const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n        MDCTooltipFoundation, {hasCaret: true});\n    mockAdapter.getViewportWidth.and.returnValue(850);\n    mockAdapter.getViewportHeight.and.returnValue(800);\n    mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top: number;\n    //  left: number; width: number; height: number; }' is not assignable to\n    //  parameter of type 'DOMRect'.\n    mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n    mockAdapter.isRTL.and.returnValue(true);\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n    //  number; height: number; }' is not assignable to parameter of type\n    //  'DOMRect'.\n    mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n      width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n      height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n    });\n\n    foundation.setTooltipPosition({withCaretPos: PositionWithCaret.ABOVE_END});\n    foundation.show();\n\n    expect(mockAdapter.setStyleProperty)\n        .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n  });\n\n  it('allows users to specify the position for tooltips with carets (TOP_SIDE_START instead of ABOVE_START)',\n     () => {\n       const anchorBoundingRect = {top: 200, left: 350, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n\n       const expectedTooltipTop =\n           (anchorBoundingRect.top + anchorBoundingRect.height / 2 -\n            (numbers.CARET_INDENTATION + CARET_WIDTH / 2)) -\n           parentBoundingRect.top;\n       const expectedTooltipLeft =\n           (anchorBoundingRect.left -\n            (tooltipSize.width + numbers.BOUNDED_ANCHOR_GAP +\n             CARET_HEIGHT / 2)) -\n           parentBoundingRect.left;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(850);\n       mockAdapter.getViewportHeight.and.returnValue(800);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n\n       foundation.setTooltipPosition(\n           {withCaretPos: PositionWithCaret.TOP_SIDE_START});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n     });\n\n  it('ignores user specification if positioning violates threshold for tooltips with caret (BELOW alignment instead of ABOVE)',\n     () => {\n       const anchorBoundingRect = {bottom: 35, left: 40, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n       const expectedTooltipTop =\n           (anchorBoundingRect.bottom + numbers.BOUNDED_ANCHOR_GAP +\n            CARET_HEIGHT / 2) -\n           parentBoundingRect.top;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(90);\n       mockAdapter.getViewportHeight.and.returnValue(800);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ bottom:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n\n       foundation.setTooltipPosition(\n           {withCaretPos: PositionWithCaret.ABOVE_START});\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n     });\n\n  it('handles positioning for tooltip with caret when all possible positions are invalid (BELOW_END)',\n     () => {\n       const anchorBoundingRect = {top: -135, left: -40, width: 50, height: 35};\n       const parentBoundingRect = {top: 0, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(50);\n       mockAdapter.getViewportHeight.and.returnValue(50);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       mockAdapter.isRTL.and.returnValue(false);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       mockAdapter.getComputedStyleProperty.withArgs('width').and.returnValue(\n           RICH_TOOLTIP_WIDTH);\n       mockAdapter.getComputedStyleProperty.withArgs('height').and.returnValue(\n           RICH_TOOLTIP_HEIGHT);\n\n       foundation.setTooltipPosition(\n           {withCaretPos: PositionWithCaret.ABOVE_START});\n       foundation.show();\n\n       const expectedTooltipTop =\n           numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD + CARET_HEIGHT / 2;\n       const expectedTooltipLeft =\n           numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD + CARET_HEIGHT / 2;\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n\n       // Verify caret is styled for BELOW_END tooltip position\n       const styleValues =\n           CARET_POSITION_STYLES.get(PositionWithCaret.BELOW_END)!;\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.yAlignment, styleValues.yAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.xAlignment, styleValues.xAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform',\n               `rotate(${styleValues.rotation}deg) skewY(${\n                   styleValues.skew}deg) scaleX(${styleValues.scaleX})`);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform-origin',\n               `${styleValues.xAlignment} ${styleValues.yAlignment}`);\n     });\n\n  it('handles positioning for tooltip with caret when all possible positions are invalid (ABOVE_START)',\n     () => {\n       const anchorBoundingRect = {top: 135, left: 100, width: 50, height: 35};\n       const parentBoundingRect = {top: 0, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n       const viewportWidth = 50;\n       const viewportHeight = 50;\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(viewportWidth);\n       mockAdapter.getViewportHeight.and.returnValue(viewportHeight);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       mockAdapter.isRTL.and.returnValue(false);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       mockAdapter.getComputedStyleProperty.withArgs('width').and.returnValue(\n           RICH_TOOLTIP_WIDTH);\n       mockAdapter.getComputedStyleProperty.withArgs('height').and.returnValue(\n           RICH_TOOLTIP_HEIGHT);\n\n       foundation.show();\n\n       const expectedTooltipTop = viewportHeight -\n           (tooltipSize.height + numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD +\n            CARET_HEIGHT / 2);\n       const expectedTooltipLeft = viewportWidth -\n           (tooltipSize.width + numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD +\n            CARET_HEIGHT / 2);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n\n       // Verify caret is styled for ABOVE_START tooltip position\n       const styleValues =\n           CARET_POSITION_STYLES.get(PositionWithCaret.ABOVE_START)!;\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.yAlignment, styleValues.yAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.xAlignment, styleValues.xAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform',\n               `rotate(${styleValues.rotation}deg) skewY(${\n                   styleValues.skew}deg) scaleX(${styleValues.scaleX})`);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform-origin',\n               `${styleValues.xAlignment} ${styleValues.yAlignment}`);\n     });\n\n  it('handles positioning for tooltip with caret when all possible positions are invalid (in RTL)',\n     () => {\n       const anchorBoundingRect = {top: -135, left: -40, width: 50, height: 35};\n       const parentBoundingRect = {top: 0, left: 0, width: 50, height: 30};\n       const tooltipSize = {width: 40, height: 30};\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.isRTL.and.returnValue(true);\n       mockAdapter.getViewportWidth.and.returnValue(50);\n       mockAdapter.getViewportHeight.and.returnValue(50);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       mockAdapter.getComputedStyleProperty.withArgs('width').and.returnValue(\n           RICH_TOOLTIP_WIDTH);\n       mockAdapter.getComputedStyleProperty.withArgs('height').and.returnValue(\n           RICH_TOOLTIP_HEIGHT);\n\n       foundation.setTooltipPosition(\n           {withCaretPos: PositionWithCaret.ABOVE_START});\n       foundation.show();\n       const expectedTooltipTop =\n           numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD + CARET_HEIGHT / 2;\n       const expectedTooltipLeft =\n           numbers.MIN_VIEWPORT_TOOLTIP_THRESHOLD + CARET_HEIGHT / 2;\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);\n\n       // Verify caret is styled for BELOW_START tooltip position\n       const styleValues =\n           CARET_POSITION_STYLES_RTL.get(PositionWithCaret.BELOW_START)!;\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.yAlignment, styleValues.yAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(styleValues.xAlignment, styleValues.xAxisPx);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform',\n               `rotate(${styleValues.rotation}deg) skewY(${\n                   styleValues.skew}deg) scaleX(${styleValues.scaleX})`);\n       expect(mockAdapter.setTooltipCaretStyle)\n           .toHaveBeenCalledWith(\n               'transform-origin',\n               `${styleValues.xAlignment} ${styleValues.yAlignment}`);\n       expect(mockAdapter.setSurfaceAnimationStyleProperty)\n           .toHaveBeenCalledWith(\n               'transform-origin',\n               `${styleValues.xTransformOrigin} ${\n                   styleValues.yTransformOrigin}`);\n     });\n\n  it('handles positioning for tooltip with caret when only one dimension is within the viewport threshold (ABOVE_CENTER)',\n     () => {\n       const anchorBoundingRect = {top: 200, left: 10, width: 50, height: 35};\n       const parentBoundingRect = {top: 5, left: 0};\n       const tooltipSize = {width: 40, height: 30};\n       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(\n           MDCTooltipFoundation, {hasCaret: true});\n       mockAdapter.getViewportWidth.and.returnValue(60);\n       mockAdapter.getViewportHeight.and.returnValue(800);\n       mockAdapter.getTooltipSize.and.returnValue(tooltipSize);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; width: number; height: number; }' is not\n       //  assignable to parameter of type 'DOMRect'.\n       mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ top:\n       //  number; left: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getParentBoundingRect.and.returnValue(parentBoundingRect);\n       // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n       // error suppression.\n       //  @ts-ignore(go/unfork-jasmine-typings): Argument of type '{ width:\n       //  number; height: number; }' is not assignable to parameter of type\n       //  'DOMRect'.\n       mockAdapter.getTooltipCaretBoundingRect.and.returnValue({\n         width: CARET_WIDTH * numbers.ANIMATION_SCALE,\n         height: CARET_HEIGHT * numbers.ANIMATION_SCALE\n       });\n       foundation.show();\n\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('top', '145px');\n       expect(mockAdapter.setStyleProperty)\n           .toHaveBeenCalledWith('left', '15px');\n     });\n\n  it(`#setShowDelay allows users to configure the delay prior to showing a tooltip`,\n     () => {\n       const extraDelayMs = 20;\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.setShowDelay(numbers.SHOW_DELAY_MS + extraDelayMs);\n       foundation.handleAnchorMouseEnter();\n       expect((foundation as any).showTimeout).not.toEqual(null);\n\n       jasmine.clock().tick(numbers.SHOW_DELAY_MS);\n       expect((foundation as any).showTimeout).not.toEqual(null);\n       jasmine.clock().tick(extraDelayMs);\n       expectTooltipToHaveBeenShown(foundation, mockAdapter);\n     });\n\n  it(`#setHideDelay allows users to configure the delay prior to hiding a tooltip`,\n     () => {\n       const extraDelayMs = 20;\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       foundation.setHideDelay(numbers.HIDE_DELAY_MS + extraDelayMs);\n       foundation.show();\n       foundation.handleAnchorMouseLeave();\n       expect((foundation as any).hideTimeout).not.toEqual(null);\n\n       jasmine.clock().tick(numbers.HIDE_DELAY_MS);\n       expect((foundation as any).hideTimeout).not.toEqual(null);\n       jasmine.clock().tick(extraDelayMs);\n       expectTooltipToHaveBeenHidden(foundation, mockAdapter);\n     });\n\n  it('#handleTransitionEnd after #hide does NOT sends notification that tooltip has been hidden if showTimeout is set',\n     async () => {\n       const {foundation, mockAdapter} =\n           setUpFoundationTest(MDCTooltipFoundation);\n       mockAdapter.hasClass.and.returnValue(true);\n\n       foundation.show();\n       foundation.hide();\n       foundation.show();\n       foundation.handleTransitionEnd();\n\n       expect(mockAdapter.hasClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.SHOWING);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.SHOWING_TRANSITION);\n       expect(mockAdapter.removeClass).toHaveBeenCalledWith(CssClasses.HIDE);\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-tooltip/test/mdc-tooltip.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-tooltip.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-top-app-bar/.npmignore",
    "content": "*.ts\n!*.d.ts\ntest/**\n"
  },
  {
    "path": "packages/mdc-top-app-bar/README.md",
    "content": "<!--docs:\ntitle: \"Top App Bar\"\nlayout: detail\nsection: components\nexcerpt: \"A container for items such as application title, navigation icon, and action items.\"\niconId: toolbar\npath: /catalog/top-app-bar/\n-->\n\n# Top app bar\n\nThe top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.\n\nThere are two types of top app bar:\n\n1. [Regular top app bar](#regular-top-app-bar)\n1. [Contextual action bar](#contextual-action-bar)\n\nA regular top app bar can transform into a contextual action bar.\n\n![Regular app bar: purple background, white text and icons](images/regular-app-bar.png)\n![Contextual app bar: black background, white text and icons](images/contextual-app-bar.png)\n\n## Using the top app bar\n\n### Installation\n\n```\nnpm install @material/top-app-bar\n```\n\n### Styles\n\n```scss\n@use \"@material/icon-button\";\n@use \"@material/top-app-bar/mdc-top-app-bar\";\n\n@include icon-button.core-styles;\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTopAppBar} from '@material/top-app-bar';\n\n// Instantiation\nconst topAppBarElement = document.querySelector('.mdc-top-app-bar');\nconst topAppBar = new MDCTopAppBar(topAppBarElement);\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Regular top app bar\n\nThe top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.\n\n### Regular top app bar example\n\n```html\n<header class=\"mdc-top-app-bar\">\n  <div class=\"mdc-top-app-bar__row\">\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n      <button class=\"material-icons mdc-top-app-bar__navigation-icon mdc-icon-button\" aria-label=\"Open navigation menu\">menu</button>\n      <span class=\"mdc-top-app-bar__title\">Page title</span>\n    </section>\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-end\" role=\"toolbar\">\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Favorite\">favorite</button>\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Search\">search</button>\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Options\">more_vert</button>\n    </section>\n  </div>\n</header>\n<main class=\"mdc-top-app-bar--fixed-adjust\">\n  App content\n</main>\n```\n\n#### Menu icons\n\nTop app bars can contain action items which are placed on the side opposite the navigation icon. You must also attach the `mdc-icon-button` class to both the `mdc-top-app-bar__navigation-icon` and the `mdc-top-app-bar__action-item` elements in order to get the correct styles applied. \n\nFor further documentation on icons, please see the [mdc-icon-button docs](../mdc-icon-button/README.md).\n\n## Contextual action bar\n\nA top app bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of photos from a gallery, the top app bar transforms to a contextual app bar with actions related to the selected photos.\n\nWhen a top app bar transforms into a contextual action bar, the following changes occur:\n\n* The bar color changes\n* Navigation icon is replaced with a close icon\n* Top app bar title text converts to contextual action bar text\n* Top app bar actions are replaced with contextual actions\n* Upon closing, the contextual action bar transforms back into a top app bar.\n\n### Contextual action bar example\n\nThe following example shows a contextual action bar with a contextual title, a close icon, two contextual action icons, and an overflow menu:\n\n```html\n<header class=\"mdc-top-app-bar\">\n  <div class=\"mdc-top-app-bar__row\">\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n      <button class=\"material-icons mdc-top-app-bar__navigation-icon mdc-icon-button\" aria-label=\"Close\">close</button>\n      <span class=\"mdc-top-app-bar__title\">Contextual title</span>\n    </section>\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-end\" role=\"toolbar\">\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Share\">share</button>\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Delete\">delete</button>\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Open menu\">more_vert</button>\n    </section>\n  </div>\n</header>\n<main class=\"mdc-top-app-bar--fixed-adjust\">\n  App content\n</main>\n````\n\n## Other Variants\n\n### Short\n\nShort top app bars are top app bars that can collapse to the navigation icon side when scrolled.\n\n```html\n<header class=\"mdc-top-app-bar mdc-top-app-bar--short\">\n  <div class=\"mdc-top-app-bar__row\">\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n      <button class=\"material-icons mdc-top-app-bar__navigation-icon mdc-icon-button\">menu</button>\n      <span class=\"mdc-top-app-bar__title\">Title</span>\n    </section>\n    <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-end\" role=\"toolbar\">\n      <button class=\"material-icons mdc-top-app-bar__action-item mdc-icon-button\" aria-label=\"Bookmark this page\">bookmark</button>\n    </section>\n  </div>\n</header>\n<main class=\"mdc-top-app-bar--short-fixed-adjust\">\n  App content\n</main>\n```\n\n**Note: Short top app bars should be used with no more than 1 action item.**\n\n### Short - always closed\n\nShort top app bars can be configured to always appear collapsed by applying the `mdc-top-app-bar--short-collapsed` before instantiating the component :\n\n```html\n<header class=\"mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed\">\n  ...\n</header>\n<main class=\"mdc-top-app-bar--short-fixed-adjust\">\n  App content\n</main>\n```\n\n### Fixed\n\nFixed top app bars stay at the top of the page and elevate above the content when scrolled.\n\n```html\n<header class=\"mdc-top-app-bar mdc-top-app-bar--fixed\">\n  ...\n</header>\n<main class=\"mdc-top-app-bar--fixed-adjust\">\n  App content\n</main>\n```\n\n### Prominent\n\nThe prominent top app bar is taller.\n\n```html\n<header class=\"mdc-top-app-bar mdc-top-app-bar--prominent\">\n  ...\n</header>\n<main class=\"mdc-top-app-bar--prominent-fixed-adjust\">\n  App content\n</main>\n```\n\n### Dense\n\nThe dense top app bar is shorter.\n\n```html\n<header class=\"mdc-top-app-bar mdc-top-app-bar--dense\">\n  ...\n</header>\n<main class=\"mdc-top-app-bar--dense-fixed-adjust\">\n  App content\n</main>\n```\n\n## Style customization\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-top-app-bar` | Mandatory.\n`mdc-top-app-bar--fixed` | Class used to style the top app bar as a fixed top app bar.\n`mdc-top-app-bar--fixed-adjust` | Class used to style the content below the top app bar to prevent the top app bar from covering it.\n`mdc-top-app-bar--prominent` | Class used to style the top app bar as a prominent top app bar.\n`mdc-top-app-bar--prominent-fixed-adjust` | Class used to style the content below the prominent top app bar to prevent the top app bar from covering it.\n`mdc-top-app-bar--dense` | Class used to style the top app bar as a dense top app bar.\n`mdc-top-app-bar--dense-fixed-adjust` | Class used to style the content below the dense top app bar to prevent the top app bar from covering it.\n`mdc-top-app-bar--dense-prominent-fixed-adjust` | Class used to style the content below the top app bar when styled as both dense and prominent, to prevent the top app bar from covering it.\n`mdc-top-app-bar--short` | Class used to style the top app bar as a short top app bar.\n`mdc-top-app-bar--short-collapsed` | Class used to indicate the short top app bar is collapsed.\n`mdc-top-app-bar--short-fixed-adjust` | Class used to style the content below the short top app bar to prevent the top app bar from covering it.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the ink color of the top app bar.\n`icon-ink-color($color)` | Sets the ink color of the top app bar icons.\n`fill-color($color)` | Sets the fill color of the top app bar.\n`fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color.\n`short-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to short top app bar variant (when it is collapsed) with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n\n## `MDCTopAppBar` properties and methods\n\nMethod Signature | Description\n--- | ---\n`setScrollTarget(target: element) => void` | Sets scroll target to different DOM node (default is window).\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTopAppBar:nav` | None | Emits when the navigation icon is clicked.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Top App Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTopAppBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element of the component.\n`removeClass(className: string) => void` | Removes a class from the root element of the component.\n`hasClass(className: string) => boolean` | Checks if the root element of the component has the given className.\n`setStyle(property: string, value: string) => void` | Sets the specified CSS property to the given value on the root element.\n`getTopAppBarHeight() => number` | Gets the height in px of the top app bar.\n`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled from the top of the page.\n`getTotalActionItems() => number` | Gets the number of action items in the top app bar.\n`notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked.\n\n### Foundations\n\n#### `MDCTopAppBarBaseFoundation`, `MDCTopAppBarFoundation`, `MDCFixedTopAppBarFoundation` and `MDCShortTopAppBarFoundation`\n\nAll foundations provide the following methods:\n\nMethod Signature | Description\n--- | ---\n`handleTargetScroll() => void` | Handles `scroll` event on specified scrollTarget (defaults to `window`).\n`handleWindowResize() => void` | Handles `resize` event on window.\n`handleNavigationClick() => void` | Handles `click` event on navigation icon.\n\n#### `MDCShortTopAppBarFoundation`\n\nIn addition to the methods above, the short variant provides the following public methods and properties:\n\nMethod Signature | Description\n--- | ---\n`setAlwaysCollapsed(value: boolean) => void` | When `value` is `true`, sets the short top app bar to always be collapsed.\n`getAlwaysCollapsed() => boolean` | Gets if the short top app bar is in the \"always collapsed\" state.\n\nProperty | Value Type | Description\n--- | --- | ---\n`isCollapsed` | `boolean` (read-only) | Indicates whether the short top app bar is in the collapsed state.\n"
  },
  {
    "path": "packages/mdc-top-app-bar/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-top-app-bar/_mixins.import.scss",
    "content": "@forward \"@material/animation\" as mdc-animation-*;\n@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"@material/theme/all-theme-deprecated\" as mdc-theme-* hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800, $mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;\n@forward \"@material/ripple\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;\n@forward \"@material/ripple\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;\n@forward \"@material/rtl\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/rtl\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/shape\" as mdc-shape-*;\n@forward \"./index\" as mdc-top-app-bar-*;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/_mixins.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions';\n@use './variables';\n@use '@material/rtl/rtl';\n\n//\n// Public\n//\n\n@mixin ink-color($color) {\n  @include theme.property(color, $color);\n}\n\n@mixin fill-color($color) {\n  @include theme.property(background-color, $color);\n}\n\n@mixin fill-color-accessible($color) {\n  @include fill-color($color);\n  @include ink-color(theme-color.accessible-ink-color($color));\n}\n\n@mixin icon-ink-color($color) {\n  .mdc-top-app-bar__action-item,\n  .mdc-top-app-bar__navigation-icon {\n    @include theme.property(color, $color);\n    @include ripple-theme.states($color);\n  }\n}\n\n@mixin short-shape-radius($radius, $rtl-reflexive: true) {\n  @if meta.type-of($radius) == 'list' and list.length($radius) > 1 {\n    @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n  }\n\n  $radius: 0 0 $radius 0;\n\n  $selector: if(\n    &,\n    '&.mdc-top-app-bar--short-collapsed',\n    '.mdc-top-app-bar--short-collapsed'\n  );\n\n  #{$selector} {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: variables.$dense-row-height\n    );\n  }\n}\n\n//\n// Private\n//\n\n@mixin mobile-breakpoint_($mobile-breakpoint: variables.$mobile-breakpoint) {\n  @media (max-width: $mobile-breakpoint) {\n    .mdc-top-app-bar__row {\n      height: variables.$mobile-row-height;\n    }\n\n    .mdc-top-app-bar__section {\n      padding: variables.$mobile-section-padding;\n    }\n\n    .mdc-top-app-bar--short {\n      transition: width 200ms\n        animation-variables.$standard-curve-timing-function;\n    }\n\n    .mdc-top-app-bar--short-collapsed {\n      transition: width 250ms\n        animation-variables.$standard-curve-timing-function;\n\n      .mdc-top-app-bar__section--align-end {\n        @include rtl.reflexive-box(\n          padding,\n          right,\n          variables.$short-collapsed-right-icon-padding\n        );\n      }\n    }\n\n    .mdc-top-app-bar--prominent {\n      .mdc-top-app-bar__title {\n        padding-bottom: variables.$prominent-mobile-title-bottom-padding;\n      }\n    }\n\n    .mdc-top-app-bar--fixed-adjust {\n      padding-top: variables.$mobile-row-height;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-top-app-bar/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-top-app-bar-* hide mdc-top-app-bar-ink-color, mdc-top-app-bar-fill-color, mdc-top-app-bar-fill-color-accessible, mdc-top-app-bar-icon-ink-color, mdc-top-app-bar-short-shape-radius, mdc-top-app-bar-mobile-breakpoint-;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/_variables.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Default styles\n$row-height: 64px !default;\n$title-left-padding: 20px !default;\n$section-vertical-padding: 8px !default;\n$section-horizontal-padding: 12px !default;\n\n$mobile-breakpoint: 599px !default;\n\n// Default mobile styles\n$mobile-row-height: 56px !default;\n$mobile-section-padding: 4px !default;\n\n// Short top app bar\n$short-collapsed-border-radius: 4px !default;\n$short-collapsed-width: 56px !default;\n$short-collapsed-right-icon-padding: 12px !default;\n\n// Prominent styles\n$prominent-row-height: 128px !default;\n$prominent-title-bottom-padding: 2px !default;\n\n// Prominent mobile styles\n$prominent-mobile-title-bottom-padding: 6px !default;\n\n// Dense styles\n$dense-row-height: 48px !default;\n$dense-section-horizontal-padding: 4px !default;\n$dense-title-left-padding: 12px !default;\n\n// Dense & Prominent styles\n$dense-prominent-title-bottom-padding: 9px !default;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/adapter.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Defines the shape of the adapter expected by the foundation.\n * Implement this adapter for your framework of choice to delegate updates to\n * the component in your framework of choice. See architecture documentation\n * for more details.\n * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md\n */\nexport interface MDCTopAppBarAdapter {\n  /**\n   * Adds a class to the root Element.\n   */\n  addClass(className: string): void;\n\n  /**\n   * Removes a class from the root Element.\n   */\n  removeClass(className: string): void;\n\n  /**\n   * Returns true if the root Element contains the given class.\n   */\n  hasClass(className: string): boolean;\n\n  /**\n   * Sets the specified inline style property on the root Element to the given\n   * value.\n   */\n  setStyle(property: string, value: string): void;\n\n  /**\n   * Gets the height of the top app bar.\n   */\n  getTopAppBarHeight(): number;\n\n  getViewportScrollY(): number;\n\n  getTotalActionItems(): number;\n\n  /**\n   * Emits an event when the navigation icon is clicked.\n   */\n  notifyNavigationIconClicked(): void;\n}\n"
  },
  {
    "path": "packages/mdc-top-app-bar/component.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCComponent} from '@material/base/component';\nimport {SpecificEventListener} from '@material/base/types';\nimport {MDCRipple, MDCRippleFactory} from '@material/ripple/component';\n\nimport {MDCTopAppBarAdapter} from './adapter';\nimport {cssClasses, strings} from './constants';\nimport {MDCFixedTopAppBarFoundation} from './fixed/foundation';\nimport {MDCTopAppBarBaseFoundation} from './foundation';\nimport {MDCShortTopAppBarFoundation} from './short/foundation';\nimport {MDCTopAppBarFoundation} from './standard/foundation';\n\n/** MDC Top App Bar */\nexport class MDCTopAppBar extends MDCComponent<MDCTopAppBarBaseFoundation> {\n  static override attachTo(root: HTMLElement): MDCTopAppBar {\n    return new MDCTopAppBar(root);\n  }\n\n  private handleNavigationClick!:\n      SpecificEventListener<'click'>;  // assigned in initialSyncWithDOM()\n  private handleWindowResize!:\n      SpecificEventListener<'resize'>;  // assigned in initialSyncWithDOM()\n  private handleTargetScroll!:\n      SpecificEventListener<'scroll'>;  // assigned in initialSyncWithDOM()\n  private navIcon!: HTMLElement|null;\n  private iconRipples!: MDCRipple[];\n  private scrollTarget!: EventTarget;\n\n  override initialize(\n      rippleFactory: MDCRippleFactory = (el) => MDCRipple.attachTo(el)) {\n    this.navIcon =\n        this.root.querySelector<HTMLElement>(strings.NAVIGATION_ICON_SELECTOR);\n\n    // Get all icons in the toolbar and instantiate the ripples\n    const icons = Array.from(\n        this.root.querySelectorAll<HTMLElement>(strings.ACTION_ITEM_SELECTOR));\n    if (this.navIcon) {\n      icons.push(this.navIcon);\n    }\n\n    this.iconRipples = icons.map((icon) => {\n      const ripple = rippleFactory(icon);\n      ripple.unbounded = true;\n      return ripple;\n    });\n\n    this.scrollTarget = window;\n  }\n\n  override initialSyncWithDOM() {\n    this.handleNavigationClick =\n        this.foundation.handleNavigationClick.bind(this.foundation);\n    this.handleWindowResize =\n        this.foundation.handleWindowResize.bind(this.foundation);\n    this.handleTargetScroll =\n        this.foundation.handleTargetScroll.bind(this.foundation);\n\n    this.scrollTarget.addEventListener(\n        'scroll', this.handleTargetScroll as EventListener);\n\n    if (this.navIcon) {\n      this.navIcon.addEventListener(\n          'click', this.handleNavigationClick as EventListener);\n    }\n\n    const isFixed = this.root.classList.contains(cssClasses.FIXED_CLASS);\n    const isShort = this.root.classList.contains(cssClasses.SHORT_CLASS);\n    if (!isShort && !isFixed) {\n      window.addEventListener(\n          'resize', this.handleWindowResize as EventListener);\n    }\n  }\n\n  override destroy() {\n    for (const iconRipple of this.iconRipples) {\n      iconRipple.destroy();\n    }\n    this.scrollTarget.removeEventListener(\n        'scroll', this.handleTargetScroll as EventListener);\n    if (this.navIcon) {\n      this.navIcon.removeEventListener(\n          'click', this.handleNavigationClick as EventListener);\n    }\n    const isFixed = this.root.classList.contains(cssClasses.FIXED_CLASS);\n    const isShort = this.root.classList.contains(cssClasses.SHORT_CLASS);\n    if (!isShort && !isFixed) {\n      window.removeEventListener(\n          'resize', this.handleWindowResize as EventListener);\n    }\n    super.destroy();\n  }\n\n  setScrollTarget(target: EventTarget) {\n    // Remove scroll handler from the previous scroll target\n    this.scrollTarget.removeEventListener(\n        'scroll', this.handleTargetScroll as EventListener);\n\n    this.scrollTarget = target;\n\n    // Initialize scroll handler on the new scroll target\n    this.handleTargetScroll =\n        this.foundation.handleTargetScroll.bind(this.foundation);\n    this.scrollTarget.addEventListener(\n        'scroll', this.handleTargetScroll as EventListener);\n  }\n\n  override getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    const adapter: MDCTopAppBarAdapter = {\n      hasClass: (className) => this.root.classList.contains(className),\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setStyle: (property, value) => {\n        this.root.style.setProperty(property, value);\n      },\n      getTopAppBarHeight: () => this.root.clientHeight,\n      notifyNavigationIconClicked: () => {\n        this.emit(strings.NAVIGATION_EVENT, {});\n      },\n      getViewportScrollY: () => {\n        const win = this.scrollTarget as Window;\n        const el = this.scrollTarget as Element;\n        return win.pageYOffset !== undefined ? win.pageYOffset : el.scrollTop;\n      },\n      getTotalActionItems: () =>\n          this.root.querySelectorAll<HTMLElement>(strings.ACTION_ITEM_SELECTOR)\n              .length,\n    };\n    // tslint:enable:object-literal-sort-keys\n\n    let foundation: MDCTopAppBarBaseFoundation;\n    if (this.root.classList.contains(cssClasses.SHORT_CLASS)) {\n      foundation = new MDCShortTopAppBarFoundation(adapter);\n    } else if (this.root.classList.contains(cssClasses.FIXED_CLASS)) {\n      foundation = new MDCFixedTopAppBarFoundation(adapter);\n    } else {\n      foundation = new MDCTopAppBarFoundation(adapter);\n    }\n\n    return foundation;\n  }\n}\n"
  },
  {
    "path": "packages/mdc-top-app-bar/constants.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst cssClasses = {\n  FIXED_CLASS: 'mdc-top-app-bar--fixed',\n  FIXED_SCROLLED_CLASS: 'mdc-top-app-bar--fixed-scrolled',\n  SHORT_CLASS: 'mdc-top-app-bar--short',\n  SHORT_COLLAPSED_CLASS: 'mdc-top-app-bar--short-collapsed',\n  SHORT_HAS_ACTION_ITEM_CLASS: 'mdc-top-app-bar--short-has-action-item',\n};\n\nconst numbers = {\n  DEBOUNCE_THROTTLE_RESIZE_TIME_MS: 100,\n  MAX_TOP_APP_BAR_HEIGHT: 128,\n};\n\nconst strings = {\n  ACTION_ITEM_SELECTOR: '.mdc-top-app-bar__action-item',\n  NAVIGATION_EVENT: 'MDCTopAppBar:nav',\n  NAVIGATION_ICON_SELECTOR: '.mdc-top-app-bar__navigation-icon',\n  ROOT_SELECTOR: '.mdc-top-app-bar',\n  TITLE_SELECTOR: '.mdc-top-app-bar__title',\n};\n\nexport {cssClasses, numbers, strings};\n"
  },
  {
    "path": "packages/mdc-top-app-bar/fixed/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {cssClasses} from '../constants';\nimport {MDCTopAppBarFoundation} from '../standard/foundation';\n\n/** MDC Fixed Top App Bar Foundation */\nexport class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {\n  /**\n   * State variable for the previous scroll iteration top app bar state\n   */\n  private wasScrolled = false;\n\n  /**\n   * Scroll handler for applying/removing the modifier class on the fixed top\n   * app bar.\n   */\n  override handleTargetScroll() {\n    const currentScroll = this.adapter.getViewportScrollY();\n\n    if (currentScroll <= 0) {\n      if (this.wasScrolled) {\n        this.adapter.removeClass(cssClasses.FIXED_SCROLLED_CLASS);\n        this.wasScrolled = false;\n      }\n    } else {\n      if (!this.wasScrolled) {\n        this.adapter.addClass(cssClasses.FIXED_SCROLLED_CLASS);\n        this.wasScrolled = true;\n      }\n    }\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCFixedTopAppBarFoundation;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/fixed/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createMockAdapter} from '../../../../testing/helpers/foundation';\nimport {MDCTopAppBarFoundation} from '../../standard/foundation';\nimport {MDCFixedTopAppBarFoundation} from '../foundation';\n\ndescribe('MDCFixedTopAppBarFoundation', () => {\n  const setupTest = () => {\n    const mockAdapter = createMockAdapter(MDCTopAppBarFoundation);\n    const foundation = new MDCFixedTopAppBarFoundation(mockAdapter);\n    return {foundation, mockAdapter};\n  };\n\n  it('#handleTargetScroll calls #adapter.getViewportScrollY', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleTargetScroll();\n    // twice because it is called once in the standard foundation\n    expect(mockAdapter.getViewportScrollY).toHaveBeenCalledTimes(2);\n  });\n\n  it('#handleTargetScroll calls #adapter.addClass if adapter.getViewportScrollY > 0',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.handleTargetScroll();\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.FIXED_SCROLLED_CLASS);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleTargetScroll calls #adapter.removeClass if ' +\n         'adapter.getViewportScrollY < 0 but had just scrolled down',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.handleTargetScroll();\n       mockAdapter.getViewportScrollY.and.returnValue(-1);\n       foundation.handleTargetScroll();\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.FIXED_SCROLLED_CLASS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('#handleTargetScroll does not call #adapter.removeClass if was not scrolled yet',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(-1);\n       foundation.handleTargetScroll();\n       expect(mockAdapter.removeClass)\n           .not.toHaveBeenCalledWith(jasmine.any(String));\n     });\n\n  it('#handleTargetScroll calls #adapter.addClass only once if it already scrolled',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.handleTargetScroll();\n       foundation.handleTargetScroll();\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.FIXED_SCROLLED_CLASS);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n     });\n});\n"
  },
  {
    "path": "packages/mdc-top-app-bar/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundation} from '@material/base/foundation';\n\nimport {MDCTopAppBarAdapter} from './adapter';\nimport {cssClasses, numbers, strings} from './constants';\n\n/** MDC Top App Bar Base Foundation */\nexport class MDCTopAppBarBaseFoundation extends\n    MDCFoundation<MDCTopAppBarAdapter> {\n  static override get strings() {\n    return strings;\n  }\n\n  static override get cssClasses() {\n    return cssClasses;\n  }\n\n  static override get numbers() {\n    return numbers;\n  }\n\n  /**\n   * See {@link MDCTopAppBarAdapter} for typing information on parameters and\n   * return types.\n   */\n  static override get defaultAdapter(): MDCTopAppBarAdapter {\n    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.\n    return {\n      addClass: () => undefined,\n      removeClass: () => undefined,\n      hasClass: () => false,\n      setStyle: () => undefined,\n      getTopAppBarHeight: () => 0,\n      notifyNavigationIconClicked: () => undefined,\n      getViewportScrollY: () => 0,\n      getTotalActionItems: () => 0,\n    };\n    // tslint:enable:object-literal-sort-keys\n  }\n\n  /* istanbul ignore next: optional argument is not a branch statement */\n  constructor(adapter?: Partial<MDCTopAppBarAdapter>) {\n    super({...MDCTopAppBarBaseFoundation.defaultAdapter, ...adapter});\n  }\n\n  /** Other variants of TopAppBar foundation overrides this method */\n  handleTargetScroll() {}  // tslint:disable-line:no-empty\n  /** Other variants of TopAppBar foundation overrides this method */\n  handleWindowResize() {}  // tslint:disable-line:no-empty\n\n  handleNavigationClick() {\n    this.adapter.notifyNavigationIconClicked();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTopAppBarBaseFoundation;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/index.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport * from './adapter';\nexport * from './component';\nexport * from './constants';\nexport * from './foundation';\nexport * from './fixed/foundation';\nexport * from './short/foundation';\nexport * from './standard/foundation';\n"
  },
  {
    "path": "packages/mdc-top-app-bar/mdc-top-app-bar.import.scss",
    "content": "@forward \"@material/base/mixins\" as mdc-base-*;\n@forward \"@material/theme/variables\" as mdc-theme-*;\n@forward \"@material/animation/variables\" as mdc-animation-*;\n@forward \"@material/elevation/variables\" as mdc-elevation-*;\n@forward \"@material/rtl/variables\" as mdc-rtl-*;\n@forward \"@material/typography/variables\" as mdc-typography-*;\n@forward \"@material/ripple/variables\" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration;\n@forward \"@material/ripple/variables\" as mdc-ripple-* hide $mdc-ripple-states-wash-duration;\n@forward \"@material/shape/variables\" as mdc-shape-*;\n@forward \"variables\" as mdc-top-app-bar-*;\n@forward \"@material/theme/mixins\" as mdc-theme-*;\n@forward \"@material/elevation/mixins\" as mdc-* hide mdc-core-styles, mdc-overlay-common, mdc-overlay-dimensions, mdc-overlay-fill-color, mdc-overlay-opacity, mdc-overlay-selector-, mdc-overlay-surface-position, mdc-shadow;\n@forward \"@material/elevation/mixins\" as mdc-elevation-* hide mdc-elevation-elevation;\n@forward \"@material/rtl/mixins\" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property;\n@forward \"@material/rtl/mixins\" as mdc-rtl-* hide mdc-rtl-rtl;\n@forward \"@material/typography/mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"@material/typography/mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/ripple/keyframes\" as mdc-ripple-*;\n@forward \"@material/ripple/mixins\" as mdc-* hide mdc-common, mdc-core-styles, mdc-radius-bounded, mdc-radius-unbounded, mdc-surface, mdc-target-common, mdc-target-selector;\n@forward \"@material/ripple/mixins\" as mdc-ripple-* hide mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-base-color, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-hover-opacity, mdc-ripple-states-interactions-, mdc-ripple-states-opacities, mdc-ripple-states-press-opacity, mdc-ripple-states-selected;\n@forward \"@material/shape/mixins\" as mdc-shape-*;\n@forward \"mixins\" as mdc-top-app-bar-*;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"@material/theme/functions\" as mdc-theme-*;\n@forward \"@material/elevation/functions\" as mdc-elevation-*;\n@forward \"@material/typography/functions\" as mdc-typography-*;\n@forward \"@material/animation/functions\" as mdc-animation-*;\n@forward \"@material/ripple/functions\" as mdc-*;\n@forward \"@material/shape/functions\" as mdc-shape-*;\n@forward \"mdc-top-app-bar\";\n"
  },
  {
    "path": "packages/mdc-top-app-bar/mdc-top-app-bar.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use './mixins';\n@use './variables';\n\n// postcss-bem-linter: define top-app-bar\n.mdc-top-app-bar {\n  @include mixins.fill-color-accessible(primary);\n  @include mixins.icon-ink-color(on-primary);\n\n  display: flex;\n  position: fixed;\n  flex-direction: column;\n  justify-content: space-between;\n  box-sizing: border-box;\n  width: 100%;\n  z-index: 4;\n\n  &__row {\n    display: flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: variables.$row-height;\n  }\n\n  &__section {\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    min-width: 0;\n    padding: variables.$section-vertical-padding\n      variables.$section-horizontal-padding;\n    z-index: 1;\n\n    &--align-start {\n      justify-content: flex-start;\n      order: -1;\n    }\n\n    &--align-end {\n      justify-content: flex-end;\n      order: 1;\n    }\n  }\n\n  &__title {\n    @include typography.typography(headline6);\n    @include rtl.reflexive-box(padding, left, variables.$title-left-padding);\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    z-index: 1;\n  }\n}\n\n@include mixins.short-shape-radius(24px);\n\n.mdc-top-app-bar--short {\n  top: 0;\n  @include rtl.ignore-next-line();\n  right: auto;\n  @include rtl.ignore-next-line();\n  left: 0;\n  width: 100%;\n  transition: width 250ms animation-variables.$standard-curve-timing-function;\n\n  @include rtl.rtl {\n    @include rtl.ignore-next-line();\n    right: 0;\n    @include rtl.ignore-next-line();\n    left: auto;\n  }\n\n  .mdc-top-app-bar__row {\n    height: variables.$mobile-row-height;\n  }\n\n  .mdc-top-app-bar__section {\n    padding: variables.$mobile-section-padding;\n  }\n\n  .mdc-top-app-bar__title {\n    transition: opacity 200ms\n      animation-variables.$standard-curve-timing-function;\n    opacity: 1;\n  }\n}\n\n.mdc-top-app-bar--short-collapsed {\n  @include elevation-mixins.elevation(4);\n\n  width: variables.$short-collapsed-width;\n  transition: width 300ms animation-variables.$standard-curve-timing-function;\n\n  .mdc-top-app-bar__title {\n    display: none;\n  }\n\n  .mdc-top-app-bar__action-item {\n    transition: padding 150ms\n      animation-variables.$standard-curve-timing-function;\n  }\n}\n\n.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item {\n  width: variables.$short-collapsed-width * 2;\n\n  .mdc-top-app-bar__section--align-end {\n    @include rtl.reflexive-box(padding, right, 12px);\n  }\n}\n\n.mdc-top-app-bar--dense {\n  .mdc-top-app-bar__row {\n    height: variables.$dense-row-height;\n  }\n\n  .mdc-top-app-bar__section {\n    padding: 0 variables.$dense-section-horizontal-padding;\n  }\n\n  .mdc-top-app-bar__title {\n    @include rtl.reflexive-box(\n      padding,\n      left,\n      variables.$dense-title-left-padding\n    );\n  }\n}\n\n.mdc-top-app-bar--prominent {\n  .mdc-top-app-bar__row {\n    height: variables.$prominent-row-height;\n  }\n\n  .mdc-top-app-bar__title {\n    align-self: flex-end;\n    padding-bottom: variables.$prominent-title-bottom-padding;\n  }\n\n  .mdc-top-app-bar__action-item,\n  .mdc-top-app-bar__navigation-icon {\n    align-self: flex-start;\n  }\n}\n\n.mdc-top-app-bar--fixed {\n  transition: box-shadow 200ms linear;\n}\n\n.mdc-top-app-bar--fixed-scrolled {\n  @include elevation-mixins.elevation(4);\n\n  transition: box-shadow 200ms linear;\n}\n\n// Specific styles for dense and prominent styled top app bar\n.mdc-top-app-bar--dense.mdc-top-app-bar--prominent {\n  .mdc-top-app-bar__row {\n    height: variables.$dense-row-height * 2;\n  }\n\n  .mdc-top-app-bar__section {\n    padding: 0 variables.$section-horizontal-padding;\n  }\n\n  .mdc-top-app-bar__title {\n    @include rtl.reflexive-box(padding, left, variables.$title-left-padding);\n\n    padding-bottom: variables.$dense-prominent-title-bottom-padding;\n  }\n}\n\n.mdc-top-app-bar--fixed-adjust {\n  padding-top: variables.$row-height;\n}\n\n.mdc-top-app-bar--dense-fixed-adjust {\n  padding-top: variables.$dense-row-height;\n}\n\n.mdc-top-app-bar--short-fixed-adjust {\n  padding-top: variables.$mobile-row-height;\n}\n\n.mdc-top-app-bar--prominent-fixed-adjust {\n  padding-top: variables.$prominent-row-height;\n}\n\n.mdc-top-app-bar--dense-prominent-fixed-adjust {\n  padding-top: variables.$dense-row-height * 2;\n}\n\n// Mobile Styles\n@include mixins.mobile-breakpoint_;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/package.json",
    "content": "{\n  \"name\": \"@material/top-app-bar\",\n  \"version\": \"14.0.0\",\n  \"description\": \"The Material Components for the web top app bar component\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/mdc.topAppBar.js\",\n  \"module\": \"index.js\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-top-app-bar\"\n  },\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"top app bar\",\n    \"top-app-bar\",\n    \"topappbar\"\n  ],\n  \"dependencies\": {\n    \"@material/animation\": \"^14.0.0\",\n    \"@material/base\": \"^14.0.0\",\n    \"@material/elevation\": \"^14.0.0\",\n    \"@material/ripple\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/shape\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"@material/typography\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-top-app-bar/short/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTopAppBarAdapter} from '../adapter';\nimport {cssClasses} from '../constants';\nimport {MDCTopAppBarBaseFoundation} from '../foundation';\n\n/** MDC Short Top App Bar Foundation */\nexport class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation {\n  // Public visibility for backward compatibility.\n  get isCollapsed(): boolean {\n    return this.collapsed;\n  }\n\n  private collapsed = false;\n\n  private isAlwaysCollapsed = false;\n\n  /* istanbul ignore next: optional argument is not a branch statement */\n  constructor(adapter?: Partial<MDCTopAppBarAdapter>) {\n    super(adapter);\n  }\n\n  override init() {\n    super.init();\n\n    if (this.adapter.getTotalActionItems() > 0) {\n      this.adapter.addClass(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);\n    }\n\n    // If initialized with SHORT_COLLAPSED_CLASS, the bar should always be\n    // collapsed\n    this.setAlwaysCollapsed(\n        this.adapter.hasClass(cssClasses.SHORT_COLLAPSED_CLASS));\n  }\n\n  /**\n   * Set if the short top app bar should always be collapsed.\n   *\n   * @param value When `true`, bar will always be collapsed. When `false`, bar\n   *     may collapse or expand based on scroll.\n   */\n  setAlwaysCollapsed(value: boolean) {\n    this.isAlwaysCollapsed = !!value;\n    if (this.isAlwaysCollapsed) {\n      this.collapse();\n    } else {\n      // let maybeCollapseBar determine if the bar should be collapsed\n      this.maybeCollapseBar();\n    }\n  }\n\n  getAlwaysCollapsed() {\n    return this.isAlwaysCollapsed;\n  }\n\n  /**\n   * Scroll handler for applying/removing the collapsed modifier class on the\n   * short top app bar.\n   */\n  override handleTargetScroll() {\n    this.maybeCollapseBar();\n  }\n\n  private maybeCollapseBar() {\n    if (this.isAlwaysCollapsed) {\n      return;\n    }\n    const currentScroll = this.adapter.getViewportScrollY();\n\n    if (currentScroll <= 0) {\n      if (this.collapsed) {\n        this.uncollapse();\n      }\n    } else {\n      if (!this.collapsed) {\n        this.collapse();\n      }\n    }\n  }\n\n  private uncollapse() {\n    this.adapter.removeClass(cssClasses.SHORT_COLLAPSED_CLASS);\n    this.collapsed = false;\n  }\n\n  private collapse() {\n    this.adapter.addClass(cssClasses.SHORT_COLLAPSED_CLASS);\n    this.collapsed = true;\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCShortTopAppBarFoundation;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/short/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createMockAdapter} from '../../../../testing/helpers/foundation';\nimport {MDCTopAppBarFoundation} from '../../standard/foundation';\nimport {MDCShortTopAppBarFoundation} from '../foundation';\n\ndescribe('MDCShortTopAppBarFoundation', () => {\n  const setupTest = () => {\n    const mockAdapter = createMockAdapter(MDCTopAppBarFoundation);\n    mockAdapter.hasClass.withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)\n        .and.returnValue(true);\n    const foundation = new MDCShortTopAppBarFoundation(mockAdapter);\n    return {foundation, mockAdapter};\n  };\n\n  it('short top app bar: scrollHandler calls #adapter.getViewportScrollY',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       foundation.init();\n       foundation.handleTargetScroll();\n       // called twice because its called once in the standard foundation\n       expect(mockAdapter.getViewportScrollY).toHaveBeenCalledTimes(2);\n     });\n\n  it('short top app bar: scrollHandler does not call getViewportScrollY method ' +\n         'if short collapsed class is on the component',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.hasClass\n           .withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)\n           .and.returnValue(true);\n       foundation.init();\n       expect(mockAdapter.getViewportScrollY).not.toHaveBeenCalled();\n     });\n\n  it('short top app bar: #adapter.addClass called when page is scrolled from the top',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.hasClass\n           .withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)\n           .and.returnValue(false);\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.init();\n       foundation.handleTargetScroll();\n\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('short top app bar: #adapter.removeClass called when page is scrolled to the top',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n\n       mockAdapter.hasClass\n           .withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)\n           .and.returnValue(false);\n       mockAdapter.getTotalActionItems.and.returnValue(0);\n       foundation.init();\n\n       // Apply the collapsed class\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.handleTargetScroll();\n\n       // Test removing it\n       mockAdapter.getViewportScrollY.and.returnValue(0);\n       foundation.handleTargetScroll();\n\n       expect(mockAdapter.removeClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS);\n       expect(mockAdapter.removeClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('short top app bar: #adapter.addClass is called if it has an action item',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getTotalActionItems.and.returnValue(1);\n       foundation.init();\n       expect(mockAdapter.addClass)\n           .toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);\n       expect(mockAdapter.addClass).toHaveBeenCalledTimes(1);\n     });\n\n  it('short top app bar: #adapter.addClass is not called if it does not have an action item',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getTotalActionItems.and.returnValue(0);\n       foundation.init();\n       expect(mockAdapter.addClass)\n           .not.toHaveBeenCalledWith(\n               MDCTopAppBarFoundation.cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);\n     });\n\n  it('isCollapsed returns false initially if top-app-bar has not scrolled',\n     () => {\n       const {foundation} = setupTest();\n       expect(foundation.isCollapsed).toBe(false);\n     });\n\n  it('isCollapsed returns true if top-app-bar is collapsed', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getViewportScrollY.and.returnValue(1);\n\n    foundation.handleTargetScroll();\n    expect(foundation.isCollapsed).toBe(true);\n  });\n\n  it('isCollapsed returns false when page is scrolled to the top', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    foundation.init();\n    mockAdapter.getViewportScrollY.and.returnValue(1);\n    foundation.handleTargetScroll();\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    foundation.handleTargetScroll();\n    expect(foundation.isCollapsed).toBe(false);\n  });\n\n  it('setAlwaysCollapsed(true) sets bar to be collapsed', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)\n        .and.returnValue(false);\n    foundation.init();\n    foundation.setAlwaysCollapsed(true);\n    expect(foundation.isCollapsed).toBe(true);\n  });\n\n  it('setAlwaysCollapsed(true) will keep bar collapsed', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)\n        .and.returnValue(false);\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    foundation.init();\n    foundation.setAlwaysCollapsed(true);\n    mockAdapter.getViewportScrollY.and.returnValue(1);\n    foundation.handleTargetScroll();\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    foundation.handleTargetScroll();\n    expect(mockAdapter.removeClass)\n        .not.toHaveBeenCalledWith(\n            MDCTopAppBarFoundation.cssClasses.SHORT_CLASS);\n  });\n\n  it('setAlwaysCollapsed(false) will keep bar collapsed when scrolled', () => {\n    const {foundation, mockAdapter} = setupTest();\n    mockAdapter.hasClass.withArgs(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)\n        .and.returnValue(false);\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    foundation.init();\n    foundation.setAlwaysCollapsed(true);\n    mockAdapter.getViewportScrollY.and.returnValue(1);\n    foundation.handleTargetScroll();\n    expect(foundation.isCollapsed).toBe(true);\n    foundation.setAlwaysCollapsed(false);\n    expect(foundation.isCollapsed).toBe(true);\n    foundation.handleTargetScroll();\n    expect(foundation.isCollapsed).toBe(true);\n  });\n\n  it('setAlwaysCollapsed is called on init', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.init();\n    expect(mockAdapter.getViewportScrollY).toHaveBeenCalledTimes(1);\n  });\n\n  it('getAlwaysCollapsed returns false by default', () => {\n    const {foundation} = setupTest();\n    expect(foundation.getAlwaysCollapsed()).toBe(false);\n  });\n\n  it('getAlwaysCollapsed matches value of setAlwaysCollapsed', () => {\n    const {foundation} = setupTest();\n    foundation.setAlwaysCollapsed(false);\n    expect(foundation.getAlwaysCollapsed()).toBe(false);\n    foundation.setAlwaysCollapsed(true);\n    expect(foundation.getAlwaysCollapsed()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-top-app-bar/standard/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCTopAppBarAdapter} from '../adapter';\nimport {numbers} from '../constants';\nimport {MDCTopAppBarBaseFoundation} from '../foundation';\n\nconst INITIAL_VALUE = 0;\n\n/** MDC Top App Bar Foundation */\nexport class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation {\n  /**\n   * Indicates if the top app bar was docked in the previous scroll handler\n   * iteration.\n   */\n  private wasDocked = true;\n\n  /**\n   * Indicates if the top app bar is docked in the fully shown position.\n   */\n  private isDockedShowing = true;\n\n  /**\n   * Variable for current scroll position of the top app bar\n   */\n  private currentAppBarOffsetTop = 0;\n\n  /**\n   * Used to prevent the top app bar from being scrolled out of view during\n   * resize events\n   */\n  private isCurrentlyBeingResized = false;\n\n  /**\n   * The timeout that's used to throttle the resize events\n   */\n  private resizeThrottleId = INITIAL_VALUE;\n\n  /**\n   * Used for diffs of current scroll position vs previous scroll position\n   */\n  private lastScrollPosition: number;\n\n  /**\n   * Used to verify when the top app bar is completely showing or completely\n   * hidden\n   */\n  private topAppBarHeight: number;\n\n  /**\n   * The timeout that's used to debounce toggling the isCurrentlyBeingResized\n   * variable after a resize\n   */\n  private resizeDebounceId = INITIAL_VALUE;\n\n  /* istanbul ignore next: optional argument is not a branch statement */\n  constructor(adapter?: Partial<MDCTopAppBarAdapter>) {\n    super(adapter);\n\n    this.lastScrollPosition = this.adapter.getViewportScrollY();\n    this.topAppBarHeight = this.adapter.getTopAppBarHeight();\n  }\n\n  override destroy() {\n    super.destroy();\n    this.adapter.setStyle('top', '');\n  }\n\n  /**\n   * Scroll handler for the default scroll behavior of the top app bar.\n   */\n  override handleTargetScroll() {\n    const currentScrollPosition =\n        Math.max(this.adapter.getViewportScrollY(), 0);\n    const diff = currentScrollPosition - this.lastScrollPosition;\n    this.lastScrollPosition = currentScrollPosition;\n\n    // If the window is being resized the lastScrollPosition needs to be updated\n    // but the current scroll of the top app bar should stay in the same\n    // position.\n    if (!this.isCurrentlyBeingResized) {\n      this.currentAppBarOffsetTop -= diff;\n\n      if (this.currentAppBarOffsetTop > 0) {\n        this.currentAppBarOffsetTop = 0;\n      } else if (Math.abs(this.currentAppBarOffsetTop) > this.topAppBarHeight) {\n        this.currentAppBarOffsetTop = -this.topAppBarHeight;\n      }\n\n      this.moveTopAppBar();\n    }\n  }\n\n  /**\n   * Top app bar resize handler that throttle/debounce functions that execute\n   * updates.\n   */\n  override handleWindowResize() {\n    // Throttle resize events 10 p/s\n    if (!this.resizeThrottleId) {\n      this.resizeThrottleId = setTimeout(() => {\n        this.resizeThrottleId = INITIAL_VALUE;\n        this.throttledResizeHandler();\n      }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);\n    }\n\n    this.isCurrentlyBeingResized = true;\n\n    if (this.resizeDebounceId) {\n      clearTimeout(this.resizeDebounceId);\n    }\n\n    this.resizeDebounceId = setTimeout(() => {\n      this.handleTargetScroll();\n      this.isCurrentlyBeingResized = false;\n      this.resizeDebounceId = INITIAL_VALUE;\n    }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);\n  }\n\n  /**\n   * Function to determine if the DOM needs to update.\n   */\n  private checkForUpdate(): boolean {\n    const offscreenBoundaryTop = -this.topAppBarHeight;\n    const hasAnyPixelsOffscreen = this.currentAppBarOffsetTop < 0;\n    const hasAnyPixelsOnscreen =\n        this.currentAppBarOffsetTop > offscreenBoundaryTop;\n    const partiallyShowing = hasAnyPixelsOffscreen && hasAnyPixelsOnscreen;\n\n    // If it's partially showing, it can't be docked.\n    if (partiallyShowing) {\n      this.wasDocked = false;\n    } else {\n      // Not previously docked and not partially showing, it's now docked.\n      if (!this.wasDocked) {\n        this.wasDocked = true;\n        return true;\n      } else if (this.isDockedShowing !== hasAnyPixelsOnscreen) {\n        this.isDockedShowing = hasAnyPixelsOnscreen;\n        return true;\n      }\n    }\n\n    return partiallyShowing;\n  }\n\n  /**\n   * Function to move the top app bar if needed.\n   */\n  private moveTopAppBar() {\n    if (this.checkForUpdate()) {\n      // Once the top app bar is fully hidden we use the max potential top app\n      // bar height as our offset so the top app bar doesn't show if the window\n      // resizes and the new height > the old height.\n      let offset = this.currentAppBarOffsetTop;\n      if (Math.abs(offset) >= this.topAppBarHeight) {\n        offset = -numbers.MAX_TOP_APP_BAR_HEIGHT;\n      }\n\n      this.adapter.setStyle('top', offset + 'px');\n    }\n  }\n\n  /**\n   * Throttled function that updates the top app bar scrolled values if the\n   * top app bar height changes.\n   */\n  private throttledResizeHandler() {\n    const currentHeight = this.adapter.getTopAppBarHeight();\n    if (this.topAppBarHeight !== currentHeight) {\n      this.wasDocked = false;\n\n      // Since the top app bar has a different height depending on the screen\n      // width, this will ensure that the top app bar remains in the correct\n      // location if completely hidden and a resize makes the top app bar a\n      // different height.\n      this.currentAppBarOffsetTop -= this.topAppBarHeight - currentHeight;\n      this.topAppBarHeight = currentHeight;\n    }\n    this.handleTargetScroll();\n  }\n}\n\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCTopAppBarFoundation;\n"
  },
  {
    "path": "packages/mdc-top-app-bar/standard/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createMockAdapter} from '../../../../testing/helpers/foundation';\nimport {setUpMdcTestEnvironment} from '../../../../testing/helpers/setup';\nimport {numbers} from '../../constants';\nimport {MDCTopAppBarFoundation} from '../foundation';\n\ndescribe('MDCTopAppBarFoundation', () => {\n  setUpMdcTestEnvironment();\n\n  const setupTest = () => {\n    const mockAdapter = createMockAdapter(MDCTopAppBarFoundation);\n    mockAdapter.getTopAppBarHeight.and.returnValue(64);\n    mockAdapter.getViewportScrollY.and.returnValue(0);\n    const foundation = new MDCTopAppBarFoundation(mockAdapter);\n    return {foundation, mockAdapter};\n  };\n\n  it('top app bar scroll: throttledResizeHandler updates topAppBarHeight if the top app bar height changes',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       expect((foundation as any).topAppBarHeight).toBe(64);\n       mockAdapter.getTopAppBarHeight.and.returnValue(56);\n       (foundation as any).throttledResizeHandler();\n       expect((foundation as any).topAppBarHeight).toBe(56);\n     });\n\n  it('top app bar scroll: throttledResizeHandler does not update topAppBarHeight if height is the same',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       expect((foundation as any).topAppBarHeight).toBe(64);\n       mockAdapter.getTopAppBarHeight.and.returnValue(64);\n       (foundation as any).throttledResizeHandler();\n       expect((foundation as any).topAppBarHeight).toBe(64);\n     });\n\n  it('top app bar : moveTopAppBar update required transition from fully shown to 1px scrolled',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       (foundation as any).currentAppBarOffsetTop =\n           -1;  // Indicates 1px scrolled up\n       (foundation as any).checkForUpdate = () => true;\n       (foundation as any).moveTopAppBar();\n       expect(mockAdapter.setStyle).toHaveBeenCalledWith('top', '-1px');\n     });\n\n  it('top app bar : moveTopAppBar update required transition from 1px shown to fullyHidden ',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       (foundation as any).currentAppBarOffsetTop =\n           -64;  // Indicates 64px scrolled\n       (foundation as any).checkForUpdate = () => true;\n       (foundation as any).moveTopAppBar();\n       expect(mockAdapter.setStyle)\n           .toHaveBeenCalledWith(\n               'top', '-' + numbers.MAX_TOP_APP_BAR_HEIGHT + 'px');\n     });\n\n  it('top app bar : moveTopAppBar update is not required results in no top app bar style change',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = 0;\n       (foundation as any).checkForUpdate = () => false;\n       (foundation as any).moveTopAppBar();\n       expect(mockAdapter.setStyle)\n           .not.toHaveBeenCalledWith('top', jasmine.anything());\n     });\n\n  it('top app bar : checkForUpdate returns true if top app bar is not docked',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = -1;\n       (foundation as any).wasDocked = false;\n       expect((foundation as any).checkForUpdate()).toBe(true);\n     });\n\n  it('top app bar : checkForUpdate updates wasDocked to true if top app bar becomes docked',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = 0;\n       (foundation as any).wasDocked = false;\n       expect((foundation as any).checkForUpdate()).toBe(true);\n       expect((foundation as any).wasDocked).toBe(true);\n     });\n\n  it('top app bar : checkForUpdate returns false if top app bar is docked and fullyShown',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = 0;\n       (foundation as any).wasDocked = true;\n       expect((foundation as any).checkForUpdate()).toBe(false);\n       expect((foundation as any).wasDocked).toBe(true);\n     });\n\n  it('top app bar : checkForUpdate returns false if top app bar is docked and fullyHidden',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = -64;\n       (foundation as any).wasDocked = true;\n       (foundation as any).isDockedShowing = false;\n       expect((foundation as any).checkForUpdate()).toBe(false);\n       expect((foundation as any).wasDocked).toBe(true);\n     });\n\n  it('top app bar : checkForUpdate returns true if top app bar is docked but not fullyShown/fullyHidden',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).currentAppBarOffsetTop = -63;\n       (foundation as any).wasDocked = true;\n       expect((foundation as any).checkForUpdate()).toBe(true);\n       expect((foundation as any).wasDocked).toBe(false);\n     });\n\n  it('top app bar : handleTargetScroll does not update currentAppBarOffsetTop if ' +\n         'isCurrentlyBeingResized is true',\n     () => {\n       const {foundation} = setupTest();\n       (foundation as any).isCurrentlyBeingResized = true;\n       foundation.handleTargetScroll();\n       expect((foundation as any).currentAppBarOffsetTop).toBe(0);\n     });\n\n  it('top app bar : handleTargetScroll subtracts the currentAppBarOffsetTop amount scrolled',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(1);\n       foundation.handleTargetScroll();\n       expect((foundation as any).currentAppBarOffsetTop).toBe(-1);\n     });\n\n  it('top app bar : handleTargetScroll negative scroll results in currentAppBarOffsetTop being 0',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(-1);\n       foundation.handleTargetScroll();\n       expect((foundation as any).currentAppBarOffsetTop).toBe(0);\n     });\n\n  it('top app bar : handleTargetScroll scroll greater than top app bar height results in ' +\n         'currentAppBarOffsetTop being negative topAppBarHeight',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(100);\n       foundation.handleTargetScroll();\n       expect((foundation as any).currentAppBarOffsetTop).toBe(-64);\n     });\n\n  it('top app bar : handleTargetScroll scrolling does not generate a ' +\n         'positive currentAppBarOffsetTop',\n     () => {\n       const {foundation, mockAdapter} = setupTest();\n       mockAdapter.getViewportScrollY.and.returnValue(100);\n       foundation.handleTargetScroll();\n       mockAdapter.getViewportScrollY.and.returnValue(-100);\n       foundation.handleTargetScroll();\n       expect((foundation as any).currentAppBarOffsetTop).toBe(0);\n     });\n\n  it('top app bar : resize events should set isCurrentlyBeingResized to true',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation.handleWindowResize();\n\n       expect((foundation as any).isCurrentlyBeingResized).toBe(true);\n     });\n\n  it('top app bar : resize events throttle multiple calls of throttledResizeHandler ',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation.handleWindowResize();\n       expect(!(foundation as any).resizeThrottleId).toBe(false);\n       foundation.handleWindowResize();\n       jasmine.clock().tick(numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);\n       expect(!(foundation as any).resizeThrottleId).toBe(true);\n     });\n\n  it('top app bar : resize events debounce changing isCurrentlyBeingResized to false ',\n     () => {\n       const {foundation} = setupTest();\n\n       foundation.handleWindowResize();\n       const debounceId = (foundation as any).resizeDebounceId;\n       jasmine.clock().tick(50);\n       foundation.handleWindowResize();\n       expect(debounceId === (foundation as any).resizeDebounceId).toBe(false);\n       expect((foundation as any).isCurrentlyBeingResized).toBe(true);\n       jasmine.clock().tick(150);\n       expect((foundation as any).isCurrentlyBeingResized).toBe(false);\n     });\n\n  it('#destroy calls #adapter.setStyle(top, \"\")', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.destroy();\n    expect(mockAdapter.setStyle).toHaveBeenCalledWith('top', '');\n  });\n});\n"
  },
  {
    "path": "packages/mdc-top-app-bar/test/component.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {createFixture, html} from '../../../testing/dom';\nimport {emitEvent} from '../../../testing/dom/events';\nimport {createMockFoundation} from '../../../testing/helpers/foundation';\nimport {strings} from '../constants';\nimport {MDCFixedTopAppBarFoundation} from '../fixed/foundation';\nimport {MDCTopAppBar} from '../index';\nimport {MDCShortTopAppBarFoundation} from '../short/foundation';\nimport {MDCTopAppBarFoundation} from '../standard/foundation';\n\nfunction getFixture(removeIcon = false) {\n  const el = createFixture(html`\n    <div>\n      <header class=\"mdc-top-app-bar\">\n      <div class=\"mdc-top-app-bar__row\">\n        <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-start\">\n          <a href=\"#\" class=\"material-icons mdc-top-app-bar__navigation-icon\">menu</a>\n          <span class=\"mdc-top-app-bar__title\">Title</span>\n        </section>\n        <section class=\"mdc-top-app-bar__section mdc-top-app-bar__section--align-end\"\n        role=\"top-app-bar\">\n          <a href=\"#\" class=\"material-icons mdc-top-app-bar__action-item\" aria-label=\"Download\" alt=\"Download\">\n          file_download</a>\n          <a href=\"#\" class=\"material-icons mdc-top-app-bar__action-item\"\n             aria-label=\"Print this page\" alt=\"Print this page\">\n          print</a>\n          <a href=\"#\" class=\"material-icons mdc-top-app-bar__action-item\" aria-label=\"Bookmark this page\"\n          alt=\"Bookmark this page\">bookmark</a>\n          <div class=\"mdc-menu-anchor\">\n            <div class=\"mdc-menu\" tabindex=\"-1\" id=\"demo-menu\">\n              <ul class=\"mdc-menu__items mdc-deprecated-list\" role=\"menu\" aria-hidden=\"true\" style=\"transform: scale(1, 1);\">\n              </ul>\n            </div>\n          </section>\n        </div>\n      </header>\n      <main class=\"mdc-top-app-bar-fixed-adjust\">\n      </main>\n    </div>\n  `);\n\n  if (removeIcon) {\n    const icon =\n        el.querySelector<HTMLElement>(strings.NAVIGATION_ICON_SELECTOR)!;\n    (icon.parentNode as HTMLElement).removeChild(icon);\n  }\n\n  return el;\n}\n\nclass FakeRipple {\n  destroy: Function = jasmine.createSpy('.destroy');\n  unbounded: boolean|null = null;\n}\n\nfunction setupTest(removeIcon = false, rippleFactory = () => new FakeRipple()) {\n  const fixture = getFixture(removeIcon);\n  const root = fixture.querySelector<HTMLElement>(strings.ROOT_SELECTOR)!;\n  const mockFoundation = createMockFoundation(MDCTopAppBarFoundation);\n  mockFoundation.handleNavigationClick = jasmine.createSpy();\n  mockFoundation.handleTargetScroll = jasmine.createSpy();\n  mockFoundation.handleWindowResize = jasmine.createSpy();\n\n  const icon =\n      root.querySelector<HTMLElement>(strings.NAVIGATION_ICON_SELECTOR)!;\n  const component = new MDCTopAppBar(root, mockFoundation, rippleFactory);\n\n  return {root, component, icon, mockFoundation, fixture};\n}\n\ndescribe('MDCTopAppBar', () => {\n  it('attachTo initializes and returns an MDCTopAppBar instance', () => {\n    expect(MDCTopAppBar.attachTo(getFixture()) instanceof MDCTopAppBar)\n        .toBe(true);\n  });\n\n  it('constructor instantiates icon ripples for all icons', () => {\n    const rippleFactory = jasmine.createSpy('');\n    rippleFactory.withArgs(jasmine.anything())\n        .and.callFake(() => new FakeRipple());\n    setupTest(/** removeIcon */ false, rippleFactory);\n  });\n\n  it('constructor does not instantiate ripple for nav icon when not present',\n     () => {\n       const rippleFactory = jasmine.createSpy('');\n       rippleFactory.withArgs(jasmine.anything())\n           .and.callFake(() => new FakeRipple());\n       setupTest(/** removeIcon */ true, rippleFactory);\n     });\n\n  it('navIcon click event calls #foundation.handleNavigationClick', () => {\n    const {root, mockFoundation} = setupTest();\n    const navIcon =\n        root.querySelector<HTMLElement>('.mdc-top-app-bar__navigation-icon')!;\n    emitEvent(navIcon, 'click');\n    expect(mockFoundation.handleNavigationClick).toHaveBeenCalledTimes(1);\n  });\n\n  it('scroll event triggers #foundation.handleTargetScroll', () => {\n    const {mockFoundation} = setupTest();\n    emitEvent(window, 'scroll');\n    expect(mockFoundation.handleTargetScroll).toHaveBeenCalledTimes(1);\n  });\n\n  it('resize event triggers #foundation.handleWindowResize', () => {\n    const {mockFoundation} = setupTest();\n    emitEvent(window, 'resize');\n    expect(mockFoundation.handleWindowResize).toHaveBeenCalledTimes(1);\n  });\n\n  it('destroy destroys icon ripples', () => {\n    const {component} = setupTest();\n    component.destroy();\n    for (const icon of (component as any).iconRipples) {\n      expect(icon.destroy).toHaveBeenCalled();\n    }\n  });\n\n  it('destroy destroys scroll event handler', () => {\n    const {mockFoundation, component} = setupTest();\n    component.destroy();\n    emitEvent(window, 'scroll');\n    expect(mockFoundation.handleTargetScroll).not.toHaveBeenCalled();\n  });\n\n  it('destroy destroys resize event handler', () => {\n    const {mockFoundation, component} = setupTest();\n    component.destroy();\n    emitEvent(window, 'resize');\n    expect(mockFoundation.handleWindowResize).not.toHaveBeenCalled();\n  });\n\n  it('destroy destroys handleNavigationClick handler', () => {\n    const {mockFoundation, component, root} = setupTest();\n    const navIcon =\n        root.querySelector<HTMLElement>('.mdc-top-app-bar__navigation-icon')!;\n    component.destroy();\n    emitEvent(navIcon, 'resize');\n    expect(mockFoundation.handleNavigationClick).not.toHaveBeenCalled();\n  });\n\n  it('#setScrollTarget deregisters and registers scroll handler on provided target',\n     () => {\n       const {component} = setupTest();\n       const fakeTarget1 = document.createElement('div');\n       const fakeTarget2 = document.createElement('div');\n\n       component.setScrollTarget(fakeTarget1);\n       expect((component as any).scrollTarget).toEqual(fakeTarget1);\n\n       component.setScrollTarget(fakeTarget2);\n\n       expect((component as any).scrollTarget).toEqual(fakeTarget2);\n     });\n\n  it('getDefaultFoundation returns the appropriate foundation for default',\n     () => {\n       const fixture = getFixture();\n       const root = fixture.querySelector<HTMLElement>(strings.ROOT_SELECTOR)!;\n       const component =\n           new MDCTopAppBar(root, undefined, () => new FakeRipple());\n       expect((component as any).foundation instanceof MDCTopAppBarFoundation)\n           .toBe(true);\n       expect(\n           (component as any).foundation instanceof MDCShortTopAppBarFoundation)\n           .toBe(false);\n       expect(\n           (component as any).foundation instanceof MDCFixedTopAppBarFoundation)\n           .toBe(false);\n     });\n\n  it('getDefaultFoundation returns the appropriate foundation for fixed',\n     () => {\n       const fixture = getFixture();\n       const root = fixture.querySelector<HTMLElement>(strings.ROOT_SELECTOR)!;\n       root.classList.add(MDCTopAppBarFoundation.cssClasses.FIXED_CLASS);\n       const component =\n           new MDCTopAppBar(root, undefined, () => new FakeRipple());\n       expect(\n           (component as any).foundation instanceof MDCShortTopAppBarFoundation)\n           .toBe(false);\n       expect(\n           (component as any).foundation instanceof MDCFixedTopAppBarFoundation)\n           .toBe(true);\n     });\n\n  it('getDefaultFoundation returns the appropriate foundation for short',\n     () => {\n       const fixture = getFixture();\n       const root = fixture.querySelector<HTMLElement>(strings.ROOT_SELECTOR)!;\n       root.classList.add(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS);\n       const component =\n           new MDCTopAppBar(root, undefined, () => new FakeRipple());\n       expect(\n           (component as any).foundation instanceof MDCShortTopAppBarFoundation)\n           .toBe(true);\n       expect(\n           (component as any).foundation instanceof MDCFixedTopAppBarFoundation)\n           .toBe(false);\n     });\n\n  it('adapter#hasClass returns true if the root element has specified class',\n     () => {\n       const {root, component} = setupTest();\n       root.classList.add('foo');\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(true);\n     });\n\n  it('adapter#hasClass returns false if the root element does not have specified class',\n     () => {\n       const {component} = setupTest();\n       expect((component.getDefaultFoundation() as any).adapter.hasClass('foo'))\n           .toBe(false);\n     });\n\n  it('adapter#addClass adds a class to the root element', () => {\n    const {root, component} = setupTest();\n    (component.getDefaultFoundation() as any).adapter.addClass('foo');\n    expect(root).toHaveClass('foo');\n  });\n\n  it('adapter#removeClass removes a class from the root element', () => {\n    const {root, component} = setupTest();\n    root.classList.add('foo');\n    (component.getDefaultFoundation() as any).adapter.removeClass('foo');\n    expect(root).not.toHaveClass('foo');\n  });\n\n  it('adapter#setStyle sets a style attribute on the root element', () => {\n    const {root, component} = setupTest();\n    expect(root.style.getPropertyValue('top') === '1px').toBe(false);\n    (component.getDefaultFoundation() as any).adapter.setStyle('top', '1px');\n    expect(root.style.getPropertyValue('top') === '1px').toBe(true);\n  });\n\n  it('adapter#getViewportScrollY returns scroll distance', () => {\n    const {component} = setupTest();\n    expect(\n        (component.getDefaultFoundation() as any).adapter.getViewportScrollY())\n        .toEqual(window.pageYOffset);\n  });\n\n  it('adapter#getViewportScrollY returns scroll distance when scrollTarget is not window',\n     () => {\n       const {component} = setupTest();\n       const mockContent: any = {addEventListener: () => {}, scrollTop: 20};\n       component.setScrollTarget(mockContent);\n       expect((component.getDefaultFoundation() as any)\n                  .adapter.getViewportScrollY())\n           .toEqual(mockContent.scrollTop);\n     });\n\n  it('adapter#getTotalActionItems returns the number of action items on the opposite side of the menu',\n     () => {\n       const {root, component} = setupTest();\n       const adapterReturn = (component.getDefaultFoundation() as any)\n                                 .adapter.getTotalActionItems();\n       const actual =\n           root.querySelectorAll<HTMLElement>(strings.ACTION_ITEM_SELECTOR)\n               .length;\n       expect(adapterReturn).toEqual(actual);\n     });\n\n  it('adapter#notifyNavigationIconClicked emits the NAVIGATION_EVENT', () => {\n    const {component} = setupTest();\n    const callback = jasmine.createSpy('');\n    component.listen(strings.NAVIGATION_EVENT, callback);\n    (component.getDefaultFoundation() as any)\n        .adapter.notifyNavigationIconClicked();\n    expect(callback).toHaveBeenCalledWith(jasmine.any(Object));\n    expect(callback).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-top-app-bar/test/foundation.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {verifyDefaultAdapter} from '../../../testing/helpers/foundation';\nimport {setUpFoundationTest} from '../../../testing/helpers/setup';\nimport {cssClasses, numbers, strings} from '../constants';\nimport {MDCTopAppBarBaseFoundation} from '../foundation';\n\ndescribe('MDCTopAppBarBaseFoundation', () => {\n  it('exports strings', () => {\n    expect('strings' in MDCTopAppBarBaseFoundation).toBe(true);\n    expect(MDCTopAppBarBaseFoundation.strings).toEqual(strings);\n  });\n\n  it('exports cssClasses', () => {\n    expect('cssClasses' in MDCTopAppBarBaseFoundation).toBe(true);\n    expect(MDCTopAppBarBaseFoundation.cssClasses).toEqual(cssClasses);\n  });\n\n  it('exports numbers', () => {\n    expect('numbers' in MDCTopAppBarBaseFoundation).toBe(true);\n    expect(MDCTopAppBarBaseFoundation.numbers).toEqual(numbers);\n  });\n\n  it('defaultAdapter returns a complete adapter implementation', () => {\n    verifyDefaultAdapter(MDCTopAppBarBaseFoundation, [\n      'hasClass',\n      'addClass',\n      'removeClass',\n      'setStyle',\n      'getTopAppBarHeight',\n      'notifyNavigationIconClicked',\n      'getViewportScrollY',\n      'getTotalActionItems',\n    ]);\n  });\n\n  const setupTest = () => {\n    const {foundation, mockAdapter} =\n        setUpFoundationTest(MDCTopAppBarBaseFoundation);\n    return {foundation, mockAdapter};\n  };\n\n  it('#handleNavigationClick emits a navigation event', () => {\n    const {foundation, mockAdapter} = setupTest();\n    foundation.handleNavigationClick();\n    expect(mockAdapter.notifyNavigationIconClicked).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/mdc-touch-target/README.md",
    "content": "<!--docs:\ntitle: \"Touch Target\"\nlayout: detail\nsection: components\nexcerpt: \"Increased touch targets for components\"\npath: /catalog/touchtarget/\n-->\n\n# Touch Target\n\nTouch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.\nFor example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.\n\nMaterial Design spec states that touch targets should be at least 48 x 48 px.\nThe MDC Web library provides mixins and guidance on adding an increased touch target for the following components:\n* Button\n* Chips\n* Checkbox\n* Radio\n* Mini FAB\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/usability/accessibility.html#layout-typography\">Material Design guidelines: Touch Targets</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/touch-target\n```\n\n## Basic Usage\n\n### HTML Structure\n\nFor a given button component:\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">My Inaccessible Button</span>\n</button>\n```\n\nYou would add an increased touch target as follows:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-button mdc-button--touch\">\n    <div class=\"mdc-button__ripple\"></div>\n    <div class=\"mdc-button__touch\"></div>\n    <span class=\"mdc-button__label\">My Accessible Button</span>\n  </button>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n### Styles\n\n```css\n@use \"@material/touch-target/mdc-touch-target\";\n```\n\n## Style Customization\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`wrapper` | Applied to the wrapper touch target element.\n`touch-target` | Applied to the inner touch target element.\n`margin` | Applied to the component root element. Adds margin to compensate for the increased touch target.\n"
  },
  {
    "path": "packages/mdc-touch-target/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n"
  },
  {
    "path": "packages/mdc-touch-target/_mixins.import.scss",
    "content": "@forward \"@material/base\" as mdc-base-*;\n@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"./index\" as mdc-touch-target-* hide mdc-touch-target-touch-target;\n@forward \"./index\" as mdc-* show mdc-touch-target;\n"
  },
  {
    "path": "packages/mdc-touch-target/_mixins.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_touch-target.scss' module instead.\n@forward './touch-target' show wrapper, touch-target, margin;\n"
  },
  {
    "path": "packages/mdc-touch-target/_touch-target.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/custom-properties';\n\n$height: 48px !default;\n$width: $height !default;\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-touch-target-wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      // Ensure that styles are only emitted once across all components that\n      // have increased touch targets.\n      @include base-mixins.emit-once('mdc-touch-target/wrapper') {\n        // NOTE: Will change to `inline-block` in the future, but keeping as is\n        // temporarily for backwards-compatibility.\n        display: inline;\n      }\n    }\n  }\n}\n\n/// Styles applied to the component's inner touch target element.\n/// By default, only sets the inner element height to the minimum touch target\n/// height ($mdc-touch-target-height).\n/// @param {Boolean} $set-width [false] - Sets the inner element width to the\n///     minimum touch target width ($mdc-touch-target-width).\n/// @param $height [$mdc-touch-target-height] - Touch target height.\n/// @param $width [$mdc-touch-target-width] - Touch target width.\n@mixin touch-target(\n  $set-width: false,\n  $query: feature-targeting.all(),\n  $height: $height,\n  $width: $width\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    top: 50%;\n    height: $height;\n  }\n\n  @if $set-width {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      left: 50%;\n      width: $width;\n      @include rtl.ignore-next-line();\n      transform: translate(-50%, -50%);\n    }\n  } @else {\n    @include feature-targeting.targets($feat-structure) {\n      left: 0;\n      right: 0;\n      transform: translateY(-50%);\n    }\n  }\n}\n\n/// Applies margin to the component with the increased touch target,\n/// to compensate for the touch target.\n@mixin margin(\n  $component-height,\n  $component-width: null,\n  $touch-target-height: $height,\n  $touch-target-width: $width,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @if keys.is-key($touch-target-height) or\n      keys.is-key($component-height) or\n      custom-properties.is-custom-prop($touch-target-height) or\n      custom-properties.is-custom-prop($component-height) or\n      custom-properties.is-custom-prop-string($touch-target-height) or\n      custom-properties.is-custom-prop-string($component-height)\n    {\n      // Custom properties\n      @include theme.property(\n        margin-top,\n        'max((touch-target-height - component-height) / 2, 0px)',\n        $replace: (\n          component-height: $component-height,\n          touch-target-height: $touch-target-height\n        )\n      );\n      @include theme.property(\n        margin-bottom,\n        'max((touch-target-height - component-height) / 2, 0px)',\n        $replace: (\n          component-height: $component-height,\n          touch-target-height: $touch-target-height\n        )\n      );\n    } @else {\n      // Static values\n      $vertical-margin-value: math.div(\n        $touch-target-height - $component-height,\n        2\n      );\n      margin-top: $vertical-margin-value;\n      margin-bottom: $vertical-margin-value;\n    }\n  }\n\n  @if $component-width {\n    @include feature-targeting.targets($feat-structure) {\n      @if keys.is-key($touch-target-width) or\n        keys.is-key($component-width) or\n        custom-properties.is-custom-prop($touch-target-width) or\n        custom-properties.is-custom-prop($component-width) or\n        custom-properties.is-custom-prop-string($touch-target-width) or\n        custom-properties.is-custom-prop-string($component-width)\n      {\n        // Custom properties\n        @include theme.property(\n          margin-right,\n          'max((touch-target-width - component-width) / 2, 0px)',\n          $replace: (\n            component-width: $component-width,\n            touch-target-width: $touch-target-width\n          )\n        );\n        @include theme.property(\n          margin-left,\n          'max((touch-target-width - component-width) / 2), 0px',\n          $replace: (\n            component-width: $component-width,\n            touch-target-width: $touch-target-width\n          )\n        );\n      } @else {\n        // Static values\n        $horizontal-margin-value: math.div(\n          $touch-target-width - $component-width,\n          2\n        );\n        margin-right: $horizontal-margin-value;\n        margin-left: $horizontal-margin-value;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mdc-touch-target/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-touch-target-* hide mdc-touch-target-wrapper, mdc-touch-target-touch-target, mdc-touch-target-margin;\n"
  },
  {
    "path": "packages/mdc-touch-target/_variables.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_touch-target.scss' file instead\n@forward './touch-target' show $height, $width;\n"
  },
  {
    "path": "packages/mdc-touch-target/package.json",
    "content": "{\n  \"name\": \"@material/touch-target\",\n  \"description\": \"Touch target mixins and variables for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"accessibility\",\n    \"touch target\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-touch-target\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/base\": \"^14.0.0\",\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/rtl\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-touch-target/styles.scss",
    "content": "//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './touch-target';\n\n@include touch-target.wrapper;\n"
  },
  {
    "path": "packages/mdc-touch-target/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as touch-target;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include touch-target.wrapper($query: $query);\n    @include touch-target.touch-target($query: $query);\n    @include touch-target.margin(0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-touch-target/test/mdc-touch-target.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-touch-target.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "packages/mdc-typography/README.md",
    "content": "<!--docs:\ntitle: \"Typography\"\nlayout: detail\nsection: components\nexcerpt: \"Typographic scale that handles a set of type sizes\"\niconId: typography\npath: /catalog/typography/\n-->\n\n# Typography\n\nMaterial Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.\n\nMDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:\n\n* Headline 1\n* Headline 2\n* Headline 3\n* Headline 4\n* Headline 5\n* Headline 6\n* Subtitle 1\n* Subtitle 2\n* Body 1\n* Body 2\n* Caption\n* Button\n* Overline\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-typography\">Material Design guidelines: Typography</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/typography\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/typography\n```\n\n## Basic Usage\n\n### HTML Structure\n\nWe recommend using Roboto from Google Fonts:\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\" rel=\"stylesheet\">\n</head>\n<body class=\"mdc-typography\">\n  <h1 class=\"mdc-typography--headline1\">Big header</h1>\n</body>\n```\n\n### Styles\n\n```css\n@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\n\n### CSS Classes\n\nSome components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.\n\nIf you want to set the typographic style of an element, which is not a Material Design component, you can apply the following CSS classes.\n\nCSS Class | Description\n--- | ---\n`mdc-typography` | Sets the font to Roboto\n`mdc-typography--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.\n\n#### `$style` Values\n\nThese styles can be used as the `$style` argument for the `mdc-typography` mixin.\n\n* `headline1`\n* `headline2`\n* `headline3`\n* `headline4`\n* `headline5`\n* `headline6`\n* `subtitle1`\n* `subtitle2`\n* `body1`\n* `body2`\n* `caption`\n* `button`\n* `overline`\n\n#### Overriding Styles\n\nAll styles can be overridden using CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-headline1: (\n  font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n$mdc-typography-styles-headline2: (\n  font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n  font-size: 3.25rem\n);\n\n@import ...\n```\n"
  },
  {
    "path": "packages/mdc-typography/_functions.import.scss",
    "content": "@forward \"./index\" as mdc-typography-* hide $mdc-typography-font-family, $mdc-typography-base, $mdc-typography-font-weight-values, $mdc-typography-styles, mdc-typography-core-styles, mdc-typography-base, mdc-typography-typography, mdc-typography-overflow-ellipsis, mdc-typography-baseline-top, mdc-typography-baseline-bottom, mdc-typography-baseline-strut-;\n"
  },
  {
    "path": "packages/mdc-typography/_functions.scss",
    "content": "//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_typography.scss' instead.\n@forward './typography' show set-styles_, get-letter-spacing_, pxToRem;\n"
  },
  {
    "path": "packages/mdc-typography/_index.scss",
    "content": "@forward \"./variables\";\n@forward \"./mixins\";\n@forward \"./functions\";\n"
  },
  {
    "path": "packages/mdc-typography/_mixins.import.scss",
    "content": "@forward \"@material/feature-targeting\" as mdc-feature-*;\n@forward \"./index\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"./index\" as mdc-* show mdc-typography;\n"
  },
  {
    "path": "packages/mdc-typography/_mixins.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_typography.scss' instead.\n@forward './typography' show core-styles, base, typography, smooth-font, overflow-ellipsis, baseline, text-baseline, baseline-top, baseline-bottom, zero-width-prefix, baseline-strut_;\n"
  },
  {
    "path": "packages/mdc-typography/_typography.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n  $options: (\n    custom-property-prefix: typography,\n  );\n\n  $base-styles: keys.set-values($base-styles, $options: $options);\n\n  @each $style, $style-props in $scale-styles {\n    @each $base-key in map.keys($base-styles) {\n      // Ignore the return result, it's not needed\n      $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n    }\n\n    // Merge base properties for all styles.\n    $style-props: map.merge($base-styles, $style-props);\n\n    // Merge overrides onto each style.\n    $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n    // Register keys for this style\n    @each $property, $value in $style-props {\n      $unused: keys.set-value(\n        keys.combine($style, $property),\n        $value,\n        $options: $options\n      );\n    }\n\n    // Override original styles with new styles.\n    $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n  }\n\n  @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n  @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n  @if custom-properties.is-custom-prop($px) {\n    @return custom-properties.set-fallback(\n      $px,\n      _px-to-rem(custom-properties.get-fallback($px))\n    );\n  }\n  @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n  @if $px == null {\n    @return null;\n  }\n  @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n  font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n  thin: 100,\n  light: 300,\n  regular: 400,\n  medium: 500,\n  bold: 700,\n  black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n  $base,\n  (\n    headline1: (\n      font-size: px-to-rem(96px),\n      line-height: px-to-rem(96px),\n      font-weight: map.get($font-weight-values, light),\n      letter-spacing: get-letter-spacing_(-1.5, 6),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline2: (\n      font-size: px-to-rem(60px),\n      line-height: px-to-rem(60px),\n      font-weight: map.get($font-weight-values, light),\n      letter-spacing: get-letter-spacing_(-0.5, 3.75),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline3: (\n      font-size: px-to-rem(48px),\n      line-height: px-to-rem(50px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: normal,\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline4: (\n      font-size: px-to-rem(34px),\n      line-height: px-to-rem(40px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.25, 2.125),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline5: (\n      font-size: px-to-rem(24px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: normal,\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    headline6: (\n      font-size: px-to-rem(20px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(0.25, 1.25),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    subtitle1: (\n      font-size: px-to-rem(16px),\n      line-height: px-to-rem(28px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.15, 1),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    subtitle2: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(22px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(0.1, 0.875),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    body1: (\n      font-size: px-to-rem(16px),\n      line-height: px-to-rem(24px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.5, 1),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    body2: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(20px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.25, 0.875),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    caption: (\n      font-size: px-to-rem(12px),\n      line-height: px-to-rem(20px),\n      font-weight: map.get($font-weight-values, regular),\n      letter-spacing: get-letter-spacing_(0.4, 0.75),\n      text-decoration: inherit,\n      text-transform: inherit,\n    ),\n    button: (\n      font-size: px-to-rem(14px),\n      line-height: px-to-rem(36px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(1.25, 0.875),\n      text-decoration: none,\n      text-transform: uppercase,\n    ),\n    overline: (\n      font-size: px-to-rem(12px),\n      line-height: px-to-rem(32px),\n      font-weight: map.get($font-weight-values, medium),\n      letter-spacing: get-letter-spacing_(2, 0.75),\n      text-decoration: none,\n      text-transform: uppercase,\n    ),\n  ),\n  (\n    headline1: $styles-headline1,\n    headline2: $styles-headline2,\n    headline3: $styles-headline3,\n    headline4: $styles-headline4,\n    headline5: $styles-headline5,\n    headline6: $styles-headline6,\n    subtitle1: $styles-subtitle1,\n    subtitle2: $styles-subtitle2,\n    body1: $styles-body1,\n    body2: $styles-body2,\n    caption: $styles-caption,\n    button: $styles-button,\n    overline: $styles-overline,\n  )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n  @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n  @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n  .mdc-typography {\n    @include base($query: $query);\n  }\n\n  @each $style in get-typography-styles() {\n    .mdc-typography--#{$style} {\n      @include typography($style, $query: $query);\n    }\n  }\n}\n\n@mixin base($query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include smooth-font($query: $query);\n  @include feature-targeting.targets($feat-typography) {\n    @include theme.property(font-family, font-family);\n  }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @if not is-typography-style($style) {\n    @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n  }\n\n  @include smooth-font($query: $query);\n  @include feature-targeting.targets($feat-typography) {\n    @each $key in keys.get-keys($style) {\n      // <style>-<property>: headline1-font-size\n      // Slice the string past the first key separator to retrieve the\n      // property name\n      $property: string.slice($key, string.index($key, '-') + 1);\n      @if list.index($exclude-props, $property) == null {\n        $current-global-value: map.get($styles, $style, $property);\n        $configured-global-value: map.get($_styles-copy, $style, $property);\n        @if $current-global-value != $configured-global-value {\n          // A compile time change was made to $mdc-typography-styles. To\n          // support Angular, use this value instead of the key's value.\n          @if $current-global-value {\n            // Only emit if the overridden value exists\n            $custom-prop: keys.create-custom-property($key);\n            $custom-prop: custom-properties.set-fallback(\n              $custom-prop,\n              $current-global-value\n            );\n            @include theme.property($property, $custom-prop);\n          }\n        } @else {\n          // Otherwise, use the key, which may be different from the original\n          // configured global value.\n          @include theme.property($property, $key);\n        }\n      }\n    }\n  }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include feature-targeting.targets($feat-typography) {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n///     text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n///     bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n///     `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n  $top: 0,\n  $bottom: 0,\n  $display: block,\n  $query: feature-targeting.all()\n) {\n  $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n  @if list.index($validDisplayTypes, $display) == null {\n    @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n  }\n\n  $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    display: $display;\n\n    @if $isFlexbox {\n      align-items: baseline;\n    }\n  }\n\n  @if $top > 0 {\n    @include baseline-top($top, $query: $query);\n  }\n\n  @if $bottom > 0 {\n    @if $isFlexbox {\n      @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n    }\n\n    @include baseline-bottom($bottom, $query: $query);\n  }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n///     text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n///     bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n///     is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n///     or `inline-block`.\n@mixin text-baseline(\n  $top: 0,\n  $bottom: 0,\n  $display: block,\n  $lineHeight: normal,\n  $query: feature-targeting.all()\n) {\n  $validDisplayTypes: (block, inline-block);\n\n  @if list.index($validDisplayTypes, $display) == null {\n    @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n  }\n\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include baseline(\n    $display: $display,\n    $top: $top,\n    $bottom: $bottom,\n    $query: $query\n  );\n  @include feature-targeting.targets($feat-structure) {\n    @if $top > 0 {\n      margin-top: 0;\n      /* @alternate */\n      line-height: #{$lineHeight};\n    }\n\n    @if $bottom > 0 {\n      margin-bottom: -1 * $bottom;\n    }\n  }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n///     the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::before {\n    @include feature-targeting.targets($feat-structure) {\n      @include baseline-strut_($distance);\n\n      vertical-align: 0;\n    }\n  }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n///     bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include baseline-strut_($distance);\n\n      vertical-align: -1 * $distance;\n    }\n  }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  &::before {\n    @include feature-targeting.targets($feat-structure) {\n      content: '\\200b';\n    }\n  }\n}\n\n@mixin baseline-strut_($distance) {\n  display: inline-block;\n  width: 0;\n  height: $distance;\n  content: '';\n}\n\n@function get-font($typography) {\n  @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n  @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n  @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n  @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n  @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n  font: null,\n  line-height: null,\n  size: null,\n  weight: null,\n  tracking: null,\n);\n\n@mixin theme-styles($theme) {\n  @include theme.validate-theme-styles($_typography-theme, $theme);\n\n  @include theme.property(font-family, map.get($theme, font));\n  @include theme.property(line-height, map.get($theme, line-height));\n  @include theme.property(font-size, map.get($theme, size));\n  @include theme.property(font-weight, map.get($theme, weight));\n  @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n\n/// Resolves a theme's typography tokens for the given prefix.\n///\n/// @example - scss\n///   // $theme has the following tokens:\n///   // - label-text-font\n///   // - label-text-line-height\n///   // - label-text-size\n///   // - label-text-tracking\n///   // - label-text-weight\n///   $theme: resolve-theme($theme, map.get($resolvers, typography), label-text);\n///\n/// @param {Map} $theme - The theme to resolve tokens for.\n/// @param {Function} $resolver - The typography resolver to use.\n/// @param {String...} $token-prefixes - The prefix(es) of a typography token\n///     set.\n/// @return {Map} The theme with resolved typography tokens.\n@function resolve-theme($theme, $resolver, $token-prefixes...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $token-prefix in $token-prefixes {\n    $typography-theme: meta.call(\n      $resolver,\n      $font: map.get($theme, '#{$token-prefix}-font'),\n      $line-height: map.get($theme, '#{$token-prefix}-line-height'),\n      $size: map.get($theme, '#{$token-prefix}-size'),\n      $tracking: map.get($theme, '#{$token-prefix}-tracking'),\n      $weight: map.get($theme, '#{$token-prefix}-weight')\n    );\n\n    $theme: map.merge(\n      $theme,\n      (\n        '#{$token-prefix}-font': map.get($typography-theme, font),\n        '#{$token-prefix}-line-height': map.get($typography-theme, line-height),\n        '#{$token-prefix}-size': map.get($typography-theme, size),\n        '#{$token-prefix}-tracking': map.get($typography-theme, tracking),\n        '#{$token-prefix}-weight': map.get($typography-theme, weight),\n      )\n    );\n  }\n\n  @return $theme;\n}\n"
  },
  {
    "path": "packages/mdc-typography/_variables.import.scss",
    "content": "@forward \"./index\" as mdc-typography-* hide mdc-typography-core-styles, mdc-typography-base, mdc-typography-typography, mdc-typography-overflow-ellipsis, mdc-typography-baseline-top, mdc-typography-baseline-bottom, mdc-typography-baseline-strut-;\n"
  },
  {
    "path": "packages/mdc-typography/_variables.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n/// @deprecated Import '_typography.scss' instead.\n@forward './typography' show $font-family, $styles-headline1, $styles-headline2, $styles-headline3, $styles-headline4, $styles-headline5, $styles-headline6, $styles-subtitle1, $styles-subtitle2, $styles-body1, $styles-body2, $styles-caption, $styles-button, $styles-overline, $base, $font-weight-values, $styles;\n"
  },
  {
    "path": "packages/mdc-typography/mdc-typography.import.scss",
    "content": "@forward \"variables\" as mdc-typography-*;\n@forward \"mixins\" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis;\n@forward \"mixins\" as mdc-typography-* hide mdc-typography-typography;\n@forward \"@material/feature-targeting/functions\" as mdc-feature-*;\n@forward \"functions\" as mdc-typography-*;\n@forward \"mdc-typography\";\n"
  },
  {
    "path": "packages/mdc-typography/mdc-typography.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@forward './styles';\n"
  },
  {
    "path": "packages/mdc-typography/package.json",
    "content": "{\n  \"name\": \"@material/typography\",\n  \"description\": \"Typography classes, mixins, and variables for Material Components for the web\",\n  \"version\": \"14.0.0\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"material components\",\n    \"material design\",\n    \"typography\",\n    \"font\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/material-components/material-components-web.git\",\n    \"directory\": \"packages/mdc-typography\"\n  },\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"@material/feature-targeting\": \"^14.0.0\",\n    \"@material/theme\": \"^14.0.0\",\n    \"tslib\": \"^2.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mdc-typography/styles.scss",
    "content": "//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use './typography';\n\n@include typography.core-styles;\n"
  },
  {
    "path": "packages/mdc-typography/test/feature-targeting-any.test.scss",
    "content": "@use '../mixins' as typography;\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin test($query) {\n  .test {\n    @include typography.core-styles($query: $query);\n    @include typography.base($query: $query);\n    @include typography.typography(button, $query: $query);\n    @include typography.overflow-ellipsis($query: $query);\n    @include typography.baseline($top: 0, $bottom: 0, $query: $query);\n    @include typography.text-baseline($top: 0, $bottom: 0, $query: $query);\n  }\n}\n\n// This shouldn't output any CSS.\n@include test(feature-targeting.any());\n"
  },
  {
    "path": "packages/mdc-typography/test/mdc-typography.scss.test.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\nimport * as path from 'path';\n\nimport {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';\n\ndescribe('mdc-typography.scss', () => {\n  expectStylesWithNoFeaturesToBeEmpty(\n      path.join(__dirname, 'feature-targeting-any.test.css'));\n});\n"
  },
  {
    "path": "prettier.config.js",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nmodule.exports = {\n  overrides: [\n    {\n      /** Sass-specific configuration. */\n      files: '*.scss',\n      options: {\n        singleQuote: true,\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "scripts/build/clean.js",
    "content": "/**\n * @fileoverview Cleans top-level build directories (for OSS and internal processes),\n * dist subfolders under packages, and .js[.map] files in package directories.\n */\n\nconst del = require('del');\nconst fs = require('fs');\n\nconst {sync: globSync} = require('glob');\n\nfunction main() {\n  removeDirectory('build');\n  removeDirectory('.rewrite-tmp');\n  removeFilesOfType('css');\n  removeFilesOfType('js');\n  removeFilesOfType('d.ts', [\n    // This file is hand-written.\n    'packages/mdc-base/externs.d.ts',\n  ]);\n  removeFilesOfType('map');\n}\n\nfunction removeDirectory(directory) {\n  del.sync([directory]);\n}\n\nfunction removeFilesOfType(type, extraIgnore = []) {\n  const fileGlob = `packages/**/*.${type}`;\n  const filePaths = globSync(fileGlob, {\n    ignore: ['**/node_modules/**', ...extraIgnore],\n  });\n  filePaths.forEach((filePath) => {\n    fs.unlink(filePath, (err) => {\n      if (err) throw err;\n    });\n  });\n}\n\nmain();\n"
  },
  {
    "path": "scripts/build/environment.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Provides an API to read and write environment variables and npm lifecycle events.\n */\n\n'use strict';\n\n// TODO: remove this class. this is only used for webpack.\n// We should just use the built in Webpack production/development arguments.\nclass Environment {\n  setBabelEnv() {\n    const event = this.getNpmLifecycleEvent_();\n    // TODO: Figure out if this `if` check should include all `test:*` targets.\n    // See discussion on https://github.com/material-components/material-components-web/pull/2192#discussion_r166330231\n    // for context.\n    if (event === 'test' || event === 'test:watch') {\n      process.env.BABEL_ENV = 'test';\n    }\n  }\n\n  isDev() {\n    return process.env.MDC_ENV === 'development';\n  }\n\n  isProd() {\n    return process.env.MDC_ENV === 'production';\n  }\n\n  getNpmLifecycleEvent_() {\n    return process.env.npm_lifecycle_event;\n  }\n}\n\nmodule.exports = Environment;\n"
  },
  {
    "path": "scripts/build/path-resolver.js",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Parses and resolves filesystem paths.\n */\n\n'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\n\nclass PathResolver {\n  constructor({\n    pathLib = path,\n    fsLib = fs,\n  } = {}) {\n    /** @type {!path} */\n    this.pathLib_ = pathLib;\n\n    /** @type {!fs} */\n    this.fsLib_ = fsLib;\n  }\n\n  /**\n   * Returns the absolute path to the repository's root directory on the local filesystem.\n   * @return {string}\n   */\n  getProjectRootAbsolutePath() {\n    return this.pathLib_.resolve(this.pathLib_.join(__dirname, '../../'));\n  }\n\n  /**\n   * Resolves zero or more path portions (relative to the project root) into a single absolute filesystem path.\n   *\n   * Examples:\n   *\n   * // First argument is a relative directory path\n   * > getAbsolutePath('/test/screenshot', 'out/main', 'foo.css')\n   *     === '/Users/betty/mdc-web/test/screenshot/out/main/foo.css'\n   *\n   * // First argument is an absolute directory path\n   * > getAbsolutePath('/Users/betty/mdc-web', '/test/screenshot', 'out/main', 'foo.css')\n   *     === '/Users/betty/mdc-web/test/screenshot/out/main/foo.css'\n   *\n   * // No arguments (returns the project root)\n   * > getAbsolutePath()\n   *     === '/Users/betty/mdc-web'\n   *\n   * @param {...string} pathPartsRelativeToProjectRoot Zero or more portions of a filesystem path.\n   *   The first argument must be either a path relative to the project root (e.g., '/test/screenshot'),\n   *   or an absolute path to an existing directory (e.g., '/Users/betty/mdc-web/test/screenshot').\n   *   All subsequent arguments are concatenated onto the first argument, with each part separated by a single\n   *   OS-specific directory separator character (`/` on *nix, `\\` on Windows).\n   * @return {string}\n   */\n  getAbsolutePath(...pathPartsRelativeToProjectRoot) {\n    // First argument is already an absolute path\n    if (this.fsLib_.existsSync(pathPartsRelativeToProjectRoot[0])) {\n      return this.pathLib_.resolve(this.pathLib_.join(...pathPartsRelativeToProjectRoot));\n    }\n\n    // First argument is a path relative to the repo root\n    const projectRootAbsolutePath = this.getProjectRootAbsolutePath();\n    return this.pathLib_.resolve(this.pathLib_.join(projectRootAbsolutePath, ...pathPartsRelativeToProjectRoot));\n  }\n\n  /**\n   * Returns the path to a file relative to the given root.\n   * @param absolutePathToFile\n   * @param absolutePathToRoot\n   * @return {string}\n   */\n  getRelativePath(absolutePathToFile, absolutePathToRoot = this.getProjectRootAbsolutePath()) {\n    return this.pathLib_.relative(absolutePathToRoot, absolutePathToFile);\n  }\n\n  /**\n   * Concatenates the given `pathParts`, separated by an OS-specific directory separator character\n   * (`/` on *nix, `\\` on Windows).\n   * @param pathParts\n   * @return {string}\n   */\n  join(...pathParts) {\n    return this.pathLib_.join(...pathParts);\n  }\n\n  /**\n   * Returns the name of the last file or directory in a path.\n   * @param {string} filePath\n   * @return {string}\n   */\n  getFilename(filePath) {\n    return this.pathLib_.basename(filePath);\n  }\n\n  /**\n   * Removes the file extension from a path.\n   * @param {string} filePath\n   * @return {string}\n   */\n  removeFileExtension(filePath) {\n    return filePath.replace(/\\.\\w+$/, '');\n  }\n}\n\nmodule.exports = PathResolver;\n"
  },
  {
    "path": "scripts/canary-release.sh",
    "content": "#!/bin/sh\n\nset -e\n\nfunction log() {\n  echo '\\033[36m[canary-release]\\033[0m' \"$@\"\n}\n\nfunction fail() {\n  echo '\\033[31mFAILURE:\\033[0m' \"$@\"\n}\n\nlog \"Preparing for canary release...\"\n\nlog \"Installing dependencies...\"\nif ! npm i; then\n  fail \"npm install failed.\"\n  exit 1\nfi\necho \"\"\n\nlog \"Running pre-release script...\"\nif ! ./scripts/pre-release.sh; then\n  fail \"Pre-release script failed\"\n  exit 1\nfi\n\nlog \"Bumping up MDC Web version to canary...\"\nif ! npx lerna version premajor --no-git-tag-version --no-push --preid canary.$(git rev-parse --short HEAD) --yes --exact; then\n  fail \"lerna version command failed\"\n  exit 1\nfi\necho \"\"\n\nPREVIOUS_GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD)\nCANARY_RELEASE_VERSION=$(npm run version --silent)\nCANARY_RELEASE_BRANCH=release/v$CANARY_RELEASE_VERSION\n\nlog \"Creating temporary release branch...\"\n  git checkout -B $CANARY_RELEASE_BRANCH\n  git commit -am \"chore: Publish\"\necho \"\"\n\nlog \"Publishing packages to NPM...\"\nif ! npx lerna publish from-package --dist-tag canary; then\n  fail \"NPM Publish was not successful\"\n  exit 1\nfi\necho \"\"\n\nlog \"Creating release...\"\n  git tag v$CANARY_RELEASE_VERSION\necho \"Created git tag v$CANARY_RELEASE_VERSION.\"\necho \"\"\n\nlog \"Cleaning up...\"\n  git checkout $PREVIOUS_GIT_BRANCH\n  git branch -D $CANARY_RELEASE_BRANCH\necho \"\"\n\nlog \"MDC Web v$CANARY_RELEASE_VERSION is successfully published!\"\necho \"\"\necho \"  Run git push origin v$CANARY_RELEASE_VERSION\"\necho \"\"\n"
  },
  {
    "path": "scripts/check-pkg-for-release.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Used within pre-release.sh, this checks a component's package.json\n * to ensure that if it's a new component (version = \"0.0.0\"), it will have a proper\n * \"publishConfig.access\" property set to \"public\".\n * The argument should be the package.json file to check.\n */\n\nconst assert = require('assert');\nconst fs = require('fs');\nconst readDirRecursive = require('fs-readdir-recursive');\nconst path = require('path');\nconst childProcess = require('child_process');\n\nconst {default: traverse} = require('babel-traverse');\nconst camelCase = require('camel-case');\nconst recast = require('recast');\nconst typescriptParser = require('recast/parsers/typescript');\n\nconst CLI_PACKAGE_JSON_RELATIVE_PATH = process.argv[2];\nif (!CLI_PACKAGE_JSON_RELATIVE_PATH) {\n  console.error(`Usage: node ${path.basename(process.argv[1])} packages/mdc-foo/package.json`);\n  process.exit(1);\n}\nconst PACKAGE_RELATIVE_PATH = CLI_PACKAGE_JSON_RELATIVE_PATH.replace('package.json', '');\n\nif (!new RegExp('packages/[^/]+/package.json$').test(CLI_PACKAGE_JSON_RELATIVE_PATH)) {\n  console.error(`Invalid argument: \"${CLI_PACKAGE_JSON_RELATIVE_PATH}\" is not a valid path to a package.json file.`);\n  console.error('Expected format: packages/mdc-foo/package.json');\n  process.exit(1);\n}\n\nconst CLI_PACKAGE_JSON = require(path.resolve(CLI_PACKAGE_JSON_RELATIVE_PATH));\n\nconst WEBPACK_CONFIG_RELATIVE_PATH = 'webpack.config.js';\nconst WEBPACK_CONFIG = require(path.resolve(WEBPACK_CONFIG_RELATIVE_PATH));\n\nconst MASTER_TS_RELATIVE_PATH = 'packages/material-components-web/index.ts';\nconst MASTER_CSS_RELATIVE_PATH = 'packages/material-components-web/material-components-web.scss';\nconst MASTER_PACKAGE_JSON_RELATIVE_PATH = 'packages/material-components-web/package.json';\nconst MASTER_PACKAGE_JSON = require(path.resolve(MASTER_PACKAGE_JSON_RELATIVE_PATH));\n\n// These few MDC packages work as foundation or utility packages, and are not\n// directly included in webpack or the material-component-web module. But they\n// are necessary since other MDC packages depend on them.\nconst CSS_EXCLUDES = new Set([\n  'base',\n  'animation',\n  'auto-init',\n  'density',\n  'dom',\n  'feature-targeting',\n  'focus',\n  'focus-ring',\n  'progress-indicator',\n  'rtl',\n  'shape',\n  'tokens',\n  'touch-target',\n]);\n\nconst JS_EXCLUDES = new Set([\n  'animation',\n  'progress-indicator',\n  'tokens',\n  'chips', // Temporarily added during deprecation migration.\n]);\n\nconst NOT_AUTOINIT = new Set([\n  'auto-init',\n  'base',\n  'dom',\n  'progress-indicator',\n  'tab', // Only makes sense in context of tab-bar\n  'tab-indicator', // Only makes sense in context of tab-bar\n  'tab-scroller', // Only makes sense in context of tab-bar\n]);\n\nmain();\n\nfunction main() {\n  checkPublicConfigForNewComponent();\n  if (CLI_PACKAGE_JSON.name !== MASTER_PACKAGE_JSON.name) {\n    if (CLI_PACKAGE_JSON.private) {\n      console.log('Skipping private component', CLI_PACKAGE_JSON.name);\n    } else {\n      checkDependencyAddedInWebpackConfig();\n      checkDependencyAddedInMDCPackage();\n      checkUsedDependenciesMatchDeclaredDependencies();\n    }\n  }\n}\n\nfunction checkPublicConfigForNewComponent() {\n  if (CLI_PACKAGE_JSON.version === '0.0.0') {\n    assert.notEqual(typeof CLI_PACKAGE_JSON.publishConfig, 'undefined',\n      'Please add publishConfig to' + CLI_PACKAGE_JSON.name + '\\'s package.json. Consult our ' +\n      'docs/authoring-components.md to ensure your component\\'s package.json ' +\n      'is well-formed.');\n    assert.equal(CLI_PACKAGE_JSON.publishConfig.access, 'public',\n      'Please set publishConfig.access to \"public\" in ' + CLI_PACKAGE_JSON.name + '\\'s package.json. ' +\n      'Consult our docs/authoring-components.md to ensure your component\\'s package.json ' +\n      'is well-formed.');\n  }\n}\n\nfunction checkDependencyAddedInWebpackConfig() {\n  // Check if css has been added to webpack config\n  checkCSSDependencyAddedInWebpackConfig();\n\n  // Check if js component has been added to webpack config\n  if (typeof(CLI_PACKAGE_JSON.main) !== 'undefined') {\n    checkJSDependencyAddedInWebpackConfig();\n  }\n}\n\nfunction checkJSDependencyAddedInWebpackConfig() {\n  const name = getPkgName();\n  if (JS_EXCLUDES.has(name)) {\n    return;\n  }\n\n  const jsconfig = WEBPACK_CONFIG.find((value) => {\n    return value.name === 'main-js-a-la-carte';\n  });\n  const pkgName = CLI_PACKAGE_JSON.name.replace('@material/', '');\n  assert.notEqual(typeof jsconfig.entry[pkgName], 'undefined',\n    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' javascript dependency is not added to webpack ' +\n    'configuration. Please add ' + pkgName + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\\'s js-components ' +\n    'entry before commit. If package @material/' + name + ' has no exported JS, add \"' + name + '\" to ' +\n    'the JS_EXCLUDES set in this file.');\n}\n\nfunction checkCSSDependencyAddedInWebpackConfig() {\n  const name = getPkgName();\n  if (CSS_EXCLUDES.has(name)) {\n    return;\n  }\n\n  const cssconfig = WEBPACK_CONFIG.find((value) => {\n    return value.name === 'main-css-a-la-carte';\n  });\n  const nameMDC = CLI_PACKAGE_JSON.name.replace('@material/', 'mdc.');\n  assert.notEqual(typeof cssconfig.entry[nameMDC], 'undefined',\n    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' css dependency not added to webpack ' +\n    'configuration. Please add ' + name + ' to ' + WEBPACK_CONFIG_RELATIVE_PATH + '\\'s css ' +\n    'entry before commit. If package @material/' + name + ' exports no concrete Sass, add ' +\n    '\"' + name + '\" to the CSS_EXCLUDES set in this file.');\n}\n\nfunction checkDependencyAddedInMDCPackage() {\n  // Package is added to package.json\n  checkPkgDependencyAddedInMDCPackage();\n\n  // SCSS is added to @import rule\n  checkCSSDependencyAddedInMDCPackage();\n\n  // If any, foundation is added to index and autoInit\n  checkJSDependencyAddedInMDCPackage();\n}\n\nfunction checkPkgDependencyAddedInMDCPackage() {\n  const name = getPkgName();\n  if (CSS_EXCLUDES.has(name) && JS_EXCLUDES.has(name)) {\n    return;\n  }\n\n  assert.notEqual(typeof MASTER_PACKAGE_JSON.dependencies[CLI_PACKAGE_JSON.name], 'undefined',\n    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not a dependency for MDC Web. ' +\n    'Please add ' + CLI_PACKAGE_JSON.name +' to ' + MASTER_PACKAGE_JSON_RELATIVE_PATH +\n    '\\' dependencies before commit.');\n}\n\nfunction checkCSSDependencyAddedInMDCPackage() {\n  const name = getPkgName();\n  if (CSS_EXCLUDES.has(name)) {\n    return;\n  }\n\n  const src = fs.readFileSync(path.join(process.env.PWD, MASTER_CSS_RELATIVE_PATH), 'utf8');\n\n  const shouldImportCSS = !!src.match(`${CLI_PACKAGE_JSON.name}/`);\n  assert(shouldImportCSS,\n    'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' +\n    'Please add ' + name + ' to ' + MASTER_CSS_RELATIVE_PATH + ' import rule before commit.');\n}\n\nfunction checkJSDependencyAddedInMDCPackage() {\n  const name = getPkgName();\n  if (typeof (CLI_PACKAGE_JSON.main) === 'undefined' || JS_EXCLUDES.has(name)) {\n    return;\n  }\n\n  const nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));\n  const src = fs.readFileSync(path.join(process.env.PWD, MASTER_TS_RELATIVE_PATH), 'utf8');\n  const ast = recast.parse(src, {parser: typescriptParser});\n  assert(checkComponentImportedAddedInMDCPackage(ast), 'FAILURE: Component ' +\n    CLI_PACKAGE_JSON.name + ' is not being imported in MDC Web. ' + 'Please add ' + nameCamel +\n    ' to '+ MASTER_TS_RELATIVE_PATH + ' import rule before commit.');\n  assert(checkComponentExportedAddedInMDCPackage(ast), 'FAILURE: Component ' +\n    CLI_PACKAGE_JSON.name + ' is not being exported in MDC Web. ' + 'Please add ' + nameCamel +\n    ' to '+ MASTER_TS_RELATIVE_PATH + ' export before commit.');\n  if (!NOT_AUTOINIT.has(name)) {\n    assert(checkAutoInitAddedInMDCPackage(ast) > 0, 'FAILURE: Component ' +\n      CLI_PACKAGE_JSON.name + ' seems not being auto inited in MDC Web. ' + 'Please add ' +\n      nameCamel + ' to '+ MASTER_TS_RELATIVE_PATH + ' autoInit statement before commit.');\n  }\n}\n\nfunction checkComponentImportedAddedInMDCPackage(ast) {\n  let isImported = false;\n  traverse(ast, {\n    'ImportDeclaration'({node}) {\n      if (node.source) {\n        const source = node.source.value;\n        const pkgFile = CLI_PACKAGE_JSON.name + '/index';\n        if (source === pkgFile) {\n          isImported = true;\n        }\n      }\n    },\n  });\n  return isImported;\n}\n\nfunction checkAutoInitAddedInMDCPackage(ast) {\n  let nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));\n  if (nameCamel === 'textfield') {\n    nameCamel = 'textField';\n  } else if (nameCamel === 'switch') {\n    nameCamel = 'switchControl';\n  }\n  let autoInitedCount = 0;\n  traverse(ast, {\n    'ExpressionStatement'({node}) {\n      const callee = node.expression.callee;\n      const args = node.expression.arguments;\n      if (callee.object.name === 'autoInit' && callee.property.name === 'register') {\n        for (let value of args) {\n          // When searching for a MemberExpression, if a typescript \"as a\"\n          // expression is found, recursively search its expression, since TS\n          // may define something \"as a\" multiple times.\n          //\n          // Example: object.foo as unknown as any as Interface\n          while (value.type === 'TSAsExpression') {\n            value = value.expression;\n          }\n\n          // For the given ExpressionStatement node whose callee name is\n          // \"autoInit\" and call property name is \"register\":\n          //\n          // autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);\n          //\n          // We are searching the arguments provided to the expression to find\n          // the object with the package name (\"checkbox\" in the example).\n          // These node expression types which access an object's members are\n          // called MemberExpressions. The name of the object should be the\n          // package name.\n          if (value.type === 'MemberExpression' && value.object.name === nameCamel) {\n            autoInitedCount++;\n            break;\n          }\n        }\n      }\n    },\n  });\n  return autoInitedCount;\n}\n\nfunction checkComponentExportedAddedInMDCPackage(ast) {\n  let nameCamel = camelCase(CLI_PACKAGE_JSON.name.replace('@material/', ''));\n  if (nameCamel === 'textfield') {\n    nameCamel = 'textField';\n  } else if (nameCamel === 'switch') {\n    nameCamel = 'switchControl';\n  }\n  let isExported = false;\n  traverse(ast, {\n    'ExportNamedDeclaration'({node}) {\n      if (node.specifiers) {\n        if (node.specifiers.find((value) => {\n          return value.exported.name === nameCamel;\n        })) {\n          isExported = true;\n        }\n      }\n    },\n  });\n  return isExported;\n}\n\n/**\n * Checks that all dependencies used in SASS and TypeScript files in the package\n * match up with those declared in package.json.\n *\n * @throws {AssertionError} Will throw an error if dependencies do not strictly match.\n */\nfunction checkUsedDependenciesMatchDeclaredDependencies() {\n  const files = readDirRecursive(\n    PACKAGE_RELATIVE_PATH,\n    (fileName) => {\n      return fileName[0] !== '.'\n        && fileName !== 'node_modules' && fileName !== 'test';\n    },\n  );\n\n  const usedDeps = new Set();\n  const importMatcher = RegExp('(@use|@import|from) [\"\\'](@material/[^/\"\\']+)', 'g');\n  files.forEach((file) => {\n    if (file.endsWith('.scss') || file.endsWith('.ts') && !file.endsWith('.d.ts')) {\n      const src = fs.readFileSync(path.join(PACKAGE_RELATIVE_PATH, file), 'utf8');\n      while ((dep = importMatcher.exec(src)) !== null) {\n        usedDeps.add(dep[2]);\n      }\n    }\n  });\n\n  const declaredDeps = new Set(\n    Object.keys(CLI_PACKAGE_JSON.dependencies ? CLI_PACKAGE_JSON.dependencies : [])\n      .filter((key) => key.startsWith('@material/')));\n\n  const usedButNotDeclared = [...usedDeps].filter((x) => !declaredDeps.has(x));\n  const declaredButNotUsed = [...declaredDeps].filter((x) => !usedDeps.has(x));\n\n  assert.equal(usedButNotDeclared.length, 0, getMissingDependencyMsg(usedButNotDeclared));\n  assert.equal(declaredButNotUsed.length, 0, getUnusedDependencyMsg(declaredButNotUsed));\n}\n\nfunction getPkgName() {\n  let name = CLI_PACKAGE_JSON.name.split('/')[1];\n  if (name === 'textfield') {\n    // Text-field now has a dash in the name. The package cannot be changed,\n    // since it is a lot of effort to rename npm package\n    name = 'text-field';\n  }\n  return name;\n}\n\nfunction getMissingDependencyMsg(missingDeps) {\n  const missingDepsWithVersions = getPackageNamesWithVersions(missingDeps);\n\n  let msg = 'FAILURE: The following MDC dependencies were used in ' +\n    CLI_PACKAGE_JSON.name + ' but were not declared in its package.json:\\n' +\n    missingDepsWithVersions.join('\\n') +\n    '\\n\\nPlease add the missing dependencies to package.json manually, or by ' +\n    'running the following command(s) on the root of the repository:\\n';\n\n  missingDepsWithVersions.forEach((dep) => {\n    msg += `npx lerna add ${dep} packages/${PACKAGE_RELATIVE_PATH.split('/')[1]}\\n`;\n  });\n  return msg;\n}\n\nfunction getUnusedDependencyMsg(unusedDeps) {\n  let msg = 'FAILURE: The following MDC dependencies in package ' +\n    CLI_PACKAGE_JSON.name + ' are declared in its package.json but not used:\\n' +\n    unusedDeps.join('\\n') +\n    '\\n\\nPlease remove the unused dependencies in package.json manually, or ' +\n    'by running the following command(s) on the root of the repository:\\n';\n\n  unusedDeps.forEach((dep) => {\n    msg += `npx lerna exec --scope ${CLI_PACKAGE_JSON.name} -- npm uninstall --no-shrinkwrap ${dep}\\n`;\n  });\n  return msg;\n}\n\nfunction getPackageNamesWithVersions(packageNames) {\n  const packageNamesWithVersions = [];\n  packageNames.forEach((name) => {\n    const version = childProcess.execSync(`npm show ${name} version`).toString().replace('\\n', '');\n    packageNamesWithVersions.push(`${name}@${version}`);\n  });\n  return packageNamesWithVersions;\n}\n"
  },
  {
    "path": "scripts/cp-pkgs.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Copies built assets from our build directory to each of their respective package's\n * dist/ folder.\n */\n\nconst cpFile = require('cp-file');\nconst dts = require('dts-bundle');\nconst fs = require('fs');\nconst path = require('path');\nconst toSlugCase = require('to-slug-case');\nconst {spawnSync} = require('child_process');\nconst {sync: globSync} = require('glob');\n\nconst ALL_IN_ONE_PACKAGE = 'material-components-web';\nconst PACKAGES_DIRECTORY = path.resolve(__dirname, '../packages');\nconst PKG_RE = /(?:material\\-components\\-web)|(?:mdc\\.[a-zA-Z\\-]+)/;\n\nconst isValidCwd = (\n  path.basename(process.cwd()) === ALL_IN_ONE_PACKAGE &&\n  fs.existsSync('packages') &&\n  fs.existsSync('build')\n);\n\nif (!isValidCwd) {\n  console.error(\n    'Invalid CWD. Please ensure you are running this from the root of the repo, and that you have run `npm run dist`',\n  );\n  process.exit(1);\n}\n\n\n/**\n * @param {string} dashedName A dash-separated package name. E.g., \"mdc-linear-progress\".\n * @return {string} dashedName converted to camelCase. E.g., \"mdcLinearProgress\".\n */\nfunction toCamelCase(dashedName) {\n  return dashedName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n}\n\n/**\n * Cleans the /dist directory of each package.\n */\nfunction cleanPkgDistDirs() {\n  const statuses = globSync('packages/*/dist').map(\n    (distPath) => spawnSync('rm', ['-r', distPath], {stdio: 'inherit'}).status);\n\n  if (statuses.find((status) => status > 0)) {\n    console.error('Failed to clean package dist folders prior to copying');\n    process.exit(1);\n  }\n}\n\n/**\n * @param {string} asset filepath relative to the root directory\n * @return {string} destination package name\n */\nfunction getAssetEntry(asset) {\n  const [entryName] = path.parse(asset).name.match(PKG_RE);\n  const [MDC, componentName] = entryName.split('.');\n  const dealingWithSubpackage = Boolean(MDC && componentName);\n  if (!dealingWithSubpackage) {\n    return entryName;\n  }\n  return [MDC, toSlugCase(componentName)].join('-');\n}\n\n/**\n * @param {string} asset filepath relative to the root directory\n * @return {Promise<void>}\n */\nasync function cpAsset(asset) {\n  const assetPkg = path.join('packages', getAssetEntry(asset));\n  if (!fs.existsSync(assetPkg)) {\n    return Promise.reject(new Error(`Non-existent asset package path ${assetPkg} for ${asset}`));\n  }\n  const destDir = path.join(assetPkg, 'dist', path.basename(asset));\n  return cpFile(asset, destDir).then(\n    () => console.log(`cp ${asset} -> ${destDir}`),\n    (err) => {\n      throw err;\n    },\n  );\n}\n\n/**\n * Imports all files in index.d.ts and compiles a bundled .d.ts file for UMD bundles.\n */\nfunction dtsBundler() {\n  const packageDirectories = fs.readdirSync(PACKAGES_DIRECTORY);\n  packageDirectories.forEach((packageDirectory) => {\n    const main = path.join(PACKAGES_DIRECTORY, packageDirectory, './index.d.ts');\n    fs.access(main, fs.constants.F_OK, (error) => {\n      if (error) {\n        return;\n      }\n      const isAllInOne = packageDirectory === ALL_IN_ONE_PACKAGE;\n      if (!isAllInOne) {\n        // Only the all-in-one package should generate a d.ts bundle\n        return;\n      }\n\n      // d.ts file exists\n      const packagePath = path.join(PACKAGES_DIRECTORY, packageDirectory);\n      const name = JSON.parse(fs.readFileSync(path.join(packagePath, 'package.json'), 'utf8')).name;\n      const destBasename\n        = isAllInOne ? packageDirectory : `mdc.${toCamelCase(packageDirectory.replace(/^mdc-/, ''))}`;\n      const destFilename = path.join(packagePath, 'dist', `${destBasename}.d.ts`);\n      console.log(`Writing UMD declarations in ${destFilename.replace(process.cwd() + '/', '')}`);\n      dts.bundle({\n        name,\n        main,\n        out: destFilename,\n      });\n    });\n  });\n}\n\n/*\n * 1. Cleans all /dist directories in each package\n * 2. Copies generated css, js, and map files to the respective packages\n * 3. Bundles the declaration files into one file for the UMD index.js file\n * 4. Copies the generated declaration file from step 3, into the respective pacakge\n */\ncleanPkgDistDirs();\n\nPromise.all(globSync('build/*.{css,js,map}').map(cpAsset)).catch((err) => {\n  console.error('Error encountered copying assets:', err);\n  process.exit(1);\n});\n\n// Build d.ts files for each UMD bundle and copy into each package's dist folder\ndtsBundler();\n"
  },
  {
    "path": "scripts/dependency-test.sh",
    "content": "#!/bin/bash\n\n##\n# Copyright 2016 Google Inc.\n#\n# Permission is hereby granted, free of charge, to any person obtaining a copy\n# of this software and associated documentation files (the \"Software\"), to deal\n# in the Software without restriction, including without limitation the rights\n# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n# copies of the Software, and to permit persons to whom the Software is\n# furnished to do so, subject to the following conditions:\n#\n# The above copyright notice and this permission notice shall be included in\n# all copies or substantial portions of the Software.\n#\n# THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n# THE SOFTWARE.\n#\n\nset -e\n\nfunction log() {\n  echo '\\033[36m[dependency-test]\\033[0m' \"$@\"\n}\n\nfor f in $(find packages -name 'package.json' -not -path \"*/node_modules/*\"); do\n  log \"\\tChecking dependency in $f\"\n  node scripts/check-pkg-for-release.js \"$f\"\ndone\necho \"\"\necho \"Dependency check passed.\"\necho \"\"\n"
  },
  {
    "path": "scripts/documentation/ts-api-table.hbs",
    "content": "{{#each modules as |module|}}\n### {{module.moduleName}}\n{{#if module.moduleName.length}}\n#### Methods\n\nSignature | Description\n--- | ---\n{{#each module.methods}}\n`{{methodSignature}}` | {{documentation}}\n{{/each}}\n\n{{/if}}\n{{#if module.properties.length}}\n#### Properties\n\nName | Type | Description\n--- | --- | ---\n{{#each module.properties}}\n{{name}} | `{{type}}` | {{documentation}}\n{{/each}}\n\n{{/if}}\n{{#if module.events.length}}\n#### Events\n{{#each module.events}}\n- {{documentation}}\n{{/each}}\n\n{{/if}}\n{{#if ../showFrameworkUsage}}\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n{{/if}}\n{{/each}}\n"
  },
  {
    "path": "scripts/documentation/ts-api-tables.hbs",
    "content": "{{> tsApiTable modules=componentModules showFrameworkUsage=true }}\n{{> tsApiTable modules=nonComponentModules }}"
  },
  {
    "path": "scripts/documentation/tsdoc.ts",
    "content": "import {Documentalist, TypescriptPlugin} from '@documentalist/compiler';\nimport * as fs from 'fs';\nimport * as Handlebars from 'handlebars';\nimport * as path from 'path';\nimport * as util from 'util';\nconst readFile = util.promisify(fs.readFile);\n\ninterface MarkdownBuffer {[s: string]: {\n  [c: string]: ModuleMarkdown[]};\n}\n\ninterface ModuleMarkdown {\n  methods?: ModuleMethod[];\n  events?: ModuleEvent[];\n  properties?: ModuleProperty[];\n  moduleName: string;\n  readmeDirectoryPath: string;\n}\n\ninterface ModuleDocumentation {\n  events: ModuleEvent[];\n}\n\ninterface ModuleEvent {\n  documentation: string;\n}\n\ninterface ModuleMethod {\n  methodSignature: string;\n  documentation: string;\n}\n\ninterface ModuleProperty {\n  name: string;\n  type: string;\n  documentation: string;\n}\n\ninterface DocumentationContent {\n  tag?: string;\n  value?: string;\n}\n\nconst FOUNDATION = 'foundation';\nconst ADAPTER = 'adapter';\nconst README_FILE = 'README.md';\n\nclass TypeScriptDocumentationGenerator {\n  docData?: {}; // Documentalist representation of methods/properties/events\n  templateFunction: Handlebars.TemplateDelegate<{\n    componentModules: ModuleMarkdown[],\n    nonComponentModules: ModuleMarkdown[],\n  }>;\n\n  constructor() {\n    this.docData = {};\n    this.setupTemplates();\n  }\n\n  /**\n   * Generates JSON from source files TypeScript documentation.\n   * This contains all the esmodule classes (ie. foundations, adapters, components) in JSON format.\n   * @returns Promise<{}>\n   */\n  async generateJSONFromFiles() {\n    return new Documentalist()\n      .use(/\\.ts$/, new TypescriptPlugin({\n        excludePaths: ['node_modules'],\n        includeDeclarations: true,\n      }))\n      .documentGlobs('packages/**/*')\n      .catch((error) => console.error(error)); // tslint:disable-line\n  }\n\n  /**\n   * The main function of this class. Iterates through all modules found in docData (json).\n   * This should already be generated from this.generateJSONFromFiles().\n   * @param docData json containing documentation from documentalist\n   */\n  generateDocs(docData) {\n    if (!docData) {\n      console.error('FAILURE: Documentation generation did not compile correctly.'); // tslint:disable-line\n    }\n    const markdownBuffer: MarkdownBuffer = {};\n\n    this.docData = docData.typescript;\n    Object.keys(this.docData).forEach((module) => {\n      console.log(`-- generating docs for ${module}`); // tslint:disable-line\n      const docs = this.generateDocsForModule(module);\n      if (docs) {\n        const {readmeDirectoryPath, moduleName} = docs;\n        const markdownComponentBuffer = markdownBuffer[readmeDirectoryPath];\n        const isComponent =\n          !moduleName.toLowerCase().includes(FOUNDATION) && !moduleName.toLowerCase().includes(ADAPTER);\n\n        if (markdownComponentBuffer) {\n          if (isComponent) {\n            markdownComponentBuffer.component.push(docs);\n          } else {\n            markdownComponentBuffer.nonComponent.push(docs);\n          }\n        } else {\n          if (isComponent) {\n            markdownBuffer[readmeDirectoryPath] = {component: [docs], nonComponent: []};\n          } else {\n            markdownBuffer[readmeDirectoryPath] = {component: [], nonComponent: [docs]};\n          }\n        }\n      }\n    });\n\n    this.generateMarkdownFileFromBuffer(markdownBuffer);\n  }\n\n  /**\n   * Creates documentation for a specified `esmodule`.\n   * @param esmodule module name (ie. MDCSelectIconFoundation)\n   */\n  generateDocsForModule(esmodule: string): ModuleMarkdown | undefined {\n    const {kind, fileName} = this.docData[esmodule];\n    const readmeDirectoryPath = this.getFilePathName(fileName);\n\n    if (kind === 'type alias') {\n      // ignore types and interfaces\n      return;\n    }\n    return {\n      events: this.getDocumentationForEvents(esmodule).events,\n      methods: this.getDocumentationForMethods(esmodule),\n      moduleName: esmodule,\n      properties: this.getDocumentationProperties(esmodule),\n      readmeDirectoryPath,\n    };\n  }\n\n  /**\n   * Iterates through all events documented in the specified `esmodule`.\n   * @returns list of events in the esmodule.\n   * @param esmodule module name (ie. MDCSelectIconFoundation)\n   */\n  getDocumentationForEvents(esmodule: string): ModuleDocumentation {\n    if (!this.docData\n      || !this.docData[esmodule].documentation\n      || !this.docData[esmodule].documentation.contents) {\n      return {events: []};\n    }\n\n    const events = (this.docData[esmodule].documentation.contents as DocumentationContent[])\n    .filter((content) => content.tag && content.tag === 'events')\n    .map((content) => ({documentation: content.value}));\n    return {events};\n  }\n\n  /**\n   * Iterates through all methods of a specified `esmodule`.\n   * @returns list of method documentation of the esmodule.\n   * @param esmodule module name (ie. MDCSelectIconFoundation)\n   */\n  getDocumentationForMethods(esmodule: string): ModuleMethod[] {\n    if (!this.docData || !this.docData[esmodule].methods) {\n      return [];\n    }\n    return this.docData[esmodule].methods\n      .filter((method) => this.shouldIgnoreDocumentationItem(method, {\n        hasDocumentation: method.signatures[0].documentation,\n      }))\n      .map((method) => {\n        const {name, signatures} = method;\n        const methodSignature = signatures[0].type;\n        const documentation = signatures[0].documentation.contentsRaw;\n        return {\n          documentation: this.cleanComment(documentation),\n          methodSignature: `${name}${methodSignature}`,\n        };\n      });\n  }\n\n  /**\n   * Iterates through all properties of a specified `esmodule`.\n   * @returns list of property documentation of the esmodule.\n   * @param esmodule module name (ie. MDCSelectIconFoundation)\n   */\n  getDocumentationProperties(esmodule: string): ModuleProperty[] {\n    if (!this.docData || !this.docData[esmodule].properties) {\n      return [];\n    }\n    return this.docData[esmodule].properties\n      .filter((property) => this.shouldIgnoreDocumentationItem(property, {\n        hasDocumentation: property.documentation,\n      }))\n      .map((property) => {\n        const {name, type} = property;\n        const documentation = this.cleanComment(property.documentation.contentsRaw);\n        return {\n          documentation,\n          name,\n          type,\n        };\n      });\n  }\n\n  /**\n   * Returns relative file path to ./packages, and closest directory\n   * with a README.md file (ie. mdc-textfield/helper-text, mdc-drawer).\n   * @param filePath original file path\n   */\n  private getFilePathName(filePath: string): string {\n    const startingIndex = filePath.indexOf('/mdc-') + 1; // +1 is to ignore leading '/'\n    const endIndex = filePath.lastIndexOf('/');\n    const directoryPath = filePath.substring(startingIndex, endIndex);\n    try {\n      const relativePathToReadme = path.resolve('packages', directoryPath, README_FILE);\n      if (fs.existsSync(relativePathToReadme)) {\n        return directoryPath;\n      }\n      // look one directory level up\n      return this.getFilePathName(directoryPath);\n    } catch (err) {\n      console.error(err); //tslint:disable-line\n    }\n    return '';\n  }\n\n  /**\n   * Generates Markdown file for each entry in `this.markdownBuffer`,\n   * which is populated from `this.generateDocsForModule()`.\n   * @param markdownBuffer object where keys are the module name, and\n   * value is the module documentation in json format, ready to be\n   * formatted into markdown.\n   */\n  async generateMarkdownFileFromBuffer(markdownBuffer: MarkdownBuffer) {\n    for (const readmeDirectoryPath in markdownBuffer) {\n      /**\n       * This currently only has been tested on mdc-drawer.\n       * TODO: remove this if condition once all READMEs are generated\n       */\n      const allowList = [\n        'mdc-drawer',\n      ];\n\n      if (allowList.some((allowed) => readmeDirectoryPath.includes(allowed))) {\n        const readmeDestinationPath = `./packages/${readmeDirectoryPath}/${README_FILE}`;\n        const finalReadmeMarkdown = await this.insertMethodDescriptionTable(markdownBuffer, readmeDirectoryPath);\n        fs.writeFile(readmeDestinationPath, finalReadmeMarkdown, (error) => {\n          console.log(`~~ generated ${readmeDestinationPath}`); // tslint:disable-line\n          if (error) {\n            console.error('error ', error); //tslint:disable-line\n          }\n        });\n      }\n    }\n  }\n\n  private setupTemplates() {\n    const tablesTemplate = fs.readFileSync('./scripts/documentation/ts-api-tables.hbs', 'utf8');\n    const tableTemplate = fs.readFileSync('./scripts/documentation/ts-api-table.hbs', 'utf8');\n    Handlebars.registerPartial('tsApiTable', tableTemplate);\n    this.templateFunction = Handlebars.compile(tablesTemplate, {noEscape: true});\n  }\n\n  /**\n   * Returns a promise, that resolves with the finalized markdown with\n   * inserted documentation in markdown table format.\n   * @param markdownBuffer object where keys are the module name, and\n   * value is the module documentation in json format, ready to be\n   * formatted into markdown.\n   * @param readmeDirectoryPath directory path to readme file\n   * (ie. mdc-textfield/character-counter or mdc-drawer)\n   * @return Promise<{string}>\n   */\n  private async insertMethodDescriptionTable(\n    markdownBuffer: MarkdownBuffer,\n    readmeDirectoryPath: string,\n  ) {\n    const readmeMarkdownPath = `./packages/${readmeDirectoryPath}/${README_FILE}`;\n    const readmeMd = await readFile(readmeMarkdownPath, 'utf8');\n    const componentModules = markdownBuffer[readmeDirectoryPath].component\n      .filter((module) => module.methods.length || module.properties.length || module.events.length)\n      .sort(this.sortByModuleType);\n    const nonComponentModules = markdownBuffer[readmeDirectoryPath].nonComponent\n      .filter((module) => module.methods.length || module.properties.length || module.events.length)\n      .sort(this.sortByModuleType);\n    const apiMarkdownTable =\n      this.templateFunction({\n        componentModules,\n        nonComponentModules,\n      });\n\n    const startReplacerToken\n      = '<!-- docgen-tsdoc-replacer:start __DO NOT EDIT, This section is automatically generated__ -->';\n    const endReplacerToken = '<!-- docgen-tsdoc-replacer:end -->';\n    const regexString = `^${startReplacerToken}\\\\n(.|\\\\n)*${endReplacerToken}$`;\n    const regex = new RegExp(regexString, 'gm');\n    const insertedData = readmeMd.replace(\n      regex,\n      `${startReplacerToken}\\n${apiMarkdownTable}\\n${endReplacerToken}`,\n    );\n\n    return insertedData;\n  }\n\n  /** Sorts modules by the following rules:\n   * 1. Components\n   * 2. Adapters\n   * 3. Foundations\n   * 4. Alphabetized\n   * @param a 1st module of comparison\n   * @param b 2nd module of comparison\n   */\n  private sortByModuleType(a: ModuleMarkdown, b: ModuleMarkdown): number {\n    const moduleA = a.moduleName.toLowerCase();\n    const moduleB = b.moduleName.toLowerCase();\n    if (!moduleA.includes(FOUNDATION) && !moduleA.includes(ADAPTER)) {\n      return -1;\n    } else if (moduleA.includes(FOUNDATION) && !moduleB.includes(FOUNDATION)) {\n      return 1;\n    } else if (moduleA.includes(FOUNDATION) && moduleB.includes(FOUNDATION)\n      || moduleA.includes(ADAPTER) && moduleB.includes(ADAPTER)) {\n      // alphabetize\n      return moduleA > moduleB ? 1 : -1;\n    }\n    return 0;\n  }\n\n  /**\n   * A filter function to strip out methods and properties that should not\n   * appear in the Readme tables.\n   * @param item Documentalist object representation of a method/event/property\n   * @param opts object of different booleans - currently only has `hasDocumentation`\n   */\n  private shouldIgnoreDocumentationItem(item, opts = {hasDocumentation: true}) {\n    // isState ignores cssClasses, defaultAdapter, strings\n    const {isPrivate, isStatic} = item.flags;\n    return !isPrivate && !isStatic && opts.hasDocumentation;\n  }\n\n  /**\n   * Removes new lines from raw comment string\n   * @param comment raw comment string\n   */\n  private cleanComment(comment) {\n    const r = new RegExp(/\\n/gm);\n    return comment.replace(r, ' ');\n  }\n}\n\nconst docGenerator = new TypeScriptDocumentationGenerator();\ndocGenerator.generateJSONFromFiles()\n  .then((json) => docGenerator.generateDocs(json));\n"
  },
  {
    "path": "scripts/pre-release.sh",
    "content": "#!/bin/sh\n\n##\n# Copyright 2016 Google Inc.\n#\n# Permission is hereby granted, free of charge, to any person obtaining a copy\n# of this software and associated documentation files (the \"Software\"), to deal\n# in the Software without restriction, including without limitation the rights\n# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n# copies of the Software, and to permit persons to whom the Software is\n# furnished to do so, subject to the following conditions:\n#\n# The above copyright notice and this permission notice shall be included in\n# all copies or substantial portions of the Software.\n#\n# THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n# THE SOFTWARE.\n#\n\nset -e\n\nfunction log() {\n  echo '\\033[36m[pre-release]\\033[0m' \"$@\"\n}\n\nfunction fail() {\n  echo '\\033[31mFAILURE:\\033[0m' \"$@\"\n}\n\nlog \"Running pre-flight sanity checks...\"\n\nlog \"Checking that you can publish to npm...\"\nNPM_USER=$(npm whoami)\nif ! npm team ls material:developers | grep -q $NPM_USER; then\n  fail \"You are not (yet?) part of the material:developers org. Please get in touch\" \\\n       \"with the MDC Web core team to rectify this\"\n  exit 1\nfi\n\nlog \"Checking that npm two-factor authentication is disabled...\"\nNPM_TFA=$(npm profile get --parseable | grep '^tfa' | awk '{ print $2 }')\nif [[ \"$NPM_TFA\" != 'disabled' ]]; then\n  fail \"Two-factor authentication (2FA) is enabled on your NPM account, which prevents publishing.\"\n  echo \"To temporarily disable it, edit your Profile Settings on https://www.npmjs.com/, or run the following command:\"\n  echo \"    npm profile disable-2fa\"\n  echo \"After publishing, re-enable 2FA on https://www.npmjs.com/, or run the following command:\"\n  echo \"    npm profile enable-2fa auth-and-writes\"\n  exit 1\nfi\n\nlog \"Checking that you can access GitHub via SSH...\"\nif ! ssh -T git@github.com 2>&1 | grep -q \"You've successfully authenticated\"; then\n  fail \"It does not look like you can access github. Please ensure that the command\" \\\n       \"ssh -T git@github.com works for you\"\n  exit 1\nfi\n\nlog \"Running npm test to ensure no breakages...\"\nnpm test\necho \"\"\n\nlog \"Building packages...\"\nnpm run dist\necho \"\"\n\nlog \"Moving built assets to package directories...\"\nnode scripts/cp-pkgs.js\necho \"\"\n\nlog \"Verifying that all packages are correctly pointing main to dist...\"\nnode scripts/verify-pkg-main.js\necho \"\"\n\nlog \"Pre-release steps done! Next, continue with the Release process.\"\necho \"\"\n"
  },
  {
    "path": "scripts/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"lib\": [\"es2016\"]\n  }\n}\n"
  },
  {
    "path": "scripts/verify-pkg-main.js",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nconst fs = require('fs');\nconst path = require('path');\nconst {sync: globSync} = require('glob');\n\nconst isValidCwd = fs.existsSync('packages') && fs.existsSync(path.join('packages', 'material-components-web', 'dist'));\n\n/**\n * Verifies that a file exists at the `packagePropertyKey`. If it does not\n * this function will log an error to the console.\n * @param {object} packageJson package.json in JSON format\n * @param {string} jsonPath filepath (relative to the root directory) to a component's package.json\n * @param {string} packagePropertyKey property key of package.json\n */\nfunction verifyPath(packageJson, jsonPath, packagePropertyKey) {\n  const isAtRoot = packagePropertyKey === 'module';\n  const packageJsonPropPath = path.join(path.dirname(jsonPath), packageJson[packagePropertyKey]);\n  let isInvalid = false;\n  if (!isAtRoot && packageJsonPropPath.indexOf('dist') === -1) {\n    isInvalid = true;\n    logError(`${jsonPath} ${packagePropertyKey} property does not reference a file under dist`);\n  } else if (isAtRoot && packageJsonPropPath.indexOf('dist') !== -1) {\n    isInvalid = true;\n    logError(`${jsonPath} ${packagePropertyKey} property should not reference a file under dist`);\n  }\n  if (!fs.existsSync(packageJsonPropPath)) {\n    isInvalid = true;\n    logError(`${jsonPath} ${packagePropertyKey} property points to nonexistent ${packageJsonPropPath}`);\n  }\n\n  if (isInvalid) {\n    // Multiple checks could have failed, but only increment the counter once for one package.\n\n    switch (packagePropertyKey) {\n    case 'main':\n      invalidMains++;\n      break;\n    case 'module':\n      invalidModules++;\n      break;\n    case 'types':\n      invalidTypes++;\n      break;\n    }\n  }\n}\n\nfunction logError(message) {\n  console.error(message);\n  process.exitCode = 1;\n}\n\nif (!isValidCwd) {\n  console.error(\n    'Invalid CWD. Please ensure you are running this from the root of the repo, and that you have run ' +\n    '`npm run dist` and `node scripts/cp-pkgs.js`',\n  );\n  process.exit(1);\n}\n\nlet invalidMains = 0;\nlet invalidModules = 0;\nlet invalidTypes = 0;\nglobSync('packages/*/package.json').forEach((jsonPath) => {\n  const packageJson = JSON.parse(fs.readFileSync(jsonPath));\n  if (!packageJson.main) {\n    return;\n  }\n  verifyPath(packageJson, jsonPath, 'main');\n  verifyPath(packageJson, jsonPath, 'module');\n  if (jsonPath.includes('material-components-web')) {\n    verifyPath(packageJson, jsonPath, 'types');\n  }\n});\n\nif (invalidMains > 0 || invalidModules > 0 || invalidTypes > 0) {\n  if (invalidMains > 0) {\n    logError(`${invalidMains} incorrect main property values found; please fix.`);\n  }\n  if (invalidModules > 0) {\n    logError(`${invalidModules} incorrect module property values found; please fix.`);\n  }\n  if (invalidTypes > 0) {\n    logError(`${invalidTypes} incorrect types property values found; please fix.`);\n  }\n} else {\n  console.log('Success: All packages with main, module, types properties reference appropriate files!');\n}\n"
  },
  {
    "path": "scripts/webpack/copyright-banner-plugin.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Webpack plugin that adds a copyright notice at the top of all output files.\n */\n\n'use strict';\n\nconst webpack = require('webpack');\n\nclass CopyrightBannerPlugin extends webpack.BannerPlugin {\n  constructor() {\n    super({\n      banner: `/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE\n */`,\n      raw: true,\n      entryOnly: true,\n    });\n  }\n}\n\nmodule.exports = CopyrightBannerPlugin;\n"
  },
  {
    "path": "scripts/webpack/css-bundle-factory.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Creates Webpack bundle config objects to compile Sass files to CSS.\n */\n\n'use strict';\n\nconst autoprefixer = require('autoprefixer');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nclass CssBundleFactory {\n  constructor({\n    env,\n    pathResolver,\n    globber,\n    pluginFactory,\n    autoprefixerLib = autoprefixer,\n  } = {}) {\n    /** @type {!Environment} */\n    this.env_ = env;\n\n    /** @type {!PathResolver} */\n    this.pathResolver_ = pathResolver;\n\n    /** @type {!Globber} */\n    this.globber_ = globber;\n\n    /** @type {!PluginFactory} */\n    this.pluginFactory_ = pluginFactory;\n\n    /** @type {function(opts: ...*=)} */\n    this.autoprefixerLib_ = autoprefixerLib;\n  }\n\n  createCustomCss(\n    {\n      bundleName,\n      chunks,\n      chunkGlobConfig: {\n        inputDirectory = null,\n        filePathPattern = '**/*.scss',\n      } = {},\n      output: {\n        fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk\n        httpDirAbsolutePath = undefined, // Required for running the demo server\n        filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css',\n      },\n      plugins = [],\n    }) {\n    chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern});\n\n    const fsCleanupPlugins = [];\n\n    if (fsDirAbsolutePath) {\n      fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({\n        cleanupDirRelativePath: fsDirAbsolutePath,\n      }));\n    }\n\n    const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern);\n\n    return {\n      name: bundleName,\n      entry: chunks,\n      output: {\n        path: fsDirAbsolutePath,\n        publicPath: httpDirAbsolutePath,\n        filename: `${filenamePattern}.js`, // Webpack 3.x emits CSS wrapped in a JS file (cssExtractorPlugin unwraps it)\n      },\n      devtool: 'source-map',\n      module: {\n        rules: [{\n          test: /\\.scss$/,\n          use: this.createCssLoader_(cssExtractorPlugin),\n        }],\n      },\n      optimization: {\n        minimize: this.env_.isProd(),\n      },\n      plugins: [\n        cssExtractorPlugin,\n        ...fsCleanupPlugins,\n        ...plugins,\n      ],\n    };\n  }\n\n  createMainCssCombined(\n    {\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins = [],\n    }) {\n    const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args);\n\n    return this.createCustomCss({\n      bundleName: 'main-css-combined',\n      chunks: {\n        'material-components-web': getAbsolutePath('/packages/material-components-web/material-components-web.scss'),\n      },\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins: [\n        this.pluginFactory_.createCopyrightBannerPlugin(),\n        ...plugins,\n      ],\n    });\n  }\n\n  createMainCssALaCarte(\n    {\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins = [],\n    }) {\n    const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args);\n\n    return this.createCustomCss({\n      bundleName: 'main-css-a-la-carte',\n      chunks: {\n        'mdc.banner': getAbsolutePath('/packages/mdc-banner/styles.scss'),\n        'mdc.button': getAbsolutePath('/packages/mdc-button/mdc-button.scss'),\n        'mdc.card': getAbsolutePath('/packages/mdc-card/mdc-card.scss'),\n        'mdc.checkbox': getAbsolutePath('/packages/mdc-checkbox/mdc-checkbox.scss'),\n        'mdc.chips': getAbsolutePath('/packages/mdc-chips/deprecated/mdc-chips.scss'),\n        'mdc.circular-progress': getAbsolutePath('/packages/mdc-circular-progress/mdc-circular-progress.scss'),\n        'mdc.data-table': getAbsolutePath('/packages/mdc-data-table/mdc-data-table.scss'),\n        'mdc.dialog': getAbsolutePath('/packages/mdc-dialog/mdc-dialog.scss'),\n        'mdc.drawer': getAbsolutePath('/packages/mdc-drawer/mdc-drawer.scss'),\n        'mdc.elevation': getAbsolutePath('/packages/mdc-elevation/mdc-elevation.scss'),\n        'mdc.fab': getAbsolutePath('/packages/mdc-fab/mdc-fab.scss'),\n        'mdc.floating-label': getAbsolutePath('/packages/mdc-floating-label/mdc-floating-label.scss'),\n        'mdc.form-field': getAbsolutePath('/packages/mdc-form-field/mdc-form-field.scss'),\n        'mdc.icon-button': getAbsolutePath('/packages/mdc-icon-button/mdc-icon-button.scss'),\n        'mdc.image-list': getAbsolutePath('/packages/mdc-image-list/mdc-image-list.scss'),\n        'mdc.layout-grid': getAbsolutePath('/packages/mdc-layout-grid/mdc-layout-grid.scss'),\n        'mdc.line-ripple': getAbsolutePath('/packages/mdc-line-ripple/mdc-line-ripple.scss'),\n        'mdc.linear-progress': getAbsolutePath('/packages/mdc-linear-progress/mdc-linear-progress.scss'),\n        'mdc.list': getAbsolutePath('/packages/mdc-list/mdc-list.scss'),\n        'mdc.menu': getAbsolutePath('/packages/mdc-menu/mdc-menu.scss'),\n        'mdc.menu-surface': getAbsolutePath('/packages/mdc-menu-surface/mdc-menu-surface.scss'),\n        'mdc.notched-outline': getAbsolutePath('/packages/mdc-notched-outline/mdc-notched-outline.scss'),\n        'mdc.radio': getAbsolutePath('/packages/mdc-radio/mdc-radio.scss'),\n        'mdc.ripple': getAbsolutePath('/packages/mdc-ripple/mdc-ripple.scss'),\n        'mdc.segmented-button': getAbsolutePath('/packages/mdc-segmented-button/styles.scss'),\n        'mdc.select': getAbsolutePath('/packages/mdc-select/mdc-select.scss'),\n        'mdc.slider': getAbsolutePath('/packages/mdc-slider/styles.scss'),\n        'mdc.snackbar': getAbsolutePath('/packages/mdc-snackbar/mdc-snackbar.scss'),\n        'mdc.switch': getAbsolutePath('/packages/mdc-switch/styles.scss'),\n        'mdc.tab': getAbsolutePath('/packages/mdc-tab/mdc-tab.scss'),\n        'mdc.tab-bar': getAbsolutePath('/packages/mdc-tab-bar/mdc-tab-bar.scss'),\n        'mdc.tab-indicator': getAbsolutePath('/packages/mdc-tab-indicator/mdc-tab-indicator.scss'),\n        'mdc.tab-scroller': getAbsolutePath('/packages/mdc-tab-scroller/mdc-tab-scroller.scss'),\n        'mdc.textfield': getAbsolutePath('/packages/mdc-textfield/mdc-text-field.scss'),\n        'mdc.theme': getAbsolutePath('/packages/mdc-theme/mdc-theme.scss'),\n        'mdc.tooltip': getAbsolutePath('/packages/mdc-tooltip/styles.scss'),\n        'mdc.top-app-bar': getAbsolutePath('/packages/mdc-top-app-bar/mdc-top-app-bar.scss'),\n        'mdc.typography': getAbsolutePath('/packages/mdc-typography/mdc-typography.scss'),\n      },\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins: [\n        this.pluginFactory_.createCopyrightBannerPlugin(),\n        ...plugins,\n      ],\n    });\n  }\n\n  createCssLoader_() {\n    const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args);\n\n    return [\n      MiniCssExtractPlugin.loader,\n      {\n        loader: 'css-loader',\n        options: {\n          sourceMap: true,\n        },\n      },\n      {\n        loader: 'postcss-loader',\n        options: {\n          sourceMap: true,\n          plugins: () => [this.autoprefixerLib_()],\n        },\n      },\n      {\n        loader: 'sass-loader',\n        options: {\n          sourceMap: true,\n          includePaths: [getAbsolutePath('/packages/material-components-web/node_modules')],\n          implementation: require('sass'),\n        },\n      },\n    ];\n  }\n}\n\nmodule.exports = CssBundleFactory;\n"
  },
  {
    "path": "scripts/webpack/css-cleanup-plugin.js",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Deletes all *.css.js files from the output directory after Webpack has finished compiling.\n *\n * Webpack 4.x emits ALL bundles as JavaScript files - even CSS. To get a plain .css file, we have to use\n * `mini-css-extract-plugin` to yank the CSS out of the .css.js file and write it to a .css file.\n * This is done by `createCssExtractorPlugin()` in `plugin-factory.js`.\n *\n * However, we still end up with bunch of unneeded .css.js files in the output directory, so this plugin deletes them.\n */\n\n'use strict';\n\nconst fsx = require('fs-extra');\n\nclass CssCleanupPlugin {\n  constructor({\n    cleanupDirRelativePath,\n    globber,\n    fsExtraLib = fsx,\n  } = {}) {\n    /** @type {string} */\n    this.cleanupDirRelativePath = cleanupDirRelativePath;\n\n    // Prevent private properties from being serialized into *.golden.json test files.\n    Object.defineProperties(this, {\n      globber_: {value: globber},\n      fsExtraLib_: {value: fsExtraLib},\n    });\n  }\n\n  apply(compiler) {\n    compiler.plugin('done', () => this.nukeEm_());\n  }\n\n  // https://youtu.be/SNAK21fcVzU\n  nukeEm_() {\n    // The trailing `*` at the end of the glob pattern is needed to clean up sourcemap files (e.g., `foo.css.js.map`).\n    this.globber_.getAbsolutePaths(this.cleanupDirRelativePath, '**/*.css.js*').forEach((absolutePath) => {\n      this.fsExtraLib_.removeSync(absolutePath);\n    });\n  }\n}\n\nmodule.exports = CssCleanupPlugin;\n"
  },
  {
    "path": "scripts/webpack/globber.js",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Scans the filesystem for files whose path matches a glob pattern, and creates a Webpack chunk object to\n * compile those files.\n *\n * See https://github.com/isaacs/node-glob for supported glob syntax.\n */\n\n'use strict';\n\nconst glob = require('glob');\n\nclass Globber {\n  constructor({\n    pathResolver,\n    globLib = glob,\n  } = {}) {\n    /** @type {!PathResolver} */\n    this.pathResolver_ = pathResolver;\n\n    /** @type {!glob} */\n    this.globLib_ = globLib;\n  }\n\n  /**\n   * @param {...string} pathPatternParts One or more portions of a glob pattern to match against.\n   *   If more than one pattern is passed, they will be joined with the OS's directory separator character.\n   *   The first pattern should either be an absolute path or a path relative to the repository root.\n   * @return {!Array<string>} Array of absolute paths to all files that match the full glob pattern.\n   */\n  getAbsolutePaths(...pathPatternParts) {\n    return this.globLib_.sync(this.pathResolver_.getAbsolutePath(...pathPatternParts));\n  }\n\n  /**\n   * Finds all files that match the given path glob pattern and returns a Webpack entry object containing each file as a\n   * separate \"chunk\" (key/value pair).\n   *\n   * The \"name\" (key) of each chunk is the chunk's input file path (relative to the project root) without a file\n   * extension, and the value is the absolute path to the input file.\n   *\n   * Import-only files (i.e., those with a leading underscore in their name) are excluded.\n   *\n   * E.g., the demo CSS chunks look like this:\n   *\n   * <code>\n   *   > getChunks({filePathPattern: '**' + '/*.scss'})\n   *   < {\n   *       \"button\": \"/absolute/path/to/mdc-web-repo/demos/button.scss\",\n   *       ...\n   *       \"theme/theme-baseline\": \"/absolute/path/to/mdc-web-repo/demos/theme/theme-baseline.scss\",\n   *       ...\n   *     }\n   * </code>\n   *\n   * @param {string} filePathPattern\n   * @param {string=} inputDirectory\n   * @return {!Object<string, string>} Map of chunk names to their absolute filesystem paths\n   */\n  getChunks({filePathPattern, inputDirectory = this.pathResolver_.getProjectRootAbsolutePath()}) {\n    const chunks = {};\n    const inputDirectoryAbsolutePath = this.pathResolver_.getAbsolutePath(inputDirectory);\n\n    this.getAbsolutePaths(inputDirectory, filePathPattern).forEach((absolutePathToInputFile) => {\n      const relativePath = this.pathResolver_.getRelativePath(absolutePathToInputFile, inputDirectoryAbsolutePath);\n      const relativePathWithoutExtension = this.pathResolver_.removeFileExtension(relativePath);\n      const filename = this.pathResolver_.getFilename(absolutePathToInputFile);\n\n      // Ignore import-only file\n      if (filename.charAt(0) === '_') {\n        return;\n      }\n\n      chunks[relativePathWithoutExtension] = absolutePathToInputFile;\n    });\n\n    return chunks;\n  }\n}\n\nmodule.exports = Globber;\n"
  },
  {
    "path": "scripts/webpack/js-bundle-factory.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Creates Webpack bundle config objects to compile ES2015 JavaScript to ES5.\n */\n\n'use strict';\n\nconst path = require('path');\nconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');\n\nclass JsBundleFactory {\n  constructor({\n    env,\n    pathResolver,\n    globber,\n    pluginFactory,\n  } = {}) {\n    /** @type {!Environment} */\n    this.env_ = env;\n\n    /** @type {!PathResolver} */\n    this.pathResolver_ = pathResolver;\n\n    /** @type {!Globber} */\n    this.globber_ = globber;\n\n    /** @type {!PluginFactory} */\n    this.pluginFactory_ = pluginFactory;\n  }\n\n  createCustomJs(\n    {\n      bundleName,\n      chunks,\n      extensions = ['.ts', '.js'],\n      chunkGlobConfig: {\n        inputDirectory = null,\n        filePathPattern = '**/*.js',\n      } = {},\n      output: {\n        fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk\n        httpDirAbsolutePath = undefined, // Required for running the demo server\n        filenamePattern = this.env_.isProd() ? '[name].min.js' : '[name].js',\n        moduleName: {root, amd},\n        globalObject = 'this',\n      },\n      plugins = [],\n      tsConfigFilePath = path.resolve(__dirname, '../../tsconfig.json'),\n    }) {\n    chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern});\n\n    const babelLoader = {\n      loader: 'babel-loader',\n      options: {\n        cacheDirectory: true,\n      },\n    };\n\n    const uglifyOptions = {\n      output: {\n        comments: false, // Removes repeated @license comments and other code comments.\n      },\n      sourceMap: true,\n    };\n\n    const commonPlugins = [\n      this.pluginFactory_.createCopyrightBannerPlugin(),\n    ];\n\n    return {\n      name: bundleName,\n      entry: chunks,\n      output: {\n        path: fsDirAbsolutePath,\n        publicPath: httpDirAbsolutePath,\n        // Webpack does not allow us to set custom placeholders, so we need to use a function here to\n        // manually replace `[name]` with a camel-cased variant. e.g. `auto-init.js` should become `autoInit.js`.\n        // Unfortunately we cannot set the chunk names directly to a camel-cased variant because that would\n        // break the AMD module names then (which should match the NPM package names. e.g. `@material/auto-init`).\n        filename: ({chunk: {name}}) => filenamePattern.replace(/\\[name]/g, toCamelCase(name)),\n        libraryTarget: 'umd',\n        library: {\n          root,\n          amd,\n        },\n        umdNamedDefine: true,\n        globalObject,\n      },\n      resolve: {extensions},\n      devtool: 'source-map',\n      module: {\n        rules: [{\n          test: /\\.ts$/,\n          exclude: /node_modules/,\n          use: [\n            babelLoader,\n            {\n              loader: 'ts-loader',\n              options: {configFile: tsConfigFilePath},\n            },\n          ],\n        }, {\n          test: /\\.js$/,\n          exclude: /node_modules/,\n          use: [babelLoader],\n        }],\n      },\n      optimization: {\n        minimize: this.env_.isProd(),\n        minimizer: [new UglifyJSPlugin({uglifyOptions})],\n      },\n      plugins: [\n        ...commonPlugins,\n        ...plugins,\n      ],\n    };\n  }\n\n  createMainJsCombined(\n    {\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins = [],\n    }) {\n    const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args);\n\n    return this.createCustomJs({\n      bundleName: 'main-js-combined',\n      chunks: getAbsolutePath('/packages/material-components-web/index.ts'),\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n        filenamePattern: this.env_.isProd() ? 'material-components-web.min.js' : 'material-components-web.js',\n        moduleName: {\n          amd: 'material-components-web',\n          root: ['mdc'],\n        },\n      },\n      plugins,\n    });\n  }\n\n  createMainJsALaCarte(\n    {\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n      },\n      plugins = [],\n    }) {\n    const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args);\n\n    return this.createCustomJs({\n      bundleName: 'main-js-a-la-carte',\n      chunks: {\n        'animation': getAbsolutePath('/packages/mdc-animation/index.ts'),\n        'auto-init': getAbsolutePath('/packages/mdc-auto-init/index.ts'),\n        'banner': getAbsolutePath('/packages/mdc-banner/index.ts'),\n        'base': getAbsolutePath('/packages/mdc-base/index.ts'),\n        'checkbox': getAbsolutePath('/packages/mdc-checkbox/index.ts'),\n        'chips': getAbsolutePath('/packages/mdc-chips/index.ts'),\n        'circular-progress': getAbsolutePath('packages/mdc-circular-progress/index.ts'),\n        'data-table': getAbsolutePath('/packages/mdc-data-table/index.ts'),\n        'dialog': getAbsolutePath('/packages/mdc-dialog/index.ts'),\n        'dom': getAbsolutePath('/packages/mdc-dom/index.ts'),\n        'drawer': getAbsolutePath('/packages/mdc-drawer/index.ts'),\n        'floating-label': getAbsolutePath('/packages/mdc-floating-label/index.ts'),\n        'form-field': getAbsolutePath('/packages/mdc-form-field/index.ts'),\n        'icon-button': getAbsolutePath('/packages/mdc-icon-button/index.ts'),\n        'list': getAbsolutePath('/packages/mdc-list/index.ts'),\n        'line-ripple': getAbsolutePath('/packages/mdc-line-ripple/index.ts'),\n        'linear-progress': getAbsolutePath('/packages/mdc-linear-progress/index.ts'),\n        'menu': getAbsolutePath('/packages/mdc-menu/index.ts'),\n        'menu-surface': getAbsolutePath('/packages/mdc-menu-surface/index.ts'),\n        'notched-outline': getAbsolutePath('/packages/mdc-notched-outline/index.ts'),\n        'radio': getAbsolutePath('/packages/mdc-radio/index.ts'),\n        'ripple': getAbsolutePath('/packages/mdc-ripple/index.ts'),\n        'segmented-button': getAbsolutePath('/packages/mdc-segmented-button/index.ts'),\n        'select': getAbsolutePath('/packages/mdc-select/index.ts'),\n        'slider': getAbsolutePath('/packages/mdc-slider/index.ts'),\n        'snackbar': getAbsolutePath('/packages/mdc-snackbar/index.ts'),\n        'switch': getAbsolutePath('/packages/mdc-switch/index.ts'),\n        'tab': getAbsolutePath('/packages/mdc-tab/index.ts'),\n        'tab-bar': getAbsolutePath('/packages/mdc-tab-bar/index.ts'),\n        'tab-indicator': getAbsolutePath('/packages/mdc-tab-indicator/index.ts'),\n        'tab-scroller': getAbsolutePath('/packages/mdc-tab-scroller/index.ts'),\n        'textfield': getAbsolutePath('/packages/mdc-textfield/index.ts'),\n        'tooltip': getAbsolutePath('/packages/mdc-tooltip/index.ts'),\n        'top-app-bar': getAbsolutePath('/packages/mdc-top-app-bar/index.ts'),\n      },\n      output: {\n        fsDirAbsolutePath,\n        httpDirAbsolutePath,\n        filenamePattern: this.env_.isProd() ? 'mdc.[name].min.js' : 'mdc.[name].js',\n        moduleName: {\n          amd: '@material/[name]',\n          root: ['mdc', '[name]'],\n        },\n      },\n      plugins,\n    });\n  }\n}\n\n/**\n * @param {string} dashedName A dash-separated package name. E.g., \"mdc-linear-progress\".\n * @return {string} dashedName converted to camelCase. E.g., \"mdcLinearProgress\".\n */\nfunction toCamelCase(dashedName) {\n  return dashedName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n}\n\nmodule.exports = JsBundleFactory;\n"
  },
  {
    "path": "scripts/webpack/plugin-factory.js",
    "content": "/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Factory for Webpack plugins. Allows us to more easily mock and test our config generator code.\n */\n\n'use strict';\n\nconst CopyrightBannerPlugin = require('./copyright-banner-plugin');\nconst CssCleanupPlugin = require('./css-cleanup-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nclass PluginFactory {\n  constructor({globber} = {}) {\n    this.globber_ = globber;\n  }\n\n  createCopyrightBannerPlugin() {\n    return new CopyrightBannerPlugin();\n  }\n\n  createCssCleanupPlugin({cleanupDirRelativePath} = {}) {\n    return new CssCleanupPlugin({\n      cleanupDirRelativePath,\n      globber: this.globber_,\n    });\n  }\n\n  createCssExtractorPlugin(filename) {\n    return new MiniCssExtractPlugin({filename});\n  }\n}\n\nmodule.exports = PluginFactory;\n"
  },
  {
    "path": "testing/dom/events.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * Dispatches an event on a target element, for testing purposes.\n * Necessary for IE11 compatibility, as the `Event` constructor is not\n * supported.\n */\nexport function emitEvent(\n    targetEl: EventTarget, eventName: string,\n    {bubbles, cancelable, detail}: CustomEventInit = {\n      bubbles: false,\n      cancelable: false,\n    }) {\n  let event;\n  if (typeof Event === 'function') {\n    event = new CustomEvent(eventName, {bubbles, cancelable, detail});\n  } else {\n    // IE11 support.\n    event = document.createEvent('CustomEvent');\n    event.initCustomEvent(\n        eventName, Boolean(bubbles), Boolean(cancelable), detail);\n  }\n  targetEl.dispatchEvent(event);\n}\n\n/** Creates mouse event, with IE11 support. */\nexport function createMouseEvent(\n    eventName: string, eventInit: MouseEventInit = {}) {\n  const eventDefaults = {\n    bubbles: false,\n    cancelable: false,\n    screenX: 0,\n    screenY: 0,\n    clientX: 0,\n    clientY: 0,\n    ctrlKey: false,\n    altKey: false,\n    shiftKey: false,\n    metaKey: false,\n    button: 0,\n    relatedTarget: null,\n  };\n\n  let event;\n  const eventOptions = {...eventDefaults, ...eventInit};\n  if (typeof (MouseEvent) === 'function') {\n    event = new MouseEvent(eventName, eventInit);\n  } else {\n    // IE11 support.\n    event = document.createEvent('MouseEvent');\n    event.initMouseEvent(\n        eventName, eventOptions.bubbles, eventOptions.cancelable, window, 0,\n        eventOptions.screenX, eventOptions.screenY, eventOptions.clientX,\n        eventOptions.clientY, eventOptions.ctrlKey, eventOptions.altKey,\n        eventOptions.shiftKey, eventOptions.metaKey, eventOptions.button,\n        eventOptions.relatedTarget);\n  }\n  return event;\n}\n\n/** Creates keyboard event, with IE 11 support. */\nexport function createKeyboardEvent(\n    eventName: string, eventInit: KeyboardEventInit = {}) {\n  const eventDefaults = {\n    bubbles: false,\n    cancelable: false,\n    key: '',\n    code: '',\n    charCode: 0,\n    location: 0,\n    repeat: false,\n  };\n\n  let event;\n  const eventOptions = {...eventDefaults, ...eventInit};\n  if (typeof KeyboardEvent === 'function') {\n    event = new KeyboardEvent(eventName, eventInit);\n  } else {\n    // IE11 support.\n    event = document.createEvent('KeyboardEvent');\n    // #initKeyboardEvent is deprecated but necessary here for IE 11.\n    // tslint:disable:no-any\n    (event as any)\n        .initKeyboardEvent(\n            eventName, eventOptions.bubbles, eventOptions.cancelable, window,\n            eventOptions.key, eventOptions.location,\n            /* modifiersListArg */[], eventOptions.repeat,\n            /* locale */ '');\n  }\n  return event;\n}\n"
  },
  {
    "path": "testing/dom/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * No-op tagged template literal. Used for syntax highlighting.\n */\nexport const html =\n    (strings: TemplateStringsArray, ...keys: unknown[]): string => {\n      let result = '';\n      for (let index = 0; index < strings.length - 1; index++) {\n        result += strings[index] + `${keys[index]}`;\n      }\n      result += strings[strings.length - 1];\n      return result;\n    };\n\n/**\n * @return HTMLElement for given HTML content in string format.\n */\nexport function createFixture<T extends HTMLElement = HTMLElement>(\n    content: string): T {\n  const wrapper = document.createElement('div');\n  // TODO(b/263899951): do not assign innerHTML\n  wrapper.innerHTML = content;\n  const el = wrapper.firstElementChild as T;\n  wrapper.removeChild(el);\n  return el;\n}\n"
  },
  {
    "path": "testing/featuretargeting/index.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport * as fs from 'fs';\n\n/**\n * Tests if generated CSS with no features in feature targeting expected to be\n * empty. Use this from Jasmine node test suite.\n * @param filePath File path of CSS files that you want to test.\n */\nexport const expectStylesWithNoFeaturesToBeEmpty = (filePath: string) => {\n  it('Sass produces no CSS properties when we ask for no features in feature targeting',\n     () => {\n       // RTL annotations are not feature targetted. Remove RTL annotations and\n       // empty RTL selectors from the CSS result.\n       const css = fs.readFileSync(filePath, 'utf8')\n                       .replace(/\\/\\*rtl:(begin|end):ignore\\*\\//g, '')\n                       .replace(/\\[dir=rtl\\].*\\{\\s+\\}/g, '')\n                       .trim();\n       expect(css).toEqual('');\n     });\n};\n"
  },
  {
    "path": "testing/featuretargeting/sass-test-compile.helper.ts",
    "content": "/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * @fileoverview Compiles and outputs all Sass test files ending with '.test.scss' in test/ folder in packages.\n * This helper file is executed before running jasmine node tests.\n */\n\n// tslint:disable-next-line:no-var-requires sass does not have type information, use require() instead.\nconst sass = require('sass');\nimport fs from 'fs';\nimport glob from 'glob';\nimport path from 'path';\n\n// NOTE: This assumes it is run from the top-level directory (which is always the case when using npm run)\nconst projectRoot = process.cwd();\n\nconst tryAccess = (scssPath: string) => {\n  const fullPath = path.join(projectRoot, scssPath);\n  try {\n    fs.accessSync(fullPath);\n    return fullPath;\n  } catch (e) {\n    return undefined;\n  }\n};\n\nconst materialImporter = (url: string) => {\n  if (url.startsWith('@material')) {\n    // Support omission of .scss extension\n    const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;\n    // Convert @material/foo to packages/mdc-foo to load directly from packages folder in repository\n    const scssPath = normalizedUrl.replace('@material/', 'packages/mdc-');\n    // Support omission of leading _ for partials\n    const resolved = tryAccess(scssPath) ||\n      tryAccess(path.join(path.dirname(scssPath), `_${path.basename(scssPath)}`));\n    return {file: resolved || url};\n  }\n  return {file: url};\n}\n\ninterface RenderOptions {\n  outFile: string,\n}\n\n/**\n * Converts Sass to CSS.\n */\nconst render = (filePath: string, options: Partial<RenderOptions> = {}): string => {\n  const result = sass.renderSync({\n    file: filePath,\n    importer: materialImporter,\n    outFile: options.outFile || null,\n  });\n  return result.css.toString('utf8').trim();\n};\n\nconst compileSassTestFiles = () => {\n  const testFiles = glob.sync('packages/**/test/*.test.scss', {\n    ignore: ['node_modules/**', '**/node_modules/**'],\n  });\n\n  for (const testFile of testFiles) {\n    const outFile = testFile.replace('.scss', '.css');\n    const css = render(testFile, {outFile});\n    fs.writeFileSync(outFile, css);\n  }\n};\n\ncompileSassTestFiles();\n"
  },
  {
    "path": "testing/helpers/foundation.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport {MDCFoundationAdapter, MDCFoundationConstructor, MDCFoundationDeprecatedConstructor} from '@material/base/foundation';\n\n/**\n * @return Method names of the given foundation class, including all MDC\n *     superclasses.\n */\nfunction getFoundationMethods<C extends MDCFoundationConstructor>(\n    // tslint:disable-next-line:enforce-name-casing\n    FoundationCtor: C, foundationMethods: string[] = []): string[] {\n  const methods = foundationMethods;\n  for (const methodName of Object.getOwnPropertyNames(\n           FoundationCtor.prototype)) {\n    methods.push(methodName);\n  }\n\n  // tslint:disable-next-line:enforce-name-casing\n  const BaseFoundationCtor = Object.getPrototypeOf(FoundationCtor);\n  if (BaseFoundationCtor === Function.prototype) {\n    return methods;\n  } else {\n    return getFoundationMethods(BaseFoundationCtor, methods);\n  }\n}\n\n/**\n * Creates a mockFoundation object with spy functions for each of the\n * foundation class' methods.\n */\nexport function createMockFoundation<C extends MDCFoundationConstructor>(\n    // tslint:disable-next-line:enforce-name-casing\n    FoundationCtor: C): jasmine.SpyObj<InstanceType<C>> {\n  const mockFoundationMethods = getFoundationMethods(FoundationCtor);\n  const mockFoundation =\n      jasmine.createSpyObj(FoundationCtor.name, mockFoundationMethods);\n  return mockFoundation;\n}\n\n/**\n * Creates a mockAdapter object with spy functions for each of the\n * adapter class' methods.\n */\nexport function createMockAdapter<C extends MDCFoundationDeprecatedConstructor>(\n    // tslint:disable-next-line:enforce-name-casing\n    FoundationCtor: C): jasmine.SpyObj<MDCFoundationAdapter<InstanceType<C>>> {\n  const mockAdapter = {\n    ...FoundationCtor.defaultAdapter as MDCFoundationAdapter<InstanceType<C>>\n  };\n\n  const keys = Object.keys(mockAdapter) as Array<keyof typeof mockAdapter>;\n  for (const key of keys) {\n    const value = mockAdapter[key];\n    if (typeof value === 'function') {\n      // TODO: Remove this autogenerated error suppression.\n      //  @ts-ignore: Argument of type 'keyof\n      //  MDCFoundationAdapter<InstanceType<C>>' is not assignable to parameter\n      //  of type 'MDCFoundationAdapter<InstanceType<C>>[keyof\n      //  MDCFoundationAdapter<InstanceType<C>>] extends Function ? keyof\n      //  MDCFoundationAdapter<...> : never'.\n      spyOn(mockAdapter, key).and.returnValue(value());\n    }\n  }\n\n  return mockAdapter as jasmine.SpyObj<MDCFoundationAdapter<InstanceType<C>>>;\n}\n\n/**\n * Sanity tests to ensure the following:\n * - Default adapters contain functions\n * - All expected adapter functions are accounted for\n * - Invoking any of the default methods does not throw an error.\n * Every foundation test suite includes this verification.\n */\nexport function\nverifyDefaultAdapter<C extends MDCFoundationDeprecatedConstructor>(\n    // tslint:disable-next-line:enforce-name-casing\n    FoundationCtor: C, expectedMethodNames: string[]) {\n  const defaultAdapter = FoundationCtor.defaultAdapter as {\n    [key: string]: any;\n  };\n  const adapterKeys = Object.keys(defaultAdapter);\n  const actualMethodNames =\n      adapterKeys.filter((key) => typeof defaultAdapter[key] === 'function');\n\n  expect(adapterKeys.length)\n      .withContext('Every adapter key must be a function')\n      .toEqual(actualMethodNames.length);\n\n  // Test for equality without requiring that the array be in a specific order.\n  const actualArray = actualMethodNames.slice().sort();\n  const expectedArray = expectedMethodNames.slice().sort();\n  expect(expectedArray)\n      .withContext(getUnequalArrayMessage(actualArray, expectedArray))\n      .toEqual(actualArray);\n\n  // Test default methods.\n  actualMethodNames.forEach((method) => {\n    expect(() => {\n      defaultAdapter[method]();\n    }).not.toThrow();\n  });\n}\n\n/**\n * Returns an object that intercepts calls to an adapter method used to register\n * event handlers, and adds it to that object where the key is the event name\n * and the value is the function being used. This is the preferred way of\n * testing interaction handlers.\n *\n * Note that `handlerCaptureMethodName` _must_ have a signature of `(string,\n * EventListener) => any` in order to be effective.\n */\nexport function captureHandlers(\n    adapter: {[key: string]: any}, handlerCaptureMethodName: string) {\n  const handlers: {[key: string]: any} = {};\n  adapter[handlerCaptureMethodName]\n      .withArgs(jasmine.any(String), jasmine.any(Function))\n      .and.callFake((type: string, handler: Function) => {\n        handlers[type] = (eventInfo: {[key: string]: any} = {}) =>\n            handler({type, ...eventInfo});\n      });\n  return handlers;\n}\n\nfunction getUnequalArrayMessage(\n    actualArray: string[], expectedArray: string[]): string {\n  const format = (values: string[], singularName: string): string => {\n    const count = values.length;\n    if (count === 0) {\n      return '';\n    }\n    const plural = count === 1 ? '' : 's';\n    const str = values.join(', ');\n    return `${count} ${singularName}${plural}: ${str}`;\n  };\n\n  const getAddedStr =\n      (actualSet: Set<string>, expectedSet: Set<string>): string => {\n        const addedArray: string[] = [];\n        actualSet.forEach((val) => {\n          if (!expectedSet.has(val)) {\n            addedArray.push(val);\n          }\n        });\n        return format(addedArray, 'unexpected method');\n      };\n\n  const getRemovedStr =\n      (actualSet: Set<string>, expectedSet: Set<string>): string => {\n        const removedArray: string[] = [];\n        expectedSet.forEach((val) => {\n          if (!actualSet.has(val)) {\n            removedArray.push(val);\n          }\n        });\n        return format(removedArray, 'missing method');\n      };\n\n  const toSet = (array: string[]): Set<string> => {\n    const set: Set<string> = new Set();\n    array.forEach((value) => {\n      set.add(value);\n    });\n    return set;\n  };\n\n  const actualSet = toSet(actualArray);\n  const expectedSet = toSet(expectedArray);\n  const addedStr = getAddedStr(actualSet, expectedSet);\n  const removedStr = getRemovedStr(actualSet, expectedSet);\n  const messages = [addedStr, removedStr].filter((val) => val.length > 0);\n\n  if (messages.length === 0) {\n    return '';\n  }\n\n  return `Found ${messages.join('; ')}`;\n}\n\n/**\n * Checks if the spy was called with specific arguments a certain number of\n * times. This is intended for tests that are particularly concerned with the\n * number of times one specific invocation occurred (i.e. ripple debouncing\n * tests), and for which combining Jasmine's `toHaveBeenCalledWith` followed by\n * `toHaveBeenCalledTimes` is insufficient because `toHaveBeenCalledTimes`\n * potentially counts other invocations with arguments we don't care about.\n *\n * Note: This performs SHALLOW equality comparisons only and doesn't support\n * matchers (i.e. jasmine.any()).\n */\nexport function checkNumTimesSpyCalledWithArgs(\n    spy: jasmine.Spy, args: any[], count: number) {\n  expect(spy.calls.allArgs()\n             .filter((x: any[]) => arraysShallowEqual(x, args))\n             .length)\n      .toEqual(count);\n}\n\nfunction arraysShallowEqual(expected: any[], actual: any[]) {\n  return expected.length === actual.length &&\n      expected.every((el, i) => el === actual[i]);\n}\n"
  },
  {
    "path": "testing/helpers/jasmine.ts",
    "content": "/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'jasmine';\n\n// SpyAnd for group of multiple spies.\nexport interface SpyGroupAnd<T> {\n  callThrough(): jasmine.SpyObj<T>;\n  stub(): jasmine.SpyObj<T>;\n}\n\n// SpyObj with \"and\" for chaining a group of spies.\nexport type SpyGroup<T> = jasmine.SpyObj<T>&{\n  and: SpyGroupAnd<T>;\n}\n\n// Checks if a value is a jasmine spy.\nexport function isSpy(value: unknown): value is jasmine.Spy {\n  return typeof value === 'function' && 'and' in value;\n}\n\n// More versatile spyOnAllFunctions that allows chaining callThrough() and\n// stub() for all function spies.\nexport function spyOnAllFunctions<T extends object>(obj: T) {\n  const spyObj = window.spyOnAllFunctions(obj) as SpyGroup<T>;\n  spyObj.and = {\n    callThrough() {\n      for (const key of Object.keys(spyObj)) {\n        const value = spyObj[key as keyof typeof spyObj];\n        if (isSpy(value)) {\n          value.and.callThrough();\n        }\n      }\n      return spyObj;\n    },\n    stub() {\n      for (const key of Object.keys(spyObj)) {\n        const value = spyObj[key as keyof typeof spyObj];\n        if (isSpy(value)) {\n          value.and.stub();\n        }\n      }\n      return spyObj;\n    }\n  };\n  return spyObj;\n}\n\n// Spy on all functions, including those from the prototype chain. Use this\n// when spying on a class instance to install spies on its methods and\n// superclass methods.\n//\n// Use spyOnAllFunctions() when spying on a plain object to only install spies\n// on function properties and not prototype methods (such as\n// Object.prototype.toString).\nexport function spyOnAllPrototypeFunctions<T extends object>(obj: T) {\n  const functionKeys = new Set<keyof T>();\n  let target: object|null = obj;\n  while (target) {\n    const keys =\n        Object.getOwnPropertyNames(target) as Array<keyof typeof target>;\n    for (const key of keys) {\n      if (target.hasOwnProperty(key) && typeof target[key] === 'function') {\n        functionKeys.add(key);\n      }\n    }\n    target = Object.getPrototypeOf(target);\n  }\n  for (const key of functionKeys) {\n    // TODO: Wait until b/208710526 is fixed, then remove this autogenerated\n    // error suppression.\n    //  @ts-ignore(go/unfork-jasmine-typings): Argument of type 'keyof T' is not\n    //  assignable to parameter of type 'T[keyof T] extends Function ? keyof T :\n    //  never'.\n    spyOn(obj, key);\n  }\n\n  const spyObj = obj as SpyGroup<T>;\n  spyObj.and = {\n    callThrough() {\n      for (const key of functionKeys) {\n        (spyObj[key] as jasmine.Spy).and.callThrough();\n      }\n      return spyObj;\n    },\n    stub() {\n      for (const key of functionKeys) {\n        (spyObj[key] as jasmine.Spy).and.stub();\n      }\n      return spyObj;\n    },\n  };\n\n  return spyObj;\n}\n"
  },
  {
    "path": "testing/helpers/setup.ts",
    "content": "/**\n * @license\n * Copyright 2019 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport 'core-js/es'; // COPYBARA_COMMENT_THIS_LINE\nimport {MDCFoundation, MDCFoundationAdapter as FoundationAdapter, MDCFoundationConstructor as FoundationCtor, MDCFoundationDeprecatedConstructor as FoundationDeprecatedCtor} from '@material/base/foundation';\n\nimport {createMockAdapter} from './foundation';\nimport {spyOnAllFunctions} from './jasmine';\n\n/** FoundationTest */\nexport interface FoundationTest<F extends MDCFoundation> {\n  foundation: F;\n  mockAdapter: jasmine.SpyObj<FoundationAdapter<F>>;\n}\n\n/** Alias type imports for shorter names due to clang-format's formatting */\nexport function setUpFoundationTest<C extends FoundationCtor>(\n    foundationClass: C, defaultAdapter: FoundationAdapter<InstanceType<C>>):\n    FoundationTest<InstanceType<C>>;\nexport function setUpFoundationTest<C extends FoundationDeprecatedCtor>(\n    foundationClass: C,\n    ): FoundationTest<InstanceType<C>>;\nexport function setUpFoundationTest(\n    foundationClass: FoundationCtor|FoundationDeprecatedCtor,\n    defaultAdapter?: FoundationAdapter<InstanceType<typeof foundationClass>>) {\n  let mockAdapter: jasmine.SpyObj<typeof defaultAdapter>;\n  if (defaultAdapter) {\n    mockAdapter = spyOnAllFunctions(defaultAdapter).and.callThrough();\n  } else {\n    mockAdapter =\n        createMockAdapter(foundationClass as FoundationDeprecatedCtor);\n  }\n  const foundation = new foundationClass(mockAdapter);\n  return {foundation, mockAdapter};\n}\n\n/**\n * Sets up common functionality across all MDC foundation/component unit tests:\n * - Installation of the Jasmine clock.\n * - Replaces RAF with setTimeout so functionality in RAF's can be tested with\n *   the Jasmine clock.\n */\nexport function setUpMdcTestEnvironment() {\n  beforeAll(() => {\n    // Replace RAF with setTimeout, since setTimeout is overridden to be\n    // synchronous in Jasmine clock installation.\n    window.requestAnimationFrame = (fn: Function) => setTimeout(fn, 1);\n    window.cancelAnimationFrame = (id: number) => {\n      clearTimeout(id);\n    };\n  });\n\n  beforeEach(() => {\n    jasmine.clock().install();\n  });\n\n  afterEach(() => {\n    jasmine.clock().uninstall();\n  });\n}\n"
  },
  {
    "path": "testing/ts-node.register.js",
    "content": "const path = require('path');\nconst tsconfigPath = path.join(__dirname, '../tsconfig-node.json');\n\nrequire('ts-node').register({\n  project: tsconfigPath,\n});\n"
  },
  {
    "path": "tsconfig-base.json",
    "content": "{\n  \"compilerOptions\": {\n    \"declaration\": true,\n    \"downlevelIteration\": true,\n    \"emitDecoratorMetadata\": true,\n    \"esModuleInterop\": true,\n    \"experimentalDecorators\": true,\n    \"lib\": [\"es2017\", \"dom\"],\n    \"moduleResolution\": \"node\",\n    \"newLine\": \"lf\",\n    \"noEmitOnError\": false,\n    \"noErrorTruncation\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noStrictGenericChecks\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"preserveConstEnums\": true,\n    \"pretty\": true,\n    \"skipLibCheck\": true,\n    \"sourceMap\": true,\n    \"strict\": true,\n    \"stripInternal\": true,\n    \"target\": \"es5\",\n    \"types\": [\"resize-observer-browser\"]\n  }\n}\n"
  },
  {
    "path": "tsconfig-node.json",
    "content": "{\n  \"include\": [\n    \"packages/**/test/*scss.test.ts\",\n    \"testing/featuretargeting/**\",\n  ],\n  \"extends\": \"./tsconfig-base.json\",\n  \"types\": [\"node\", \"resize-observer-browser\"]\n}\n"
  },
  {
    "path": "tsconfig-testing.json",
    "content": "{\n  \"extends\": \"./tsconfig-base.json\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@material/base/*\": [\"packages/mdc-base/*\"],\n      \"jasmine\": [\"node_modules/@types/jasmine/index.d.ts\"]\n    }\n  }\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"exclude\": [\n    \"packages/**/test/*.ts\",\n    \"scripts/**/*.ts\",\n    \"testing/**/*.ts\"\n  ],\n  \"extends\": \"./tsconfig-base.json\"\n}\n"
  },
  {
    "path": "tslint.json",
    "content": "{\n  \"extends\": [\n    \"tslint:recommended\",\n    \"gts/tslint.json\"\n  ],\n  \"linterOptions\": {\n    \"exclude\": [\n      \"node_modules/**/*.{j,t}s\",\n      \"**/node_modules/**/*.{j,t}s\"\n    ]\n  }\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n'use strict';\n\nconst CssBundleFactory = require('./scripts/webpack/css-bundle-factory');\nconst Environment = require('./scripts/build/environment');\nconst Globber = require('./scripts/webpack/globber');\nconst JsBundleFactory = require('./scripts/webpack/js-bundle-factory');\nconst PathResolver = require('./scripts/build/path-resolver');\nconst PluginFactory = require('./scripts/webpack/plugin-factory');\n\nconst env = new Environment();\nenv.setBabelEnv();\n\nconst pathResolver = new PathResolver();\nconst globber = new Globber({pathResolver});\nconst pluginFactory = new PluginFactory({globber});\nconst cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory});\nconst jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory});\n\nconst OUTPUT = {\n  fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'),\n};\n\nmodule.exports = [\n  jsBundleFactory.createMainJsCombined({output: OUTPUT}),\n  jsBundleFactory.createMainJsALaCarte({output: OUTPUT}),\n  cssBundleFactory.createMainCssCombined({output: OUTPUT}),\n  cssBundleFactory.createMainCssALaCarte({output: OUTPUT}),\n];\n"
  }
]